From 73a7bd896cd0b59f0a7970fe91c61db041882e7e Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Fri, 26 Aug 2022 17:15:27 +0200 Subject: [PATCH] Sidebar rework (#490) * feat(frontend): Add runs to landing page + fix responsive issues * feat(frontend): Sidebar done * feat(frontend): Align all pages to the new layout * feat(frontend): Make scripts and flows box clickable * feat(frontend): Revert the sidebar color * feat(frontend): Restore missing workspace menu + fix minor UI issues --- .../src/lib/components/CenteredPage.svelte | 4 +- .../src/lib/components/FlowBuilder.svelte | 4 +- .../src/lib/components/ScriptBuilder.svelte | 4 +- .../components/landing/FlowLandingBox.svelte | 7 +- .../lib/components/landing/ScriptBox.svelte | 9 +- .../lib/components/sidebar/MenuLink.svelte | 54 ++ .../components/sidebar/SidebarContent.svelte | 73 +++ .../lib/components/sidebar/UserMenu.svelte | 102 ++++ .../components/sidebar/WorkspaceMenu.svelte | 109 ++++ frontend/src/lib/utils.ts | 9 +- frontend/src/routes/__layout@root.svelte | 473 +++++------------- frontend/src/routes/flows/add.svelte | 6 +- .../src/routes/flows/edit/[...path].svelte | 6 +- frontend/src/routes/index.svelte | 12 +- frontend/src/routes/scripts/add.svelte | 5 +- .../src/routes/scripts/edit/[...hash].svelte | 5 +- 16 files changed, 518 insertions(+), 364 deletions(-) create mode 100644 frontend/src/lib/components/sidebar/MenuLink.svelte create mode 100644 frontend/src/lib/components/sidebar/SidebarContent.svelte create mode 100644 frontend/src/lib/components/sidebar/UserMenu.svelte create mode 100644 frontend/src/lib/components/sidebar/WorkspaceMenu.svelte diff --git a/frontend/src/lib/components/CenteredPage.svelte b/frontend/src/lib/components/CenteredPage.svelte index 4f82cb4ce5..2f76d7bf70 100644 --- a/frontend/src/lib/components/CenteredPage.svelte +++ b/frontend/src/lib/components/CenteredPage.svelte @@ -1,5 +1,5 @@ -
-
+
+
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte index 47d16f7259..2874a10abe 100644 --- a/frontend/src/lib/components/FlowBuilder.svelte +++ b/frontend/src/lib/components/FlowBuilder.svelte @@ -154,8 +154,8 @@ }) -
-
+
+
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte index c7b1dd9937..c1152c9d67 100644 --- a/frontend/src/lib/components/ScriptBuilder.svelte +++ b/frontend/src/lib/components/ScriptBuilder.svelte @@ -103,9 +103,7 @@ }) -
+
diff --git a/frontend/src/lib/components/landing/FlowLandingBox.svelte b/frontend/src/lib/components/landing/FlowLandingBox.svelte index 58c30f6089..375b737820 100644 --- a/frontend/src/lib/components/landing/FlowLandingBox.svelte +++ b/frontend/src/lib/components/landing/FlowLandingBox.svelte @@ -6,7 +6,8 @@
goto(`/flows/get/${flow.path}`)} >
{flow.summary}
@@ -18,7 +19,7 @@ class="inline-flex space-x-2 space-x-reverse flex-row-reverse w-full bottom-4 right-4 flex-wrap" > + + {#if show} + + {/if} +
+
diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte new file mode 100644 index 0000000000..33631aeef2 --- /dev/null +++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte @@ -0,0 +1,109 @@ + + +
+
+ + + {#if show} + + {/if} +
+
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts index 02e3072c9f..4bea31f322 100644 --- a/frontend/src/lib/utils.ts +++ b/frontend/src/lib/utils.ts @@ -54,8 +54,9 @@ export function displayDate(dateString: string | undefined): string { if (date.toString() === 'Invalid Date') { return '' } else { - return `${date.getFullYear()}/${date.getMonth() + 1 - }/${date.getDate()} at ${date.toLocaleTimeString()}` + return `${date.getFullYear()}/${ + date.getMonth() + 1 + }/${date.getDate()} at ${date.toLocaleTimeString()}` } } @@ -556,3 +557,7 @@ export function scriptToHubUrl( return url } + +export function classNames(...classes: string[]): string { + return classes.filter(Boolean).join(' ') +} diff --git a/frontend/src/routes/__layout@root.svelte b/frontend/src/routes/__layout@root.svelte index 68e5414479..40a5271cb0 100644 --- a/frontend/src/routes/__layout@root.svelte +++ b/frontend/src/routes/__layout@root.svelte @@ -1,361 +1,162 @@ -
-
+ +
+
+
+ {#if isCollapsed} + W + {:else} + Windmill + {/if} +
+ +
+ + +
+ + +
- - - +
+
+
- +
+
+
+ +
+ +
+
- - diff --git a/frontend/src/routes/flows/add.svelte b/frontend/src/routes/flows/add.svelte index 6822a7863b..71dd76b093 100644 --- a/frontend/src/routes/flows/add.svelte +++ b/frontend/src/routes/flows/add.svelte @@ -8,6 +8,8 @@ - + + + diff --git a/frontend/src/routes/flows/edit/[...path].svelte b/frontend/src/routes/flows/edit/[...path].svelte index c5dc4cbc3e..bc4e5ba0db 100644 --- a/frontend/src/routes/flows/edit/[...path].svelte +++ b/frontend/src/routes/flows/edit/[...path].svelte @@ -14,7 +14,7 @@ import { workspaceStore } from '$lib/stores' import { decodeState, emptySchema } from '$lib/utils' import { initFlow } from '$lib/components/flows/flowStore' - import { initFlowState } from '$lib/components/flows/flowState' + import CenteredPage from '$lib/components/CenteredPage.svelte' const initialState = $page.url.searchParams.get('state') let flowLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined @@ -54,4 +54,6 @@ } - + + + diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte index 6856bbce85..720a5be884 100644 --- a/frontend/src/routes/index.svelte +++ b/frontend/src/routes/index.svelte @@ -42,14 +42,12 @@ } } - const ressources = [] + const resources = [] -
-

