allow checkboxes and select entries to take up whole line

This commit is contained in:
Damien Elmes 2021-04-22 16:47:10 +10:00
parent 5eb5664c12
commit 052c992093
8 changed files with 29 additions and 28 deletions

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -31,3 +31,8 @@ html {
#main { #main {
padding: 0.5em; padding: 0.5em;
} }
.tooltip-inner {
max-width: 300px;
text-align: left;
}