OptionsUI: add 2 global options + simplify
* [x] show badge with active styles count * [x] styles on top in the popup * Simplify since we use a persistent background page so it's always there for us
This commit is contained in:
tophf
parent
4dd8066ca4
commit
7d9a6b5a3f
|
|
@ -488,7 +488,7 @@
|
|||
"message": "Automatically check for and install all available userstyle updates (in hrs)"
|
||||
},
|
||||
"optionsUpdateIntervalNote": {
|
||||
"message": "To disable the automatic userstyle update checks, set interval to zero"
|
||||
"message": "To disable the automatic userstyle update checks, set interval to 0"
|
||||
},
|
||||
"optionsCustomize": {
|
||||
"message": "UI Customizations"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@ body {
|
|||
}
|
||||
|
||||
body > * {
|
||||
padding: 1em 1rem 1em 44px;
|
||||
padding: .5rem 1.5rem 1em 48px;
|
||||
}
|
||||
|
||||
body > *:first-child {
|
||||
padding-top: .75rem;
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -23,21 +27,24 @@ td:last-child {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
button,
|
||||
td:last-child,
|
||||
input[type=number],
|
||||
input[type="color"],
|
||||
.onoffswitch,
|
||||
#update-counter {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
|
||||
button {
|
||||
text-align: center;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
h1:not(:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
|
@ -66,7 +73,7 @@ input[type=number] {
|
|||
|
||||
#notes {
|
||||
background-color: #f4f4f4;
|
||||
margin-top: .5em;
|
||||
margin-top: .75rem;
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
}
|
||||
|
|
@ -81,7 +88,6 @@ input[type=number] {
|
|||
}
|
||||
|
||||
input[type="color"] {
|
||||
width: 80px;
|
||||
box-sizing: border-box;
|
||||
height: 2em;
|
||||
}
|
||||
|
|
@ -94,9 +100,73 @@ input[type="color"] {
|
|||
color: black;
|
||||
}
|
||||
|
||||
#update-counter {
|
||||
margin-top: .5ex;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes fadeinout {
|
||||
0% { opacity: 0 }
|
||||
10% { opacity: 1 }
|
||||
25% { opacity: 1 }
|
||||
100% { opacity: 0 }
|
||||
}
|
||||
|
||||
/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
|
||||
|
||||
.onoffswitch {
|
||||
position: relative;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
.onoffswitch-checkbox {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.onoffswitch-label {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
height: 12px;
|
||||
padding: 0;
|
||||
line-height: 12px;
|
||||
border: 0 solid #E3E3E3;
|
||||
border-radius: 12px;
|
||||
background-color: #E0E0E0;
|
||||
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.onoffswitch-label:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 18px;
|
||||
margin: -3px;
|
||||
background: #efefef;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 56px;
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label {
|
||||
background-color: #CAEBE3;
|
||||
}
|
||||
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
|
||||
border-color: #CAEBE3;
|
||||
}
|
||||
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
|
||||
right: 0;
|
||||
background-color: #04BA9F;
|
||||
box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="stylesheet" href="index.css">
|
||||
<script src="/localization.js"></script>
|
||||
<script src="/apply.js"></script>
|
||||
<script src="/storage.js"></script>
|
||||
<script src="/messaging.js"></script>
|
||||
<script src="/dom.js"></script>
|
||||
</head>
|
||||
|
|
@ -13,6 +14,24 @@
|
|||
<div id="ui">
|
||||
<h1 i18n-text="optionsCustomize"></h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td i18n-text="prefShowBadge"></td>
|
||||
<td>
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" class="onoffswitch-checkbox" id="show-badge">
|
||||
<label class="onoffswitch-label" for="show-badge"></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n-text="popupStylesFirst"></td>
|
||||
<td>
|
||||
<div class="onoffswitch">
|
||||
<input type="checkbox" class="onoffswitch-checkbox" id="popup.stylesFirst">
|
||||
<label class="onoffswitch-label" for="popup.stylesFirst"></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n-text="optionsBadgeNormal"></td>
|
||||
<td><input type="color" id="badgeNormal"></td>
|
||||
|
|
@ -46,8 +65,8 @@
|
|||
<tr>
|
||||
<td i18n-text="optionsCheckUpdate"></td>
|
||||
<td>
|
||||
<span id="update-counter"></span>
|
||||
<button type="button" data-cmd="check-updates" i18n-text="optionsCheck"></button>
|
||||
<div id="update-counter"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,30 @@
|
|||
/* global update */
|
||||
'use strict';
|
||||
|
||||
|
||||
function restore() {
|
||||
chrome.runtime.getBackgroundPage(bg => {
|
||||
$('#badgeDisabled').value = bg.prefs.get('badgeDisabled');
|
||||
$('#badgeNormal').value = bg.prefs.get('badgeNormal');
|
||||
$('#popupWidth').value = localStorage.getItem('popupWidth') || '246';
|
||||
$('#updateInterval').value = bg.prefs.get('updateInterval');
|
||||
enforceValueRange('popupWidth');
|
||||
});
|
||||
setupLivePrefs([
|
||||
'show-badge',
|
||||
'popup.stylesFirst'
|
||||
]);
|
||||
//$('#show-badge').value = bg.prefs.get('show-badge');
|
||||
$('#badgeDisabled').value = prefs.get('badgeDisabled');
|
||||
$('#badgeNormal').value = prefs.get('badgeNormal');
|
||||
$('#popupWidth').value = localStorage.getItem('popupWidth') || '246';
|
||||
$('#updateInterval').value = prefs.get('updateInterval');
|
||||
enforceValueRange('popupWidth');
|
||||
}
|
||||
|
||||
|
||||
function save() {
|
||||
chrome.runtime.getBackgroundPage(bg => {
|
||||
bg.prefs.set('badgeDisabled', $('#badgeDisabled').value);
|
||||
bg.prefs.set('badgeNormal', $('#badgeNormal').value);
|
||||
localStorage.setItem('popupWidth', enforceValueRange('popupWidth'));
|
||||
bg.prefs.set(
|
||||
'updateInterval',
|
||||
Math.max(0, Number($('#updateInterval').value))
|
||||
);
|
||||
animateElement($('#save-status'), {className: 'fadeinout'});
|
||||
});
|
||||
prefs.set('badgeDisabled', $('#badgeDisabled').value);
|
||||
prefs.set('badgeNormal', $('#badgeNormal').value);
|
||||
localStorage.setItem('popupWidth', enforceValueRange('popupWidth'));
|
||||
prefs.set(
|
||||
'updateInterval',
|
||||
Math.max(0, Number($('#updateInterval').value))
|
||||
);
|
||||
animateElement($('#save-status'), {className: 'fadeinout'});
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -40,7 +42,7 @@ function enforceValueRange(id) {
|
|||
}
|
||||
|
||||
|
||||
onDOMready().then(restore);
|
||||
restore();
|
||||
$('#save').onclick = save;
|
||||
|
||||
// overwrite the default URL if browser is Opera
|
||||
|
|
@ -52,8 +54,8 @@ document.onclick = e => {
|
|||
let total = 0;
|
||||
let updated = 0;
|
||||
|
||||
function update() {
|
||||
$('#update-counter').textContent = `${updated}/${total}`;
|
||||
function showProgress() {
|
||||
$('#update-counter').textContent = `${updated} / ${total}`;
|
||||
}
|
||||
|
||||
function done(target) {
|
||||
|
|
@ -64,25 +66,23 @@ document.onclick = e => {
|
|||
}
|
||||
|
||||
function check() {
|
||||
chrome.runtime.getBackgroundPage(bg => {
|
||||
bg.update.perform((cmd, value) => {
|
||||
switch (cmd) {
|
||||
case 'count':
|
||||
total = value;
|
||||
if (!total) {
|
||||
done(e.target);
|
||||
}
|
||||
break;
|
||||
case 'single-updated':
|
||||
case 'single-skipped':
|
||||
updated++;
|
||||
if (total && updated === total) {
|
||||
done(e.target);
|
||||
}
|
||||
break;
|
||||
}
|
||||
update();
|
||||
});
|
||||
chrome.extension.getBackgroundPage().update.perform((cmd, value) => {
|
||||
switch (cmd) {
|
||||
case 'count':
|
||||
total = value;
|
||||
if (!total) {
|
||||
done(e.target);
|
||||
}
|
||||
break;
|
||||
case 'single-updated':
|
||||
case 'single-skipped':
|
||||
updated++;
|
||||
if (total && updated === total) {
|
||||
done(e.target);
|
||||
}
|
||||
break;
|
||||
}
|
||||
showProgress();
|
||||
});
|
||||
// notify the automatic updater to reset the next automatic update accordingly
|
||||
chrome.runtime.sendMessage({
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user