From 23e6b2123e9ba59faf2c7174db178b6af701329b Mon Sep 17 00:00:00 2001 From: Matthias Metelka <62722460+kleinerpirat@users.noreply.github.com> Date: Tue, 27 Sep 2022 04:16:45 +0200 Subject: [PATCH] Redesign deck options inputs (#2082) * Create _input-mixins.scss * Use button-mixins on more elements * Replace - {#each $info.getOldNamesIncludingNothing(ctx) as name, idx} - + + {$info.getNewName(ctx, newIndex)} diff --git a/ts/change-notetype/NotetypeSelector.svelte b/ts/change-notetype/NotetypeSelector.svelte index 9dadfeb7e..69035b2cb 100644 --- a/ts/change-notetype/NotetypeSelector.svelte +++ b/ts/change-notetype/NotetypeSelector.svelte @@ -7,9 +7,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import ButtonGroup from "../components/ButtonGroup.svelte"; import ButtonToolbar from "../components/ButtonToolbar.svelte"; import LabelButton from "../components/LabelButton.svelte"; - import SelectButton from "../components/SelectButton.svelte"; + import Select from "../components/Select.svelte"; import SelectOption from "../components/SelectOption.svelte"; - import StickyContainer from "../components/StickyContainer.svelte"; import { arrowLeftIcon, arrowRightIcon } from "./icons"; import type { ChangeNotetypeState } from "./lib"; import SaveButton from "./SaveButton.svelte"; @@ -17,40 +16,30 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let state: ChangeNotetypeState; const notetypes = state.notetypes; const info = state.info; + let value: number = 0; - async function blur(event: Event): Promise { - await state.setTargetNotetypeIndex( - parseInt((event.target! as HTMLSelectElement).value), - ); - } + $: state.setTargetNotetypeIndex(value); + $: options = Array.from($notetypes, (notetype) => notetype.name); - - - - {$info.oldNotetypeName} - - - {#if window.getComputedStyle(document.body).direction == "rtl"} - {@html arrowLeftIcon} - {:else} - {@html arrowRightIcon} - {/if} - - - - {#each $notetypes as entry} - - {entry.name} - - {/each} - - + + + {$info.oldNotetypeName} + + + {#if window.getComputedStyle(document.body).direction == "rtl"} + {@html arrowLeftIcon} + {:else} + {@html arrowRightIcon} + {/if} + + + + - - - + + diff --git a/ts/change-notetype/SaveButton.svelte b/ts/change-notetype/SaveButton.svelte index d89a26a77..87c9e49fa 100644 --- a/ts/change-notetype/SaveButton.svelte +++ b/ts/change-notetype/SaveButton.svelte @@ -24,7 +24,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html elements -.night-mode select { - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); -} diff --git a/ts/components/BUILD.bazel b/ts/components/BUILD.bazel index fd34c73f6..1e47ed39f 100644 --- a/ts/components/BUILD.bazel +++ b/ts/components/BUILD.bazel @@ -11,6 +11,7 @@ _ts_deps = [ "@npm//@floating-ui/dom", "@npm//bootstrap", "@npm//svelte", + "@npm//@mdi", ] compile_svelte( diff --git a/ts/components/DropdownItem.svelte b/ts/components/DropdownItem.svelte index 66575de39..bd1e7b2dc 100644 --- a/ts/components/DropdownItem.svelte +++ b/ts/components/DropdownItem.svelte @@ -3,17 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> -
+
diff --git a/ts/components/Select.svelte b/ts/components/Select.svelte new file mode 100644 index 000000000..cfcee6df4 --- /dev/null +++ b/ts/components/Select.svelte @@ -0,0 +1,86 @@ + + + + (showFloating = false)} + let:asReference +> +
(hover = true)} + on:mouseleave={() => (hover = false)} + on:click={() => (showFloating = !showFloating)} + bind:this={element} + use:asReference + bind:clientWidth + > + {current} +
+ + {@html chevronDown} + +
+
+ + + + + + diff --git a/ts/components/SelectButton.svelte b/ts/components/SelectButton.svelte deleted file mode 100644 index c4a4635e3..000000000 --- a/ts/components/SelectButton.svelte +++ /dev/null @@ -1,82 +0,0 @@ - - - - - -
- - diff --git a/ts/components/SelectOption.svelte b/ts/components/SelectOption.svelte index c0112a78e..d3b50c907 100644 --- a/ts/components/SelectOption.svelte +++ b/ts/components/SelectOption.svelte @@ -3,16 +3,22 @@ Copyright: Ankitects Pty Ltd and contributors License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> - - - + diff --git a/ts/components/SpinBox.svelte b/ts/components/SpinBox.svelte new file mode 100644 index 000000000..52c483096 --- /dev/null +++ b/ts/components/SpinBox.svelte @@ -0,0 +1,135 @@ + + + +
+ + (focused = true)} + on:focusout={() => (focused = false)} + /> + +
+ + diff --git a/ts/components/StickyContainer.svelte b/ts/components/StickyContainer.svelte index 2f03bc170..058ccb8c2 100644 --- a/ts/components/StickyContainer.svelte +++ b/ts/components/StickyContainer.svelte @@ -27,7 +27,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html bottom: 0; left: 0; right: 0; - z-index: 50; + z-index: var(--z-index, 50); background: var(--sticky-bg, var(--canvas)); border-style: solid; diff --git a/ts/components/WithFloating.svelte b/ts/components/WithFloating.svelte index f0f6955a1..c0ab7ae12 100644 --- a/ts/components/WithFloating.svelte +++ b/ts/components/WithFloating.svelte @@ -61,6 +61,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let closeOnInsideClick = false; export let keepOnKeyup = false; + export let hideArrow = false; export let reference: ReferenceElement | undefined = undefined; let floating: FloatingElement; @@ -170,13 +171,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {/if} {/if} -
+
{#if show} {/if}
@@ -188,7 +191,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html border-radius: 5px; z-index: 890; - @include elevation.elevation(8); + &.show { + @include elevation.elevation(8); + } &-arrow { position: absolute; diff --git a/ts/components/WithOverlay.svelte b/ts/components/WithOverlay.svelte index 2cb82c536..1477425d7 100644 --- a/ts/components/WithOverlay.svelte +++ b/ts/components/WithOverlay.svelte @@ -140,7 +140,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {/if} {/if} -
+
{#if show} {/if} @@ -154,6 +154,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html border-radius: 5px; z-index: 40; - @include elevation.elevation(5); + &.show { + @include elevation.elevation(5); + } } diff --git a/ts/components/icons.ts b/ts/components/icons.ts new file mode 100644 index 000000000..66fb4539c --- /dev/null +++ b/ts/components/icons.ts @@ -0,0 +1,8 @@ +// Copyright: Ankitects Pty Ltd and contributors +// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html + +/// + +export { default as chevronDown } from "@mdi/svg/svg/chevron-down.svg"; +export { default as chevronLeft } from "@mdi/svg/svg/chevron-left.svg"; +export { default as chevronRight } from "@mdi/svg/svg/chevron-right.svg"; diff --git a/ts/deck-options/ConfigSelector.svelte b/ts/deck-options/ConfigSelector.svelte index 58484a684..2e60d719a 100644 --- a/ts/deck-options/ConfigSelector.svelte +++ b/ts/deck-options/ConfigSelector.svelte @@ -9,7 +9,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import ButtonGroup from "../components/ButtonGroup.svelte"; import ButtonToolbar from "../components/ButtonToolbar.svelte"; import { modalsKey } from "../components/context-keys"; - import SelectButton from "../components/SelectButton.svelte"; + import Select from "../components/Select.svelte"; import SelectOption from "../components/SelectOption.svelte"; import StickyContainer from "../components/StickyContainer.svelte"; import * as tr from "../lib/ftl"; @@ -23,16 +23,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html const dispatch = createEventDispatcher(); const dispatchPresetChange = () => dispatch("presetchange"); + $: { + state.setCurrentIndex(value); + dispatchPresetChange(); + } + + $: options = Array.from($configList, (entry) => configLabel(entry)); + $: value = $configList.find((entry) => entry.current)?.idx || 0; + function configLabel(entry: ConfigListEntry): string { const count = tr.deckConfigUsedByDecks({ decks: entry.useCount }); return `${entry.name} (${count})`; } - function blur(event: Event): void { - state.setCurrentIndex(parseInt((event.target! as HTMLSelectElement).value)); - dispatchPresetChange(); - } - function onAddConfig(text: string): void { const trimmed = text.trim(); if (trimmed.length) { @@ -93,18 +96,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - - {#each $configList as entry} - - {configLabel(entry)} + - + {#each options as option, idx} + (value = idx)} + >{option} {/each} - - - + diff --git a/ts/deck-options/EnumSelectorRow.svelte b/ts/deck-options/EnumSelectorRow.svelte index 2a8d76538..b57b0e2bd 100644 --- a/ts/deck-options/EnumSelectorRow.svelte +++ b/ts/deck-options/EnumSelectorRow.svelte @@ -23,7 +23,7 @@ - + diff --git a/ts/deck-options/RevertButton.svelte b/ts/deck-options/RevertButton.svelte index 4ff880f1b..966fb0b81 100644 --- a/ts/deck-options/RevertButton.svelte +++ b/ts/deck-options/RevertButton.svelte @@ -95,5 +95,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html .hide :global(.badge) { opacity: 0; + cursor: initial; } diff --git a/ts/deck-options/SaveButton.svelte b/ts/deck-options/SaveButton.svelte index 9f6235ff1..7165b1c31 100644 --- a/ts/deck-options/SaveButton.svelte +++ b/ts/deck-options/SaveButton.svelte @@ -5,11 +5,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - - save(false)} - tooltip={getPlatformString(saveKeyCombination)} - --border-left-radius="5px">{tr.deckConfigSaveButton()} - save(false)} /> + save(false)} + tooltip={getPlatformString(saveKeyCombination)} + --border-left-radius="var(--border-radius)" +> +
{tr.deckConfigSaveButton()}
+ + save(false)} /> - (showFloating = false)} + (showFloating = false)} +> + (showFloating = !showFloating)} + --border-right-radius="var(--border-radius)" + iconSize={80} > - (showFloating = !showFloating)} + {@html chevronDown} + + + dispatch("add")} + >{tr.deckConfigAddGroup()} - {@html chevronDown} - + dispatch("clone")} + >{tr.deckConfigCloneGroup()} + dispatch("rename")}> + {tr.deckConfigRenameGroup()} + + {tr.deckConfigRemoveGroup()} + + save(true)}> + {tr.deckConfigSaveToAllSubdecks()} + + + - - dispatch("add")} - >{tr.deckConfigAddGroup()} - dispatch("clone")} - >{tr.deckConfigCloneGroup()} - dispatch("rename")}> - {tr.deckConfigRenameGroup()} - - {tr.deckConfigRemoveGroup()} - - save(true)}> - {tr.deckConfigSaveToAllSubdecks()} - - - - + diff --git a/ts/deck-options/SpinBox.svelte b/ts/deck-options/SpinBox.svelte deleted file mode 100644 index c5b28ff91..000000000 --- a/ts/deck-options/SpinBox.svelte +++ /dev/null @@ -1,44 +0,0 @@ - - - - - - diff --git a/ts/deck-options/SpinBoxFloat.svelte b/ts/deck-options/SpinBoxFloat.svelte deleted file mode 100644 index 2a3d9cd3a..000000000 --- a/ts/deck-options/SpinBoxFloat.svelte +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - diff --git a/ts/deck-options/SpinBoxFloatRow.svelte b/ts/deck-options/SpinBoxFloatRow.svelte index d33cf79d8..a95db9ce8 100644 --- a/ts/deck-options/SpinBoxFloatRow.svelte +++ b/ts/deck-options/SpinBoxFloatRow.svelte @@ -5,8 +5,8 @@