Popup style updates (#1066)

* Replace compactGlossaries option with new glossaryLayoutMode option

* Update attributes

* Update attributes

* Update color definitions

* Fix default theme scrollbar

3 files changed, 10 insertions, 6 deletions

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},