Add full navigation settings panel in new design UI. Remove navigation theme settings from theme panel

2022-05-06 13:51:27 +01:00 · 2022-05-06 13:51:27 +01:00 · 3ada9a12c5
parent 071dc5be4b
commit 3ada9a12c5
10 changed files with 181 additions and 57 deletions
--- 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)",
+}
--- 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
--- 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)
 </script>

 <div class="design">
--- 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)
 </script>

 <slot />
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksDrawer.svelte
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationLinksEditor.svelte
@ -1,6 +1,6 @@
 <script>
  import { Button, Drawer } from "@budibase/bbui"
-  import NavigationDrawer from "./NavigationDrawer.svelte"
+  import NavigationLinksDrawer from "./NavigationLinksDrawer.svelte"
  import { cloneDeep } from "lodash/fp"
  import { store } from "builderStore"

@ -30,5 +30,5 @@
    Configure the links in your navigation bar.
  </svelte:fragment>
  <Button cta slot="buttons" on:click={save}>Save</Button>
-  <NavigationDrawer slot="body" bind:links />
+  <NavigationLinksDrawer slot="body" bind:links />
 </Drawer>
--- 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,7 +1,51 @@
 <script>
  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
-  import { Body, Layout } from "@budibase/bbui"
-  import NavigationEditor from "./_components/NavigationEditor.svelte"
+  import {
+    Body,
+    Layout,
+    Label,
+    ActionGroup,
+    ActionButton,
+    Checkbox,
+    Select,
+    ColorPicker,
+    Input,
+    notifications,
+  } from "@budibase/bbui"
+  import NavigationLinksEditor from "./_components/NavigationLinksEditor.svelte"
+  import { store } from "builderStore"
+  import { onMount } from "svelte"
+  import { DefaultAppTheme } from "constants"
+
+  const updateNavigation = async (key, value) => {
+    try {
+      let navigation = $store.navigation
+      navigation[key] = value
+      await store.actions.navigation.save(navigation)
+    } catch (error) {
+      notifications.error("Error updating navigation settings")
+    }
+  }
+
+  onMount(() => {
+    // Add navigation settings to old apps
+    let changed = false
+    if (!$store.navigation.navigation) {
+      $store.navigation.navigation = "Top"
+      changed = true
+    }
+    if (!$store.navigation.hideTitle && !$store.navigation.title) {
+      $store.navigation.title = $store.name
+      changed = true
+    }
+    if (!$store.navigation.width) {
+      $store.navigation.width = "Large"
+      changed = true
+    }
+    if (changed) {
+      store.actions.navigation.save($store.navigation)
+    }
+  })
 </script>

 <NavigationPanel title="Navigation">
@ -13,6 +57,83 @@
      You can hide and show your navigation for each screen in the screen
      settings
    </Body>
