GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-20 06:52:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Remove use of bootstrap-dark.night-mode for deckoptions

Browse source 
The CSS for the Switch component had a conflict regarding background color
Also generally it makes sense to put the CSS into the components
This commit is contained in:
Henrik Giesel 2021-06-21 21:16:40 +02:00
parent e8a6add60b
commit e5978d7ffe
7 changed files with 84 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ts/deckoptions/EnumSelector.svelte
View file

@ -12,15 +12,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const nightMode = getContext<boolean>(nightModeKey);
</script>
<select bind:value class:visible-down-arrow={nightMode} class="form-select">
<select
bind:value
class:nightMode
class:visible-down-arrow={nightMode}
class="form-select"
>
{#each choices as choice, idx}
<option value={idx}>{choice}</option>
{/each}
</select>
<style lang="scss">
@use "ts/sass/night-mode" as nightmode;
@use "ts/sass/button_mixins" as button;
.nightMode {
@include nightmode.input;
}
.visible-down-arrow {
/* override the default down arrow */
background-image: button.down-arrow(white);

14
ts/deckoptions/SpinBox.svelte
View file

@ -3,10 +3,15 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { getContext } from "svelte";
import { nightModeKey } from "components/contextKeys";
export let value: number;
export let min = 1;
export let max = 9999;
const nightMode = getContext<boolean>(nightModeKey);
function checkMinMax() {
if (value > max) {
value = max;
@ -24,5 +29,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{max}
bind:value
class="form-control"
class:nightMode
on:blur={checkMinMax}
/>
<style lang="scss">
@use "ts/sass/night-mode" as nightmode;
.nightMode {
@include nightmode.input;
}
</style>

14
ts/deckoptions/SpinBoxFloat.svelte
View file

@ -3,6 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { getContext } from "svelte";
import { nightModeKey } from "components/contextKeys";
export let value: number;
export let min = 1;
export let max = 9999;
@ -10,6 +13,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let stringValue: string;
$: stringValue = value.toFixed(2);
const nightMode = getContext<boolean>(nightModeKey);
function update(this: HTMLInputElement): void {
value = Math.min(max, Math.max(min, parseFloat(this.value)));
}
@ -20,9 +25,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
pattern="[0-9]*"
inputmode="decimal"
class="form-control"
class:nightMode
{min}
{max}
step="0.01"
value={stringValue}
on:blur={update}
/>
<style lang="scss">
@use "ts/sass/night-mode" as nightmode;
.nightMode {
@include nightmode.input;
}
</style>

20
ts/deckoptions/StepsInput.svelte
View file

@ -3,6 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { getContext } from "svelte";
import { nightModeKey } from "components/contextKeys";
import { stepsToString, stringToSteps } from "./steps";
export let value: number[];
@ -10,9 +12,25 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let stringValue: string;
$: stringValue = stepsToString(value);
const nightMode = getContext<boolean>(nightModeKey);
function update(this: HTMLInputElement): void {
value = stringToSteps(this.value);
}
</script>
<input type="text" value={stringValue} on:blur={update} class="form-control" />
<input
type="text"
value={stringValue}
class="form-control"
class:nightMode
on:blur={update}
/>
<style lang="scss">
@use "ts/sass/night-mode" as nightmode;
.nightMode {
@include nightmode.input;
}
</style>

18
ts/deckoptions/Switch.svelte
View file

@ -3,16 +3,22 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { getContext } from "svelte";
import { nightModeKey } from "components/contextKeys";
export let id: string | undefined;
export let value: boolean;
export let disabled = false;
const nightMode = getContext<boolean>(nightModeKey);
</script>
<div class="form-check form-switch">
<input
{id}
class="form-check-input"
type="checkbox"
class="form-check-input"
class:nightMode
bind:checked={value}
{disabled}
/>
@ -20,10 +26,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<style lang="scss">
.form-switch {
// bootstrap adds a default 2.5em left pad, which causes
// text to wrap prematurely
/* bootstrap adds a default 2.5em left pad, which causes */
/* text to wrap prematurely */
padding-left: 0.5em;
}
.form-check-input {
-webkit-appearance: none;
height: 1.6em;
@ -35,4 +42,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
margin-left: 1.5em;
}
}
.nightMode {
background-color: var(--frame-bg);
border-color: var(--border);
}
</style>

2
ts/deckoptions/deckoptions-base.scss
View file

@ -4,7 +4,6 @@ $tooltip-max-width: 300px;
@use "ts/sass/vars";
@use "ts/sass/scrollbar";
@use "ts/sass/bootstrap-dark";
@import "ts/sass/base";
@import "ts/sass/bootstrap/containers";
@ -22,7 +21,6 @@ $tooltip-max-width: 300px;
.night-mode {
@include scrollbar.night-mode;
@include bootstrap-dark.night-mode;
}
.form-control,

11
ts/sass/night-mode.scss Normal file
View file

@ -0,0 +1,11 @@
/* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
@mixin input {
background-color: var(--frame-bg);
border-color: var(--border);
&:focus {
background-color: var(--window-bg);
}
}