GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-24 08:46:37 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Implement Switch and SwitchRow

Browse source
This commit is contained in:
Henrik Giesel 2021-06-12 10:25:11 +02:00
parent 9a00ef5a81
commit 728e2e682b
5 changed files with 66 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
ts/deckoptions/AudioOptions.svelte
View file

@ -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>

10
ts/deckoptions/BuryOptions.svelte
View file

@ -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>

26
ts/deckoptions/Switch.svelte Normal file
View file

@ -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>

27
ts/deckoptions/SwitchRow.svelte Normal file
View file

@ -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>

6
ts/deckoptions/TimerOptions.svelte
View file

@ -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>