Implement Switch and SwitchRow

ts/deckoptions/AudioOptions.svelte

@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
     import Item from "components/Item.svelte";
-    import CheckBoxRow from "./CheckBoxRow.svelte";
+    import SwitchRow from "./SwitchRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -18,21 +18,21 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <TitledContainer title={tr.deckConfigAudioTitle()} {api}>
     <Item>
-        <CheckBoxRow
+        <SwitchRow
             bind:value={$config.disableAutoplay}
             defaultValue={defaults.disableAutoplay}
         >
             {tr.deckConfigDisableAutoplay()}
-        </CheckBoxRow>
+        </SwitchRow>
     </Item>
 
     <Item>
-        <CheckBoxRow
+        <SwitchRow
             bind:value={$config.skipQuestionWhenReplayingAnswer}
             defaultValue={defaults.skipQuestionWhenReplayingAnswer}
             markdownTooltip={tr.deckConfigAlwaysIncludeQuestionAudioTooltip()}
         >
             {tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
-        </CheckBoxRow>
+        </SwitchRow>
     </Item>
 </TitledContainer>

ts/deckoptions/BuryOptions.svelte

@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
     import Item from "components/Item.svelte";
-    import CheckBoxRow from "./CheckBoxRow.svelte";
+    import SwitchRow from "./SwitchRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -18,22 +18,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <TitledContainer title={tr.deckConfigBuryTitle()} {api}>
     <Item>
-        <CheckBoxRow
+        <SwitchRow
             bind:value={$config.buryNew}
             defaultValue={defaults.buryNew}
             markdownTooltip={tr.deckConfigBuryTooltip()}
         >
             {tr.deckConfigBuryNewSiblings()}
-        </CheckBoxRow>
+        </SwitchRow>
     </Item>
 
     <Item>
-        <CheckBoxRow
+        <SwitchRow
             bind:value={$config.buryReviews}
             defaultValue={defaults.buryReviews}
             markdownTooltip={tr.deckConfigBuryTooltip()}
         >
             {tr.deckConfigBuryReviewSiblings()}
-        </CheckBoxRow>
+        </SwitchRow>
     </Item>
 </TitledContainer>

ts/deckoptions/Switch.svelte

@@ -0,0 +1,26 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    export let value: boolean;
+    export let disabled = false;
+</script>
+
+<div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" bind:checked={value} {disabled} />
+</div>
+
+<style lang="scss">
+    .form-check-input {
+        -webkit-appearance: none;
+        height: 1.6em;
+        /* otherwise the switch circle shows slightly off-centered */
+        margin-top: 0;
+
+        .form-switch & {
+            width: 3em;
+            margin-left: 1.5em;
+        }
+    }
+</style>

ts/deckoptions/SwitchRow.svelte

@@ -0,0 +1,27 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
+    import Label from "./Label.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
+    import Switch from "./Switch.svelte";
+    import RevertButton from "./RevertButton.svelte";
+
+    export let value: boolean;
+    export let defaultValue: boolean;
+    export let markdownTooltip: string | undefined = undefined;
+</script>
+
+<Row>
+    <Col>
+        {#if markdownTooltip}<TooltipLabel {markdownTooltip}><slot /></TooltipLabel
+            >{:else}<Label><slot /></Label>{/if}
+    </Col>
+    <Col grow={false}>
+        <Switch bind:value />
+        <RevertButton bind:value {defaultValue} />
+    </Col>
+</Row>

ts/deckoptions/TimerOptions.svelte

@@ -7,7 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import TitledContainer from "./TitledContainer.svelte";
     import Item from "components/Item.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
-    import CheckBoxRow from "./CheckBoxRow.svelte";
+    import SwitchRow from "./SwitchRow.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -31,12 +31,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     </Item>
 
     <Item>
-        <CheckBoxRow
+        <SwitchRow
             bind:value={$config.showTimer}
             defaultValue={defaults.showTimer}
             markdownTooltip={tr.deckConfigShowAnswerTimerTooltip()}
         >
             {tr.schedulingShowAnswerTimer()}
-        </CheckBoxRow>
+        </SwitchRow>
     </Item>
 </TitledContainer>