diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-10-05 14:45:21 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-10-05 14:45:21 +0200 |
| commit | b7e39b59fd0fc7b5610ebff29035bf622079e0d8 (patch) | |
| tree | 64be84ebbdac9f7ceced983390c53b10d575af5c /old-apps/web-shared/src/components | |
| parent | 2001c035fbb417ab0a3d42cfb04d17420bde4086 (diff) | |
| download | greatoffice-b7e39b59fd0fc7b5610ebff29035bf622079e0d8.tar.xz greatoffice-b7e39b59fd0fc7b5610ebff29035bf622079e0d8.zip | |
refactor: Change file structure
Diffstat (limited to 'old-apps/web-shared/src/components')
35 files changed, 0 insertions, 2356 deletions
diff --git a/old-apps/web-shared/src/components/alert.svelte b/old-apps/web-shared/src/components/alert.svelte deleted file mode 100644 index 4119edf..0000000 --- a/old-apps/web-shared/src/components/alert.svelte +++ /dev/null @@ -1,121 +0,0 @@ -<script lang="ts"> - import {random_string} from "$shared/lib/helpers"; - import {afterUpdate, onMount} from "svelte"; - import {Temporal} from "@js-temporal/polyfill"; - - const noCooldownSetting = "no-cooldown"; - // if no unique id is supplied, cooldown will not work between page loads. - // Therefore we are disabling it with noCooldownSetting in the fallback id. - export let id = "alert--" + noCooldownSetting + "--" + random_string(4); - export let title = ""; - export let message = ""; - export let type = "info"; - export let closeable = false; - export let closeableCooldown = "-1"; - export let visible = true; - - const cooldownStorageKey = "lastseen--" + id; - $: cooldownEnabled = id.indexOf(noCooldownSetting) === -1 && closeable && (closeableCooldown === "~" || parseInt(closeableCooldown) > 0); - - function close() { - visible = false; - if (cooldownEnabled) { - console.log("Cooldown enabled for " + id + ", " + closeableCooldown === "~" ? "with an endless cooldown" : ""); - localStorage.setItem(cooldownStorageKey, String(Temporal.Now.instant().epochSeconds)); - } - } - - // Manages the state of the alert if cooldown is enabled - function run_cooldown() { - if (!cooldownEnabled) { - console.log("Alert cooldown is not enabled for " + id); - return; - } - if (!localStorage.getItem(cooldownStorageKey)) { - console.log("Alert " + id + " has not been seen yet, displaying"); - visible = true; - return; - } - if (!visible) { - console.log("Alert " + id + " is not visible, stopping cooldown change") - return; - } - if (closeableCooldown === "~") { - console.log("Alert " + id + " has an infinite cooldown, hiding"); - visible = false; - return; - } - - const lastSeen = Temporal.Instant.fromEpochSeconds(localStorage.getItem(cooldownStorageKey) as number); - if (Temporal.Instant.compare(Temporal.Now.instant(), lastSeen.add({seconds: parseInt(closeableCooldown)})) === 1) { - console.log("Alert " + id + " has a cooldown of " + closeableCooldown + " and was last seen " + lastSeen.toLocaleString() + " making it due for a showing"); - visible = true; - } else { - visible = false; - } - } - - onMount(() => { - if (cooldownEnabled) { - run_cooldown(); - } - }) - - afterUpdate(() => { - if (type === "default") { - type = "primary"; - } - }); -</script> - -<div class="alert alert--{type} padding-sm radius-md" - id="{id}" - class:alert--is-visible={visible} - role="alert"> - <div class="flex justify-between"> - <div class="flex flex-row items-center"> - <svg class="icon icon--sm alert__icon margin-right-xxs" - viewBox="0 0 24 24" - aria-hidden="true"> - <path d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12s12-5.383,12-12S18.617,0,12,0z M14.658,18.284 c-0.661,0.26-2.952,1.354-4.272,0.191c-0.394-0.346-0.59-0.785-0.59-1.318c0-0.998,0.328-1.868,0.919-3.957 c0.104-0.395,0.231-0.907,0.231-1.313c0-0.701-0.266-0.887-0.987-0.887c-0.352,0-0.742,0.125-1.095,0.257l0.195-0.799 c0.787-0.32,1.775-0.71,2.621-0.71c1.269,0,2.203,0.633,2.203,1.837c0,0.347-0.06,0.955-0.186,1.375l-0.73,2.582 c-0.151,0.522-0.424,1.673-0.001,2.014c0.416,0.337,1.401,0.158,1.887-0.071L14.658,18.284z M13.452,8c-0.828,0-1.5-0.672-1.5-1.5 s0.672-1.5,1.5-1.5s1.5,0.672,1.5,1.5S14.28,8,13.452,8z"></path> - </svg> - {#if title} - <p class="text-sm"> - <strong class="error-title">{title}</strong> - </p> - {:else if message} - <div class="text-component text-sm break-word"> - {@html message} - </div> - {/if} - </div> - {#if closeable} - <button class="reset alert__close-btn" - on:click={close}> - <svg class="icon" - viewBox="0 0 20 20" - fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"> - <title>Close alert</title> - <line x1="3" - y1="3" - x2="17" - y2="17"/> - <line x1="17" - y1="3" - x2="3" - y2="17"/> - </svg> - </button> - {/if} - </div> - - {#if message && title} - <div class="text-component text-sm break-word padding-top-xs"> - {@html message} - </div> - {/if} -</div> diff --git a/old-apps/web-shared/src/components/blowout-toolbelt.svelte b/old-apps/web-shared/src/components/blowout-toolbelt.svelte deleted file mode 100644 index b83048c..0000000 --- a/old-apps/web-shared/src/components/blowout-toolbelt.svelte +++ /dev/null @@ -1,70 +0,0 @@ -<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> diff --git a/old-apps/web-shared/src/components/breadcrumb/bread.svelte b/old-apps/web-shared/src/components/breadcrumb/bread.svelte deleted file mode 100644 index 244bb24..0000000 --- a/old-apps/web-shared/src/components/breadcrumb/bread.svelte +++ /dev/null @@ -1,9 +0,0 @@ -<script lang="ts"> - export type sizes = "big"|"small"; - export let size: sizes = "small"; -</script> -<nav class="breadcrumbs {size === 'small' ? 'text-sm' : 'text-lg'}"> - <ol class="flex flex-wrap items-center gap-xxs"> - <slot></slot> - </ol> -</nav> diff --git a/old-apps/web-shared/src/components/breadcrumb/crumb.svelte b/old-apps/web-shared/src/components/breadcrumb/crumb.svelte deleted file mode 100644 index e540a44..0000000 --- a/old-apps/web-shared/src/components/breadcrumb/crumb.svelte +++ /dev/null @@ -1,27 +0,0 @@ -<script> - export let name; - export let withArrow = false; - export let isLink = false; -</script> -<li class="breadcrumbs__item"> - {#if isLink} - <a class="color-inherit {isLink ? 'cursor-pointer color-primary-light' : ''}" - on:click>{name}</a> - {:else} - <span class="color-inherit {isLink ? 'cursor-pointer color-primary-light' : ''}" - on:click>{name}</span> - {/if} - {#if withArrow} - <svg class="icon margin-left-xxxs color-contrast-low" - aria-hidden="true" - viewBox="0 0 16 16"> - <polyline fill="none" - stroke="currentColor" - stroke-width="1" - stroke-linecap="round" - stroke-linejoin="round" - stroke-miterlimit="10" - points="6.5,3.5 11,8 6.5,12.5 "></polyline> - </svg> - {/if} -</li> diff --git a/old-apps/web-shared/src/components/breadcrumb/index.ts b/old-apps/web-shared/src/components/breadcrumb/index.ts deleted file mode 100644 index 485ed7b..0000000 --- a/old-apps/web-shared/src/components/breadcrumb/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import Bread from "./bread.svelte"; -import Crumb from "./crumb.svelte"; - -export { - Bread, - Crumb -}; diff --git a/old-apps/web-shared/src/components/button.svelte b/old-apps/web-shared/src/components/button.svelte deleted file mode 100644 index 5eaf19f..0000000 --- a/old-apps/web-shared/src/components/button.svelte +++ /dev/null @@ -1,116 +0,0 @@ -<script lang="ts"> - import Icon from "$shared/components/icon.svelte"; - - export let text = ""; - export let title = ""; - export let href = ""; - export let variant: "primary"|"secondary"|"subtle" = "primary"; - export let type: "button"|"submit"|"reset" = "button"; - export let disabled = false; - export let loading = false; - export let icon = ""; - export let icon_right_aligned = false; - export let icon_width = false; - export let icon_height = false; - export let id; - export let tabindex; - export let style; - - $: shared_props = { - type: type, - id: id || null, - title: title || null, - disabled: disabled || null, - tabindex: tabindex || null, - style: style || null, - "aria-controls": ($$restProps["aria-controls"] ?? "") || null, - class: [variant === "reset" ? "reset" : `btn btn--${variant} btn--preserve-width ${loading ? "btn--state-b" : ""}`, $$restProps.class ?? ""].filter(Boolean).join(" "), - }; -</script> - -<template> - {#if href && !disabled} - <a {href} - {...shared_props} - on:click> - <span class="btn__content-a"> - {#if icon !== ""} - {#if icon_right_aligned} - {text} - <Icon class="{text ? 'margin-left-xxxs': ''}" - width={icon_width} - height={icon_height} - name={icon}/> - {:else} - <Icon class="{text ? 'margin-left-xxxs': ''}" - width={icon_width} - height={icon_height} - name={icon}/> - {text} - {/if} - {:else} - {text} - {/if} - </span> - {#if variant !== "reset" && loading} - <span class="btn__content-b"> - <svg class="icon icon--is-spinning" - aria-hidden="true" - viewBox="0 0 16 16"> - <title>Loading</title> - <g stroke-width="1" - fill="currentColor" - stroke="currentColor"> - <path d="M.5,8a7.5,7.5,0,1,1,1.91,5" - fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round"/> - </g> - </svg> - </span> - {/if} - </a> - {:else} - <button {...shared_props} - on:click> - <span class="btn__content-a"> - {#if icon !== ""} - {#if icon_right_aligned} - {text} - <Icon class="{text ? 'margin-left-xxxs': ''}" - width={icon_width} - height={icon_height} - name={icon}/> - {:else} - <Icon class="{text ? 'margin-left-xxxs': ''}" - width={icon_width} - height={icon_height} - name={icon}/> - {text} - {/if} - {:else} - {text} - {/if} - </span> - {#if variant !== "reset" && loading} - <span class="btn__content-b"> - <svg class="icon icon--is-spinning" - aria-hidden="true" - viewBox="0 0 16 16"> - <title>Loading</title> - <g stroke-width="1" - fill="currentColor" - stroke="currentColor"> - <path d="M.5,8a7.5,7.5,0,1,1,1.91,5" - fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round"/> - </g> - </svg> - </span> - {/if} - </button> - {/if} -</template> diff --git a/old-apps/web-shared/src/components/chip.svelte b/old-apps/web-shared/src/components/chip.svelte deleted file mode 100644 index 7fbb445..0000000 --- a/old-apps/web-shared/src/components/chip.svelte +++ /dev/null @@ -1,50 +0,0 @@ -<script> - import {IconNames} from "$shared/lib/configuration"; - import {createEventDispatcher} from "svelte"; - import Button from "./button.svelte"; - - const dispatch = createEventDispatcher(); - export let removable = false; - export let clickable = false; - export let text = ""; - export let id = ""; - export let color = ""; - export let tabindex = ""; - - function handle_remove() { - if (removable) { - dispatch("remove", { - id - }); - } - } - - function handle_click() { - if (clickable) { - dispatch("clicked", { - id - }); - } - } -</script> - -<div class="chip break-word text-sm justify-between justify-start@md {clickable ? 'chip--interactive' : ''}" - on:click={handle_click} - id={id} - style={color !== "" ? `background-color: ${color}15; border: 1px solid ${color}; color: ${color}` : ""} - {tabindex} -> - <span class="chip__label">{text}</span> - - {#if removable} - <Button class="chip__btn" - variant="reset" - style="{color !== '' ? `background-color: ${color}45;` : ''}" - {tabindex} - icon="{IconNames.x}" - icon_width="initial" - icon_height="initial" - on:click={handle_remove} - /> - {/if} -</div> diff --git a/old-apps/web-shared/src/components/details.svelte b/old-apps/web-shared/src/components/details.svelte deleted file mode 100644 index 6ccacb0..0000000 --- a/old-apps/web-shared/src/components/details.svelte +++ /dev/null @@ -1,35 +0,0 @@ -<script> - import {random_string} from "$shared/lib/helpers"; - - let open = false; - export let summary; - const id = "details-" + random_string(4); - - function on_toggle(event) { - open = event.target.open; - } -</script> - -<details class="details margin-bottom-sm" - on:toggle={on_toggle} - id={id}> - <summary class="details__summary" - aria-controls={id} - aria-expanded={open}> - <span class="flex items-center"> - <svg - class="icon icon--xxs margin-right-xxxs" - aria-hidden="true" - viewBox="0 0 12 12"> - <path - d="M2.783.088A.5.5,0,0,0,2,.5v11a.5.5,0,0,0,.268.442A.49.49,0,0,0,2.5,12a.5.5,0,0,0,.283-.088l8-5.5a.5.5,0,0,0,0-.824Z"/> - </svg> - <span>{summary}</span> - </span> - </summary> - <div - class="details__content text-component margin-top-xs" - aria-hidden={!open}> - <slot/> - </div> -</details> diff --git a/old-apps/web-shared/src/components/dropdown.svelte b/old-apps/web-shared/src/components/dropdown.svelte deleted file mode 100644 index a28bcd3..0000000 --- a/old-apps/web-shared/src/components/dropdown.svelte +++ /dev/null @@ -1,389 +0,0 @@ -<script lang="ts"> - // @ts-ignore - import { go, highlight } from "fuzzysort"; - import { element_has_focus, random_string } from "$shared/lib/helpers"; - import Button from "$shared/components/button.svelte"; - import Chip from "$shared/components/chip.svelte"; - - export let name; - export let id; - export let maxlength; - export let placeholder = "Search"; - export let entries = []; - export let createable = false; - export let loading = false; - export let multiple = false; - export let noResultsText; - export let errorText; - export let label; - export let on_create_async = ({name: string}) => { - }; - - export const reset = () => methods.reset(); - export const select = (id: string) => methods.select_entry(id); - export const deselect = (id: string) => methods.deselect_entry(id); - - const INTERNAL_ID = "__dropdown-" + random_string(5); - - let searchInputNode; - let searchResults = []; - let searchValue = ""; - let showCreationHint = false; - let showDropdown = false; - let lastKeydownCode = ""; - let mouseIsOverDropdown = false; - let mouseIsOverComponent = false; - - $: hasSelection = entries.some((c) => c.selected === true); - $: if (searchValue.trim()) { - showCreationHint = createable && entries.every((c) => search.normalise_value(c.name) !== search.normalise_value(searchValue)); - } else { - showCreationHint = false; - entries = methods.get_sorted_array(entries); - } - - const search = { - normalise_value(value: string): string { - if (!value) { - return ""; - } - return value.toString().trim().toLowerCase(); - }, - do() { - const query = search.normalise_value(searchValue); - if (!query.trim()) { - searchResults = []; - return; - } - - const options = { - limit: 10, - allowTypo: true, - threshold: -10000, - key: "name", - }; - searchResults = go(query, entries, options); - showDropdown = true; - }, - on_input_focusout() { - if (lastKeydownCode !== "Tab" && (mouseIsOverDropdown || lastKeydownCode === "ArrowDown")) { - return; - } - const selected = entries.find((c) => c.selected === true); - if (selected && !multiple) { - searchValue = selected.name; - } - document.querySelector("#" + INTERNAL_ID + " ul li.focus")?.classList.remove("focus"); - showDropdown = false; - } - }; - - const methods = { - reset(focus_input = false) { - searchValue = ""; - const copy = entries; - for (const entry of copy) { - entry.selected = false; - } - entries = methods.get_sorted_array(copy); - if (focus_input) { - searchInputNode?.focus(); - showDropdown = true; - } else { - showDropdown = false; - } - }, - async create_entry(name) { - if (!name || !createable || loading) { - console.log("Not sending creation event due to failed preconditions", {name, createable, loading}); - return; - } - try { - await on_create_async({name}); - searchValue = ""; - loading = false; - } catch (e) { - console.error(e); - } - }, - select_entry(entry_id) { - if (!entry_id || loading) { - console.log("Not selecting entry due to failed preconditions", { - entry_id, - loading, - }); - return; - } - - const copy = entries; - let selected; - for (const entry of entries) { - if (entry.id === entry_id) { - entry.selected = true; - selected = entry; - if (multiple) { - searchValue = ""; - } else { - searchValue = entry.name; - } - } else if (!multiple) { - entry.selected = false; - } - } - entries = methods.get_sorted_array(copy); - searchInputNode?.focus(); - searchResults = []; - }, - deselect_entry(entry_id) { - if (!entry_id || loading) { - console.log("Not deselecting entry due to failed preconditions", { - entry_id, - loading, - }); - return; - } - console.log("Deselecting entry", entry_id); - - const copy = entries; - let deselected; - - for (const entry of copy) { - if (entry.id === entry_id) { - entry.selected = false; - deselected = entry; - } - } - - entries = methods.get_sorted_array(copy); - searchInputNode?.focus(); - }, - get_sorted_array(entries: Array<DropdownEntry>): Array<DropdownEntry> { - if (!entries) { - return; - } - if (entries.length < 1) { - return []; - } - if (searchValue) { - return entries; - } - return (entries as any).sort((a, b) => { - search.normalise_value(a.name).localeCompare(search.normalise_value(b.name)); - }); - }, - }; - - const windowEvents = { - on_mousemove(event) { - if (!event.target) return; - mouseIsOverDropdown = (event.target?.closest("#" + INTERNAL_ID + " .autocomplete__results") != null ?? false); - mouseIsOverComponent = (event.target?.closest("#" + INTERNAL_ID) != null ?? false); - }, - on_click(event) { - if (showDropdown && !mouseIsOverDropdown && !mouseIsOverComponent && event.target.id !== id && event.target?.htmlFor !== id) { - showDropdown = false; - } - }, - on_keydown(event) { - lastKeydownCode = event.code; - const enterPressed = event.code === "Enter"; - const backspacePressed = event.code === "Backspace"; - const arrowUpPressed = event.code === "ArrowUp"; - const spacePressed = event.code === "Space"; - const arrowDownPressed = event.code === "ArrowDown"; - const searchInputHasFocus = element_has_focus(searchInputNode); - const focusedEntry = document.querySelector("#" + INTERNAL_ID + " ul .focus"); - - if (showDropdown && (enterPressed || arrowDownPressed)) { - event.preventDefault(); - event.stopPropagation(); - } - - if (searchInputHasFocus && backspacePressed && !searchValue && entries.length > 0) { - if (entries.filter(c => c.selected === true).at(-1)?.id ?? false) { - methods.deselect_entry(entries.filter(c => c.selected === true).at(-1)?.id ?? ""); - } - return; - } - if (searchInputHasFocus && enterPressed && showCreationHint) { - methods.create_entry(searchValue.trim()); - return; - } - - if (searchInputHasFocus && !focusedEntry && arrowDownPressed) { - const firstEntry = document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type"); - if (firstEntry) { - firstEntry.classList.add("focus"); - return; - } - } - - if (focusedEntry && (arrowUpPressed || arrowDownPressed)) { - if (arrowDownPressed) { - if (focusedEntry.nextElementSibling) { - focusedEntry.nextElementSibling.classList.add("focus"); - focusedEntry.nextElementSibling.scrollIntoView(); - } else { - document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type").classList.add("focus"); - document.querySelector("#" + INTERNAL_ID + " ul li:first-of-type").scrollIntoView(); - } - } else if (arrowUpPressed) { - if (focusedEntry.previousElementSibling) { - focusedEntry.previousElementSibling.classList.add("focus"); - focusedEntry.previousElementSibling.scrollIntoView(); - } else { - document.querySelector("#" + INTERNAL_ID + " ul li:last-of-type").classList.add("focus"); - document.querySelector("#" + INTERNAL_ID + " ul li:last-of-type").scrollIntoView(); - } - } - focusedEntry.classList.remove("focus"); - return; - } - - if (focusedEntry && (spacePressed || enterPressed)) { - methods.select_entry(focusedEntry.dataset.id); - return; - } - - if (lastKeydownCode === "Tab" && !searchInputHasFocus) { - showDropdown = false; - } - }, - on_touchend(event) { - windowEvents.on_mousemove(event); - } - }; - - interface DropdownEntry { - name: string, - id: string, - } -</script> - -<svelte:window - on:keydown={windowEvents.on_keydown} - on:mousemove={windowEvents.on_mousemove} - on:touchend={windowEvents.on_touchend} - on:click={windowEvents.on_click} -/> - -{#if label} - <label for="{id}" - class="form-label margin-bottom-xxs">{label}</label> -{/if} - -<div class="autocomplete position-relative select-auto" - class:cursor-wait={loading} - class:autocomplete--results-visible={showDropdown} - class:select-auto--selection-done={searchValue} - id={INTERNAL_ID} -> - <!-- input --> - <div class="select-auto__input-wrapper form-control" - style="cursor: text" - on:click={() => { - if (!element_has_focus(searchInputNode)) searchInputNode.focus(); - showDropdown = true; - }} - class:multiple={multiple === true} - class:has-selection={hasSelection}> - {#if multiple === true && hasSelection} - {#each entries.filter((c) => c.selected === true) as entry} - <Chip id={entry.id} - removable={true} - tabindex="-1" - on:remove={() => methods.deselect_entry(entry.id)} - text={entry.name}/> - {/each} - {/if} - <input - class="reset width-100%" - style="outline:none;" - type="text" - {name} - {id} - {maxlength} - {placeholder} - bind:value={searchValue} - bind:this={searchInputNode} - on:input={() => search.do()} - on:click={() => (showDropdown = true)} - on:focus={() => (showDropdown = true)} - on:blur={search.on_input_focusout} - autocomplete="off" - /> - <div class="select-auto__input-icon-wrapper"> - <!-- arrow icon --> - <svg class="icon" - viewBox="0 0 16 16"> - <title>Open selection</title> - <polyline points="1 5 8 12 15 5" - fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"/> - </svg> - - <!-- close X icon --> - <button class="reset select-auto__input-btn" - type="button" - on:click={() => reset(true)}> - <svg class="icon" - viewBox="0 0 16 16"> - <title>Reset selection</title> - <path - d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Zm3.707,10.293a1,1,0,1,1-1.414,1.414L8,9.414,5.707,11.707a1,1,0,0,1-1.414-1.414L6.586,8,4.293,5.707A1,1,0,0,1,5.707,4.293L8,6.586l2.293-2.293a1,1,0,1,1,1.414,1.414L9.414,8Z" - /> - </svg> - </button> - </div> - </div> - - {#if errorText} - <small class="color-error">{errorText}</small> - {/if} - - <!-- dropdown --> - <div class="autocomplete__results select-auto__results shadow-xs inner-glow"> - <ul on:keydown={(event) => event.code.startsWith("Arrow") && event.preventDefault()} - tabindex="-1" - class="autocomplete__list"> - {#if searchResults.length > 0} - {#each searchResults.filter((c) => !c.selected) as result} - <li class="select-auto__option padding-y-xs padding-x-sm" - data-id={result.obj.id} - on:click={(e) => methods.select_entry(e.target.dataset.id)} - tabindex="-1"> - {@html highlight(result, (open = '<span class="font-semibold">'), (close = "</span>"))} - </li> - {/each} - {:else if entries.length > 0} - {#each entries.filter((c) => !c.selected) as entry} - <li class="select-auto__option padding-y-xs padding-x-sm" - data-id={entry.id} - on:click={(e) => methods.select_entry(e.target.dataset.id)} - tabindex="-1"> - {entry.name} - </li> - {/each} - {:else} - <li class="select-auto__option text-center padding-y-xs padding-x-sm pointer-events-none" - tabindex="-1"> - {noResultsText} - </li> - {/if} - </ul> - {#if showCreationHint} - <div class="width-100% border-top border-bg-lighter padding-xxxs"> - <Button variant="reset" - type="button" - class="width-100%" - text="Press enter or click to create {searchValue.trim()}" - title="Press enter or click here to create {searchValue.trim()}" - loading={loading} - on:click={() => methods.create_entry(searchValue.trim())}/> - </div> - {/if} - </div> -</div> diff --git a/old-apps/web-shared/src/components/form/index.ts b/old-apps/web-shared/src/components/form/index.ts deleted file mode 100644 index 08769bd..0000000 --- a/old-apps/web-shared/src/components/form/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import Textarea from "./textarea.svelte"; - -export { - Textarea -}; diff --git a/old-apps/web-shared/src/components/form/textarea.svelte b/old-apps/web-shared/src/components/form/textarea.svelte deleted file mode 100644 index b313d2e..0000000 --- a/old-apps/web-shared/src/components/form/textarea.svelte +++ /dev/null @@ -1,48 +0,0 @@ -<script lang="ts"> - export let id; - export let disabled = false; - export let loading = false; - export let rows = 2; - export let cols = 0; - export let name; - export let placeholder; - export let value; - export let label; - export let errorText; - - $: shared_props = { - rows: rows || null, - cols: cols || null, - name: name || null, - id: id || null, - disabled: disabled || null, - class: [`form-control ${loading ? "c-disabled loading" : ""}`, $$restProps.class ?? ""].filter(Boolean).join(" "), - }; - - let textarea; - let scrollHeight = 0; - - $:if (textarea) { - scrollHeight = textarea.scrollHeight; - } - - function on_input(event) { - event.target.style.height = "auto"; - event.target.style.height = (this.scrollHeight) + "px"; - } -</script> - -{#if label} - <label for="{id}" - class="form-label margin-bottom-xxs">{label}</label> -{/if} -<textarea {...shared_props} - {placeholder} - style="overflow-y:hidden;min-height:calc(1.5em + .75rem + 2px);{scrollHeight ? 'height:{scrollHeight}px' : ''};" - bind:value={value} - bind:this={textarea} - on:input={on_input} -></textarea> -{#if errorText} - <small class="color-error">{errorText}</small> -{/if} diff --git a/old-apps/web-shared/src/components/icon.svelte b/old-apps/web-shared/src/components/icon.svelte deleted file mode 100644 index 144b45d..0000000 --- a/old-apps/web-shared/src/components/icon.svelte +++ /dev/null @@ -1,87 +0,0 @@ -<script> - import {IconNames} from "$shared/lib/configuration"; - - const icons = [ - { - box: 16, - name: IconNames.verticalDots, - svg: `<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>`, - }, - { - box: 16, - name: IconNames.clock, - svg: `<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/><path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>`, - }, - { - box: 21, - name: IconNames.trash, - svg: `<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 2)"><path d="m2.5 2.5h10v12c0 1.1045695-.8954305 2-2 2h-6c-1.1045695 0-2-.8954305-2-2zm5-2c1.0543618 0 1.91816512.81587779 1.99451426 1.85073766l.00548574.14926234h-4c0-1.1045695.8954305-2 2-2z"/><path d="m.5 2.5h14"/><path d="m5.5 5.5v8"/><path d="m9.5 5.5v8"/></g>`, - }, - { - box: 21, - name: IconNames.pencilSquare, - svg: ` - <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 3)"><path d="m14 1c.8284271.82842712.8284271 2.17157288 0 3l-9.5 9.5-4 1 1-3.9436508 9.5038371-9.55252193c.7829896-.78700064 2.0312313-.82943964 2.864366-.12506788z"/><path d="m6.5 14.5h8"/><path d="m12.5 3.5 1 1"/></g> - `, - }, - { - box: 16, - name: IconNames.x, - svg: `<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>`, - }, - { - box: 16, - name: IconNames.funnel, - svg: `<path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>`, - }, - { - box: 16, - name: IconNames.funnelFilled, - svg: `<path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/>`, - }, - { - box: 16, - name: IconNames.github, - svg: ` - <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/> - ` - }, - { - box: 21, - name: IconNames.refresh, - svg: `<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><path d="m4.5 1.5c-2.4138473 1.37729434-4 4.02194088-4 7 0 4.418278 3.581722 8 8 8s8-3.581722 8-8-3.581722-8-8-8"/><path d="m4.5 5.5v-4h-4"/></g> ` - }, - { - box: 21, - name: IconNames.resetHard, - svg: `<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 1 1 0 2.5 2.5)"><path d="m13 11 3 3v-6c0-3.36502327-2.0776-6.24479706-5.0200433-7.42656457-.9209869-.36989409-1.92670197-.57343543-2.9799567-.57343543-4.418278 0-8 3.581722-8 8s3.581722 8 8 8c1.48966767 0 3.4724708-.3698516 5.0913668-1.5380762" transform="matrix(-1 0 0 -1 16 16)"/><path d="m5 5 6 6"/><path d="m11 5-6 6"/></g>` - }, - { - box: 21, - name: IconNames.arrowUp, - svg: `<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(6 3)"><path d="m8.5 4.5-4-4-4.029 4"/><path d="m4.5.5v13"/></g>` - }, - { - box: 21, - name: IconNames.arrowDown, - svg: `<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(6 4)"><path d="m.5 9.499 4 4.001 4-4.001"/><path d="m4.5.5v13" transform="matrix(-1 0 0 -1 9 14)"/></g>` - }, - { - box: 21, - name: IconNames.chevronDown, - svg: `<path d="m8.5.5-4 4-4-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(6 8)"/>` - } - ]; - - export let name; - export let fill = false; - export let width = "1rem"; - export let height = "1rem"; - const displayIcon = icons.find((e) => e.name === name); -</script> - -<svg class="icon {$$restProps.class ?? ''}" - style="width: {width}; height:{height}; fill: currentColor;" - viewBox="0 0 {displayIcon.box} {displayIcon.box}"> - {@html displayIcon.svg} -</svg> diff --git a/old-apps/web-shared/src/components/link-card.svelte b/old-apps/web-shared/src/components/link-card.svelte deleted file mode 100644 index 85738c7..0000000 --- a/old-apps/web-shared/src/components/link-card.svelte +++ /dev/null @@ -1,47 +0,0 @@ -<script> - export let text = "View"; - export let name; - export let description = null; - export let href = null; - export let target; - export let title = null; -</script> - -<a class="link-card flex flex-column bg-light cursor-pointer radius-sm inner-glow {$$restProps.class??''}" - {href} - {target} - {title} - on:click - aria-label="Link label"> - <div class="padding-sm"> - <div class="flex flex-wrap gap-xs items-center"> - <slot name="icon"></slot> - <div class="line-height-xs"> - <p class="text-lg font-semibold color-contrast-higher">{name}</p> - {#if description} - <p class="color-contrast-low margin-top-xxxs">{description}</p> - {/if} - </div> - </div> - </div> - <div class="link-card__footer margin-top-auto border-top border-contrast-lower"> - <p class="text-sm">{text}</p> - <div> - <svg class="icon icon--sm" - viewBox="0 0 24 24"> - <g fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"> - <line x1="3" - y1="12" - x2="21" - y2="12"/> - <polyline points="15 6 21 12 15 18"/> - </g> - </svg> - </div> - </div> -</a> - diff --git a/old-apps/web-shared/src/components/locale-switcher-icon.svelte b/old-apps/web-shared/src/components/locale-switcher-icon.svelte deleted file mode 100644 index d2776a1..0000000 --- a/old-apps/web-shared/src/components/locale-switcher-icon.svelte +++ /dev/null @@ -1,16 +0,0 @@ -<script> - import {GlobeIcon} from "svelte-feather-icons"; - - export let show = false; - export let selection = "preffered"; -</script> -<div data-locale-switcher-element - class="ld-switch flex"> - <button class="reset ld-switch-btn" - on:click={() => (show = !show)}> - <div class="ld-switch-btn__icon-wrapper ld-switch-btn__icon-wrapper--in" - aria-hidden="true"> - <GlobeIcon/> - </div> - </button> -</div> diff --git a/old-apps/web-shared/src/components/locale-switcher.svelte b/old-apps/web-shared/src/components/locale-switcher.svelte deleted file mode 100644 index 5399247..0000000 --- a/old-apps/web-shared/src/components/locale-switcher.svelte +++ /dev/null @@ -1,62 +0,0 @@ -<script> - import { CookieNames } from "$shared/lib/configuration"; - import { get_cookie } from "$shared/lib/helpers"; - import { currentLocale } from "$shared/lib/locale"; - import { onMount } from "svelte"; - - export let glow = false; - export let show = false; - export let selection = "preffered"; - export let size; - - function change(to) { - selection = to; - currentLocale.set(to); - } - - onMount(() => { - selection = get_cookie(CookieNames.locale); - document.addEventListener("keydown", (e) => { - if (e.code === "Escape") { - show = false; - } - }); - document.addEventListener("click", (e) => { - if (e.target.closest("[data-locale-switcher-element]") === null) { - show = false; - } - }); - }); -</script> - -<div class="bg-light padding-x-xs padding-bottom-xs padding-top-xxxs radius-md {glow ? 'inner-glow shadow-xs':''}" - data-locale-switcher-element - class:is-hidden={!show} - 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">Language</span> - </div> - <div class="flex gap-xs flex-row"> - <div class="ld-switch-popover__option" - aria-selected="{selection === 'en' ? 'true' : 'false'}" - on:click={() => change("en")} - role="option"> - <div class="text-xs margin-top-xxxs padding-x-xxxxs">English</div> - </div> - <div class="ld-switch-popover__option" - aria-selected="{selection === 'nb' ? 'true' : 'false'}" - on:click={() => change("nb")} - role="option"> - <div class="text-xs margin-top-xxxs padding-x-xxxxs">Norsk</div> - </div> - <div class="ld-switch-popover__option" - aria-selected="{selection === 'preffered' ? 'true' : 'false'}" - on:click={() => change("preffered")} - role="option"> - <div class="text-xs margin-top-xxxs padding-x-xxxxs">Default</div> - </div> - </div> - </div> -</div> diff --git a/old-apps/web-shared/src/components/menu/index.ts b/old-apps/web-shared/src/components/menu/index.ts deleted file mode 100644 index 8eb7938..0000000 --- a/old-apps/web-shared/src/components/menu/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import Menu from "./menu.svelte"; -import MenuItem from "./item.svelte"; -import MenuItemSeparator from "./separator.svelte"; - -export { - Menu, - MenuItem, - MenuItemSeparator -}; diff --git a/old-apps/web-shared/src/components/menu/item.svelte b/old-apps/web-shared/src/components/menu/item.svelte deleted file mode 100644 index aeb0f99..0000000 --- a/old-apps/web-shared/src/components/menu/item.svelte +++ /dev/null @@ -1,8 +0,0 @@ -<script lang="ts"> - export let danger = false; -</script> -<li role="menuitem" on:click> - <span class="menu__content {danger ? 'bg-error-lighter@hover color-white@hover' : ''}"> - <slot/> - </span> -</li> diff --git a/old-apps/web-shared/src/components/menu/menu.svelte b/old-apps/web-shared/src/components/menu/menu.svelte deleted file mode 100644 index 33517ab..0000000 --- a/old-apps/web-shared/src/components/menu/menu.svelte +++ /dev/null @@ -1,54 +0,0 @@ -<script lang="ts"> - import {random_string} from "$shared/lib/helpers"; - - export const id = "__menu_" + random_string(3); - export let trigger: HTMLElement; - export let show = false; - - let windowInnerWidth = 0; - let windowInnerHeight = 0; - let menu: HTMLMenuElement; - - $: if (show && menu && trigger) { - const - selectedTriggerPosition = trigger.getBoundingClientRect(), - menuOnTop = (windowInnerHeight - selectedTriggerPosition.bottom) < selectedTriggerPosition.top, - left = selectedTriggerPosition.left, - right = (windowInnerWidth - selectedTriggerPosition.right), - isRight = (windowInnerWidth < selectedTriggerPosition.left + menu.offsetWidth), - vertical = menuOnTop - ? "bottom: " + (windowInnerHeight - selectedTriggerPosition.top) + "px;" - : "top: " + selectedTriggerPosition.bottom + "px;"; - - let horizontal = isRight ? "right: " + right + "px;" : "left: " + left + "px;"; - - // check right position is correct -> otherwise set left to 0 - if (isRight && (right + menu.offsetWidth) > windowInnerWidth) horizontal = ("left: " + (windowInnerWidth - menu.offsetWidth) / 2 + "px;"); - const maxHeight = menuOnTop ? selectedTriggerPosition.top - 20 : windowInnerHeight - selectedTriggerPosition.bottom - 20; - menu.setAttribute("style", horizontal + vertical + "max-height:" + Math.floor(maxHeight) + "px;"); - } - - function on_window_click(event) { - if (!event.target.closest("#" + id) && !event.target.closest("[aria-controls='" + id + "']")) show = false; - } - - function on_window_touchend(event) { - if (!event.target.closest("#" + id) && !event.target.closest("[aria-controls='" + id + "']")) show = false; - } -</script> - -<svelte:window - on:click={on_window_click} - on:touchend={on_window_touchend} - bind:innerWidth={windowInnerWidth} - bind:innerHeight={windowInnerHeight} -/> - -<menu class="menu" - id="{id}" - bind:this={menu} - class:menu--is-visible={show} - aria-expanded="{show}" - aria-haspopup="true"> - <slot name="options"/> -</menu> diff --git a/old-apps/web-shared/src/components/menu/separator.svelte b/old-apps/web-shared/src/components/menu/separator.svelte deleted file mode 100644 index 798dce0..0000000 --- a/old-apps/web-shared/src/components/menu/separator.svelte +++ /dev/null @@ -1,2 +0,0 @@ -<li class="menu__separator" - role="separator"></li> diff --git a/old-apps/web-shared/src/components/modal.svelte b/old-apps/web-shared/src/components/modal.svelte deleted file mode 100644 index f3b633c..0000000 --- a/old-apps/web-shared/src/components/modal.svelte +++ /dev/null @@ -1,66 +0,0 @@ -<script> - import {random_string} from "$shared/lib/helpers"; - - export let title = ""; - let isVisible = false; - const modal_id = "modal_" + random_string(5); - - function handle_keyup(e) { - if (e.key === "Escape") { - isVisible = false; - } - } - - export const functions = { - open() { - isVisible = true; - window.addEventListener("keyup", handle_keyup); - }, - close() { - isVisible = false; - window.removeEventListener("keyup", handle_keyup); - }, - }; -</script> - -<div class="modal modal--animate-scale flex flex-center padding-md bg-dark bg-opacity-40% {isVisible ? 'modal--is-visible' : ''}" - id={modal_id} -> - <div class="modal__content width-100% max-width-xs max-height-100% overflow-auto radius-md shadow-md bg" - role="alertdialog" - > - <header class="padding-y-sm padding-x-md flex items-center justify-between" - > - <h4 class="text-truncate">{title}</h4> - - <button class="reset modal__close-btn modal__close-btn--inner" - on:click={functions.close} - > - <svg class="icon" - viewBox="0 0 20 20"> - <title>Close modal window</title> - <g fill="none" - stroke="currentColor" - stroke-miterlimit="10" - stroke-width="2" - stroke-linecap="round" - stroke-linejoin="round" - > - <line x1="3" - y1="3" - x2="17" - y2="17"/> - <line x1="17" - y1="3" - x2="3" - y2="17"/> - </g> - </svg> - </button> - </header> - - <div class="padding-bottom-md padding-x-md"> - <slot/> - </div> - </div> -</div> diff --git a/old-apps/web-shared/src/components/pre-header.svelte b/old-apps/web-shared/src/components/pre-header.svelte deleted file mode 100644 index 87a19b1..0000000 --- a/old-apps/web-shared/src/components/pre-header.svelte +++ /dev/null @@ -1,37 +0,0 @@ -<script> - export let closable = true; - export let show = false; -</script> - -<div class="pre-header padding-y-xs" style="{show ? '' : 'display:none'}"> - <div class="container max-width-lg position-relative"> - <div class="text-component text-sm padding-right-lg"> - <p> - <slot/> - </p> - </div> - {#if closable} - <button class="reset pre-header__close-btn" - on:click={(event) => event.target.closest(".pre-header")?.remove()}> - <svg class="icon" - viewBox="0 0 20 20"> - <title>Close header banner</title> - <g fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"> - <line x1="4" - y1="4" - x2="16" - y2="16"/> - <line x1="16" - y1="4" - x2="4" - y2="16"/> - </g> - </svg> - </button> - {/if} - </div> -</div> diff --git a/old-apps/web-shared/src/components/screens/GeneralErrorScreen.svelte b/old-apps/web-shared/src/components/screens/GeneralErrorScreen.svelte deleted file mode 100644 index dd4b5bd..0000000 --- a/old-apps/web-shared/src/components/screens/GeneralErrorScreen.svelte +++ /dev/null @@ -1,7 +0,0 @@ -<script> - export let message; - export let status; -</script> - -<h1>{status}</h1> -<p>{message}</p> diff --git a/old-apps/web-shared/src/components/screens/NotFoundScreen.svelte b/old-apps/web-shared/src/components/screens/NotFoundScreen.svelte deleted file mode 100644 index 69d55af..0000000 --- a/old-apps/web-shared/src/components/screens/NotFoundScreen.svelte +++ /dev/null @@ -1,161 +0,0 @@ -<style> - .fof__animation svg { - display: block; - max-width: 520px; - margin-left: auto; - margin-right: auto; - } - - #i-fof-browser { - -webkit-transform-origin: 260px 304px; - transform-origin: 260px 304px; - -webkit-animation: i-fof-browser 4s infinite; - animation: i-fof-browser 4s infinite; - } - - #i-fof-shadow { - -webkit-transform-origin: 282px 410px; - transform-origin: 282px 410px; - -webkit-animation: i-fof-shadow 4s infinite; - animation: i-fof-shadow 4s infinite; - } - - @-webkit-keyframes i-fof-browser { - 0%, 100% { - -webkit-transform: translateY(0) scale(1); - transform: translateY(0) scale(1); - } - 50% { - -webkit-transform: translateY(-10%) scale(0.9); - transform: translateY(-10%) scale(0.9); - } - } - - @keyframes i-fof-browser { - 0%, 100% { - -webkit-transform: translateY(0) scale(1); - transform: translateY(0) scale(1); - } - 50% { - -webkit-transform: translateY(-10%) scale(0.9); - transform: translateY(-10%) scale(0.9); - } - } - - @-webkit-keyframes i-fof-shadow { - 0%, 100% { - -webkit-transform: scale(1); - transform: scale(1); - } - 50% { - -webkit-transform: scale(0.8); - transform: scale(0.8); - } - } - - @keyframes i-fof-shadow { - 0%, 100% { - -webkit-transform: scale(1); - transform: scale(1); - } - 50% { - -webkit-transform: scale(0.8); - transform: scale(0.8); - } - } -</style> - -<section class="fof"> - <div class="container max-width-sm"> - <div class="text-component text-center margin-bottom-lg"> - <h1>Page not found</h1> - <p>Sorry, but the page you were looking for could not be found.</p> - <p><a href="/">Go to homepage</a>.</p> - </div> - - <div class="fof__animation" - aria-lable="404 animation"> - <svg id="i-fof" - viewBox="0 0 520 450"> - <g id="i-fof-ship"> - <path id="i-fof-capsule" - d="M260,9a53,53,0,0,0-53,53H313A53,53,0,0,0,260,9Z" - fill="var(--color-contrast-lower)"/> - <path id="i-fof-ship-top" - d="M448,73H72s78-37,188-37S448,73,448,73Z" - fill="var(--color-contrast-low)"/> - <path id="i-fof-ship-bottom" - d="M448,73A1185.633,1185.633,0,0,0,72,73c80.173,34.484,144.2,37,188,37C370,110,448,73,448,73Z" - fill="var(--color-contrast-high)"/> - </g> - <g id="i-fof-browser"> - <rect id="i-fof-browser-canvas" - x="179" - y="243" - width="160" - height="109" - rx="6" - transform="translate(131.361 -75.723) rotate(22.162)" - fill="var(--color-contrast-higher)"/> - <g id="i-fof-browser-dots" - fill="var(--color-bg)"> - <circle cx="211.713" - cy="228.029" - r="3"/> - <circle cx="221.9" - cy="232.179" - r="3"/> - <circle cx="232.088" - cy="236.328" - r="3"/> - </g> - <rect id="i-fof-browser-body" - x="180.737" - y="258.557" - width="152" - height="89" - rx="2" - transform="translate(133.29 -74.459) rotate(22.162)" - fill="var(--color-bg)"/> - <g id="i-fof-emoji"> - <path d="M248.626,322.968A22,22,0,1,1,277.3,310.893,22,22,0,0,1,248.626,322.968Z" - fill="#ffd764"/> - <path d="M264.3,311a7,7,0,1,1,9.124-3.843A7,7,0,0,1,264.3,311Z" - fill="#fff"/> - <path d="M245.778,303.452a7,7,0,1,1,9.123-3.842A7,7,0,0,1,245.778,303.452Z" - fill="#fff"/> - <path d="M258.5,317.274l-12.966-5.281a1,1,0,0,1,.755-1.853l12.966,5.282a1,1,0,0,1-.755,1.852Z" - fill="#444"/> - <path d="M247.287,299.747a3,3,0,1,1,3.91-1.646A3,3,0,0,1,247.287,299.747Z" - fill="#444"/> - <path d="M265.809,307.292a3,3,0,1,1,3.91-1.647A3,3,0,0,1,265.809,307.292Z" - fill="#444"/> - </g> - </g> - <polygon id="i-fof-radar-body" - points="415 410 105 410 196 106 324 106 415 410" - fill="#4ad36b" - opacity="0.5"/> - <ellipse id="i-fof-radar-bottom" - cx="260" - cy="410" - rx="155" - ry="28" - fill="#4ad36b"/> - <ellipse id="i-fof-shadow" - cx="282" - cy="410" - rx="72" - ry="10" - opacity="0.4" - fill="var(--color-black)"/> - <ellipse id="i-fof-radar-top" - cx="260" - cy="106" - rx="64" - ry="6" - fill="#4ad36b"/> - </svg> - </div> - </div> -</section> diff --git a/old-apps/web-shared/src/components/stopwatch.svelte b/old-apps/web-shared/src/components/stopwatch.svelte deleted file mode 100644 index 0e641e8..0000000 --- a/old-apps/web-shared/src/components/stopwatch.svelte +++ /dev/null @@ -1,196 +0,0 @@ -<script lang="ts"> - import Button from "$shared/components/button.svelte"; - import { Textarea } from "$shared/components/form"; - import { StorageKeys } from "$shared/lib/configuration"; - import { loadLocaleAsync } from "$shared/lib/i18n/i18n-util.async"; - import { i18nObject } from "$shared/lib/i18n/i18n-util"; - import { currentLocale, preffered_or_default } from "$shared/lib/locale"; - import { StoreType, writable_persistent } from "$shared/lib/persistent-store"; - import { Temporal } from "@js-temporal/polyfill"; - import { createEventDispatcher, onMount } from "svelte"; - - const state = writable_persistent({ - initialState: { - hours: 0, - minutes: 0, - seconds: 0, - startTime: null as Temporal.PlainDateTime, - lastStep: null as Temporal.PlainDateTime, - isRunning: false, - intervalId: 0, - note: "", - }, - options: { - store: StoreType.LOCAL - }, - name: StorageKeys.stopwatch, - }); - - let timeString; - let LL = i18nObject($currentLocale); - - $: if ($state.hours || $state.minutes || $state.seconds) { - timeString = $state.hours.toLocaleString(undefined, {minimumIntegerDigits: 2}) - + ":" + $state.minutes.toLocaleString(undefined, {minimumIntegerDigits: 2}) - + ":" + $state.seconds.toLocaleString(undefined, {minimumIntegerDigits: 2}); - } else { - timeString = "--:--:--"; - } - - currentLocale.subscribe(async locale => { - if (locale === "preffered") locale = preffered_or_default(); - await loadLocaleAsync(locale); - LL = i18nObject(locale); - }); - - onMount(async () => { - start_if_running(); - await loadLocaleAsync($currentLocale); - LL = i18nObject($currentLocale); - }); - - function start_if_running() { - if ($state.isRunning) { - if (Temporal.PlainDateTime.compare($state.lastStep, Temporal.Now.plainDateTimeISO()) == -1) { - const duration = Temporal.Now.plainDateTimeISO().since($state.lastStep, {smallestUnit: "second"}); - console.log("lastStep", $state.lastStep.toString()); - console.log("duration", duration.toString()); - console.log(duration.seconds); - // for (let i = 0; i < steps; i++) { - // step(); - // } - } - clearInterval($state.intervalId); - $state.intervalId = setInterval(step, 1000); - } - } - - window.addEventListener("focus", () => { - start_if_running(); - }); - - const dispatch = createEventDispatcher(); - - function step() { - $state.seconds = $state.seconds + 1; - - if ($state.seconds == 60) { - $state.minutes = $state.minutes + 1; - $state.seconds = 0; - } - - if ($state.minutes == 60) { - $state.hours = $state.hours + 1; - $state.minutes = 0; - $state.seconds = 0; - } - - if (!$state.startTime) $state.startTime = Temporal.Now.plainDateTimeISO(); - $state.lastStep = Temporal.Now.plainDateTimeISO(); - } - - function reset() { - clearInterval($state.intervalId); - $state.isRunning = false; - $state.hours = 0; - $state.minutes = 0; - $state.seconds = 0; - $state.startTime = null; - $state.intervalId = 0; - $state.note = ""; - } - - let roundUpToNearest = 30; - let roundDownToNearest = 30; - - function on_round_up() { - const newTime = Temporal.PlainTime - .from({hour: $state.hours, minute: $state.minutes, second: $state.seconds}) - .round({ - roundingIncrement: roundUpToNearest, - smallestUnit: "minute", - roundingMode: "ceil" - }); - $state.hours = newTime.hour; - $state.minutes = newTime.minute; - $state.seconds = newTime.second; - } - - function on_round_down() { - const newTime = Temporal.PlainTime - .from({hour: $state.hours, minute: $state.minutes, second: $state.seconds,}) - .round({ - roundingIncrement: roundDownToNearest, - smallestUnit: "minute", - roundingMode: "trunc" - }); - $state.hours = newTime.hour; - $state.minutes = newTime.minute; - $state.seconds = newTime.second; - } - - function on_start_stop() { - if ($state.isRunning) { - clearInterval($state.intervalId); - $state.isRunning = false; - return; - } - step(); - $state.intervalId = setInterval(step, 1000); - $state.isRunning = true; - } - - function on_create_entry() { - if (!$state.startTime) return; - const plainStartTime = Temporal.PlainDateTime.from($state.startTime); - dispatch("create", { - from: plainStartTime, - to: plainStartTime.add({hours: $state.hours, minutes: $state.minutes, seconds: $state.seconds}), - description: $state.note - }); - reset(); - } -</script> - -<div class="grid"> - <div class="col-6"> - <slot name="header"></slot> - <pre class="text-xxl padding-y-sm">{timeString}</pre> - </div> - <div class="col-6 flex align-bottom flex-column text-xs"> - <Button title="{$state.isRunning ? LL.stopwatch.stop() : LL.stopwatch.start()}" - text="{$state.isRunning ? LL.stopwatch.stop() : LL.stopwatch.start()}" - variant="link" - on:click={on_start_stop}/> - - {#if $state.startTime} - <Button title="{LL.stopwatch.reset()}" - text="{LL.stopwatch.reset()}" - variant="link" - class="bg-error-lighter@hover color-white@hover" - on:click={reset}/> - {#if !$state.isRunning} - <Button title="{LL.stopwatch.roundUp()}" - text="{LL.stopwatch.roundUp()}" - variant="link" - on:click={on_round_up}/> - <Button title="{LL.stopwatch.roundDown()}" - text="{LL.stopwatch.roundDown()}" - variant="link" - on:click={on_round_down}/> - {#if $state.minutes > 0 || $state.hours > 0} - <Button title="{LL.stopwatch.createEntry()}" - text="{LL.stopwatch.createEntry()}" - variant="link" - on:click={on_create_entry}/> - {/if} - {/if} - {/if} - </div> -</div> - -<Textarea class="width-100% margin-top-xs" - placeholder="{LL.stopwatch.whatsYourFocus()}" - rows="1" - bind:value={$state.note} -/> diff --git a/old-apps/web-shared/src/components/table/index.ts b/old-apps/web-shared/src/components/table/index.ts deleted file mode 100644 index 8390c0e..0000000 --- a/old-apps/web-shared/src/components/table/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import TablePaginator from "./paginator.svelte"; -import Table from "./table.svelte"; -import THead from "./thead.svelte"; -import TBody from "./tbody.svelte"; -import TCell from "./tcell.svelte"; -import TRow from "./trow.svelte"; - -export { - TablePaginator, - Table, - THead, - TBody, - TCell, - TRow -}; diff --git a/old-apps/web-shared/src/components/table/paginator.svelte b/old-apps/web-shared/src/components/table/paginator.svelte deleted file mode 100644 index 53c6392..0000000 --- a/old-apps/web-shared/src/components/table/paginator.svelte +++ /dev/null @@ -1,101 +0,0 @@ -<script> - import {createEventDispatcher, onMount} from "svelte"; - import {restrict_input_to_numbers} from "$shared/lib/helpers"; - - const dispatch = createEventDispatcher(); - export let page = 1; - export let pageCount = 1; - let prevCount = page; - let canIncrement = false; - let canDecrement = false; - $: canIncrement = page < pageCount; - $: canDecrement = page > 1; - - onMount(() => { - restrict_input_to_numbers(document.querySelector("#curr-page")); - }); - - function increment() { - if (canIncrement) { - page++; - } - } - - function decrement() { - if (canDecrement) { - page--; - } - } - - $: if (page) { - handle_change(); - } - - function handle_change() { - if (page === prevCount) { - return; - } - prevCount = page; - if (page > pageCount) { - page = pageCount; - } - dispatch("value_change", { - newValue: page, - }); - } -</script> - -<nav class="pagination" - aria-label="Pagination"> - <ul class="pagination__list flex flex-wrap gap-xxxs justify-center justify-end@md"> - <li> - <button on:click={decrement} - class="reset pagination__item {canDecrement ? '' : 'c-disabled'}"> - <svg class="icon icon--xs flip-x" - viewBox="0 0 16 16" - ><title>Go to previous page</title> - <polyline - points="6 2 12 8 6 14" - fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - /> - </svg> - </button> - </li> - - <li> - <span class="pagination__jumper flex items-center"> - <input - aria-label="Page number" - class="form-control" - id="curr-page" - type="text" - on:change={handle_change} - value={page} - /> - <em>of {pageCount}</em> - </span> - </li> - - <li> - <button on:click={increment} - class="reset pagination__item {canIncrement ? '' : 'c-disabled'}"> - <svg class="icon icon--xs" - viewBox="0 0 16 16" - ><title>Go to next page</title> - <polyline - points="6 2 12 8 6 14" - fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - /> - </svg> - </button> - </li> - </ul> -</nav> diff --git a/old-apps/web-shared/src/components/table/table.svelte b/old-apps/web-shared/src/components/table/table.svelte deleted file mode 100644 index 4acbf37..0000000 --- a/old-apps/web-shared/src/components/table/table.svelte +++ /dev/null @@ -1,3 +0,0 @@ -<table class="int-table {$$restProps.class ?? ''}"> - <slot/> -</table> diff --git a/old-apps/web-shared/src/components/table/tbody.svelte b/old-apps/web-shared/src/components/table/tbody.svelte deleted file mode 100644 index f0617fa..0000000 --- a/old-apps/web-shared/src/components/table/tbody.svelte +++ /dev/null @@ -1,3 +0,0 @@ -<tbody class="int-table__body {$$restProps.class ?? ''}"> -<slot/> -</tbody> diff --git a/old-apps/web-shared/src/components/table/tcell.svelte b/old-apps/web-shared/src/components/table/tcell.svelte deleted file mode 100644 index 76f500f..0000000 --- a/old-apps/web-shared/src/components/table/tcell.svelte +++ /dev/null @@ -1,23 +0,0 @@ -<script lang="ts"> - export let thScope: "row"|"col"|"rowgroup"|"colgroup"|""; - export let colspan = ""; - export let type: "th"|"td" = "td"; - export let style; - - $: shared_props = { - colspan: colspan || null, - style: style || null, - class: [type === "th" ? "int-table__cell--th" : "", "int-table__cell", $$restProps.class ?? ""].filter(Boolean).join(" "), - }; -</script> -{#if type === "th"} - <th {thScope} - {...shared_props}> - <slot/> - </th> -{/if} -{#if type === "td"} - <td {...shared_props}> - <slot/> - </td> -{/if} diff --git a/old-apps/web-shared/src/components/table/thead.svelte b/old-apps/web-shared/src/components/table/thead.svelte deleted file mode 100644 index aa20bf0..0000000 --- a/old-apps/web-shared/src/components/table/thead.svelte +++ /dev/null @@ -1,10 +0,0 @@ -<script lang="ts"> - import TRow from "./trow.svelte"; -</script> - - -<thead class="int-table__header {$$restProps.class ?? ''}"> -<TRow> - <slot/> -</TRow> -</thead> diff --git a/old-apps/web-shared/src/components/table/trow.svelte b/old-apps/web-shared/src/components/table/trow.svelte deleted file mode 100644 index 35b34bb..0000000 --- a/old-apps/web-shared/src/components/table/trow.svelte +++ /dev/null @@ -1,6 +0,0 @@ -<script> - export let dataId; -</script> -<tr class="int-table__row {$$restProps.class ?? ''}" data-id={dataId}> - <slot/> -</tr> diff --git a/old-apps/web-shared/src/components/theme-switcher-icon.svelte b/old-apps/web-shared/src/components/theme-switcher-icon.svelte deleted file mode 100644 index 1531ab2..0000000 --- a/old-apps/web-shared/src/components/theme-switcher-icon.svelte +++ /dev/null @@ -1,248 +0,0 @@ -<script> - export let show = false; - export let selection = ""; -</script> - -<div class="ld-switch flex" - data-theme-switcher-element> - <button class="reset ld-switch-btn" - on:click={() => show =!show}> - <span class="sr-only">{selection}</span> - <div class="ld-switch-btn__icon-wrapper ld-switch-btn__icon-wrapper--in" - aria-hidden="true"> - {#if selection === "dark"} - <svg class="icon ld-switch-btn__icon" - viewBox="0 0 20 20"> - <title>dark</title> - <g fill="currentColor"> - <path d="M11.964 3.284c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a7 7 0 1 0 8.68-8.68z" - fill-opacity=".2" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"></path> - <path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path> - </g> - </svg> - {:else if selection === "light"} - <svg class="icon ld-switch-btn__icon" - viewBox="0 0 20 20"><title>light</title> - <g fill="currentColor"> - <circle cx="10" - cy="10" - r="4" - fill-opacity=".2" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"></circle> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M10 1v1.5"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M16.364 3.636l-1.061 1.061"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M19 10h-1.5"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M16.364 16.364l-1.061-1.061"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M10 19v-1.5"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M3.636 16.364l1.061-1.061"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M1 10h1.5"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M3.636 3.636l1.061 1.061"></path> - </g> - </svg> - {:else } - <svg class="icon ld-switch-btn__icon" - viewBox="0 0 20 20"><title>light-auto</title> - <g fill="currentColor"> - <path d="M10 14a4 4 0 1 1 3.465-6" - fill-opacity=".2" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M12 18l2.5-7h1l2.5 7"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M12.714 16h4.572"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M10 1v1.5"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M16.364 3.636l-1.061 1.061"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M3.636 16.364l1.061-1.061"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M1 10h1.5"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M3.636 3.636l1.061 1.061"></path> - </g> - </svg> - {/if} - </div> - - <div class="ld-switch-btn__icon-wrapper js-ld-switch-icon" - aria-hidden="true"> - {#if selection === "dark"} - <svg class="icon ld-switch-btn__icon" - viewBox="0 0 20 20"> - <title>dark</title> - <g fill="currentColor"> - <path d="M11.964 3.284c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a7 7 0 1 0 8.68-8.68z" - fill-opacity=".2" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"></path> - <path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path> - </g> - </svg> - {:else if selection === "light"} - <svg class="icon ld-switch-btn__icon" - viewBox="0 0 20 20"> - <title>light-auto</title> - <g fill="currentColor"> - <path d="M10 14a4 4 0 1 1 3.465-6" - fill-opacity=".2" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M12 18l2.5-7h1l2.5 7"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M12.714 16h4.572"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M10 1v1.5"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M16.364 3.636l-1.061 1.061"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M3.636 16.364l1.061-1.061"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M1 10h1.5"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M3.636 3.636l1.061 1.061"></path> - </g> - </svg> - {:else } - <svg class="icon ld-switch-btn__icon" - viewBox="0 0 20 20"> - <title>dark-auto</title> - <g fill="currentColor"> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M12 18l2.5-7h1l2.5 7"></path> - <path fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2" - d="M12.714 16h4.572"></path> - <path d="M12.146 10.159A2.5 2.5 0 0 1 14.5 8.5h1a2.5 2.5 0 0 1 1.412.441 7 7 0 0 0-4.948-5.657c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036a6.99 6.99 0 0 0 6.427 5.012z" - fill-opacity=".2"></path> - <path d="M16.71 8a7.015 7.015 0 0 0-4.746-4.716c.021.237.036.474.036.716a8 8 0 0 1-8 8c-.242 0-.479-.015-.716-.036A7.006 7.006 0 0 0 9 16.929" - fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"></path> - <path d="M7 4a.979.979 0 0 1-1-1 1 1 0 0 0-2 0 .979.979 0 0 1-1 1 1 1 0 0 0 0 2 .979.979 0 0 1 1 1 1 1 0 0 0 2 0 .979.979 0 0 1 1-1 1 1 0 0 0 0-2z"></path> - </g> - </svg> - {/if} - </div> - </button> -</div> diff --git a/old-apps/web-shared/src/components/theme-switcher.svelte b/old-apps/web-shared/src/components/theme-switcher.svelte deleted file mode 100644 index 6f86875..0000000 --- a/old-apps/web-shared/src/components/theme-switcher.svelte +++ /dev/null @@ -1,215 +0,0 @@ -<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> diff --git a/old-apps/web-shared/src/components/tile.svelte b/old-apps/web-shared/src/components/tile.svelte deleted file mode 100644 index b8e9cdf..0000000 --- a/old-apps/web-shared/src/components/tile.svelte +++ /dev/null @@ -1,4 +0,0 @@ -<section class="bg-light radius-sm padding-sm inner-glow shadow-xs {$$restProps.class??''}" - style="height: fit-content;"> - <slot/> -</section> diff --git a/old-apps/web-shared/src/components/user-menu.svelte b/old-apps/web-shared/src/components/user-menu.svelte deleted file mode 100644 index c0195f4..0000000 --- a/old-apps/web-shared/src/components/user-menu.svelte +++ /dev/null @@ -1,99 +0,0 @@ -<script> - import {onMount} from "svelte"; - import {Menu, MenuItem, MenuItemSeparator} from "./menu"; - - let userMenuTrigger; - let showUserMenu = false; - - export let avatar = ""; - export let name; - export let secondary = ""; - let userMenuId; - - onMount(() => { - userMenuTrigger = document.getElementById("open-user-menu"); - }); -</script> - -<button class="reset user-menu-control" - id="open-user-menu" - aria-controls="{userMenuId}" - on:click={() => showUserMenu = true}> - {#if avatar} - <figure class="user-menu-control__img-wrapper radius-50%"> - <img class="user-menu-control__img" - src="{avatar}" - alt="User picture"> - </figure> - {/if} - - <div class="margin-x-xs user-menu__meta"> - <p class="user-menu__meta-title text-sm line-height-1 padding-y-xxxxs font-semibold color-contrast-higher text-truncate">{name}</p> - {#if secondary} - <p class="text-xs color-contrast-medium line-height-1 padding-bottom-xxxxs">{secondary}</p> - {/if} - </div> - - <svg class="icon icon--xxs" - aria-hidden="true" - viewBox="0 0 12 12"> - <polyline points="1 4 6 9 11 4" - fill="none" - stroke="currentColor" - stroke-linecap="round" - stroke-linejoin="round" - stroke-width="2"/> - </svg> -</button> - -<Menu trigger={userMenuTrigger} - bind:id={userMenuId} - bind:show="{showUserMenu}"> - <div slot="options"> - <MenuItem> - <svg class="icon menu__icon" - aria-hidden="true" - viewBox="0 0 16 16"> - <circle cx="8" - cy="3.5" - r="3.5"/> - <path d="M14.747,14.15a6.995,6.995,0,0,0-13.494,0A1.428,1.428,0,0,0,1.5,15.4a1.531,1.531,0,0,0,1.209.6H13.288a1.531,1.531,0,0,0,1.209-.6A1.428,1.428,0,0,0,14.747,14.15Z"/> - </svg> - <span>Profile</span> - - </MenuItem> - - <MenuItem> - <svg class="icon menu__icon" - aria-hidden="true" - viewBox="0 0 16 16"> - <g fill="currentColor"> - <path d="M15.135,6.784c-1.303-0.326-1.921-1.818-1.23-2.969c0.322-0.536,0.225-0.998-0.094-1.316l-0.31-0.31 c-0.318-0.318-0.78-0.415-1.316-0.094c-1.152,0.691-2.644,0.073-2.969-1.23C9.065,0.258,8.669,0,8.219,0H7.781 c-0.45,0-0.845,0.258-0.997,0.865c-0.326,1.303-1.818,1.921-2.969,1.23C3.279,1.773,2.816,1.87,2.498,2.188l-0.31,0.31 C1.87,2.816,1.773,3.279,2.095,3.815c0.691,1.152,0.073,2.644-1.23,2.969C0.26,6.935,0,7.33,0,7.781v0.438 c0,0.45,0.258,0.845,0.865,0.997c1.303,0.326,1.921,1.818,1.23,2.969c-0.322,0.536-0.225,0.998,0.094,1.316l0.31,0.31 c0.319,0.319,0.782,0.415,1.316,0.094c1.152-0.691,2.644-0.073,2.969,1.23C6.935,15.742,7.331,16,7.781,16h0.438 c0.45,0,0.845-0.258,0.997-0.865c0.326-1.303,1.818-1.921,2.969-1.23c0.535,0.321,0.997,0.225,1.316-0.094l0.31-0.31 c0.318-0.318,0.415-0.78,0.094-1.316c-0.691-1.152-0.073-2.644,1.23-2.969C15.742,9.065,16,8.669,16,8.219V7.781 C16,7.33,15.74,6.935,15.135,6.784z M8,11c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S9.657,11,8,11z"></path> - </g> - </svg> - <span>Settings</span> - </MenuItem> - - <MenuItem> - <svg class="icon menu__icon" - aria-hidden="true" - viewBox="0 0 16 16"> - <circle cx="10.5" - cy="2.5" - r="2.5"/> - <circle cx="5.5" - cy="6.5" - r="2.5"/> - <path d="M15.826,10.124A5.455,5.455,0,0,0,9.46,6.107,3.932,3.932,0,0,1,9.5,6.5,3.97,3.97,0,0,1,8.452,9.176,6.963,6.963,0,0,1,11.539,12h2.829a1.5,1.5,0,0,0,1.458-1.876Z"/> - <path d="M10.826,14.124a5.5,5.5,0,0,0-10.652,0A1.5,1.5,0,0,0,1.632,16H9.368a1.5,1.5,0,0,0,1.458-1.876Z"/> - </svg> - <span>Team</span> - </MenuItem> - - <MenuItemSeparator/> - - <MenuItem danger="true" on:click={() => logout_user()}> - Logout - </MenuItem> - </div> -</Menu> |
