diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-09-20 09:24:27 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-09-20 09:24:27 +0200 |
| commit | a9072370ca1eb9a5cce928b1d487db0f307edea6 (patch) | |
| tree | 59c3c23df930a8b5f888dc7813923abf4ceefed4 /old-apps/web-shared/src/components/blowout-toolbelt.svelte | |
| parent | 56fa963a1d63cbe0bf28e29e717cceaa417c45c1 (diff) | |
| download | greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.tar.xz greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.zip | |
feat: Move old apps into it's own directory
Diffstat (limited to 'old-apps/web-shared/src/components/blowout-toolbelt.svelte')
| -rw-r--r-- | old-apps/web-shared/src/components/blowout-toolbelt.svelte | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/old-apps/web-shared/src/components/blowout-toolbelt.svelte b/old-apps/web-shared/src/components/blowout-toolbelt.svelte new file mode 100644 index 0000000..b83048c --- /dev/null +++ b/old-apps/web-shared/src/components/blowout-toolbelt.svelte @@ -0,0 +1,70 @@ +<script> + import { onMount } from "svelte"; + import ThemeSwitcher from "./theme-switcher.svelte"; + import ThemeSwitcherIcon from "./theme-switcher-icon.svelte"; + import LocaleSwitcher from "./locale-switcher.svelte"; + import LocaleSwitcherIcon from "./locale-switcher-icon.svelte"; + import { ChevronsRightIcon, ChevronsLeftIcon } from "svelte-feather-icons"; + + let expanded = false; + const localeSwitcher = { + show: false, + selection: "preffered" + }; + + const themeSwitcher = { + show: false, + selection: "system" + }; + + onMount(() => { + document.addEventListener("keydown", (e) => { + if (e.code === "Escape") { + expanded = false; + } + }); + document.addEventListener("click", (e) => { + if (e.target.closest("[data-blowout-toolbelt-element]") === null) { + expanded = false; + } + }); + }); +</script> +<style> + .blowout { + right: -80px; + } + + .expanded { + right: 0 !important; + } +</style> +<aside class="blowout position-fixed bg-light inner-glow shadow-xs padding-xxs bottom-50% right-0 z-index-popover {expanded ? 'expanded' : ''}" data-blowout-toolbelt-element> + <LocaleSwitcher bind:show="{localeSwitcher.show}" + glow="{false}" + data-blowout-toolbelt-element + bind:selection="{localeSwitcher.selection}"/> + <ThemeSwitcher bind:show="{themeSwitcher.show}" + glow="{false}" + data-blowout-toolbelt-element + bind:selection="{themeSwitcher.selection}"/> + <div class="flex flex-row gap-sm justify-end"> + {#if !expanded} + <div class="flex ld-switch-btn" + data-blowout-toolbelt-element + on:click={() => expanded = true}> + <ChevronsLeftIcon/> + </div> + {:else} + <div class="flex ld-switch-btn" + data-blowout-toolbelt-element + on:click={() => expanded = false}> + <ChevronsRightIcon/> + </div> + {/if} + <LocaleSwitcherIcon bind:show="{localeSwitcher.show}" + bind:selection="{localeSwitcher.selection}"/> + <ThemeSwitcherIcon bind:show="{themeSwitcher.show}" + bind:selection="{themeSwitcher.selection}"/> + </div> +</aside> |
