From 00cdb2121d7e7f06dc9b9808e867b69b6a36188c Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Wed, 19 Jun 2024 23:04:09 +0600 Subject: [PATCH] web: data-driven switcher & save mode switcher also: - disabled ssr to enable localstorage - removed the workaround for hover, as it looks bad --- .../components/buttons/ActionButton.svelte | 9 +----- .../buttons/SettingsContextButton.svelte | 32 +++++++++++++++++++ web/src/components/buttons/Switcher.svelte | 9 ++---- web/src/components/save/Omnibox.svelte | 17 +++++----- web/src/lib/settings.ts | 2 +- web/src/routes/+layout.svelte | 6 +++- web/src/routes/+layout.ts | 1 + 7 files changed, 52 insertions(+), 24 deletions(-) create mode 100644 web/src/components/buttons/SettingsContextButton.svelte diff --git a/web/src/components/buttons/ActionButton.svelte b/web/src/components/buttons/ActionButton.svelte index 022e6784..3c2a4433 100644 --- a/web/src/components/buttons/ActionButton.svelte +++ b/web/src/components/buttons/ActionButton.svelte @@ -3,13 +3,6 @@ export let click = () => { alert('no function assigned') }; </script> -<button id={id} class="button" on:click={click}> +<button id="button-{id}" class="button" on:click={click}> <slot></slot> </button> - -<style> - :global(.button.selected) { - background: var(--secondary); - color: var(--primary); - } -</style> diff --git a/web/src/components/buttons/SettingsContextButton.svelte b/web/src/components/buttons/SettingsContextButton.svelte new file mode 100644 index 00000000..a0a29e12 --- /dev/null +++ b/web/src/components/buttons/SettingsContextButton.svelte @@ -0,0 +1,32 @@ +<script + lang="ts" + generics=" + Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>, + Id extends keyof CobaltSettings[Context], + Key extends CobaltSettings[Context][Id] + " +> + import settings, { updateSetting } from "$lib/settings"; + import type { CobaltSettings } from "$lib/types/settings"; + + export let settingContext: Context; + export let settingId: Id; + export let settingKey: Key; + + $: setting = $settings[settingContext][settingId]; + $: isSelected = setting === settingKey; +</script> + +<button + id="setting-button-{settingContext}-{String(settingId)}-{settingKey}" + class="button" + class:selected={isSelected} + on:click={() => + updateSetting({ + [settingContext]: { + [settingId]: settingKey, + }, + })} +> + <slot></slot> +</button> diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte index 06e794a5..afcfeba3 100644 --- a/web/src/components/buttons/Switcher.svelte +++ b/web/src/components/buttons/Switcher.svelte @@ -1,8 +1,4 @@ -<script lang="ts"> - export let settingId: string; -</script> - -<div id="switcher-{settingId}" class="switcher"> +<div id="switcher-container" class="switcher"> <slot></slot> </div> @@ -31,7 +27,8 @@ border-radius: 0; } + /* clumsy hack to get rid of double border in a list of switches */ .switcher > :global(:not(.button:first-child)) { - margin-left: -1.5px; /* hack to get rid of double border in a list of switches */ + margin-left: -1.5px; } </style> diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte index 8cebdcad..5686764d 100644 --- a/web/src/components/save/Omnibox.svelte +++ b/web/src/components/save/Omnibox.svelte @@ -12,6 +12,7 @@ import IconMute from "$lib/icons/Mute.svelte"; import IconClipboard from "$lib/icons/Clipboard.svelte"; + import SettingsContextButton from "../buttons/SettingsContextButton.svelte"; let link: string = ""; let isFocused = false; @@ -66,18 +67,18 @@ </div> <div id="action-container"> - <Switcher settingId="save-downloadMode"> - <ActionButton id="auto-mode-button"> + <Switcher> + <SettingsContextButton settingContext="save" settingId="downloadMode" settingKey="auto"> <IconSparkles /> auto - </ActionButton> - <ActionButton id="audio-mode-button"> + </SettingsContextButton> + <SettingsContextButton settingContext="save" settingId="downloadMode" settingKey="audio"> <IconMusic /> audio - </ActionButton> - <ActionButton id="mute-mode-button"> + </SettingsContextButton> + <SettingsContextButton settingContext="save" settingId="downloadMode" settingKey="mute"> <IconMute /> mute - </ActionButton> + </SettingsContextButton> </Switcher> - <ActionButton id="paste-button" click={pasteClipboard}> + <ActionButton id="paste" click={pasteClipboard}> <IconClipboard /> <span id="paste-desktop-text">paste</span> <span id="paste-mobile-text">paste and download</span> diff --git a/web/src/lib/settings.ts b/web/src/lib/settings.ts index cdbf607b..f005ced4 100644 --- a/web/src/lib/settings.ts +++ b/web/src/lib/settings.ts @@ -18,7 +18,7 @@ const writeToStorage = (settings: CobaltSettings) => { const loadFromStorage = () => { const settings = localStorage.getItem('settings'); if (!settings) { - return writeToStorage(defaultSettings); + return defaultSettings; } return JSON.parse(settings) as CobaltSettings; diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index 7d6ca8a0..34f362b1 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -133,10 +133,14 @@ transform: scale(0.95); } + :global(.button.selected) { + background: var(--secondary); + color: var(--primary); + } + @media (hover: hover) { :global(button:hover) { background-color: var(--button-hover); - z-index: 1; } } diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts index 189f71e2..ceccaaf6 100644 --- a/web/src/routes/+layout.ts +++ b/web/src/routes/+layout.ts @@ -1 +1,2 @@ export const prerender = true; +export const ssr = false;