From bdcac21d7e1c83ef12b6946499f32702dab46908 Mon Sep 17 00:00:00 2001 From: tophf Date: Fri, 14 Apr 2017 10:50:52 +0300 Subject: [PATCH] optionsUI: group options and shorten labels --- _locales/en/messages.json | 25 ++++++--- options/index.css | 80 ++++++++++++++------------ options/index.html | 115 ++++++++++++++++++++------------------ options/index.js | 29 +++++----- 4 files changed, 136 insertions(+), 113 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 9354a899..ec51af06 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -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": { diff --git a/options/index.css b/options/index.css index 6c8c7365..7b6185e3 100644 --- a/options/index.css +++ b/options/index.css @@ -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; diff --git a/options/index.html b/options/index.html index b98c447b..df23c4b1 100644 --- a/options/index.html +++ b/options/index.html @@ -11,64 +11,69 @@ -
-

- - - - - - - - - - - - - - - - - - - - - - - - - -
-
+
+
+

+
+ + +
-
-
- - -
-
1
-
- + + + +
- - -
-

- - - - - - - - - -
2
+
+

+
+ + +
+
+
+

+
+ +
+
+
+

+
+ + +
+ +
+
diff --git a/options/index.js b/options/index.js index 19ecf930..09eac5a6 100644 --- a/options/index.js +++ b/options/index.js @@ -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;