From a2943852a7520166e1eb746b4a6762b0ca009711 Mon Sep 17 00:00:00 2001 From: tophf Date: Tue, 18 Apr 2017 21:49:04 +0300 Subject: [PATCH] add a hidden "gray out" options for favicons --- _locales/en/messages.json | 4 +++ manage.css | 5 ++++ manage.html | 7 ++++- manage.js | 57 ++++++++++++++++++++++++--------------- prefs.js | 1 + 5 files changed, 51 insertions(+), 23 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 6944f367..b1cd5297 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -334,6 +334,10 @@ "message": "Favicons in applies-to column", "description": "Label for the checkbox that toggles applies-to favicons in the new UI on manage page" }, + "manageFaviconsGray": { + "message": "Grayed out", + "description": "Label for the checkbox that toggles grayed out mode of applies-to favicons in the new UI on manage page" + }, "manageFaviconsHelp": { "message": "Stylus uses an external service https://www.google.com/s2/favicons", "description": "Label for the checkbox that toggles applies-to favicons in the new UI on manage page" diff --git a/manage.css b/manage.css index 7ea70b01..c890e477 100644 --- a/manage.css +++ b/manage.css @@ -433,6 +433,11 @@ input[id^="manage.newUI"] { padding: 1ex 0 2ex 16px; } +#faviconsHelp div { + display: flex; + align-items: center; + margin-top: 1ex; +} /* Default, no update buttons */ .update, diff --git a/manage.html b/manage.html index 36d4134c..dc0365eb 100644 --- a/manage.html +++ b/manage.html @@ -163,7 +163,12 @@ - + diff --git a/manage.js b/manage.js index 58e03b50..164656c9 100644 --- a/manage.js +++ b/manage.js @@ -10,6 +10,7 @@ const filtersSelector = { 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); @@ -75,15 +76,11 @@ function initGlobalEvents() { el.onclick = () => target.classList.toggle('hidden'); }); + // triggered automatically by setupLivePrefs() below enforceInputRange($('#manage.newUI.targets')); - setupLivePrefs([ - 'manage.onlyEnabled', - 'manage.onlyEdited', - 'manage.newUI', - 'manage.newUI.favicons', - 'manage.newUI.targets', - ]); + // N.B. triggers existing onchange listeners + setupLivePrefs($$('input[id^="manage."]').map(el => el.id)); $$('[data-filter]').forEach(el => { el.onchange = handleEvent.filterOnChange; @@ -401,39 +398,55 @@ function handleDelete(id) { function switchUI({styleOnly} = {}) { - const enabled = $('#manage.newUI').checked; - const favicons = $('#manage.newUI.favicons').checked; - const targets = Number($('#manage.newUI.targets').value); + 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); + const valueChanged = value !== newUI[id] && (id == 'enabled' || current.enabled); + current[id] = value; + changed[id] = valueChanged; + someChanged |= valueChanged; + } - const stateToggled = newUI.enabled != enabled; - const targetsChanged = enabled && targets != newUI.targets; - const faviconsChanged = enabled && favicons != newUI.favicons; - const missingFavicons = enabled && favicons && !$('.applies-to img'); - - if (!styleOnly && !stateToggled && !targetsChanged && !faviconsChanged) { + if (!styleOnly && !someChanged) { return; } - Object.assign(newUI, {enabled, favicons, targets}); - + Object.assign(newUI, current); newUI.renderClass(); - installed.classList.toggle('has-favicons', favicons); + installed.classList.toggle('has-favicons', newUI.favicons); $('#style-overrides').textContent = ` .newUI .targets { max-height: ${newUI.targets * 18}px; } - `; + ` + (newUI.faviconsGray ? ` + .newUI .target img { + -webkit-filter: grayscale(1); + filter: grayscale(1); + opacity: .25; + } + ` : ` + .newUI .target img { + -webkit-filter: none; + filter: none; + opacity: 1; + } + `); if (styleOnly) { return; } - if (stateToggled || missingFavicons && !createStyleElement.parts) { + const missingFavicons = newUI.enabled && newUI.favicons && !$('.applies-to img'); + if (changed.enabled || (missingFavicons && !createStyleElement.parts)) { installed.innerHTML = ''; getStylesSafe().then(showStyles); return; } - if (targetsChanged) { + if (changed.targets) { for (const targets of $$('.entry .targets')) { const hasMore = targets.children.length > newUI.targets; targets.parentElement.classList.toggle('has-more', hasMore); diff --git a/prefs.js b/prefs.js index f460779d..17510093 100644 --- a/prefs.js +++ b/prefs.js @@ -18,6 +18,7 @@ var prefs = new function Prefs() { 'manage.onlyEdited': false, // display only styles created locally 'manage.newUI': true, // use the new compact layout 'manage.newUI.favicons': false, // show favicons for the sites in applies-to + 'manage.newUI.faviconsGray': true, // gray out favicons 'manage.newUI.targets': 3, // max number of applies-to targets visible: 0 = none 'editor.options': {}, // CodeMirror.defaults.*