From a8b1291f841073d874ab34f9dc91fbf04b8fd32f Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 18 May 2021 14:13:11 +0200 Subject: [PATCH 1/7] Use StickyBar in deckoptions --- ts/deckoptions/BUILD.bazel | 4 ++++ ts/deckoptions/ConfigSelector.svelte | 15 +++------------ ts/editor/BUILD.bazel | 1 + 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/ts/deckoptions/BUILD.bazel b/ts/deckoptions/BUILD.bazel index 3c813a92b..8040028d6 100644 --- a/ts/deckoptions/BUILD.bazel +++ b/ts/deckoptions/BUILD.bazel @@ -27,6 +27,7 @@ compile_svelte( srcs = svelte_files, deps = [ "//ts/sveltelib", + "//ts/components", "@npm//@types/bootstrap", "@npm//@types/marked", ], @@ -100,6 +101,8 @@ esbuild( ":base_css", "//ts/sveltelib", "@npm//marked", + "//ts/components", + "//ts/components:svelte_components", ] + svelte_names, ) @@ -132,6 +135,7 @@ svelte_check( "@npm//@types/bootstrap", "@npm//@types/lodash-es", "@npm//@types/marked", + "//ts/components:svelte_components", ], ) diff --git a/ts/deckoptions/ConfigSelector.svelte b/ts/deckoptions/ConfigSelector.svelte index c6fea0a0d..76e7d7d25 100644 --- a/ts/deckoptions/ConfigSelector.svelte +++ b/ts/deckoptions/ConfigSelector.svelte @@ -5,6 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -
+
{tr.actionsOptionsFor({ val: state.currentDeck.name })}
@@ -54,4 +45,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
+ diff --git a/ts/editor/BUILD.bazel b/ts/editor/BUILD.bazel index b3e440e53..2617271fe 100644 --- a/ts/editor/BUILD.bazel +++ b/ts/editor/BUILD.bazel @@ -153,6 +153,7 @@ prettier_test( name = "format_check", srcs = glob([ "*.ts", + "*.svelte", ]), ) From e5d11ac547e5f9817ef1b03965419d74e7582708 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 18 May 2021 16:32:29 +0200 Subject: [PATCH 2/7] WIP: Use our components in deckoptions sticky bar --- ts/components/ButtonDropdown.svelte | 2 +- ts/components/DropdownDivider.svelte | 5 +++ ts/components/DropdownMenu.svelte | 2 +- ts/components/LabelButton.svelte | 11 +++-- ts/components/SelectButton.svelte | 29 +++++-------- ts/components/SelectOption.svelte | 7 +-- ts/components/WithTheming.svelte | 4 +- ts/deckoptions/BUILD.bazel | 1 + ts/deckoptions/ConfigSelector.svelte | 51 +++++++++++++--------- ts/deckoptions/OptionsDropdown.svelte | 62 ++++++++++++--------------- ts/deckoptions/index.ts | 25 ++++++++--- ts/editor/TemplateButtons.svelte | 2 +- ts/editor/toolbar.ts | 6 +-- 13 files changed, 115 insertions(+), 92 deletions(-) create mode 100644 ts/components/DropdownDivider.svelte diff --git a/ts/components/ButtonDropdown.svelte b/ts/components/ButtonDropdown.svelte index c4512842f..530defa1a 100644 --- a/ts/components/ButtonDropdown.svelte +++ b/ts/components/ButtonDropdown.svelte @@ -9,7 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import WithTheming from "./WithTheming.svelte"; import ButtonToolbar from "./ButtonToolbar.svelte"; - export let id: string | undefined; + export let id: string; let className = ""; export { className as class }; diff --git a/ts/components/DropdownDivider.svelte b/ts/components/DropdownDivider.svelte new file mode 100644 index 000000000..7f3db50bf --- /dev/null +++ b/ts/components/DropdownDivider.svelte @@ -0,0 +1,5 @@ + +
diff --git a/ts/components/DropdownMenu.svelte b/ts/components/DropdownMenu.svelte index c988ff1dc..b3cc9e1b4 100644 --- a/ts/components/DropdownMenu.svelte +++ b/ts/components/DropdownMenu.svelte @@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import { setContext } from "svelte"; import { dropdownKey } from "./contextKeys"; - export let id: string | undefined; + export let id: string; setContext(dropdownKey, null); diff --git a/ts/components/LabelButton.svelte b/ts/components/LabelButton.svelte index b138dee12..1c89e5beb 100644 --- a/ts/components/LabelButton.svelte +++ b/ts/components/LabelButton.svelte @@ -11,6 +11,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let id: string | undefined = undefined; let className: string = ""; export { className as class }; + export let theme = "anki"; + + function extendClassName(className: string, theme: string): string { + return `btn ${theme !== "anki" ? `btn-${theme}` : ""}${className}`; + } export let tooltip: string | undefined = undefined; export let active = false; @@ -48,11 +53,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - - - + + + + + Add Config + Rename Config + Remove Config + + save(true)}> + Save to All Children + + + + + diff --git a/ts/deckoptions/index.ts b/ts/deckoptions/index.ts index 7af7871f0..52f0b1d19 100644 --- a/ts/deckoptions/index.ts +++ b/ts/deckoptions/index.ts @@ -10,20 +10,33 @@ import SpinBoxFloat from "./SpinBoxFloat.svelte"; import EnumSelector from "./EnumSelector.svelte"; import CheckBox from "./CheckBox.svelte"; +import { nightModeKey } from "components/contextKeys"; + export async function deckOptions( target: HTMLDivElement, deckId: number ): Promise { - checkNightMode(); - await setupI18n({ - modules: [ModuleName.SCHEDULING, ModuleName.ACTIONS, ModuleName.DECK_CONFIG], - }); - const info = await getDeckOptionsInfo(deckId); + const [info] = await Promise.all([ + getDeckOptionsInfo(deckId), + setupI18n({ + modules: [ + ModuleName.SCHEDULING, + ModuleName.ACTIONS, + ModuleName.DECK_CONFIG, + ], + }), + ]); + + const nightMode = checkNightMode(); + const context = new Map(); + context.set(nightModeKey, nightMode); + const state = new DeckOptionsState(deckId, info); return new DeckOptionsPage({ target, props: { state }, - }); + context, + } as any); } export const deckConfigComponents = { diff --git a/ts/editor/TemplateButtons.svelte b/ts/editor/TemplateButtons.svelte index 003cbfcb7..eb88d2473 100644 --- a/ts/editor/TemplateButtons.svelte +++ b/ts/editor/TemplateButtons.svelte @@ -62,7 +62,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - + {@html functionIcon} diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts index 4ad858d41..856d69014 100644 --- a/ts/editor/toolbar.ts +++ b/ts/editor/toolbar.ts @@ -20,7 +20,7 @@ export function initToolbar(i18n: Promise): Promise { toolbarResolve = resolve; }); - document.addEventListener("DOMContentLoaded", () => { + document.addEventListener("DOMContentLoaded", () => i18n.then(() => { const target = document.body; const anchor = document.getElementById("fields")!; @@ -33,8 +33,8 @@ export function initToolbar(i18n: Promise): Promise { ); toolbarResolve(new EditorToolbar({ target, anchor, context } as any)); - }); - }); + }) + ); return toolbarPromise; } From 94cdebe59c2de04ad09b0c95f9cc1818fbd91d69 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 18 May 2021 17:50:18 +0200 Subject: [PATCH 3/7] Make styling on select button behave correctly --- ts/components/SelectButton.svelte | 22 +++++++------ ts/sass/bootstrap-dark.scss | 23 -------------- ts/sass/button_mixins.scss | 51 ++++++++++++++++++------------- 3 files changed, 43 insertions(+), 53 deletions(-) diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte index b260f295d..5dca8013d 100644 --- a/ts/components/SelectButton.svelte +++ b/ts/components/SelectButton.svelte @@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html @@ -54,7 +56,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html bind:this={buttonRef} disabled={_disabled} {id} - class={` ${className}`} + class={className} + class:btn-day={!nightMode} + class:btn-night={nightMode} title={tooltip} on:change> diff --git a/ts/sass/bootstrap-dark.scss b/ts/sass/bootstrap-dark.scss index 48441617b..4d857ee5e 100644 --- a/ts/sass/bootstrap-dark.scss +++ b/ts/sass/bootstrap-dark.scss @@ -5,29 +5,6 @@ @use 'fusion_vars'; @mixin night-mode { - input, - select { - background-color: var(--frame-bg); - border-color: var(--border); - - &:focus { - background-color: var(--window-bg); - } - } - - .dropdown-menu { - background-color: var(--frame-bg); - - .dropdown-item { - color: var(--text-fg); - - &:hover, - &:active { - background-color: var(--window-bg); - } - } - } - .modal-content { background-color: var(--window-bg); color: var(--text-fg); diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss index 4720df764..15956c196 100644 --- a/ts/sass/button_mixins.scss +++ b/ts/sass/button_mixins.scss @@ -17,22 +17,26 @@ $btn-base-color-day: white; border-color: var(--medium-border) !important; } -@mixin btn-day($with-disabled: true, $with-margin: true) { +@mixin btn-day($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) { .btn-day { @include btn-day-base; @content ($btn-base-color-day); - &:hover { - background-color: darken($btn-base-color-day, 8%); + @if ($with-hover) { + &:hover { + background-color: darken($btn-base-color-day, 8%); + } } - &:active, - &.active { - @include impressed-shadow(0.25); - } + @if ($with-active) { + &:active, + &.active { + @include impressed-shadow(0.25); + } - &:active.active { - box-shadow: none; + &:active.active { + box-shadow: none; + } } @if ($with-disabled) { @@ -56,25 +60,30 @@ $btn-base-color-night: #666; border-color: $btn-base-color-night; } -@mixin btn-night($with-disabled: true, $with-margin: true) { +@mixin btn-night($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) { + .btn-night { @include btn-night-base; @content ($btn-base-color-night); - &:hover { - background-color: lighten($btn-base-color-night, 8%); - border-color: lighten($btn-base-color-night, 8%); + @if ($with-hover) { + &:hover { + background-color: lighten($btn-base-color-night, 8%); + border-color: lighten($btn-base-color-night, 8%); + } } - &:active, - &.active { - @include impressed-shadow(0.35); - border-color: darken($btn-base-color-night, 8%); - } + @if ($with-disabled) { + &:active, + &.active { + @include impressed-shadow(0.35); + border-color: darken($btn-base-color-night, 8%); + } - &:active.active { - box-shadow: none; - border-color: $btn-base-color-night; + &:active.active { + box-shadow: none; + border-color: $btn-base-color-night; + } } @if ($with-disabled) { From 32ca473fd493d5f8b113401c0a422a9c144d6581 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 18 May 2021 18:55:22 +0200 Subject: [PATCH 4/7] Make SaveButton functional --- ts/components/WithDropdownMenu.svelte | 9 +++++++-- ts/deckoptions/ConfigSelector.svelte | 4 ++-- ts/deckoptions/DeckOptionsPage.svelte | 4 ++-- .../{OptionsDropdown.svelte => SaveButton.svelte} | 4 ++-- ts/deckoptions/deckoptions-base.scss | 1 + ts/sass/button_mixins.scss | 15 ++++++++++++--- 6 files changed, 26 insertions(+), 11 deletions(-) rename ts/deckoptions/{OptionsDropdown.svelte => SaveButton.svelte} (94%) diff --git a/ts/components/WithDropdownMenu.svelte b/ts/components/WithDropdownMenu.svelte index b1b11e374..068942b2b 100644 --- a/ts/components/WithDropdownMenu.svelte +++ b/ts/components/WithDropdownMenu.svelte @@ -15,6 +15,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html }); const menuId = Math.random().toString(36).substring(2); + let dropdown: Dropdown; + + function activateDropdown(_event: MouseEvent): void { + dropdown.toggle(); + } /* Normally dropdown and trigger are associated with a /* common ancestor with .dropdown class */ @@ -31,7 +36,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html if (!menu) { console.log(`Could not find menu "${menuId}" for dropdown menu.`); } else { - const dropdown = new Dropdown(button); + dropdown = new Dropdown(button); /* Set custom menu without using common element with .dropdown */ (dropdown as any)._menu = menu; @@ -39,4 +44,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } - + diff --git a/ts/deckoptions/ConfigSelector.svelte b/ts/deckoptions/ConfigSelector.svelte index f32f90bfa..12c8d3e10 100644 --- a/ts/deckoptions/ConfigSelector.svelte +++ b/ts/deckoptions/ConfigSelector.svelte @@ -15,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import SelectButton from "components/SelectButton.svelte"; import SelectOption from "components/SelectOption.svelte"; - import OptionsDropdown from "./OptionsDropdown.svelte"; + import SaveButton from "./SaveButton.svelte"; export let state: DeckOptionsState; let configList = state.configList; @@ -52,7 +52,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - + diff --git a/ts/deckoptions/DeckOptionsPage.svelte b/ts/deckoptions/DeckOptionsPage.svelte index bacffa186..809c93bda 100644 --- a/ts/deckoptions/DeckOptionsPage.svelte +++ b/ts/deckoptions/DeckOptionsPage.svelte @@ -48,13 +48,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } + +
- -
diff --git a/ts/deckoptions/OptionsDropdown.svelte b/ts/deckoptions/SaveButton.svelte similarity index 94% rename from ts/deckoptions/OptionsDropdown.svelte rename to ts/deckoptions/SaveButton.svelte index bf0f9ff00..9bc6d1f31 100644 --- a/ts/deckoptions/OptionsDropdown.svelte +++ b/ts/deckoptions/SaveButton.svelte @@ -75,8 +75,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - - + + Add Config Rename Config diff --git a/ts/deckoptions/deckoptions-base.scss b/ts/deckoptions/deckoptions-base.scss index b178fba05..79bdada4b 100644 --- a/ts/deckoptions/deckoptions-base.scss +++ b/ts/deckoptions/deckoptions-base.scss @@ -1,3 +1,4 @@ +@use "ts/sass/vars"; @use "ts/sass/scrollbar"; @use "ts/sass/bootstrap-dark"; diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss index 15956c196..a4c62c956 100644 --- a/ts/sass/button_mixins.scss +++ b/ts/sass/button_mixins.scss @@ -17,7 +17,12 @@ $btn-base-color-day: white; border-color: var(--medium-border) !important; } -@mixin btn-day($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) { +@mixin btn-day( + $with-hover: true, + $with-active: true, + $with-disabled: true, + $with-margin: true +) { .btn-day { @include btn-day-base; @content ($btn-base-color-day); @@ -60,8 +65,12 @@ $btn-base-color-night: #666; border-color: $btn-base-color-night; } -@mixin btn-night($with-hover: true, $with-active: true, $with-disabled: true, $with-margin: true) { - +@mixin btn-night( + $with-hover: true, + $with-active: true, + $with-disabled: true, + $with-margin: true +) { .btn-night { @include btn-night-base; @content ($btn-base-color-night); From 2e13d3a21d2a8c84c6822464c79087d89a157969 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 18 May 2021 19:19:05 +0200 Subject: [PATCH 5/7] Make blur a proper event listener --- ts/deckoptions/ConfigSelector.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ts/deckoptions/ConfigSelector.svelte b/ts/deckoptions/ConfigSelector.svelte index 12c8d3e10..e3713569a 100644 --- a/ts/deckoptions/ConfigSelector.svelte +++ b/ts/deckoptions/ConfigSelector.svelte @@ -25,8 +25,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html return `${entry.name} (${count})`; } - function blur(this: HTMLSelectElement) { - state.setCurrentIndex(parseInt(this.value)); + function blur(event: Event): void { + state.setCurrentIndex(parseInt((event.target! as HTMLSelectElement).value)); } From efcf1976b523ba36f824c691d941f7a981fe2980 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 18 May 2021 19:21:25 +0200 Subject: [PATCH 6/7] Allow any in deckoptions/index until typing is provided --- ts/deckoptions/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ts/deckoptions/index.ts b/ts/deckoptions/index.ts index 52f0b1d19..fd622204f 100644 --- a/ts/deckoptions/index.ts +++ b/ts/deckoptions/index.ts @@ -1,6 +1,10 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html +/* eslint +@typescript-eslint/no-explicit-any: "off", + */ + import { getDeckOptionsInfo, DeckOptionsState } from "./lib"; import { setupI18n, ModuleName } from "lib/i18n"; import { checkNightMode } from "lib/nightmode"; From a13a9e3b4042ef31ad4099233c289122fddf3ca6 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Tue, 18 May 2021 19:30:43 +0200 Subject: [PATCH 7/7] Add back global CSS for input --- ts/sass/bootstrap-dark.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/ts/sass/bootstrap-dark.scss b/ts/sass/bootstrap-dark.scss index 4d857ee5e..e833e1888 100644 --- a/ts/sass/bootstrap-dark.scss +++ b/ts/sass/bootstrap-dark.scss @@ -5,6 +5,15 @@ @use 'fusion_vars'; @mixin night-mode { + input { + background-color: var(--frame-bg); + border-color: var(--border); + + &:focus { + background-color: var(--window-bg); + } + } + .modal-content { background-color: var(--window-bg); color: var(--text-fg);