From 868dfcd2a84bdb874c6937e83df1c281b443b340 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= Date: Mon, 9 Dec 2024 18:06:36 +0100 Subject: [PATCH] Make top-bar narrow This also moves the breadcrumbs into the main content area in selected views. --- src/components/Header.svelte | 43 +++++--------- src/components/Icon.svelte | 97 +++++++++++++++++++------------ src/components/Link.svelte | 3 + src/components/Sidebar.svelte | 32 ++++++++-- src/views/Home.svelte | 10 +--- src/views/repo/CreateIssue.svelte | 28 +-------- src/views/repo/Issue.svelte | 67 ++++++++++++--------- src/views/repo/Issues.svelte | 55 +++++++++++------- src/views/repo/Layout.svelte | 97 ++++++++++--------------------- src/views/repo/Patch.svelte | 62 ++++++++++++-------- src/views/repo/Patches.svelte | 57 +++++++++++------- tests/e2e/authenticate.spec.ts | 8 ++- 12 files changed, 291 insertions(+), 268 deletions(-) diff --git a/src/components/Header.svelte b/src/components/Header.svelte index fcc3fccec..27cb187c6 100644 --- a/src/components/Header.svelte +++ b/src/components/Header.svelte @@ -1,25 +1,26 @@
+ { + void router.push({ + resource: "home", + }); + }}> + + { @@ -97,14 +93,5 @@
- -
- {@render breadcrumbs()} - {#if columnSwitch} -
- {@render columnSwitch()} -
- {/if} -
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte index 8492c860e..b48d5e40a 100644 --- a/src/components/Icon.svelte +++ b/src/components/Icon.svelte @@ -11,15 +11,18 @@ | "checkmark" | "chevron-down" | "chevron-right" + | "collapse-panel" | "comment" | "copy" | "cross" | "dashboard" | "delegate" | "diff" + | "expand-panel" | "eye" | "face" | "file" + | "home" | "inbox" | "issue" | "lock" @@ -27,7 +30,6 @@ | "moon" | "more-vertical" | "offline" - | "one" | "online" | "patch" | "pen" @@ -39,7 +41,6 @@ | "seedling-filled" | "settings" | "sun" - | "two" | "warning"; } @@ -140,6 +141,20 @@ + {:else if name === "collapse-panel"} + + + + + + + + + + + + + {:else if name === "comment"} @@ -220,6 +235,20 @@ + {:else if name === "expand-panel"} + + + + + + + + + + + + + {:else if name === "eye"} @@ -278,6 +307,35 @@ + {:else if name === "home"} + + + + + + + + + + + + + + + + + + + + + + + + + + + + {:else if name === "inbox"} @@ -403,15 +461,6 @@ - {:else if name === "one"} - - - - - - - - {:else if name === "online"} @@ -650,32 +699,6 @@ - {:else if name === "two"} - - - - - - - - - - - - - - - - - - - - - - - - - {:else if name === "warning"} diff --git a/src/components/Link.svelte b/src/components/Link.svelte index e84fe2d5e..07b5ea84c 100644 --- a/src/components/Link.svelte +++ b/src/components/Link.svelte @@ -10,6 +10,7 @@ disabled?: boolean; underline?: boolean; styleWidth?: string; + styleColor?: string; } const { @@ -18,6 +19,7 @@ disabled = false, underline = true, styleWidth, + styleColor, }: Props = $props(); function navigateToRoute(event: MouseEvent): void { @@ -46,6 +48,7 @@ onclick={navigateToRoute} href={routeToPath(route)} class:underline + style:color={styleColor} style:width={styleWidth}> {@render children()} diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte index 6508f02ca..f6bce7c82 100644 --- a/src/components/Sidebar.svelte +++ b/src/components/Sidebar.svelte @@ -5,9 +5,12 @@ import { patchStatusColor } from "@app/lib/utils"; import { issueStatusColor } from "@app/lib/utils"; + import { storeLayout, getLayout } from "@app/views/repo/Layout.svelte"; + import Icon from "@app/components/Icon.svelte"; import Settings from "@app/components/Settings.svelte"; import Border from "./Border.svelte"; + import NakedButton from "./NakedButton.svelte"; interface Props { activeTab: @@ -115,8 +118,27 @@ {/if} - +
+ { + if (getLayout()) { + storeLayout("two-column"); + } else { + storeLayout("one-column"); + } + }}> + {#if getLayout()} + + {:else} + + {/if} + + + +
diff --git a/src/views/Home.svelte b/src/views/Home.svelte index 2202ece99..81d0dbca2 100644 --- a/src/views/Home.svelte +++ b/src/views/Home.svelte @@ -6,7 +6,6 @@ import CopyableId from "@app/components/CopyableId.svelte"; import Header from "@app/components/Header.svelte"; - import NodeId from "@app/components/NodeId.svelte"; import RepoCard from "@app/components/RepoCard.svelte"; import Settings from "@app/components/Settings.svelte"; @@ -41,17 +40,10 @@
-
+
{#snippet center()} {/snippet} - {#snippet breadcrumbs()} - - {/snippet} {#snippet settingsButton()} - - {#snippet breadcrumbs()} - - - - -
- - {project.data.name} -
- - - - Issues - - - New Issue - {/snippet} - + {#snippet sidebar()} {/snippet} diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte index f91ae152c..ddcf42a35 100644 --- a/src/views/repo/Issue.svelte +++ b/src/views/repo/Issue.svelte @@ -367,35 +367,20 @@ margin-bottom: 0.5rem; color: var(--color-foreground-dim); } + .breadcrumbs { + display: flex; + gap: 0.5rem; + font-size: var(--font-size-tiny); + font-weight: var(--font-weight-semibold); + align-items: center; + min-height: 1.5rem; + width: 100%; + margin-bottom: 1rem; + color: var(--color-foreground-dim); + } - - {#snippet breadcrumbs()} -
- - - - -
- - {project.data.name} -
- - - - Issues - - -
- {issue.title} -
-
- {/snippet} - + {#snippet headerCenter()} {/snippet} @@ -409,7 +394,7 @@ {/snippet}
-
+
{#if editingTitle}
+
+ + + + + + {project.data.name} + + + + Issues + + +
+ {issue.title} +
+
+
Status
diff --git a/src/views/repo/Issues.svelte b/src/views/repo/Issues.svelte index 3c6b2f01b..82f061431 100644 --- a/src/views/repo/Issues.svelte +++ b/src/views/repo/Issues.svelte @@ -40,31 +40,28 @@ font-weight: var(--font-weight-medium); font-size: var(--font-size-medium); display: flex; - padding: 0 1rem 1rem 1rem; + padding: 0 1rem 0.5rem 1rem; align-items: center; justify-content: space-between; } + .breadcrumbs { + display: flex; + gap: 0.5rem; + font-size: var(--font-size-tiny); + font-weight: var(--font-weight-semibold); + align-items: center; + min-height: 1.5rem; + width: 100%; + margin-bottom: 1rem; + padding-left: 1rem; + color: var(--color-foreground-dim); + } - - {#snippet breadcrumbs()} - - - - -
- - {project.data.name} -
- - - Issues - {/snippet} - + {#snippet headerCenter()} {/snippet} @@ -96,6 +93,24 @@
+
+ + + + + + {project.data.name} + + + Issues +
+
{#each issues as issue} diff --git a/src/views/repo/Layout.svelte b/src/views/repo/Layout.svelte index 2de147cb0..354c2d214 100644 --- a/src/views/repo/Layout.svelte +++ b/src/views/repo/Layout.svelte @@ -1,15 +1,38 @@ + +