Options page improvements

This commit is contained in:
Alex Yatskov 2016-04-08 13:33:46 -07:00
parent 26af561c12
commit ae3d8d27d9
2 changed files with 31 additions and 5 deletions

View File

@ -33,14 +33,21 @@ function formToOptions() {
$('#saveOptions').click(() => { $('#saveOptions').click(() => {
const opts = formToOptions(); const opts = formToOptions();
const yomichan = chrome.extension.getBackgroundPage().yomichan; saveOptions(opts, () => {
saveOptions(opts, () => yomichan.updateOptions(opts)); $('.notifyAlerts').hide();
$('#notifySave').slideDown();
chrome.extension.getBackgroundPage().yomichan.updateOptions(opts);
});
}); });
$('#resetOptions').click(() => { $('#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))); $(document).ready(() => loadOptions((opts) => optionsToForm(opts)));

View File

@ -5,6 +5,11 @@
<title>Here go options</title> <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.min.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.6-dist/css/bootstrap-theme.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> </head>
<body> <body>
<div class="container"> <div class="container">
@ -34,6 +39,20 @@
</div> </div>
</div> </div>
<div class="alert alert-success notifyAlerts" id="notifySave">
Preferences saved
<button type="button" class="close" data-hide="notifySave">
<span aria-hidden="true">&times;</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">&times;</span>
</button>
</div>
<div class="text-right"> <div class="text-right">
<button type="button" id="saveOptions" class="btn btn-default">Save</button> <button type="button" id="saveOptions" class="btn btn-default">Save</button>
<button type="button" id="resetOptions" class="btn btn-danger">Reset</button> <button type="button" id="resetOptions" class="btn btn-danger">Reset</button>