- Welcome to Windmill! -

+

Home

+

- Ressources + Resources

- {#if ressources.length === 0} + {#if resources.length === 0} {/if}
diff --git a/frontend/src/routes/scripts/add.svelte b/frontend/src/routes/scripts/add.svelte index 51d5c8791c..b171e98bcc 100644 --- a/frontend/src/routes/scripts/add.svelte +++ b/frontend/src/routes/scripts/add.svelte @@ -14,6 +14,7 @@ import ScriptBuilder from '$lib/components/ScriptBuilder.svelte' import type { Schema } from '$lib/common' import { decodeState, emptySchema, getScriptByPath, sendUserToast } from '$lib/utils' + import CenteredPage from '$lib/components/CenteredPage.svelte' // Default let schema: Schema = emptySchema() @@ -76,4 +77,6 @@ } - + + + diff --git a/frontend/src/routes/scripts/edit/[...hash].svelte b/frontend/src/routes/scripts/edit/[...hash].svelte index 03cf8de622..69eeb40056 100644 --- a/frontend/src/routes/scripts/edit/[...hash].svelte +++ b/frontend/src/routes/scripts/edit/[...hash].svelte @@ -13,6 +13,7 @@ import { workspaceStore } from '$lib/stores' import ScriptBuilder from '$lib/components/ScriptBuilder.svelte' import { decodeState } from '$lib/utils' + import CenteredPage from '$lib/components/CenteredPage.svelte' const initialState = $page.url.searchParams.get('state') let scriptLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined @@ -40,5 +41,7 @@ {#if script} - + + + {/if}