Popup style updates (#1066)

* Replace compactGlossaries option with new glossaryLayoutMode option * Update attributes * Update attributes * Update color definitions * Fix default theme scrollbar
2020-11-25 23:22:05 -05:00 · 2020-11-25 23:22:05 -05:00 · 92e9f69c80
commit 92e9f69c80
parent c6c4631817
13 changed files with 84 additions and 63 deletions
--- 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"
--- 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
        };
--- 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);
--- 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},
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-yomichan-page="search">
+<html lang="en" data-page-type="popup">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@ -144,10 +144,6 @@
                    <label><input type="checkbox" id="compact-tags" data-setting="general.compactTags"> Compact tags</label>
                </div>

-                <div class="checkbox">
-                    <label><input type="checkbox" id="compact-glossaries" data-setting="general.compactGlossaries"> Compact glossaries</label>
-                </div>
-
                <div class="checkbox">
                    <label><input type="checkbox" id="show-advanced-options" data-setting="general.showAdvanced" data-transform-pre="setDocumentAttribute" data-transform-post="setDocumentAttribute" data-document-attribute="data-options-general-show-advanced"> Show advanced options</label>
                </div>
@ -205,14 +201,6 @@
                    </select>
                </div>

-                <div class="form-group">
-                    <label for="popup-display-mode">Popup display mode</label>
-                    <select class="form-control" id="popup-display-mode" data-setting="general.popupDisplayMode">
-                        <option value="default">Default</option>
-                        <option value="full-width">Full width</option>
-                    </select>
-                </div>
-
                <div class="form-group">
                    <label for="popup-scaling-factor">Popup size multiplier</label>
                    <input type="number" min="0" id="popup-scaling-factor" data-setting="general.popupScalingFactor" class="form-control">
@ -284,6 +272,25 @@
                    </div>
                </div>

+                <div class="form-group">
+                    <div class="row">
+                        <div class="col-xs-6">
+                            <label for="popup-display-mode">Popup display mode</label>
+                            <select class="form-control" id="popup-display-mode" data-setting="general.popupDisplayMode">
+                                <option value="default">Default</option>
+                                <option value="full-width">Full width</option>
+                            </select>
+                        </div>
+                        <div class="col-xs-6">
+                            <label for="glossary-layout-mode">Glossary layout mode</label>
+                            <select class="form-control" id="glossary-layout-mode" data-setting="general.glossaryLayoutMode">
+                                <option value="default">Default</option>
+                                <option value="compact">Compact</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-6">
--- 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);
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-yomichan-page="float">
+<html lang="en" data-page-type="popup">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
--- 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) {
--- 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;
 }

--- 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);
--- 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
        });
--- 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',