From 3ada9a12c55aeda83940920c42bababdbddfe700 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 6 May 2022 13:51:27 +0100 Subject: [PATCH] Add full navigation settings panel in new design UI. Remove navigation theme settings from theme panel --- packages/builder/src/constants/index.js | 8 ++ packages/builder/src/helpers/urlStateSync.js | 2 +- .../design/[screenId]/_layout.svelte | 5 +- .../components/[componentId]/_layout.svelte | 5 +- ...er.svelte => NavigationLinksDrawer.svelte} | 0 ...or.svelte => NavigationLinksEditor.svelte} | 4 +- .../design/[screenId]/navigation/index.svelte | 127 +++++++++++++++++- .../theme/_components/ThemeEditor.svelte | 33 +---- .../client/src/components/app/Layout.svelte | 39 +++++- packages/client/src/stores/screens.js | 15 +-- 10 files changed, 181 insertions(+), 57 deletions(-) rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/{NavigationDrawer.svelte => NavigationLinksDrawer.svelte} (100%) rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/{NavigationEditor.svelte => NavigationLinksEditor.svelte} (86%) diff --git a/packages/builder/src/constants/index.js b/packages/builder/src/constants/index.js index abeaadc718..065b4ead06 100644 --- a/packages/builder/src/constants/index.js +++ b/packages/builder/src/constants/index.js @@ -56,3 +56,11 @@ export const BUDIBASE_INTERNAL_DB = "bb_internal" export const APP_NAME_REGEX = /^[\w\s]+$/ // zero or more non-whitespace characters export const APP_URL_REGEX = /^\S*$/ + +export const DefaultAppTheme = { + primaryColor: "var(--spectrum-global-color-blue-600)", + primaryColorHover: "var(--spectrum-global-color-blue-500)", + buttonBorderRadius: "16px", + navBackground: "var(--spectrum-global-color-gray-50)", + navTextColor: "var(--spectrum-global-color-gray-800)", +} diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js index 616bb9b7f1..f6357ae5d9 100644 --- a/packages/builder/src/helpers/urlStateSync.js +++ b/packages/builder/src/helpers/urlStateSync.js @@ -36,7 +36,7 @@ export const syncURLToState = options => { let cachedRedirect = get(routify.redirect) let cachedPage = get(routify.page) let previousParamsHash = null - let debug = true + let debug = false const log = (...params) => debug && console.log(...params) // Navigate to a certain URL diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte index 7de0c5d093..79e4fecf52 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte @@ -17,10 +17,7 @@ routify, }) - onDestroy(() => { - console.log("============= stop syncing screen ID!") - stopSyncing() - }) + onDestroy(stopSyncing)
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte index b773cbe6ee..5b51d755af 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte @@ -15,10 +15,7 @@ routify, }) - onDestroy(() => { - console.log("============= stop syncing component ID!") - stopSyncing() - }) + onDestroy(stopSyncing) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte similarity index 100% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationDrawer.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte similarity index 86% rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationEditor.svelte rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte index c17a58f9e9..895c82495d 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationEditor.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte @@ -1,6 +1,6 @@ @@ -13,6 +57,83 @@ You can hide and show your navigation for each screen in the screen settings - + + + + + updateNavigation("navigation", "Top")} + /> + updateNavigation("navigation", "Left")} + /> + + + {#if $store.navigation.navigation === "Top"} + updateNavigation("sticky", e.detail)} + /> + {/if} + + updateNavigation("hideLogo", !e.detail)} + /> + {#if !$store.navigation.hideLogo} + updateNavigation("logoUrl", e.detail)} + placeholder="Add logo URL" + updateOnChange={false} + /> + {/if} + + + updateNavigation("hideTitle", !e.detail)} + /> + {#if !$store.navigation.hideTitle} + updateNavigation("title", e.detail)} + placeholder="Add title" + updateOnChange={false} + /> + {/if} + + @@ -103,7 +96,8 @@
@@ -112,27 +106,10 @@ -
- - -
-
- - -
diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index 4df9087904..298ad34466 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -9,6 +9,7 @@ const component = getContext("component") const context = getContext("context") + // Legacy props which must remain unchanged for backwards compatibility export let title export let hideTitle = false export let logoUrl @@ -18,12 +19,18 @@ export let links export let width = "Large" - const navigationClasses = { + // New props from new design UI + export let navBackground + export let navTextColor + export let navWidth + export let pageWidth + + const NavigationClasses = { Top: "top", Left: "left", None: "none", } - const widthClasses = { + const WidthClasses = { Max: "max", Large: "l", Medium: "m", @@ -49,8 +56,15 @@ } $: validLinks = links?.filter(link => link.text && link.url) || [] - $: typeClass = navigationClasses[navigation] || "none" - $: widthClass = widthClasses[width] || "l" + $: typeClass = NavigationClasses[navigation] || NavigationClasses.None + $: navWidthClass = WidthClasses[navWidth || width] || WidthClasses.Large + $: pageWidthClass = WidthClasses[pageWidth || width] || WidthClasses.Large + $: navStyle = getNavStyle( + navBackground, + navTextColor, + $context.device.width, + $context.device.height + ) let mobileOpen = false const isInternal = url => { @@ -83,6 +97,17 @@ return navigation === "Top" ? "137px" : "0px" } } + + const getNavStyle = (backgroundColor, textColor, width, height) => { + let style = `--width:${width}px;--height:${height}px;` + if (backgroundColor) { + style += `--navBackground: ${backgroundColor};` + } + if (textColor) { + style += `--navTextColor: ${textColor};` + } + return style + }
-
+
{#if validLinks?.length}
@@ -165,7 +190,7 @@
{/if}
-
+
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js index d527e69ef9..4daa8f684c 100644 --- a/packages/client/src/stores/screens.js +++ b/packages/client/src/stores/screens.js @@ -47,18 +47,17 @@ const createScreenStore = () => { } if (activeScreen?.showNavigation) { navigationSettings = - $builderStore.navigation || $appStore.application?.navigation + $builderStore.navigation || $appStore.application?.navigation || {} - // Legacy - if this is a legacy screen without any navigation - // settings fall back to just showing the app title - if (!navigationSettings) { - navigationSettings = { - title: $appStore.application?.name, - } - } + // Default navigation to top if (!navigationSettings.navigation) { navigationSettings.navigation = "Top" } + + // Default title to app name + if (!navigationSettings.title && !navigationSettings.hideTitle) { + navigationSettings.title = $appStore.application?.name + } } activeLayout = { _id: "layout",