From 1b4ba1fb006a6e6dda7f19c797b204c43900df4a Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Thu, 31 Dec 2020 13:38:51 -0500
Subject: Simplify glossary layout setting (#1188)

* Add conditionalConvert transform

* Convert glossaryLayoutMode option to a toggle
---
 ext/bg/settings2.html | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

(limited to 'ext/bg/settings2.html')

diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index be6e01e1..07bcb6ca 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -611,16 +611,34 @@
                 </div>
             </div>
         </div>
-        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+        <div class="settings-item"><div class="settings-item-inner">
             <div class="settings-item-left">
-                <div class="settings-item-label">Glossary layout</div>
-                <div class="settings-item-description">Configure how term glossaries are displayed.</div>
+                <div class="settings-item-label">Compact glossaries</div>
+                <div class="settings-item-description">Display term glossaries using a more compact layout.</div>
             </div>
             <div class="settings-item-right">
-                <select data-setting="general.glossaryLayoutMode">
-                    <option value="default">Default</option>
-                    <option value="compact">Compact</option>
-                </select>
+                <label class="toggle"><input type="checkbox" data-setting="general.glossaryLayoutMode"
+                    data-transform='[
+                        {
+                            "step": "pre",
+                            "type": "conditionalConvert",
+                            "cases": [
+                                {"op": "===", "value": false, "result": "default"},
+                                {"op": "===", "value": true, "result": "compact"},
+                                {"default": true, "result": "default"}
+                            ]
+                        },
+                        {
+                            "step": "post",
+                            "type": "conditionalConvert",
+                            "cases": [
+                                {"op": "===", "value": "default", "result": false},
+                                {"op": "===", "value": "compact", "result": true},
+                                {"default": true, "result": false}
+                            ]
+                        }
+                    ]'
+                ><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
             </div>
         </div></div>
         <div class="settings-item"><div class="settings-item-inner">
-- 
cgit v1.2.3