From 92e9f69c8069644c544301a51fbbd351e799e99d Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 25 Nov 2020 23:22:05 -0500 Subject: [PATCH] Popup style updates (#1066) * Replace compactGlossaries option with new glossaryLayoutMode option * Update attributes * Update attributes * Update color definitions * Fix default theme scrollbar --- ext/bg/data/options-schema.json | 9 +-- ext/bg/js/anki-note-builder.js | 9 +-- ext/bg/js/options.js | 3 + .../js/settings/anki-templates-controller.js | 4 +- ext/bg/search.html | 2 +- ext/bg/settings.html | 31 +++++---- ext/fg/css/client.css | 4 +- ext/fg/float.html | 2 +- ext/fg/js/popup.js | 6 +- ext/mixed/css/display.css | 65 ++++++++++--------- ext/mixed/css/search.css | 2 +- ext/mixed/js/display.js | 8 +-- test/test-options-util.js | 2 +- 13 files changed, 84 insertions(+), 63 deletions(-) diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json index edb30074..2da48041 100644 --- a/ext/bg/data/options-schema.json +++ b/ext/bg/data/options-schema.json @@ -94,7 +94,7 @@ "popupScaleRelativeToVisualViewport", "showGuide", "compactTags", - "compactGlossaries", + "glossaryLayoutMode", "mainDictionary", "popupTheme", "popupOuterTheme", @@ -198,9 +198,10 @@ "type": "boolean", "default": false }, - "compactGlossaries": { - "type": "boolean", - "default": false + "glossaryLayoutMode": { + "type": "string", + "enum": ["default", "compact"], + "default": "default" }, "mainDictionary": { "type": "string" diff --git a/ext/bg/js/anki-note-builder.js b/ext/bg/js/anki-note-builder.js index d1e918c9..33cd3a0b 100644 --- a/ext/bg/js/anki-note-builder.js +++ b/ext/bg/js/anki-note-builder.js @@ -34,7 +34,7 @@ class AnkiNoteBuilder { checkForDuplicates=true, duplicateScope='collection', resultOutputMode='split', - compactGlossaries=false, + glossaryLayoutMode='default', compactTags=false, modeOptions: {fields, deck, model}, audioDetails=null, @@ -71,7 +71,7 @@ class AnkiNoteBuilder { } }; - const data = this._createNoteData(definition, mode, context, resultOutputMode, compactGlossaries, compactTags); + const data = this._createNoteData(definition, mode, context, resultOutputMode, glossaryLayoutMode, compactTags); const formattedFieldValuePromises = []; for (const [, fieldValue] of fieldEntries) { const formattedFieldValuePromise = this._formatField(fieldValue, data, templates, errors); @@ -105,7 +105,7 @@ class AnkiNoteBuilder { // Private - _createNoteData(definition, mode, context, resultOutputMode, compactGlossaries, compactTags) { + _createNoteData(definition, mode, context, resultOutputMode, glossaryLayoutMode, compactTags) { const pitches = DictionaryDataUtil.getPitchAccentInfos(definition); const pitchCount = pitches.reduce((i, v) => i + v.pitches.length, 0); return { @@ -118,7 +118,8 @@ class AnkiNoteBuilder { modeTermKanji: mode === 'term-kanji', modeTermKana: mode === 'term-kana', modeKanji: mode === 'kanji', - compactGlossaries, + compactGlossaries: (glossaryLayoutMode === 'compact'), + glossaryLayoutMode, compactTags, context }; diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index e4f6c8e4..dcc8471a 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -614,10 +614,13 @@ class OptionsUtil { // Updated handlebars templates to include "conjugation" definition. // Added global option showPopupPreview. // Added anki.checkForDuplicates. + // Added general.glossaryLayoutMode; removed general.compactGlossaries. await this._addFieldTemplatesToOptions(options, '/bg/data/anki-field-templates-upgrade-v6.handlebars'); options.global.showPopupPreview = false; for (const profile of options.profiles) { profile.options.anki.checkForDuplicates = true; + profile.options.general.glossaryLayoutMode = (profile.options.general.compactGlossaries ? 'compact' : 'default'); + delete profile.options.general.compactGlossaries; const fieldTemplates = profile.options.anki.fieldTemplates; if (typeof fieldTemplates === 'string') { profile.options.anki.fieldTemplates = this._updateVersion6AnkiTemplatesCompactTags(fieldTemplates); diff --git a/ext/bg/js/settings/anki-templates-controller.js b/ext/bg/js/settings/anki-templates-controller.js index 35a08476..3ac4fa9e 100644 --- a/ext/bg/js/settings/anki-templates-controller.js +++ b/ext/bg/js/settings/anki-templates-controller.js @@ -184,14 +184,14 @@ class AnkiTemplatesController { const ankiNoteBuilder = new AnkiNoteBuilder({ renderTemplate: this._renderTemplate.bind(this) }); - const {general: {resultOutputMode, compactGlossaries, compactTags}} = options; + const {general: {resultOutputMode, glossaryLayoutMode, compactTags}} = options; const note = await ankiNoteBuilder.createNote({ definition, mode, context, templates, resultOutputMode, - compactGlossaries, + glossaryLayoutMode, compactTags, modeOptions: { fields: {field}, diff --git a/ext/bg/search.html b/ext/bg/search.html index 3588d871..c0f98d8c 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -1,5 +1,5 @@ - + diff --git a/ext/bg/settings.html b/ext/bg/settings.html index d3b13354..5083a6bc 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -144,10 +144,6 @@ -
- -
-
@@ -205,14 +201,6 @@ -
- - -
-
@@ -284,6 +272,25 @@
+
+
+
+ + +
+
+ + +
+
+
+
diff --git a/ext/fg/css/client.css b/ext/fg/css/client.css index 227f5030..0957c758 100644 --- a/ext/fg/css/client.css +++ b/ext/fg/css/client.css @@ -28,8 +28,8 @@ iframe.yomichan-float { box-sizing: border-box; } -iframe.yomichan-float[data-yomichan-theme=dark], -iframe.yomichan-float[data-yomichan-theme=auto][data-yomichan-site-color=dark] { +iframe.yomichan-float[data-outer-theme=dark], +iframe.yomichan-float[data-outer-theme=auto][data-site-color=dark] { background-color: #1e1e1e; border: 1px solid #666; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); diff --git a/ext/fg/float.html b/ext/fg/float.html index 36aedb7a..5874f44d 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -1,5 +1,5 @@ - + diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 00afb773..b3af3d6f 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -186,8 +186,10 @@ class Popup extends EventDispatcher { } updateTheme() { - this._frame.dataset.yomichanTheme = this._options.general.popupOuterTheme; - this._frame.dataset.yomichanSiteColor = this._getSiteColor(); + const {popupTheme, popupOuterTheme} = this._options.general; + this._frame.dataset.theme = popupTheme; + this._frame.dataset.outerTheme = popupOuterTheme; + this._frame.dataset.siteColor = this._getSiteColor(); } async setCustomOuterCss(css, useWebExtensionApi) { diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index f9d5c25e..edd1b3d7 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -72,8 +72,10 @@ --default-text-color: #333333; --light-text-color: #777777; --very-light-text-color: #999999; - --popuplar-kanji-text-color: var(--accent-color); - + --kanji-text-color: var(--default-text-color); + --kanji-popular-text-color: var(--accent-color); + --kanji-rare-text-color: var(--very-light-text-color); + --kanji-furigana-text-color: inherit; --reason-text-color: var(--light-text-color); --light-border-color: #eeeeee; @@ -115,7 +117,7 @@ --progress-bar-indicator-color: var(--accent-color); --entry-current-indicator-color: var(--accent-color); } -:root[data-yomichan-theme=dark] { +:root[data-theme=dark] { /* Colors */ --background-color: #1e1e1e; --glossary-image-background-color: #2f2f2f; @@ -126,8 +128,10 @@ --default-text-color: #d4d4d4; --light-text-color: #888888; --very-light-text-color: #666666; - --popuplar-kanji-text-color: var(--accent-color); - + --kanji-text-color: var(--default-text-color); + --kanji-popular-text-color: var(--accent-color); + --kanji-rare-text-color: var(--very-light-text-color); + --kanji-furigana-text-color: inherit; --reason-text-color: var(--light-text-color); --light-border-color: #2f2f2f; @@ -179,8 +183,8 @@ /* General */ -:root[data-yomichan-page=float]:not([data-yomichan-theme]), -:root[data-yomichan-page=float]:not([data-yomichan-theme]) body { +:root[data-page-type=popup]:not([data-theme]), +:root[data-page-type=popup]:not([data-theme]) body { background-color: transparent; } :root { @@ -227,25 +231,25 @@ a { /* Scrollbars */ -:root:not([data-yomichan-theme=light]) .scrollbar { +:root:not([data-theme=default]) .scrollbar { scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); } -:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar { +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar { width: auto; } -:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-button { +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-button { height: 0; } -:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-thumb { +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); } -:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-track { +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track { background-color: var(--scrollbar-thumb-color); } -:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-track-piece { +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-track-piece { background-color: var(--scrollbar-track-color); } -:root:not([data-yomichan-theme=light]) .scrollbar::-webkit-scrollbar-corner { +:root:not([data-theme=default]) .scrollbar::-webkit-scrollbar-corner { background-color: var(--scrollbar-track-color); } @@ -586,17 +590,20 @@ button.action-button { } .term-expression .kanji-link { border-bottom: var(--expression-thin-border-size) dashed var(--kanji-border-color); - color: var(--default-text-color); + color: var(--kanji-text-color); text-decoration: none; cursor: pointer; } .term-expression[data-frequency=popular] .term-expression-text, .term-expression[data-frequency=popular] .term-expression-text .kanji-link { - color: var(--popuplar-kanji-text-color); + color: var(--kanji-popular-text-color); } .term-expression[data-frequency=rare] .term-expression-text, .term-expression[data-frequency=rare] .term-expression-text .kanji-link { - color: var(--very-light-text-color); + color: var(--kanji-rare-text-color); +} +.term-expression-text>ruby>rt { + color: var(--kanji-furigana-text-color); } .entry-header2, .entry-header3 { @@ -770,19 +777,19 @@ button.action-button { :root[data-audio-enabled=false] .action-play-audio { display: none; } -:root[data-compact-glossaries=true] .term-definition-tag-list, -:root[data-compact-glossaries=true] .term-definition-disambiguation-list:not([data-count="0"]) { +:root[data-glossary-layout-mode=compact] .term-definition-tag-list, +:root[data-glossary-layout-mode=compact] .term-definition-disambiguation-list:not([data-count="0"]) { display: inline; } -:root[data-compact-glossaries=true] .term-glossary-list { +:root[data-glossary-layout-mode=compact] .term-glossary-list { display: inline; list-style: none; padding-left: 0; } -:root[data-compact-glossaries=true] .term-glossary-list>li { +:root[data-glossary-layout-mode=compact] .term-glossary-list>li { display: inline; } -:root[data-compact-glossaries=true] .term-glossary-list>li:not(:first-child)::before { +:root[data-glossary-layout-mode=compact] .term-glossary-list>li:not(:first-child)::before { white-space: pre-wrap; content: " | "; display: inline; @@ -1022,29 +1029,29 @@ button.action-button { content: "]"; } -:root[data-compact-glossaries=true] .term-glossary-image-container { +:root[data-glossary-layout-mode=compact] .term-glossary-image-container { display: none; position: absolute; left: 0; top: 100%; z-index: 1; } -:root[data-compact-glossaries=true] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container { +:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .term-glossary-image-container { bottom: 100%; top: auto; } -:root[data-compact-glossaries=true] .term-glossary-image-link { +:root[data-glossary-layout-mode=compact] .term-glossary-image-link { position: relative; display: inline-block; } -:root[data-compact-glossaries=true] .term-glossary-image-link:hover .term-glossary-image-container, -:root[data-compact-glossaries=true] .term-glossary-image-link:focus .term-glossary-image-container { +:root[data-glossary-layout-mode=compact] .term-glossary-image-link:hover .term-glossary-image-container, +:root[data-glossary-layout-mode=compact] .term-glossary-image-link:focus .term-glossary-image-container { display: block; } -:root:not([data-compact-glossaries=true]) .term-glossary-image-link-text { +:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-link-text { display: none; } -:root:not([data-compact-glossaries=true]) .term-glossary-image-description { +:root:not([data-glossary-layout-mode=compact]) .term-glossary-image-description { display: block; } diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css index d9024172..8c8f77e6 100644 --- a/ext/mixed/css/search.css +++ b/ext/mixed/css/search.css @@ -59,7 +59,7 @@ :root[data-loaded=true] { --animation-duration: 0.125s; } -:root[data-yomichan-theme=dark] { +:root[data-theme=dark] { --text-color-default: #d8d8d8; --background-color: #1e1e1e; --shadow-color: rgba(255, 255, 255, 0.185); diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 807f585a..085a3237 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -786,7 +786,7 @@ class Display extends EventDispatcher { const data = document.documentElement.dataset; data.ankiEnabled = `${options.anki.enable}`; data.audioEnabled = `${options.audio.enabled && options.audio.sources.length > 0}`; - data.compactGlossaries = `${options.general.compactGlossaries}`; + data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`; data.compactTags = `${options.general.compactTags}`; data.enableSearchTags = `${options.scanning.enableSearchTags}`; data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`; @@ -796,7 +796,7 @@ class Display extends EventDispatcher { } _updateTheme(themeName) { - document.documentElement.dataset.yomichanTheme = themeName; + document.documentElement.dataset.theme = themeName; } async _findDefinitions(isTerms, source, wildcardsEnabled, optionsContext) { @@ -1461,7 +1461,7 @@ class Display extends EventDispatcher { async _createNote(definition, mode, context, options, templates, injectMedia) { const { - general: {resultOutputMode, compactGlossaries, compactTags}, + general: {resultOutputMode, glossaryLayoutMode, compactTags}, anki: {tags, checkForDuplicates, duplicateScope, kanji, terms, screenshot: {format, quality}}, audio: {sources, customSourceUrl} } = options; @@ -1501,7 +1501,7 @@ class Display extends EventDispatcher { checkForDuplicates, duplicateScope, resultOutputMode, - compactGlossaries, + glossaryLayoutMode, compactTags, modeOptions }); diff --git a/test/test-options-util.js b/test/test-options-util.js index 378338c9..2e59c7ea 100644 --- a/test/test-options-util.js +++ b/test/test-options-util.js @@ -278,7 +278,7 @@ function createProfileOptionsUpdatedTestData1() { popupScaleRelativeToVisualViewport: true, showGuide: true, compactTags: false, - compactGlossaries: false, + glossaryLayoutMode: 'default', mainDictionary: '', popupTheme: 'default', popupOuterTheme: 'default',