diff options
| author | Alex Yatskov <alex@foosoft.net> | 2016-04-08 13:33:46 -0700 |
|---|---|---|
| committer | Alex Yatskov <alex@foosoft.net> | 2016-04-08 13:33:46 -0700 |
| commit | ae3d8d27d90f3f206106d356d2a58a46eea62114 (patch) | |
| tree | 05d45975e92a34f86fd3be215240b73c2df2a691 | |
| parent | 26af561c12e746cfb2f3753114134e1d0362e4ee (diff) | |
Options page improvements
| -rw-r--r-- | ext/bg/js/options-form.js | 17 | ||||
| -rw-r--r-- | ext/bg/options.html | 19 |
2 files changed, 31 insertions, 5 deletions
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js index 7504f74e..bc21793e 100644 --- a/ext/bg/js/options-form.js +++ b/ext/bg/js/options-form.js @@ -33,14 +33,21 @@ function formToOptions() { $('#saveOptions').click(() => { const opts = formToOptions(); - const yomichan = chrome.extension.getBackgroundPage().yomichan; - saveOptions(opts, () => yomichan.updateOptions(opts)); + saveOptions(opts, () => { + $('.notifyAlerts').hide(); + $('#notifySave').slideDown(); + chrome.extension.getBackgroundPage().yomichan.updateOptions(opts); + }); }); $('#resetOptions').click(() => { - if (confirm('Reset options to default values?')) { - optionsToForm(sanitizeOptions({})); - } + optionsToForm(sanitizeOptions({})); + $('.notifyAlerts').hide(); + $('#notifyReset').slideDown(); +}); + +$('[data-hide]').on('click', function() { + $('#' + $(this).attr('data-hide')).hide(); }); $(document).ready(() => loadOptions((opts) => optionsToForm(opts))); diff --git a/ext/bg/options.html b/ext/bg/options.html index 25831b38..a3588642 100644 --- a/ext/bg/options.html +++ b/ext/bg/options.html @@ -5,6 +5,11 @@ <title>Here go options</title> <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"> + <style type="text/css"> + .notifyAlerts { + display: none; + } + </style> </head> <body> <div class="container"> @@ -34,6 +39,20 @@ </div> </div> + <div class="alert alert-success notifyAlerts" id="notifySave"> + Preferences saved + <button type="button" class="close" data-hide="notifySave"> + <span aria-hidden="true">×</span> + </button> + </div> + + <div class="alert alert-warning notifyAlerts" id="notifyReset"> + Preferences reset to defaults + <button type="button" class="close" data-hide="notifyReset"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="text-right"> <button type="button" id="saveOptions" class="btn btn-default">Save</button> <button type="button" id="resetOptions" class="btn btn-danger">Reset</button> |