summaryrefslogtreecommitdiffstats
path: root/apps/web-shared
diff options
context:
space:
mode:
Diffstat (limited to 'apps/web-shared')
-rw-r--r--apps/web-shared/src/components/breadcrumb/bread.svelte9
-rw-r--r--apps/web-shared/src/components/breadcrumb/crumb.svelte22
-rw-r--r--apps/web-shared/src/components/breadcrumb/index.ts7
-rw-r--r--apps/web-shared/src/components/link-card.svelte47
-rw-r--r--apps/web-shared/src/components/menu/menu.svelte2
-rw-r--r--apps/web-shared/src/components/theme-switcher.svelte71
-rw-r--r--apps/web-shared/src/components/user-menu.svelte99
-rw-r--r--apps/web-shared/src/lib/helpers.ts4
-rw-r--r--apps/web-shared/src/lib/session.ts8
-rw-r--r--apps/web-shared/src/styles/components/auto-sized-grid.scss56
-rw-r--r--apps/web-shared/src/styles/components/breadcrumbs.scss18
-rw-r--r--apps/web-shared/src/styles/components/link-card.scss56
-rw-r--r--apps/web-shared/src/styles/components/user-menu.scss8
13 files changed, 379 insertions, 28 deletions
diff --git a/apps/web-shared/src/components/breadcrumb/bread.svelte b/apps/web-shared/src/components/breadcrumb/bread.svelte
new file mode 100644
index 0000000..4cf0698
--- /dev/null
+++ b/apps/web-shared/src/components/breadcrumb/bread.svelte
@@ -0,0 +1,9 @@
+<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 gap-xxs">
+ <slot></slot>
+ </ol>
+</nav>
diff --git a/apps/web-shared/src/components/breadcrumb/crumb.svelte b/apps/web-shared/src/components/breadcrumb/crumb.svelte
new file mode 100644
index 0000000..7621de6
--- /dev/null
+++ b/apps/web-shared/src/components/breadcrumb/crumb.svelte
@@ -0,0 +1,22 @@
+<script>
+ export let name;
+ export let withArrow = false;
+ export let isLink = false;
+</script>
+<li class="breadcrumbs__item">
+ <span class="color-inherit {isLink ? 'cursor-pointer color-primary-light' : ''}"
+ on:click>{name}</span>
+ {#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/apps/web-shared/src/components/breadcrumb/index.ts b/apps/web-shared/src/components/breadcrumb/index.ts
new file mode 100644
index 0000000..485ed7b
--- /dev/null
+++ b/apps/web-shared/src/components/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+import Bread from "./bread.svelte";
+import Crumb from "./crumb.svelte";
+
+export {
+ Bread,
+ Crumb
+};
diff --git a/apps/web-shared/src/components/link-card.svelte b/apps/web-shared/src/components/link-card.svelte
new file mode 100644
index 0000000..0c15a53
--- /dev/null
+++ b/apps/web-shared/src/components/link-card.svelte
@@ -0,0 +1,47 @@
+<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-md {$$restProps.class??''}"
+ {href}
+ {target}
+ {title}
+ on:click
+ aria-label="Link label">
+ <div class="padding-md">
+ <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/apps/web-shared/src/components/menu/menu.svelte b/apps/web-shared/src/components/menu/menu.svelte
index 33b1160..33517ab 100644
--- a/apps/web-shared/src/components/menu/menu.svelte
+++ b/apps/web-shared/src/components/menu/menu.svelte
@@ -1,7 +1,7 @@
<script lang="ts">
import {random_string} from "$shared/lib/helpers";
- export let id = "__menu_" + random_string(3);
+ export const id = "__menu_" + random_string(3);
export let trigger: HTMLElement;
export let show = false;
diff --git a/apps/web-shared/src/components/theme-switcher.svelte b/apps/web-shared/src/components/theme-switcher.svelte
index 26ae507..d0a43b3 100644
--- a/apps/web-shared/src/components/theme-switcher.svelte
+++ b/apps/web-shared/src/components/theme-switcher.svelte
@@ -42,7 +42,8 @@
}
</script>
-<div class="ld-switch" data-theme-switcher-element>
+<div class="ld-switch"
+ data-theme-switcher-element>
<button class="reset ld-switch-btn"
on:click={() => show =!show}>
<span class="sr-only">{selection}</span>
@@ -64,39 +65,46 @@
</svg>
{:else if selection === "light"}
<svg class="icon ld-switch-btn__icon"
- viewBox="0 0 20 20">
- <title>light-auto</title>
+ viewBox="0 0 20 20"><title>light</title>
<g fill="currentColor">
- <path d="M10 14a4 4 0 1 1 3.465-6"
- fill-opacity=".2"
+ <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"></path>
+ stroke-width="2"
+ d="M10 1v1.5"></path>
<path fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
- d="M12 18l2.5-7h1l2.5 7"></path>
+ 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="M12.714 16h4.572"></path>
+ d="M19 10h-1.5"></path>
<path fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
- d="M10 1v1.5"></path>
+ 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="M16.364 3.636l-1.061 1.061"></path>
+ d="M10 19v-1.5"></path>
<path fill="none"
stroke="currentColor"
stroke-linecap="round"
@@ -119,9 +127,14 @@
</svg>
{:else }
<svg class="icon ld-switch-btn__icon"
- viewBox="0 0 20 20">
- <title>dark-auto</title>
+ 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"
@@ -134,15 +147,36 @@
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"
+ <path 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>
+ 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}
@@ -371,7 +405,6 @@
<figure class="radius-md inner-glow"
on:click={() => change("system")}>
<svg id="Layer_1"
- class="block radius-inherit"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
width="70"
diff --git a/apps/web-shared/src/components/user-menu.svelte b/apps/web-shared/src/components/user-menu.svelte
new file mode 100644
index 0000000..c0195f4
--- /dev/null
+++ b/apps/web-shared/src/components/user-menu.svelte
@@ -0,0 +1,99 @@
+<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>
diff --git a/apps/web-shared/src/lib/helpers.ts b/apps/web-shared/src/lib/helpers.ts
index f2d0cca..4da8254 100644
--- a/apps/web-shared/src/lib/helpers.ts
+++ b/apps/web-shared/src/lib/helpers.ts
@@ -51,9 +51,7 @@ export function get_cookie(name) {
}
export function set_cookie(name, value, baseDomain = window.location.host) {
- let asdf = name + "=" + encodeURIComponent(value) + (baseDomain ? ";domain=" + baseDomain : "");
- console.log(asdf);
- document.cookie = asdf;
+ document.cookie = name + "=" + encodeURIComponent(value) + (baseDomain ? ";domain=" + baseDomain : "");
}
export function unwrap_date_time_from_entry(entry: TimeEntryDto): UnwrappedEntryDateTime {
diff --git a/apps/web-shared/src/lib/session.ts b/apps/web-shared/src/lib/session.ts
index 4f40a17..f729687 100644
--- a/apps/web-shared/src/lib/session.ts
+++ b/apps/web-shared/src/lib/session.ts
@@ -1,5 +1,5 @@
import {Temporal} from "@js-temporal/polyfill";
-import {get_profile_for_active_check} from "./api/user";
+import {get_profile_for_active_check, logout} from "./api/user";
import {is_guid, session_storage_get_json, session_storage_set_json} from "./helpers";
import {SECONDS_BETWEEN_SESSION_CHECK, StorageKeys} from "./configuration";
import type {ISession} from "$shared/lib/models/ISession";
@@ -21,6 +21,12 @@ export async function is_active(forceRefresh: boolean = false): Promise<boolean>
}
}
+export async function end_session(cb: Function): Promise<void> {
+ await logout();
+ clear_session_data();
+ cb();
+}
+
async function call_api(): Promise<boolean> {
console.log("Getting profile data while checking session state");
try {
diff --git a/apps/web-shared/src/styles/components/auto-sized-grid.scss b/apps/web-shared/src/styles/components/auto-sized-grid.scss
new file mode 100644
index 0000000..a3b1be5
--- /dev/null
+++ b/apps/web-shared/src/styles/components/auto-sized-grid.scss
@@ -0,0 +1,56 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_auto-sized-grid
+Title: Auto Sized Grid
+Descr: A grid layout based on CSS Grid where the columns are automatically created according to a min-width value
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl {
+ display: grid;
+ gap: var(--gap-y, 0px) var(--gap-x, 0px);
+ grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr)); // auto add new cols
+}
+
+.grid-auto-xs {
+ --col-min-width: 8rem;
+}
+
+.grid-auto-sm {
+ --col-min-width: 10rem;
+}
+
+.grid-auto-md {
+ --col-min-width: 15rem;
+}
+
+.grid-auto-lg {
+ --col-min-width: 20rem;
+}
+
+.grid-auto-xl {
+ --col-min-width: 25rem;
+}
+
+@each $breakpoint, $value in $breakpoints {
+ @include breakpoint(#{$breakpoint}) {
+ .grid-auto-xs\@#{$breakpoint} {
+ --col-min-width: 8rem;
+ }
+ .grid-auto-sm\@#{$breakpoint} {
+ --col-min-width: 10rem;
+ }
+ .grid-auto-md\@#{$breakpoint} {
+ --col-min-width: 15rem;
+ }
+ .grid-auto-lg\@#{$breakpoint} {
+ --col-min-width: 20rem;
+ }
+ .grid-auto-xl\@#{$breakpoint} {
+ --col-min-width: 25rem;
+ }
+ }
+}
diff --git a/apps/web-shared/src/styles/components/breadcrumbs.scss b/apps/web-shared/src/styles/components/breadcrumbs.scss
new file mode 100644
index 0000000..45bf7c6
--- /dev/null
+++ b/apps/web-shared/src/styles/components/breadcrumbs.scss
@@ -0,0 +1,18 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_breadcrumbs
+Title: Breadcrumbs
+Descr: List of links to help the user move within website structure
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.breadcrumbs {}
+
+.breadcrumbs__item {
+ display: inline-block; // flex fallback
+ display: inline-flex;
+ align-items: center;
+}
diff --git a/apps/web-shared/src/styles/components/link-card.scss b/apps/web-shared/src/styles/components/link-card.scss
new file mode 100644
index 0000000..dad4f98
--- /dev/null
+++ b/apps/web-shared/src/styles/components/link-card.scss
@@ -0,0 +1,56 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_link-card
+Title: Link Card
+Descr: Link card for app UI
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.link-card {
+ text-decoration: none;
+ color: inherit;
+ box-shadow: var(--inner-glow), var(--shadow-xs);
+
+ &:hover {
+ box-shadow: var(--inner-glow), var(--shadow-sm);
+ }
+}
+
+.link-card__footer {
+ position: relative;
+ overflow: hidden;
+ height: 60px;
+
+ > * {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ > *:last-child {
+ transform: translateY(100%);
+ opacity: 0;
+ }
+}
+
+.link-card:hover {
+ .link-card__footer {
+ > *:first-child {
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+
+ > *:last-child {
+ transform: translateY(0);
+ opacity: 1;
+ }
+ }
+}
diff --git a/apps/web-shared/src/styles/components/user-menu.scss b/apps/web-shared/src/styles/components/user-menu.scss
index 1b5c1d5..416655f 100644
--- a/apps/web-shared/src/styles/components/user-menu.scss
+++ b/apps/web-shared/src/styles/components/user-menu.scss
@@ -42,7 +42,7 @@ Usage: codyhouse.co/license
width: var(--profile-figure-size);
height: var(--profile-figure-size);
position: relative;
- transition: opacity 0.2s;
+ //transition: opacity 0.2s;
&::after {
content: '';
@@ -61,7 +61,7 @@ Usage: codyhouse.co/license
opacity: 0;
transform: scale(0.8);
- transition: all 0.2s;
+ //transition: all 0.2s;
}
}
@@ -73,9 +73,9 @@ Usage: codyhouse.co/license
}
.user-menu__meta {
- max-width: 100px;
+ //max-width: 100px;
}
.user-menu__meta-title {
- transition: color 0.2s;
+ //transition: color 0.2s;
}
generated by cgit v1.3 (git 2.53.0) at 2026-03-07 14:36:17 +0100