From a9072370ca1eb9a5cce928b1d487db0f307edea6 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Tue, 20 Sep 2022 15:24:27 +0800
Subject: feat: Move old apps into it's own directory

---
 .../src/components/theme-switcher.svelte           | 215 +++++++++++++++++++++
 1 file changed, 215 insertions(+)
 create mode 100644 old-apps/web-shared/src/components/theme-switcher.svelte

(limited to 'old-apps/web-shared/src/components/theme-switcher.svelte')

diff --git a/old-apps/web-shared/src/components/theme-switcher.svelte b/old-apps/web-shared/src/components/theme-switcher.svelte
new file mode 100644
index 0000000..6f86875
--- /dev/null
+++ b/old-apps/web-shared/src/components/theme-switcher.svelte
@@ -0,0 +1,215 @@
+<script lang="ts">
+    import {base_domain, CookieNames} from "$shared/lib/configuration";
+    import {get_cookie, set_cookie} from "$shared/lib/helpers";
+    import {onMount} from "svelte";
+
+    type theme = "system"|"dark"|"light";
+
+    export let show = false;
+    export let glow = false;
+    export let selection: theme = "system";
+    export let size;
+    let prefers = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    onMount(() => {
+        selection = get_cookie(CookieNames.theme) as theme;
+        document.addEventListener("keydown", (e) => {
+            if (e.code === "Escape") show = false;
+        });
+        document.addEventListener("click", (e: any) => {
+            if (e.target.closest("[data-theme-switcher-element]") === null) show = false;
+        });
+    });
+    let html = document.querySelector("html");
+
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+        prefers = event.matches ? "dark" : "light";
+    });
+
+    $: switch (selection || prefers) {
+        case "system":
+            html.dataset.theme = prefers;
+            break;
+        case "light":
+            html.dataset.theme = "light";
+            break;
+        case "dark":
+            html.dataset.theme = "dark";
+            break;
+    }
+
+    function change(to: theme) {
+        selection = to;
+        set_cookie(CookieNames.theme, selection, base_domain());
+    }
+</script>
+
+<div class="bg-light padding-x-xs padding-bottom-xs padding-top-xxxs radius-md {glow ? 'inner-glow shadow-xs' : ''}"
+     class:is-hidden={!show}
+     data-theme-switcher-element
+     role="listbox">
+    <div class="flex flex-wrap flex-column"
+         role="group">
+        <div class="margin-bottom-xs flex-grow">
+            <span class="text-xs color-contrast-medium">Appearance</span>
+        </div>
+        <div class="flex gap-xs flex-row">
+            <div class="ld-switch-popover__option"
+                 aria-selected="{selection === 'dark' ? 'true' : 'false'}"
+                 role="option">
+                <figure class="radius-md inner-glow"
+                        on:click={() => change("dark")}>
+                    <svg id="Layer_1"
+                         class="block radius-inherit"
+                         data-name="Layer 1"
+                         xmlns="http://www.w3.org/2000/svg"
+                         width="70"
+                         height="50"
+                         viewBox="0 0 70 50">
+                        <rect width="70"
+                              height="50"
+                              fill="#22232a"/>
+                        <path d="M14,10H70V50H10V14A4,4,0,0,1,14,10Z"
+                              fill="#5a5c63"/>
+                        <circle cx="18"
+                                cy="18"
+                                r="3"
+                                fill="#22232a"/>
+                        <circle cx="27"
+                                cy="18"
+                                r="3"
+                                fill="#22232a"/>
+                        <circle cx="36"
+                                cy="18"
+                                r="3"
+                                fill="#22232a"/>
+                        <rect x="17"
+                              y="28"
+                              width="46"
+                              height="3"
+                              rx="1"
+                              fill="#fafaff"/>
+                        <rect x="17"
+                              y="34"
+                              width="46"
+                              height="3"
+                              rx="1"
+                              fill="#fafaff"/>
+                        <rect x="17"
+                              y="40"
+                              width="30"
+                              height="3"
+                              rx="1"
+                              fill="#fafaff"/>
+                    </svg>
+                </figure>
+                <div class="text-xs margin-top-xxxs padding-x-xxxxs">Dark</div>
+            </div>
+            <div class="ld-switch-popover__option"
+                 aria-selected="{selection === 'light' ? 'true' : 'false'}"
+                 role="option">
+                <figure class="radius-md inner-glow"
+                        on:click={() => change("light")}>
+                    <svg id="Layer_1"
+                         class="block radius-inherit"
+                         data-name="Layer 1"
+                         xmlns="http://www.w3.org/2000/svg"
+                         width="70"
+                         height="50"
+                         viewBox="0 0 70 50">
+                        <rect width="70"
+                              height="50"
+                              fill="#e5e5e6"/>
+                        <path d="M14,10H70a0,0,0,0,1,0,0V50a0,0,0,0,1,0,0H10a0,0,0,0,1,0,0V14A4,4,0,0,1,14,10Z"
+                              fill="#fff"/>
+                        <circle cx="18"
+                                cy="18"
+                                r="3"
+                                fill="#e5e5e6"/>
+                        <circle cx="27"
+                                cy="18"
+                                r="3"
+                                fill="#e5e5e6"/>
+                        <circle cx="36"
+                                cy="18"
+                                r="3"
+                                fill="#e5e5e6"/>
+                        <rect x="17"
+                              y="28"
+                              width="46"
+                              height="3"
+                              rx="1"
+                              fill="#38393e"/>
+                        <rect x="17"
+                              y="34"
+                              width="46"
+                              height="3"
+                              rx="1"
+                              fill="#38393e"/>
+                        <rect x="17"
+                              y="40"
+                              width="30"
+                              height="3"
+                              rx="1"
+                              fill="#38393e"/>
+                    </svg>
+                </figure>
+                <div class="text-xs margin-top-xxxs padding-x-xxxxs">Light</div>
+            </div>
+            <div class="ld-switch-popover__option"
+                 aria-selected="{selection === 'system' ? 'true' : 'false'}"
+                 role="option">
+                <figure class="radius-md inner-glow"
+                        on:click={() => change("system")}>
+                    <svg id="Layer_1"
+                         data-name="Layer 1"
+                         xmlns="http://www.w3.org/2000/svg"
+                         class="block radius-inherit"
+                         width="70"
+                         height="50"
+                         viewBox="0 0 70 50">
+                        <rect width="35"
+                              height="50"
+                              fill="#e5e5e6"/>
+                        <path d="M14,10H35a0,0,0,0,1,0,0V50a0,0,0,0,1,0,0H10a0,0,0,0,1,0,0V14A4,4,0,0,1,14,10Z"
+                              fill="#fff"/>
+                        <circle cx="18"
+                                cy="18"
+                                r="3"
+                                fill="#e5e5e6"/>
+                        <circle cx="27"
+                                cy="18"
+                                r="3"
+                                fill="#e5e5e6"/>
+                        <path d="M18,28H35a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H18a1,1,0,0,1-1-1V29A1,1,0,0,1,18,28Z"
+                              fill="#38393e"/>
+                        <path d="M18,34H35a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H18a1,1,0,0,1-1-1V35A1,1,0,0,1,18,34Z"
+                              fill="#38393e"/>
+                        <path d="M18,40H35a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H18a1,1,0,0,1-1-1V41A1,1,0,0,1,18,40Z"
+                              fill="#38393e"/>
+                        <rect x="35"
+                              width="35"
+                              height="50"
+                              fill="#22232a"/>
+                        <path d="M49,10H70V50H45V14A4,4,0,0,1,49,10Z"
+                              fill="#5a5c63"/>
+                        <circle cx="53"
+                                cy="18"
+                                r="3"
+                                fill="#22232a"/>
+                        <circle cx="62"
+                                cy="18"
+                                r="3"
+                                fill="#22232a"/>
+                        <path d="M53,28H70a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H53a1,1,0,0,1-1-1V29A1,1,0,0,1,53,28Z"
+                              fill="#fafaff"/>
+                        <path d="M53,34H70a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H53a1,1,0,0,1-1-1V35A1,1,0,0,1,53,34Z"
+                              fill="#fafaff"/>
+                        <path d="M53,40H70a0,0,0,0,1,0,0v3a0,0,0,0,1,0,0H53a1,1,0,0,1-1-1V41A1,1,0,0,1,53,40Z"
+                              fill="#fafaff"/>
+                    </svg>
+                </figure>
+                <div class="text-xs margin-top-xxxs padding-x-xxxxs">System</div>
+            </div>
+        </div>
+    </div>
+</div>
-- 
cgit v1.3