diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte index 4db218f60b..c04baf2177 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte @@ -3,60 +3,59 @@ import { get } from "svelte/store" import Panel from "components/design/Panel.svelte" import { - Detail, Toggle, - Body, - Icon, - ColorPicker, - Input, - Label, - ActionGroup, - ActionButton, + DetailSummary, Checkbox, notifications, Select, - Combobox, } from "@budibase/bbui" import { themeStore, selectedScreen, screenStore, - navigationStore, + componentStore, + navigationStore as nav, } from "stores/builder" import { DefaultAppTheme } from "constants" - import BarButtonList from "/src/components/design/settings/controls/BarButtonList.svelte" + import PropertyControl from "components/design/settings/controls/PropertyControl.svelte" + import BarButtonList from "components/design/settings/controls/BarButtonList.svelte" + import ColorPicker from "components/design/settings/controls/ColorPicker.svelte" + import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte" + import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte" + import { getBindableProperties } from "dataBinding" - $: alignmentOptions = [ + const positionOptions = [ + { value: "Top", barIcon: "PaddingTop" }, + { value: "Left", barIcon: "PaddingLeft" }, + ] + const alignmentOptions = [ { value: "Left", barIcon: "TextAlignLeft" }, { value: "Center", barIcon: "TextAlignCenter" }, { value: "Right", barIcon: "TextAlignRight" }, ] + const widthOptions = ["Max", "Large", "Medium", "Small"] + $: bindings = getBindableProperties( + $selectedScreen, + $componentStore.selectedComponentId + ) $: screenRouteOptions = $screenStore.screens .map(screen => screen.routing?.route) .filter(x => x != null) - const updateShowNavigation = async e => { - await screenStore.updateSetting( - get(selectedScreen), - "showNavigation", - e.detail - ) + const updateShowNavigation = async show => { + await screenStore.updateSetting(get(selectedScreen), "showNavigation", show) } const update = async (key, value) => { try { - let navigation = $navigationStore + let navigation = $nav navigation[key] = value - await navigationStore.save(navigation) + await nav.save(navigation) } catch (error) { notifications.error("Error updating navigation settings") } } - - const updateTextAlign = textAlignValue => { - navigationStore.syncAppNavigation({ textAlign: textAlignValue }) - } -
-
- General -
-
- - Show nav on this screen -
-
+ + + {#if $selectedScreen?.showNavigation} -
-
-
- Customize -
-
- - These settings apply to all screens -
-
- -
-
-
- -
- - update("navigation", "Top")} + + +
+ update("navigation", position)} + value={$nav.navigation} + props={{ + options: positionOptions, + }} + /> + {#if $nav.navigation === "Top"} + update("navWidth", width)} /> - update("navigation", "Left")} - /> - - - {#if $navigationStore.navigation === "Top"} -
- -
- update("sticky", e.detail)} - /> -
- -
- update("title", e.detail)} - updateOnChange={false} + {#if !$nav.hideTitle} + update("title", title)} + {bindings} + props={{ + updateOnChange: false, + }} /> - -
- -
- nav.syncAppNavigation({ textAlign: align })} + value={$nav.textAlign} + props={{ + options: alignmentOptions, + }} /> {/if} -
- -
- update("navBackground", e.detail)} + update("navBackground", color)} + value={$nav.navBackground || DefaultAppTheme.navBackground} + props={{ + spectrumTheme: $themeStore.theme, + }} /> -
- -
- update("navTextColor", e.detail)} + update("navTextColor", color)} + value={$nav.navTextColor || DefaultAppTheme.navTextColor} + props={{ + spectrumTheme: $themeStore.theme, + }} />
-
+ -
-
-
- Logo -
-
-
- -
- update("hideLogo", !e.detail)} + +
+ update("hideLogo", !show)} /> - {#if !$navigationStore.hideLogo} -
- -
- update("logoUrl", e.detail)} - updateOnChange={false} + {#if !$nav.hideLogo} + update("logoUrl", url)} + {bindings} + props={{ + updateOnChange: false, + }} /> -
- -
- update("logoLinkUrl", e.detail)} - options={screenRouteOptions} + update("logoLinkUrl", url)} + {bindings} + props={{ + appendBindingsAsOptions: false, + options: screenRouteOptions, + }} /> -
- -
- update("openLogoLinkInNewTab", !!e.detail)} + update("openLogoLinkInNewTab", show)} /> {/if}
-
+ {/if}