-    <NavigationEditor />
+    <NavigationLinksEditor />
+    <Layout noPadding gap="XS">
+      <Label>Position</Label>
+      <ActionGroup quiet>
+        <ActionButton
+          selected={$store.navigation.navigation === "Top"}
+          quiet={$store.navigation.navigation !== "Top"}
+          icon="PaddingTop"
+          on:click={() => updateNavigation("navigation", "Top")}
+        />
+        <ActionButton
+          selected={$store.navigation.navigation === "Left"}
+          quiet={$store.navigation.navigation !== "Left"}
+          icon="PaddingLeft"
+          on:click={() => updateNavigation("navigation", "Left")}
+        />
+      </ActionGroup>
+    </Layout>
+    {#if $store.navigation.navigation === "Top"}
+      <Checkbox
+        text="Sticky header"
+        value={$store.navigation.sticky}
+        on:change={e => updateNavigation("sticky", e.detail)}
+      />
+    {/if}
+    <Layout noPadding gap="XS">
+      <Checkbox
+        text="Logo"
+        value={!$store.navigation.hideLogo}
+        on:change={e => updateNavigation("hideLogo", !e.detail)}
+      />
+      {#if !$store.navigation.hideLogo}
+        <Input
+          value={$store.navigation.logoUrl}
+          on:change={e => updateNavigation("logoUrl", e.detail)}
+          placeholder="Add logo URL"
+          updateOnChange={false}
+        />
+      {/if}
+    </Layout>
+    <Layout noPadding gap="XS">
+      <Checkbox
+        text="Title"
+        value={!$store.navigation.hideTitle}
+        on:change={e => updateNavigation("hideTitle", !e.detail)}
+      />
+      {#if !$store.navigation.hideTitle}
+        <Input
+          value={$store.navigation.title}
+          on:change={e => updateNavigation("title", e.detail)}
+          placeholder="Add title"
+          updateOnChange={false}
+        />
+      {/if}
+    </Layout>
+    <Select
+      label="Width"
+      options={["Max", "Large", "Medium", "Small"]}
+      plaveholder={null}
+      value={$store.navigation.navWidth}
+      on:change={e => updateNavigation("navWidth", e.detail)}
+    />
+    <Layout noPadding gap="XS">
+      <Label>Background color</Label>
+      <ColorPicker
+        spectrumTheme={$store.theme}
+        value={$store.navigation.navBackground || DefaultAppTheme.navBackground}
+        on:change={e => updateNavigation("navBackground", e.detail)}
+      />
+    </Layout>
+    <Layout noPadding gap="XS">
+      <Label>Text color</Label>
+      <ColorPicker
+        spectrumTheme={$store.theme}
+        value={$store.navigation.navTextColor || DefaultAppTheme.navTextColor}
+        on:change={e => updateNavigation("navTextColor", e.detail)}
+      />
+    </Layout>
  </Layout>
 </NavigationPanel>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeEditor.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/ThemeEditor.svelte
@ -13,17 +13,10 @@
  } from "@budibase/bbui"
  import { store } from "builderStore"
  import AppThemeSelect from "./AppThemeSelect.svelte"
+  import { DefaultAppTheme } from "constants"

  let modal

-  const defaultTheme = {
-    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)",
-  }
-
  const buttonBorderRadiusOptions = [
    {
      label: "None",
@ -93,7 +86,7 @@
          <Select
            placeholder={null}
            value={$store.customTheme?.buttonBorderRadius ||
-              defaultTheme.buttonBorderRadius}
+              DefaultAppTheme.buttonBorderRadius}
            on:change={updateProperty("buttonBorderRadius")}
            options={buttonBorderRadiusOptions}
          />
@ -103,7 +96,8 @@
        <Label size="L">Accent color</Label>
        <ColorPicker
          spectrumTheme={$store.theme}
-          value={$store.customTheme?.primaryColor || defaultTheme.primaryColor}
+          value={$store.customTheme?.primaryColor ||
+            DefaultAppTheme.primaryColor}
          on:change={updateProperty("primaryColor")}
        />
      </div>
@ -112,27 +106,10 @@
        <ColorPicker
          spectrumTheme={$store.theme}
          value={$store.customTheme?.primaryColorHover ||
-            defaultTheme.primaryColorHover}
+            DefaultAppTheme.primaryColorHover}
          on:change={updateProperty("primaryColorHover")}
        />
      </div>
-      <div class="setting">
-        <Label size="L">Navigation bar background color</Label>
-        <ColorPicker
-          spectrumTheme={$store.theme}
-          value={$store.customTheme?.navBackground ||
-            defaultTheme.navBackground}
-          on:change={updateProperty("navBackground")}
-        />
-      </div>
-      <div class="setting">
-        <Label size="L">Navigation bar text color</Label>
-        <ColorPicker
-          spectrumTheme={$store.theme}
-          value={$store.customTheme?.navTextColor || defaultTheme.navTextColor}
-          on:change={updateProperty("navTextColor")}
-        />
-      </div>
    </Layout>
    <div slot="footer">
      <Button secondary quiet on:click={resetTheme}>Reset</Button>
--- 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
+  }
 </script>

 <div
@ -96,9 +121,9 @@
      class="nav-wrapper"
      class:sticky
      class:hidden={isPeeking}
-      style={`--height:${$context.device.height}px; --width:${$context.device.width}px;`}
+      style={navStyle}
    >
-      <div class="nav nav--{typeClass} size--{widthClass}">
+      <div class="nav nav--{typeClass} size--{navWidthClass}">
        <div class="nav-header">
          {#if validLinks?.length}
            <div class="burger">
@ -165,7 +190,7 @@
    </div>
  {/if}
  <div class="main-wrapper">
-    <div class="main size--{widthClass}">
+    <div class="main size--{pageWidthClass}">
      <slot />
    </div>
  </div>
--- 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",