From 6d0d34fa6504ee4ebcb6837b2cb844bbfde69ad2 Mon Sep 17 00:00:00 2001 From: Mattias Granlund Date: Sun, 12 Nov 2023 21:43:22 +0100 Subject: [PATCH] Add first iteration of project switcher - next to base refresh button --- .../ui/src/lib/components/IconButton.svelte | 6 +-- packages/ui/src/lib/icons/IconDropDown.svelte | 24 +++++++++ .../ui/src/routes/[projectId]/+layout.svelte | 41 ++++++++------- .../src/routes/[projectId]/base/+page.svelte | 2 +- .../navigation/BaseBranchCard.svelte | 51 +++++++++++-------- .../[projectId]/navigation/Navigation.svelte | 2 +- .../navigation/ProjectsPopup.svelte | 42 +++++++++++++++ .../[projectId]/navigation/clickOutside.ts | 14 +++++ .../routes/[projectId]/settings/Spacer.svelte | 11 +++- 9 files changed, 143 insertions(+), 50 deletions(-) create mode 100644 packages/ui/src/lib/icons/IconDropDown.svelte create mode 100644 packages/ui/src/routes/[projectId]/navigation/ProjectsPopup.svelte create mode 100644 packages/ui/src/routes/[projectId]/navigation/clickOutside.ts diff --git a/packages/ui/src/lib/components/IconButton.svelte b/packages/ui/src/lib/components/IconButton.svelte index c456cb781..2f2edefcc 100644 --- a/packages/ui/src/lib/components/IconButton.svelte +++ b/packages/ui/src/lib/components/IconButton.svelte @@ -8,10 +8,10 @@ diff --git a/packages/ui/src/lib/icons/IconDropDown.svelte b/packages/ui/src/lib/icons/IconDropDown.svelte new file mode 100644 index 000000000..f8729aac8 --- /dev/null +++ b/packages/ui/src/lib/icons/IconDropDown.svelte @@ -0,0 +1,24 @@ + + + + + + diff --git a/packages/ui/src/routes/[projectId]/+layout.svelte b/packages/ui/src/routes/[projectId]/+layout.svelte index e5510269f..860931922 100644 --- a/packages/ui/src/routes/[projectId]/+layout.svelte +++ b/packages/ui/src/routes/[projectId]/+layout.svelte @@ -19,27 +19,26 @@ import Link from '$lib/components/Link.svelte'; import Button from '$lib/components/Button.svelte'; import { syncToCloud } from '$lib/backend/cloud'; + import BaseBranch from './base/BaseBranch.svelte'; export let data: LayoutData; - let { - projectStore, - update, - sessionsStore, - deltasStore, - baseBranchStore, - baseBranchesState, - vbranchesState, - branchController, - branchesWithContent, - remoteBranchStore, - githubContextStore, - pullRequestsStore - } = data; + + $: projectStore = data.projectStore; + $: sessionsStore = data.sessionsStore; + $: baseBranchStore = data.baseBranchStore; + $: githubContextStore = data.githubContextStore; + $: branchController = data.branchController; + $: vbranchesState = data.vbranchesState; + $: remoteBranchStore = data.remoteBranchStore; + $: pullRequestsStore = data.pullRequestsStore; + $: update = data.update; + $: deltasStore = data.deltasStore; + $: baseBranchesState = data.baseBranchesState; + $: branchesWithContent = data.branchesWithContent; const userSettings = getContext(SETTINGS_CONTEXT); $: sessionId = $sessionsStore?.length > 0 ? $sessionsStore[0].id : undefined; - $: projectState = projectStore.state; $: updateDeltasStore(sessionId); let trayViewport: HTMLElement; @@ -49,12 +48,12 @@ if (sid) deltasStore.setSessionId(sid); } - onMount(() => - unsubscribe( + onMount(() => { + return unsubscribe( hotkeys.on('Meta+Shift+R', () => goto(`/old/${$projectStore?.id}/player`)), hotkeys.on('Meta+Shift+S', () => syncToCloud($projectStore?.id)) - ) - ); + ); + }); {#if $baseBranchesState.isLoading} @@ -64,13 +63,13 @@ {@const project = $projectStore}
- {#if project} + {#if $projectStore}
diff --git a/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte b/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte index 5ac0922ef..6d7fe9da0 100644 --- a/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte +++ b/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte @@ -1,32 +1,34 @@ -
- {project.title} + {project.title} {#if ($baseBranchStore?.behind || 0) > 0}
{/if}
-
- - { - fetching = true; - branchController.fetchFromTarget().finally(() => (fetching = false)); - e.preventDefault(); - }} - > -
- -
- - +
+ { + popup.show(); + }} + /> + { + fetching = true; + branchController.fetchFromTarget().finally(() => (fetching = false)); + }} + > +
+ +
+
@@ -71,4 +77,5 @@
- +
+ diff --git a/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte b/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte index 3e411c5f7..6586b4ac7 100644 --- a/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte +++ b/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte @@ -43,7 +43,7 @@
-
+
diff --git a/packages/ui/src/routes/[projectId]/navigation/ProjectsPopup.svelte b/packages/ui/src/routes/[projectId]/navigation/ProjectsPopup.svelte new file mode 100644 index 000000000..758184133 --- /dev/null +++ b/packages/ui/src/routes/[projectId]/navigation/ProjectsPopup.svelte @@ -0,0 +1,42 @@ + + +{#if !hidden} +
{ + hidden = true; + }} + > + {#each projects as project} + + + {/each} + +
+{/if} diff --git a/packages/ui/src/routes/[projectId]/navigation/clickOutside.ts b/packages/ui/src/routes/[projectId]/navigation/clickOutside.ts new file mode 100644 index 000000000..f7f6c55b5 --- /dev/null +++ b/packages/ui/src/routes/[projectId]/navigation/clickOutside.ts @@ -0,0 +1,14 @@ +export function clickOutside(node: HTMLElement, handler: () => void): { destroy: () => void } { + function onClick(event: MouseEvent) { + if (node && !node.contains(event.target as HTMLElement)) { + handler(); + } + } + + document.addEventListener('click', onClick, true); + return { + destroy() { + document.removeEventListener('click', onClick, true); + } + }; +} diff --git a/packages/ui/src/routes/[projectId]/settings/Spacer.svelte b/packages/ui/src/routes/[projectId]/settings/Spacer.svelte index a73186634..b15b777e7 100644 --- a/packages/ui/src/routes/[projectId]/settings/Spacer.svelte +++ b/packages/ui/src/routes/[projectId]/settings/Spacer.svelte @@ -1,3 +1,10 @@ - + -
+