From c416fa7ca0929012805f4df04959e48486f73bd4 Mon Sep 17 00:00:00 2001 From: tophf Date: Fri, 2 Oct 2020 18:10:52 +0300 Subject: [PATCH] rework and move newUI+theme to options.html (#1050) * rework and move newUI+theme to options.html * rephrase/clarify the find styles label * switch to USO-archive * search for 'Stylus' keyword to filter out Stylish crud * use archive's default search order --- _locales/bg/messages.json | 6 +-- _locales/cs/messages.json | 6 +-- _locales/de/messages.json | 6 +-- _locales/en/messages.json | 7 ++-- _locales/es/messages.json | 6 +-- _locales/et/messages.json | 6 +-- _locales/fr/messages.json | 6 +-- _locales/he/messages.json | 6 +-- _locales/hu/messages.json | 6 +-- _locales/it/messages.json | 6 +-- _locales/ja/messages.json | 6 +-- _locales/ko/messages.json | 6 +-- _locales/nl/messages.json | 6 +-- _locales/pl/messages.json | 6 +-- _locales/pt_PT/messages.json | 6 +-- _locales/ro/messages.json | 6 +-- _locales/ru/messages.json | 6 +-- _locales/sv/messages.json | 6 +-- _locales/tr/messages.json | 6 +-- _locales/zh_CN/messages.json | 6 +-- _locales/zh_TW/messages.json | 6 +-- js/prefs.js | 2 +- manage.html | 56 ++++------------------------ manage/manage.css | 71 ++---------------------------------- manage/manage.js | 47 +++++++++++------------- options.html | 49 +++++++++++++++++++++++++ options/options.js | 2 +- 27 files changed, 106 insertions(+), 248 deletions(-) diff --git a/_locales/bg/messages.json b/_locales/bg/messages.json index 0e02bbf8..fce7dc43 100644 --- a/_locales/bg/messages.json +++ b/_locales/bg/messages.json @@ -217,10 +217,6 @@ } } }, - "editorStylesButton": { - "message": "Стилове за редактора", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Включване", "description": "Label for the button to enable a style" @@ -741,4 +737,4 @@ "message": "този адрес", "description": "Text for link in toolbar pop-up to write a new style for the current URL" } -} \ No newline at end of file +} diff --git a/_locales/cs/messages.json b/_locales/cs/messages.json index 51c2f253..4bd340b5 100644 --- a/_locales/cs/messages.json +++ b/_locales/cs/messages.json @@ -305,10 +305,6 @@ } } }, - "editorStylesButton": { - "message": "Najít styly pro editor", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Povolit", "description": "Label for the button to enable a style" @@ -1306,4 +1302,4 @@ "message": "Nahrávání souboru…", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/de/messages.json b/_locales/de/messages.json index 6521b6f3..32253e1b 100644 --- a/_locales/de/messages.json +++ b/_locales/de/messages.json @@ -309,10 +309,6 @@ } } }, - "editorStylesButton": { - "message": "Editor Styles finden", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Aktivieren", "description": "Label for the button to enable a style" @@ -1600,4 +1596,4 @@ "message": "Lade Styles hoch...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 6ed037fb..95cf61d4 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -319,10 +319,6 @@ }, "description": "Title of the page for editing styles" }, - "editorStylesButton": { - "message": "Find editor styles", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Enable", "description": "Label for the button to enable a style" @@ -1012,6 +1008,9 @@ "optionsResetButton": { "message": "Reset options" }, + "optionsStylusThemes": { + "message": "Find a Stylus UI theme" + }, "optionsSubheading": { "message": "More Options", "description": "Subheading for options section on manage page." diff --git a/_locales/es/messages.json b/_locales/es/messages.json index ffb6ba7a..ceb3dd1d 100644 --- a/_locales/es/messages.json +++ b/_locales/es/messages.json @@ -313,10 +313,6 @@ } } }, - "editorStylesButton": { - "message": "Buscar estilos del editor", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Activar", "description": "Label for the button to enable a style" @@ -1568,4 +1564,4 @@ "message": "Subiendo el archivo....", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/et/messages.json b/_locales/et/messages.json index e2568512..57066641 100644 --- a/_locales/et/messages.json +++ b/_locales/et/messages.json @@ -313,10 +313,6 @@ } } }, - "editorStylesButton": { - "message": "Leia redaktori stiile", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Luba", "description": "Label for the button to enable a style" @@ -1486,4 +1482,4 @@ "message": "Faili üleslaadimine...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json index d96e9a3a..e2aad9cd 100644 --- a/_locales/fr/messages.json +++ b/_locales/fr/messages.json @@ -321,10 +321,6 @@ } } }, - "editorStylesButton": { - "message": "Trouver des styles pour l’éditeur", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Activer", "description": "Label for the button to enable a style" @@ -1616,4 +1612,4 @@ "message": "Envoi du fichier…", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/he/messages.json b/_locales/he/messages.json index 22266d83..c9b25a9a 100644 --- a/_locales/he/messages.json +++ b/_locales/he/messages.json @@ -321,10 +321,6 @@ } } }, - "editorStylesButton": { - "message": "מצא עיצובים לעורך", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "אפשר", "description": "Label for the button to enable a style" @@ -1381,4 +1377,4 @@ "message": "מעלה קובץ...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/hu/messages.json b/_locales/hu/messages.json index 1ab582b4..1195eb83 100644 --- a/_locales/hu/messages.json +++ b/_locales/hu/messages.json @@ -309,10 +309,6 @@ } } }, - "editorStylesButton": { - "message": "A szerkesztő stílusainak keresése", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Engedélyezés", "description": "Label for the button to enable a style" @@ -1604,4 +1600,4 @@ "message": "Fájl feltöltése...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/it/messages.json b/_locales/it/messages.json index 1ccff03a..0be3fef9 100644 --- a/_locales/it/messages.json +++ b/_locales/it/messages.json @@ -273,10 +273,6 @@ } } }, - "editorStylesButton": { - "message": "Cerca stili editor", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Attiva", "description": "Label for the button to enable a style" @@ -1058,4 +1054,4 @@ "message": "questo URL", "description": "Text for link in toolbar pop-up to write a new style for the current URL" } -} \ No newline at end of file +} diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json index 1b79ccb7..b76c741f 100644 --- a/_locales/ja/messages.json +++ b/_locales/ja/messages.json @@ -313,10 +313,6 @@ } } }, - "editorStylesButton": { - "message": "エディタのスタイルを見つける", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "有効化", "description": "Label for the button to enable a style" @@ -1636,4 +1632,4 @@ "message": "スタイルをアップロード中...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/ko/messages.json b/_locales/ko/messages.json index 9b207cd9..26a35640 100644 --- a/_locales/ko/messages.json +++ b/_locales/ko/messages.json @@ -317,10 +317,6 @@ } } }, - "editorStylesButton": { - "message": "편집기 스타일 찾기", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "활성화", "description": "Label for the button to enable a style" @@ -1636,4 +1632,4 @@ "message": "파일 업로드 중...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/nl/messages.json b/_locales/nl/messages.json index daa2a292..677c39cd 100644 --- a/_locales/nl/messages.json +++ b/_locales/nl/messages.json @@ -317,10 +317,6 @@ } } }, - "editorStylesButton": { - "message": "Editorstijlen zoeken", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Inschakelen", "description": "Label for the button to enable a style" @@ -1620,4 +1616,4 @@ "message": "Bestand uploaden...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/pl/messages.json b/_locales/pl/messages.json index a5f8ad21..f24ce9e9 100644 --- a/_locales/pl/messages.json +++ b/_locales/pl/messages.json @@ -321,10 +321,6 @@ } } }, - "editorStylesButton": { - "message": "Znajdź style edytora", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Włącz", "description": "Label for the button to enable a style" @@ -1644,4 +1640,4 @@ "message": "Wysyłanie stylów...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/pt_PT/messages.json b/_locales/pt_PT/messages.json index a54ba31e..cf3cee05 100644 --- a/_locales/pt_PT/messages.json +++ b/_locales/pt_PT/messages.json @@ -301,10 +301,6 @@ } } }, - "editorStylesButton": { - "message": "Encontrar estilos para o editor", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Ativar", "description": "Label for the button to enable a style" @@ -1224,4 +1220,4 @@ "message": "este URL", "description": "Text for link in toolbar pop-up to write a new style for the current URL" } -} \ No newline at end of file +} diff --git a/_locales/ro/messages.json b/_locales/ro/messages.json index 0a34d235..703d0f54 100644 --- a/_locales/ro/messages.json +++ b/_locales/ro/messages.json @@ -269,10 +269,6 @@ } } }, - "editorStylesButton": { - "message": "Găsiți teme pentru editor", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Activați", "description": "Label for the button to enable a style" @@ -1140,4 +1136,4 @@ "message": "acest URL", "description": "Text for link in toolbar pop-up to write a new style for the current URL" } -} \ No newline at end of file +} diff --git a/_locales/ru/messages.json b/_locales/ru/messages.json index 69985610..2334e357 100644 --- a/_locales/ru/messages.json +++ b/_locales/ru/messages.json @@ -321,10 +321,6 @@ } } }, - "editorStylesButton": { - "message": "Сменить тему Стилус", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Включить", "description": "Label for the button to enable a style" @@ -1644,4 +1640,4 @@ "message": "Загрузка файла...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/sv/messages.json b/_locales/sv/messages.json index 91ff2c39..d800b825 100644 --- a/_locales/sv/messages.json +++ b/_locales/sv/messages.json @@ -309,10 +309,6 @@ } } }, - "editorStylesButton": { - "message": "Hitta redaktörsstilar", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Aktivera", "description": "Label for the button to enable a style" @@ -1522,4 +1518,4 @@ "message": "Skickar filen...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/tr/messages.json b/_locales/tr/messages.json index 941cc153..1dedf52b 100644 --- a/_locales/tr/messages.json +++ b/_locales/tr/messages.json @@ -309,10 +309,6 @@ } } }, - "editorStylesButton": { - "message": "Editör stili bul", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "Etkinleştir", "description": "Label for the button to enable a style" @@ -896,4 +892,4 @@ "message": "Dosya Yükleniyor...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/zh_CN/messages.json b/_locales/zh_CN/messages.json index 50c1336b..04e56f37 100644 --- a/_locales/zh_CN/messages.json +++ b/_locales/zh_CN/messages.json @@ -321,10 +321,6 @@ } } }, - "editorStylesButton": { - "message": "查找编辑器样式", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "启用", "description": "Label for the button to enable a style" @@ -1644,4 +1640,4 @@ "message": "正在上传文件...", "description": "" } -} \ No newline at end of file +} diff --git a/_locales/zh_TW/messages.json b/_locales/zh_TW/messages.json index 0886cb37..2551fb69 100644 --- a/_locales/zh_TW/messages.json +++ b/_locales/zh_TW/messages.json @@ -321,10 +321,6 @@ } } }, - "editorStylesButton": { - "message": "找到編輯器樣式", - "description": "Find styles for the editor" - }, "enableStyleLabel": { "message": "啟用", "description": "Label for the button to enable a style" @@ -1644,4 +1640,4 @@ "message": "正在上傳檔案……", "description": "" } -} \ No newline at end of file +} 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..718a8d31 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 a9752248..dff74940 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); if (CHROME_HAS_BORDER_BUG) {