From e3cfdd537a505e38e1859dbdeac2aaa696af5548 Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Tue, 15 Aug 2023 09:59:20 +0100 Subject: [PATCH] New Nav component (#11266) --- .../builder/src/components/design/Pane.svelte | 21 +++ .../src/components/design/RightPanel.svelte | 112 +++++++++++ .../_components/NavigationInfoPanel.svelte | 33 ---- .../NavigationInfoPanel/CustomizePane.svelte | 176 ++++++++++++++++++ .../NavigationInfoPanel/SettingsPane.svelte | 31 +++ .../NavigationInfoPanel/index.svelte | 10 + .../design/[screenId]/navigation/index.svelte | 2 +- 7 files changed, 351 insertions(+), 34 deletions(-) create mode 100644 packages/builder/src/components/design/Pane.svelte create mode 100644 packages/builder/src/components/design/RightPanel.svelte delete mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte diff --git a/packages/builder/src/components/design/Pane.svelte b/packages/builder/src/components/design/Pane.svelte new file mode 100644 index 0000000000..88b6ea1c05 --- /dev/null +++ b/packages/builder/src/components/design/Pane.svelte @@ -0,0 +1,21 @@ + + +{#if $paneStore} +
+ +
+{/if} + + diff --git a/packages/builder/src/components/design/RightPanel.svelte b/packages/builder/src/components/design/RightPanel.svelte new file mode 100644 index 0000000000..f9075600f9 --- /dev/null +++ b/packages/builder/src/components/design/RightPanel.svelte @@ -0,0 +1,112 @@ + + +
+
+
+ +
+ {title} +
+
+ {#each Object.entries(panes) as [id, pane]} +
+ +
+ {/each} +
+
+ + +
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte deleted file mode 100644 index 614e1eed80..0000000000 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte +++ /dev/null @@ -1,33 +0,0 @@ - - - - - {#if $selectedScreen.layoutId} - - You can't preview your navigation settings using this screen as it uses - a custom layout, which is deprecated - - {/if} - - Your navigation is configured for all the screens within your app. - - - You can hide and show your navigation for each screen in the screen - settings. - - - diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte new file mode 100644 index 0000000000..05108b1736 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/CustomizePane.svelte @@ -0,0 +1,176 @@ + + + +
+
+ + CHANGES WILL APPLY TO ALL SCREENS +
+ + Your navigation is configured for all the screens within your app. + +
+
+ +
+
+
+ +
+ + update("navigation", "Top")} + /> + update("navigation", "Left")} + /> + + + {#if $store.navigation.navigation === "Top"} +
+ +
+ update("sticky", e.detail)} + /> +
+ +
+ update("logoUrl", e.detail)} + updateOnChange={false} + /> + {/if} +
+ +
+ update("hideTitle", !e.detail)} + /> + {#if !$store.navigation.hideTitle} +
+ +
+ update("title", e.detail)} + updateOnChange={false} + /> + {/if} +
+ +
+ update("navBackground", e.detail)} + /> +
+ +
+ update("navTextColor", e.detail)} + /> +
+ + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte new file mode 100644 index 0000000000..d3ce720994 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/SettingsPane.svelte @@ -0,0 +1,31 @@ + + + +
+ + Show nav on this screen +
+ + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte new file mode 100644 index 0000000000..6ce5405f93 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel/index.svelte @@ -0,0 +1,10 @@ + + + + + + diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte index fc2e03d8e8..2331d8b285 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/index.svelte @@ -1,6 +1,6 @@