From 052c992093d990eb8ab7528ed4e055434a5e5616 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Thu, 22 Apr 2021 16:47:10 +1000
Subject: [PATCH] allow checkboxes and select entries to take up whole line

---
 ts/deckconfig/CheckBox.svelte       | 11 ++++-------
 ts/deckconfig/ConfigEntry.svelte    | 28 ++++++++++++++--------------
 ts/deckconfig/EnumSelector.svelte   |  2 +-
 ts/deckconfig/GeneralOptions.svelte |  3 ---
 ts/deckconfig/HelpPopup.svelte      |  6 +++++-
 ts/deckconfig/NewOptions.svelte     |  1 -
 ts/deckconfig/ReviewOptions.svelte  |  1 -
 ts/deckconfig/deckconfig-base.scss  |  5 +++++
 8 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/ts/deckconfig/CheckBox.svelte b/ts/deckconfig/CheckBox.svelte
index 9cb0269b9..c4e6638af 100644
--- a/ts/deckconfig/CheckBox.svelte
+++ b/ts/deckconfig/CheckBox.svelte
@@ -4,16 +4,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import ConfigEntry from "./ConfigEntry.svelte";
-
-    export let label: string;
     export let subLabel: string;
     export let value: boolean;
     export let defaultValue: boolean;
 </script>
 
-<style>
-</style>
-
-<ConfigEntry {label} bind:value {defaultValue}>
-    <label> <input type="checkbox" bind:checked={value} /> {subLabel} </label>
+<ConfigEntry label="" wholeLine={true} bind:value {defaultValue}>
+    <div>
+        <label> <input type="checkbox" bind:checked={value} /> {subLabel} </label>
+    </div>
 </ConfigEntry>
diff --git a/ts/deckconfig/ConfigEntry.svelte b/ts/deckconfig/ConfigEntry.svelte
index 623cd32a7..17dc2a3a1 100644
--- a/ts/deckconfig/ConfigEntry.svelte
+++ b/ts/deckconfig/ConfigEntry.svelte
@@ -12,19 +12,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let defaultValue: any;
     /// empty strings will be ignored
     export let warnings: string[] = [];
+    export let wholeLine = false;
 </script>
 
 <style lang="scss">
     .outer {
         margin-top: 1em;
-
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 2fr 1fr;
         grid-column-gap: 0.5em;
     }
 
     .full-grid-width {
-        grid-row-start: 2;
         grid-column: 1 / 3;
     }
 
@@ -43,24 +42,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     .input-grid {
-        // width: 90vw;
         display: grid;
         grid-column-gap: 0.5em;
-        grid-template-columns: 10fr 1fr;
+        grid-template-columns: 10fr 16px;
     }
 </style>
 
 <div class="outer">
-    <div class="table">
-        <span class="vcenter">
-            {label}
-            {#if subLabel}
-                <HelpPopup html={subLabel} />
-            {/if}
-        </span>
-    </div>
+    {#if label}
+        <div class="table">
+            <span class="vcenter">
+                {label}
+                {#if subLabel}
+                    <HelpPopup html={subLabel} />
+                {/if}
+            </span>
+        </div>
+    {/if}
 
-    <div class="input-grid">
+    <div class="input-grid" class:full-grid-width={wholeLine}>
         <slot />
         <RevertIcon bind:value {defaultValue} on:revert />
     </div>
diff --git a/ts/deckconfig/EnumSelector.svelte b/ts/deckconfig/EnumSelector.svelte
index aa26f5879..abe5706d4 100644
--- a/ts/deckconfig/EnumSelector.svelte
+++ b/ts/deckconfig/EnumSelector.svelte
@@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let defaultValue: number;
 </script>
 
-<ConfigEntry {label} {subLabel} bind:value {defaultValue}>
+<ConfigEntry {label} {subLabel} wholeLine={true} bind:value {defaultValue}>
     <select bind:value class="form-select">
         {#each choices as choice, idx}
             <option value={idx}>{choice}</option>
diff --git a/ts/deckconfig/GeneralOptions.svelte b/ts/deckconfig/GeneralOptions.svelte
index 070c1fcd7..fe6e5ca23 100644
--- a/ts/deckconfig/GeneralOptions.svelte
+++ b/ts/deckconfig/GeneralOptions.svelte
@@ -25,19 +25,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         bind:value={$config.capAnswerTimeToSecs} />
 
     <CheckBox
-        label="Answer timer"
         subLabel={tr.schedulingShowAnswerTimer()}
         defaultValue={defaults.showTimer}
         bind:value={$config.showTimer} />
 
     <CheckBox
-        label="Autoplay"
         subLabel="Don't play audio automatically"
         defaultValue={defaults.disableAutoplay}
         bind:value={$config.disableAutoplay} />
 
     <CheckBox
-        label="Question Audio"
         subLabel={tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
         defaultValue={defaults.skipQuestionWhenReplayingAnswer}
         bind:value={$config.skipQuestionWhenReplayingAnswer} />
diff --git a/ts/deckconfig/HelpPopup.svelte b/ts/deckconfig/HelpPopup.svelte
index 5647b4b7e..5ef6b95dc 100644
--- a/ts/deckconfig/HelpPopup.svelte
+++ b/ts/deckconfig/HelpPopup.svelte
@@ -12,7 +12,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let ref: HTMLAnchorElement;
 
     onMount(() => {
-        new Tooltip(ref, { placement: "bottom", html: true, offset: [0, 20] });
+        new Tooltip(ref, {
+            placement: "bottom",
+            html: true,
+            offset: [0, 20],
+        });
     });
 </script>
 
diff --git a/ts/deckconfig/NewOptions.svelte b/ts/deckconfig/NewOptions.svelte
index cfe380b74..1e77c980a 100644
--- a/ts/deckconfig/NewOptions.svelte
+++ b/ts/deckconfig/NewOptions.svelte
@@ -78,7 +78,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:changed={(evt) => ($config.initialEase = evt.detail.value)} />
 
     <CheckBox
-        label="Bury New"
         subLabel={tr.schedulingBuryRelatedNewCardsUntilThe()}
         defaultValue={defaults.buryNew}
         bind:value={$config.buryNew} />
diff --git a/ts/deckconfig/ReviewOptions.svelte b/ts/deckconfig/ReviewOptions.svelte
index 854cb295e..2f362a74e 100644
--- a/ts/deckconfig/ReviewOptions.svelte
+++ b/ts/deckconfig/ReviewOptions.svelte
@@ -53,7 +53,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)} />
 
     <CheckBox
-        label="Bury Reviews"
         subLabel={tr.schedulingBuryRelatedReviewsUntilTheNext()}
         defaultValue={defaults.buryReviews}
         bind:value={$config.buryReviews} />
diff --git a/ts/deckconfig/deckconfig-base.scss b/ts/deckconfig/deckconfig-base.scss
index c8d58cf78..446b6f97d 100644
--- a/ts/deckconfig/deckconfig-base.scss
+++ b/ts/deckconfig/deckconfig-base.scss
@@ -31,3 +31,8 @@ html {
 #main {
     padding: 0.5em;
 }
+
+.tooltip-inner {
+    max-width: 300px;
+    text-align: left;
+}