aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/components/blowout-toolbelt.svelte
diff options
context:
space:
mode:
authorivarlovlie <git@ivarlovlie.no>2022-09-20 09:24:27 +0200
committerivarlovlie <git@ivarlovlie.no>2022-09-20 09:24:27 +0200
commita9072370ca1eb9a5cce928b1d487db0f307edea6 (patch)
tree59c3c23df930a8b5f888dc7813923abf4ceefed4 /old-apps/web-shared/src/components/blowout-toolbelt.svelte
parent56fa963a1d63cbe0bf28e29e717cceaa417c45c1 (diff)
downloadgreatoffice-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.svelte70
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>