open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optionsUI: group options and shorten labels

Browse Source
This commit is contained in:
tophf 2017-04-14 10:50:52 +03:00
parent bec60f54ab
commit bdcac21d7e
4 changed files with 136 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
_locales/en/messages.json
View File

@ -387,11 +387,11 @@
"description": "Subheading for options section on manage page." "description": "Subheading for options section on manage page."
}, },
"popupStylesFirst": { "popupStylesFirst": {
"message": "List styles before commands in the toolbar button menu", "message": "Styles before commands",
"description": "Label for the checkbox controlling section order in the toolbar button menu." "description": "Label for the checkbox controlling section order in the popup."
}, },
"prefShowBadge": { "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." "description": "Label for the checkbox controlling toolbar badge text."
}, },
"replace": { "replace": {
@ -606,13 +606,13 @@
"message": "Import styles" "message": "Import styles"
}, },
"optionsBadgeNormal": { "optionsBadgeNormal": {
"message": "Badge background color" "message": "Background color"
}, },
"optionsBadgeDisabled": { "optionsBadgeDisabled": {
"message": "Badge background color (when disabled)" "message": "Background color when disabled"
}, },
"optionsPopupWidth": { "optionsPopupWidth": {
"message": "Popup width (in pixels)" "message": "Width (in pixels)"
}, },
"optionsUpdateInterval": { "optionsUpdateInterval": {
"message": "Automatically check for and install all available userstyle updates (in hrs)" "message": "Automatically check for and install all available userstyle updates (in hrs)"
@ -620,13 +620,22 @@
"optionsUpdateIntervalNote": { "optionsUpdateIntervalNote": {
"message": "To disable the automatic userstyle update checks, set interval to 0" "message": "To disable the automatic userstyle update checks, set interval to 0"
}, },
"optionsCustomize": { "optionsCustomizeBadge": {
"message": "UI Customizations" "message": "Badge on the toolbar icon"
},
"optionsCustomizePopup": {
"message": "Popup"
},
"optionsCustomizeUpdate": {
"message": "Updates"
}, },
"optionsActions": { "optionsActions": {
"message": "Actions" "message": "Actions"
}, },
"optionsReset": { "optionsReset": {
"message": "Reset the options to default values"
},
"optionsResetButton": {
"message": "Reset" "message": "Reset"
}, },
"optionsOpenManager": { "optionsOpenManager": {

80
options/index.css
View File

@ -7,41 +7,63 @@ body {
margin: 0; margin: 0;
font-family: "Helvetica Neue", Helvetica, sans-serif; font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
display: flex; width: calc(16px + 100px + 8px + 240px + 8px + 80px + 4px + 16px);
flex-direction: column;
}
body > * {
padding: .5rem 1.5rem 1em 48px;
}
body > *:first-child {
padding-top: .75rem;
} }
.firefox .chromium-only { .firefox .chromium-only {
display: none; display: none;
} }
table { .block {
width: 100%; display: flex;
border-collapse: collapse; align-items: center;
margin: 1em 0;
border-bottom: 1px dotted #ccc;
padding: 0 0 1em 16px;
} }
td { .block:last-child {
padding: 2px 0; border-bottom: none;
padding-bottom: 4px;
} }
td:last-child { h1 {
text-align: right; 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, button,
td:last-child,
input[type=number], input[type=number],
input[type="color"], input[type="color"],
.onoffswitch, .onoffswitch {
#update-counter {
width: 80px; width: 80px;
box-sizing: border-box; box-sizing: border-box;
} }
@ -63,18 +85,9 @@ input[type=number]:invalid {
color: darkred; color: darkred;
} }
#actions {
margin-top: -2em;
}
#reset {
text-align: right;
position: relative;
}
#notes { #notes {
background-color: #f4f4f4; background-color: #f4f4f4;
margin-top: .75rem; padding: 1.5ex 16px 1ex calc(16px + 2ex);
font-size: 90%; font-size: 90%;
color: #999; color: #999;
} }
@ -101,12 +114,6 @@ input[type="color"] {
color: black; color: black;
} }
#update-counter {
margin-top: .5ex;
position: absolute;
text-align: center;
}
@keyframes fadeinout { @keyframes fadeinout {
0% { opacity: 0 } 0% { opacity: 0 }
10% { opacity: 1 } 10% { opacity: 1 }
@ -118,6 +125,7 @@ input[type="color"] {
.onoffswitch { .onoffswitch {
position: relative; position: relative;
margin: 1ex 0;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;

115
options/index.html
View File

@ -11,64 +11,69 @@
</head> </head>
<body> <body>
<div id="ui"> <div id="options">
<h1 i18n-text="optionsCustomize"></h1> <div class="block">
<table> <h1 i18n-text="optionsCustomizeBadge"></h1>
<tr> <div class="items">
<td i18n-text="prefShowBadge"></td> <label>
<td> <span i18n-text="optionsBadgeNormal"></span>
<div class="onoffswitch"> <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"> <input type="checkbox" class="onoffswitch-checkbox" id="show-badge">
<label class="onoffswitch-label" for="show-badge"></label> <span class="onoffswitch-label"></span>
</div> </span>
</td> </label>
</tr> </div>
<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>
</div> </div>
</div> <div class="block">
<h1 i18n-text="optionsCustomizePopup"></h1>
<div id="actions"> <div class="items">
<h1 i18n-text="optionsActions"></h1> <label>
<table> <span i18n-text="optionsPopupWidth"></span>
<tr> <input type="number" id="popupWidth" min="200" max="800">
<td i18n-text="optionsOpenManager"><sup class="chromium-only">2</sup></td> </label>
<td><button type="button" data-cmd="open-manage" i18n-text="optionsOpen"></button></td> <label>
</tr> <span i18n-text="popupStylesFirst"></span>
<tr> <span class="onoffswitch">
<td i18n-text="optionsCheckUpdate"></td> <input type="checkbox" class="onoffswitch-checkbox" id="popup.stylesFirst">
<td> <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> <button type="button" data-cmd="check-updates" i18n-text="optionsCheck"></button>
<div id="update-counter"></div> </label>
</td> </div>
</tr> </div>
</table>
</div> </div>
<div id="notes"> <div id="notes">

29
options/index.js
View File

@ -19,31 +19,33 @@ document.onclick = e => {
let total = 0; let total = 0;
let updated = 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() { 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) => { BG.update.perform((cmd, value) => {
switch (cmd) { switch (cmd) {
case 'count': case 'count':
total = value; total = value;
if (!total) { if (!total) {
done(e.target); done();
} }
break; break;
case 'single-updated': case 'single-updated':
case 'single-skipped': case 'single-skipped':
updated++; updated++;
if (total && updated === total) { if (total && updated === total) {
done(e.target); done();
} }
break; break;
} }
@ -61,7 +63,6 @@ document.onclick = e => {
break; break;
case 'check-updates': case 'check-updates':
e.target.disabled = true;
check(); check();
break; break;