diff --git a/js/prefs.js b/js/prefs.js index 52e2ad7a..3b39cf85 100644 --- a/js/prefs.js +++ b/js/prefs.js @@ -28,9 +28,9 @@ self.prefs = self.INJECTED === 1 ? self.prefs : (() => { 'manage.onlyLocal.invert': false, // display only externally installed styles 'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles // UI element state: expanded/collapsed + 'manage.actions.expanded': true, 'manage.backup.expanded': true, 'manage.filters.expanded': true, - 'manage.options.expanded': true, // the new compact layout doesn't look good on Android yet 'manage.newUI': !navigator.appVersion.includes('Android'), 'manage.newUI.favicons': false, // show favicons for the sites in applies-to diff --git a/manage.html b/manage.html index dad506b6..6744d802 100644 --- a/manage.html +++ b/manage.html @@ -278,8 +278,11 @@ + -
+
+
+

-
+ + +
-
- -

- - - -
-
- - -
- -
- -
- - - -
- -
-

diff --git a/manage/manage.css b/manage/manage.css index 31f2b325..ef4d0279 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -285,14 +285,6 @@ a:hover { margin-top: .5rem; } -#options-buttons { - display: flex; - flex-wrap: wrap; - padding-top: .1rem; -} - -#options-buttons > a, -#options-buttons > button, #backup-buttons button { margin: 0 .2rem .5rem 0; } @@ -695,65 +687,6 @@ a:hover { filter: grayscale(0); } -#newUIoptions { - display: none; -} - -.newUI #newUIoptions { - display: initial; -} - -#newUIoptions > * { - display: flex; - align-items: center; - margin-bottom: auto; - flex-wrap: wrap; - position: relative; -} - -#newUIoptions input[type="number"] { - width: 3em; - margin-right: .5em; -} - -#newUIoptions [data-toggle-on-click="#faviconsHelp"] { - width: 14px; - height: 14px; - display: inline-block; - vertical-align: middle; - position: relative; - top: -1px; -} - -#newUIoptions [data-toggle-on-click] > svg { - position: static; -} - -#newUIoptions [data-toggle-on-click]:not([open]) > svg { - /* note: without ">" FF52 also transforms the nested svg inside */ - transform: rotate(-90deg); -} - -html:not(.newUI) #newUIoptions + * { - margin-top: .5em; -} - -input[id^="manage.newUI"] { - margin-left: 0; -} - -#faviconsHelp { - overflow-y: auto; - font-size: 90%; - padding: 1ex 0 2ex 16px; -} - -#faviconsHelp div { - display: flex; - align-items: center; - margin-top: 1ex; -} - /* Default, no update buttons */ .updater-icons .update, .updater-icons .check-update { @@ -1078,6 +1011,10 @@ input[id^="manage.newUI"] { animation: fadeout .25s ease-in-out; } +.settings-column { + margin-top: 1rem; +} + @keyframes fadein { from { opacity: 0; diff --git a/manage/manage.js b/manage/manage.js index d7478b63..956fe526 100644 --- a/manage/manage.js +++ b/manage/manage.js @@ -5,7 +5,7 @@ global messageBox getStyleWithNoCode objectDiff configDialog sorter msg prefs API onDOMready $ $$ $create template setupLivePrefs - URLS enforceInputRange t tWordBreak formatDate + t tWordBreak formatDate getOwnTab getActiveTab openURL animateElement sessionStorageHash debounce scrollElementIntoView CHROME VIVALDI FIREFOX router bulkChangeTime:true bulkChangeQueue @@ -19,15 +19,24 @@ const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW; const BULK_THROTTLE_MS = 100; +// define pref-mapped ids separately const newUI = { - enabled: prefs.get('manage.newUI'), - favicons: prefs.get('manage.newUI.favicons'), - faviconsGray: prefs.get('manage.newUI.faviconsGray'), - targets: prefs.get('manage.newUI.targets'), - renderClass() { - document.documentElement.classList.toggle('newUI', newUI.enabled); - }, + enabled: null, // the global option should come first + favicons: null, + faviconsGray: null, + targets: null, }; +// ...add utility functions +Object.assign(newUI, { + ids: Object.keys(newUI), + prefGroup: 'manage.newUI', + prefKeyForId: id => id === 'enabled' ? newUI.prefGroup : `${newUI.prefGroup}.${id}`, + renderClass: () => document.documentElement.classList.toggle('newUI', newUI.enabled), +}); +// ...read the actual values +for (const id of newUI.ids) { + newUI[id] = prefs.get(newUI.prefKeyForId(id)); +} newUI.renderClass(); const TARGET_TYPES = ['domains', 'urls', 'urlPrefixes', 'regexps']; @@ -88,10 +97,6 @@ function initGlobalEvents() { installed.onclick = handleEvent.entryClicked; $('#manage-options-button').onclick = () => router.updateHash('#stylus-options'); $('#sync-styles').onclick = () => router.updateHash('#stylus-options'); - { - const btn = $('#manage-shortcuts-button'); - btn.onclick = btn.onclick || (() => openURL({url: URLS.configureCommands})); - } $$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external)); // show date installed & last update on hover installed.addEventListener('mouseover', handleEvent.lazyAddEntryTitle); @@ -113,19 +118,11 @@ function initGlobalEvents() { }; }); - // triggered automatically by setupLivePrefs() below - enforceInputRange($('#manage.newUI.targets')); - // N.B. triggers existing onchange listeners setupLivePrefs(); sorter.init(); - prefs.subscribe([ - 'manage.newUI', - 'manage.newUI.favicons', - 'manage.newUI.faviconsGray', - 'manage.newUI.targets', - ], () => switchUI()); + prefs.subscribe(newUI.ids.map(newUI.prefKeyForId), () => switchUI()); switchUI({styleOnly: true}); @@ -488,7 +485,7 @@ Object.assign(handleEvent, { const y = Math.max(0, top); const first = document.elementFromPoint(x, y); const lastOffset = first.offsetTop + window.innerHeight; - const numTargets = prefs.get('manage.newUI.targets'); + const numTargets = newUI.targets; let entry = first && first.closest('.entry') || installed.children[0]; while (entry && entry.offsetTop <= lastOffset) { favicons.push(...$$('img', entry).slice(0, numTargets).filter(img => img.dataset.src)); @@ -618,10 +615,8 @@ function switchUI({styleOnly} = {}) { const current = {}; const changed = {}; let someChanged = false; - // ensure the global option is processed first - for (const el of [$('#manage.newUI'), ...$$('[id^="manage.newUI."]')]) { - const id = el.id.replace(/^manage\.newUI\.?/, '') || 'enabled'; - const value = el.type === 'checkbox' ? el.checked : Number(el.value); + for (const id of newUI.ids) { + const value = prefs.get(newUI.prefKeyForId(id)); const valueChanged = value !== newUI[id] && (id === 'enabled' || current.enabled); current[id] = value; changed[id] = valueChanged; diff --git a/options.html b/options.html index 6ea9a78b..1ec886e3 100644 --- a/options.html +++ b/options.html @@ -41,6 +41,16 @@
+
+

+
+ +
+
+

@@ -125,6 +135,45 @@
+
+

+
+ + + + +
+
+

diff --git a/options/options.js b/options/options.js index 0d99be13..7e5b6c4a 100644 --- a/options/options.js +++ b/options/options.js @@ -6,7 +6,7 @@ setupLivePrefs(); setupRadioButtons(); -enforceInputRange($('#popupWidth')); +$$('input[min], input[max]').forEach(enforceInputRange); setTimeout(splitLongTooltips); // https://github.com/openstyles/stylus/issues/822