mirror of
https://github.com/ankitects/anki.git
synced 2025-09-20 23:12:21 -04:00
allow checkboxes and select entries to take up whole line
This commit is contained in:
parent
5eb5664c12
commit
052c992093
8 changed files with 29 additions and 28 deletions
|
@ -4,16 +4,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
-->
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import ConfigEntry from "./ConfigEntry.svelte";
|
import ConfigEntry from "./ConfigEntry.svelte";
|
||||||
|
|
||||||
export let label: string;
|
|
||||||
export let subLabel: string;
|
export let subLabel: string;
|
||||||
export let value: boolean;
|
export let value: boolean;
|
||||||
export let defaultValue: boolean;
|
export let defaultValue: boolean;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<ConfigEntry label="" wholeLine={true} bind:value {defaultValue}>
|
||||||
</style>
|
<div>
|
||||||
|
|
||||||
<ConfigEntry {label} bind:value {defaultValue}>
|
|
||||||
<label> <input type="checkbox" bind:checked={value} /> {subLabel} </label>
|
<label> <input type="checkbox" bind:checked={value} /> {subLabel} </label>
|
||||||
|
</div>
|
||||||
</ConfigEntry>
|
</ConfigEntry>
|
||||||
|
|
|
@ -12,19 +12,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
export let defaultValue: any;
|
export let defaultValue: any;
|
||||||
/// empty strings will be ignored
|
/// empty strings will be ignored
|
||||||
export let warnings: string[] = [];
|
export let warnings: string[] = [];
|
||||||
|
export let wholeLine = false;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.outer {
|
.outer {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 2fr 1fr;
|
||||||
grid-column-gap: 0.5em;
|
grid-column-gap: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.full-grid-width {
|
.full-grid-width {
|
||||||
grid-row-start: 2;
|
|
||||||
grid-column: 1 / 3;
|
grid-column: 1 / 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -43,14 +42,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-grid {
|
.input-grid {
|
||||||
// width: 90vw;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-column-gap: 0.5em;
|
grid-column-gap: 0.5em;
|
||||||
grid-template-columns: 10fr 1fr;
|
grid-template-columns: 10fr 16px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="outer">
|
<div class="outer">
|
||||||
|
{#if label}
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<span class="vcenter">
|
<span class="vcenter">
|
||||||
{label}
|
{label}
|
||||||
|
@ -59,8 +58,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="input-grid">
|
<div class="input-grid" class:full-grid-width={wholeLine}>
|
||||||
<slot />
|
<slot />
|
||||||
<RevertIcon bind:value {defaultValue} on:revert />
|
<RevertIcon bind:value {defaultValue} on:revert />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -12,7 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
export let defaultValue: number;
|
export let defaultValue: number;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ConfigEntry {label} {subLabel} bind:value {defaultValue}>
|
<ConfigEntry {label} {subLabel} wholeLine={true} bind:value {defaultValue}>
|
||||||
<select bind:value class="form-select">
|
<select bind:value class="form-select">
|
||||||
{#each choices as choice, idx}
|
{#each choices as choice, idx}
|
||||||
<option value={idx}>{choice}</option>
|
<option value={idx}>{choice}</option>
|
||||||
|
|
|
@ -25,19 +25,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
bind:value={$config.capAnswerTimeToSecs} />
|
bind:value={$config.capAnswerTimeToSecs} />
|
||||||
|
|
||||||
<CheckBox
|
<CheckBox
|
||||||
label="Answer timer"
|
|
||||||
subLabel={tr.schedulingShowAnswerTimer()}
|
subLabel={tr.schedulingShowAnswerTimer()}
|
||||||
defaultValue={defaults.showTimer}
|
defaultValue={defaults.showTimer}
|
||||||
bind:value={$config.showTimer} />
|
bind:value={$config.showTimer} />
|
||||||
|
|
||||||
<CheckBox
|
<CheckBox
|
||||||
label="Autoplay"
|
|
||||||
subLabel="Don't play audio automatically"
|
subLabel="Don't play audio automatically"
|
||||||
defaultValue={defaults.disableAutoplay}
|
defaultValue={defaults.disableAutoplay}
|
||||||
bind:value={$config.disableAutoplay} />
|
bind:value={$config.disableAutoplay} />
|
||||||
|
|
||||||
<CheckBox
|
<CheckBox
|
||||||
label="Question Audio"
|
|
||||||
subLabel={tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
|
subLabel={tr.schedulingAlwaysIncludeQuestionSideWhenReplaying()}
|
||||||
defaultValue={defaults.skipQuestionWhenReplayingAnswer}
|
defaultValue={defaults.skipQuestionWhenReplayingAnswer}
|
||||||
bind:value={$config.skipQuestionWhenReplayingAnswer} />
|
bind:value={$config.skipQuestionWhenReplayingAnswer} />
|
||||||
|
|
|
@ -12,7 +12,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||||
let ref: HTMLAnchorElement;
|
let ref: HTMLAnchorElement;
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
new Tooltip(ref, { placement: "bottom", html: true, offset: [0, 20] });
|
new Tooltip(ref, {
|
||||||
|
placement: "bottom",
|
||||||
|
html: true,
|
||||||
|
offset: [0, 20],
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -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)} />
|
on:changed={(evt) => ($config.initialEase = evt.detail.value)} />
|
||||||
|
|
||||||
<CheckBox
|
<CheckBox
|
||||||
label="Bury New"
|
|
||||||
subLabel={tr.schedulingBuryRelatedNewCardsUntilThe()}
|
subLabel={tr.schedulingBuryRelatedNewCardsUntilThe()}
|
||||||
defaultValue={defaults.buryNew}
|
defaultValue={defaults.buryNew}
|
||||||
bind:value={$config.buryNew} />
|
bind:value={$config.buryNew} />
|
||||||
|
|
|
@ -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)} />
|
on:changed={(evt) => ($config.hardMultiplier = evt.detail.value)} />
|
||||||
|
|
||||||
<CheckBox
|
<CheckBox
|
||||||
label="Bury Reviews"
|
|
||||||
subLabel={tr.schedulingBuryRelatedReviewsUntilTheNext()}
|
subLabel={tr.schedulingBuryRelatedReviewsUntilTheNext()}
|
||||||
defaultValue={defaults.buryReviews}
|
defaultValue={defaults.buryReviews}
|
||||||
bind:value={$config.buryReviews} />
|
bind:value={$config.buryReviews} />
|
||||||
|
|
|
@ -31,3 +31,8 @@ html {
|
||||||
#main {
|
#main {
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tooltip-inner {
|
||||||
|
max-width: 300px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue