Popup style updates (#1066)

* Replace compactGlossaries option with new glossaryLayoutMode option

* Update attributes

* Update attributes

* Update color definitions

* Fix default theme scrollbar

6 files changed, 35 insertions, 23 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 @@
 <!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">
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
@@ -145,10 +145,6 @@
                 </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>
 
@@ -206,14 +202,6 @@
                 </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">
                 </div>
@@ -287,6 +275,25 @@
                 <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">
                             <label for="popup-theme">Popup theme</label>
                             <select class="form-control" id="popup-theme" data-setting="general.popupTheme">
                                 <option value="default">Light</option>