optionsUI: group options and shorten labels
This commit is contained in:
tophf
parent
bec60f54ab
commit
bdcac21d7e
|
|
@ -387,11 +387,11 @@
|
|||
"description": "Subheading for options section on manage page."
|
||||
},
|
||||
"popupStylesFirst": {
|
||||
"message": "List styles before commands in the toolbar button menu",
|
||||
"description": "Label for the checkbox controlling section order in the toolbar button menu."
|
||||
"message": "Styles before commands",
|
||||
"description": "Label for the checkbox controlling section order in the popup."
|
||||
},
|
||||
"prefShowBadge": {
|
||||
"message": "Show number of styles active for the current site on the toolbar button",
|
||||
"message": "Number of styles active for the current site",
|
||||
"description": "Label for the checkbox controlling toolbar badge text."
|
||||
},
|
||||
"replace": {
|
||||
|
|
@ -606,13 +606,13 @@
|
|||
"message": "Import styles"
|
||||
},
|
||||
"optionsBadgeNormal": {
|
||||
"message": "Badge background color"
|
||||
"message": "Background color"
|
||||
},
|
||||
"optionsBadgeDisabled": {
|
||||
"message": "Badge background color (when disabled)"
|
||||
"message": "Background color when disabled"
|
||||
},
|
||||
"optionsPopupWidth": {
|
||||
"message": "Popup width (in pixels)"
|
||||
"message": "Width (in pixels)"
|
||||
},
|
||||
"optionsUpdateInterval": {
|
||||
"message": "Automatically check for and install all available userstyle updates (in hrs)"
|
||||
|
|
@ -620,13 +620,22 @@
|
|||
"optionsUpdateIntervalNote": {
|
||||
"message": "To disable the automatic userstyle update checks, set interval to 0"
|
||||
},
|
||||
"optionsCustomize": {
|
||||
"message": "UI Customizations"
|
||||
"optionsCustomizeBadge": {
|
||||
"message": "Badge on the toolbar icon"
|
||||
},
|
||||
"optionsCustomizePopup": {
|
||||
"message": "Popup"
|
||||
},
|
||||
"optionsCustomizeUpdate": {
|
||||
"message": "Updates"
|
||||
},
|
||||
"optionsActions": {
|
||||
"message": "Actions"
|
||||
},
|
||||
"optionsReset": {
|
||||
"message": "Reset the options to default values"
|
||||
},
|
||||
"optionsResetButton": {
|
||||
"message": "Reset"
|
||||
},
|
||||
"optionsOpenManager": {
|
||||
|
|
|
|||
|
|
@ -7,41 +7,63 @@ body {
|
|||
margin: 0;
|
||||
font-family: "Helvetica Neue", Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
body > * {
|
||||
padding: .5rem 1.5rem 1em 48px;
|
||||
}
|
||||
|
||||
body > *:first-child {
|
||||
padding-top: .75rem;
|
||||
width: calc(16px + 100px + 8px + 240px + 8px + 80px + 4px + 16px);
|
||||
}
|
||||
|
||||
.firefox .chromium-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
.block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 1em 0;
|
||||
border-bottom: 1px dotted #ccc;
|
||||
padding: 0 0 1em 16px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 2px 0;
|
||||
.block:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
td:last-child {
|
||||
text-align: right;
|
||||
h1 {
|
||||
width: 100px;
|
||||
margin: 0;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
margin: .25ex 0;
|
||||
}
|
||||
|
||||
label > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label > :first-child {
|
||||
width: 240px;
|
||||
white-space: normal;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
label:not([disabled]) > :first-child {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
label:not([disabled]):hover > :first-child {
|
||||
text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
button,
|
||||
td:last-child,
|
||||
input[type=number],
|
||||
input[type="color"],
|
||||
.onoffswitch,
|
||||
#update-counter {
|
||||
.onoffswitch {
|
||||
width: 80px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -63,18 +85,9 @@ input[type=number]:invalid {
|
|||
color: darkred;
|
||||
}
|
||||
|
||||
#actions {
|
||||
margin-top: -2em;
|
||||
}
|
||||
|
||||
#reset {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#notes {
|
||||
background-color: #f4f4f4;
|
||||
margin-top: .75rem;
|
||||
padding: 1.5ex 16px 1ex calc(16px + 2ex);
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
}
|
||||
|
|
@ -101,12 +114,6 @@ input[type="color"] {
|
|||
color: black;
|
||||
}
|
||||
|
||||
#update-counter {
|
||||
margin-top: .5ex;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes fadeinout {
|
||||
0% { opacity: 0 }
|
||||
10% { opacity: 1 }
|
||||
|
|
@ -118,6 +125,7 @@ input[type="color"] {
|
|||
|
||||
.onoffswitch {
|
||||
position: relative;
|
||||
margin: 1ex 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
|
|
|||
|
|
@ -11,64 +11,69 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="ui">
|
||||
<h1 i18n-text="optionsCustomize"></h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td i18n-text="prefShowBadge"></td>
|
||||
<td>
|
||||
<div class="onoffswitch">
|
||||
<div id="options">
|
||||
<div class="block">
|
||||
<h1 i18n-text="optionsCustomizeBadge"></h1>
|
||||
<div class="items">
|
||||
<label>
|
||||
<span i18n-text="optionsBadgeNormal"></span>
|
||||
<input type="color" id="badgeNormal">
|
||||
</label>
|
||||
<label>
|
||||
<span i18n-text="optionsBadgeDisabled"></span>
|
||||
<input type="color" id="badgeDisabled">
|
||||
</label>
|
||||
<label>
|
||||
<span i18n-text="prefShowBadge"></span>
|
||||
<span 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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n-text="optionsBadgeDisabled"></td>
|
||||
<td><input type="color" id="badgeDisabled"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n-text="optionsPopupWidth"></td>
|
||||
<td><input type="number" id="popupWidth" min="200" max="800"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n-text="optionsUpdateInterval"><sup>1</sup></td>
|
||||
<td><input type="number" min="0" id="updateInterval"></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="reset">
|
||||
<button data-cmd="reset" i18n-text="optionsReset"></button>
|
||||
<span class="onoffswitch-label"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="actions">
|
||||
<h1 i18n-text="optionsActions"></h1>
|
||||
<table>
|
||||
<tr>
|
||||
<td i18n-text="optionsOpenManager"><sup class="chromium-only">2</sup></td>
|
||||
<td><button type="button" data-cmd="open-manage" i18n-text="optionsOpen"></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td i18n-text="optionsCheckUpdate"></td>
|
||||
<td>
|
||||
<div class="block">
|
||||
<h1 i18n-text="optionsCustomizePopup"></h1>
|
||||
<div class="items">
|
||||
<label>
|
||||
<span i18n-text="optionsPopupWidth"></span>
|
||||
<input type="number" id="popupWidth" min="200" max="800">
|
||||
</label>
|
||||
<label>
|
||||
<span i18n-text="popupStylesFirst"></span>
|
||||
<span class="onoffswitch">
|
||||
<input type="checkbox" class="onoffswitch-checkbox" id="popup.stylesFirst">
|
||||
<span class="onoffswitch-label" for="popup.stylesFirst"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h1 i18n-text="optionsCustomizeUpdate"></h1>
|
||||
<div class="items">
|
||||
<label>
|
||||
<span i18n-text="optionsUpdateInterval"><sup>1</sup></span>
|
||||
<input type="number" min="0" id="updateInterval">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block">
|
||||
<h1 i18n-text="optionsActions"></h1>
|
||||
<div class="items">
|
||||
<label>
|
||||
<span i18n-text="optionsReset"></span>
|
||||
<button data-cmd="reset" i18n-text="optionsResetButton"></button>
|
||||
</label>
|
||||
<label>
|
||||
<span i18n-text="optionsOpenManager"><sup class="chromium-only">2</sup></span>
|
||||
<button type="button" data-cmd="open-manage" i18n-text="optionsOpen"></button>
|
||||
</label>
|
||||
<label>
|
||||
<span i18n-text="optionsCheckUpdate"></span>
|
||||
<button type="button" data-cmd="check-updates" i18n-text="optionsCheck"></button>
|
||||
<div id="update-counter"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="notes">
|
||||
|
|
|
|||
|
|
@ -19,31 +19,33 @@ document.onclick = e => {
|
|||
let total = 0;
|
||||
let updated = 0;
|
||||
|
||||
function showProgress() {
|
||||
$('#update-counter').textContent = `${updated} / ${total}`;
|
||||
}
|
||||
|
||||
function done(target) {
|
||||
target.disabled = false;
|
||||
window.setTimeout(() => {
|
||||
$('#update-counter').textContent = '';
|
||||
}, 750);
|
||||
}
|
||||
|
||||
function check() {
|
||||
const originalLabel = e.target.textContent;
|
||||
e.target.disabled = true;
|
||||
e.target.parentElement.setAttribute('disabled', '');
|
||||
function showProgress() {
|
||||
e.target.textContent = `${updated} / ${total}`;
|
||||
}
|
||||
function done() {
|
||||
setTimeout(() => {
|
||||
e.target.disabled = false;
|
||||
e.target.textContent = originalLabel;
|
||||
e.target.parentElement.removeAttribute('disabled');
|
||||
}, 750);
|
||||
}
|
||||
BG.update.perform((cmd, value) => {
|
||||
switch (cmd) {
|
||||
case 'count':
|
||||
total = value;
|
||||
if (!total) {
|
||||
done(e.target);
|
||||
done();
|
||||
}
|
||||
break;
|
||||
case 'single-updated':
|
||||
case 'single-skipped':
|
||||
updated++;
|
||||
if (total && updated === total) {
|
||||
done(e.target);
|
||||
done();
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
|
@ -61,7 +63,6 @@ document.onclick = e => {
|
|||
break;
|
||||
|
||||
case 'check-updates':
|
||||
e.target.disabled = true;
|
||||
check();
|
||||
break;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user