Fix theme resetting navigation background and update layout UI

4 years ago · 68156fee3d
4 changed files with 25 additions and 30 deletions
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
@ -1,31 +1,25 @@
 <script>
  import Panel from "components/design/Panel.svelte"
-  import { Banner, Layout } from "@budibase/bbui"
+  import { Layout } from "@budibase/bbui"
  import NavItem from "components/common/NavItem.svelte"
  import { store } from "builderStore"
  import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
 </script>

 <Panel title="Layouts" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Banner
-      type="warning"
-      showCloseButton={false}
-      extraButtonText="View details"
-      extraButtonAction={() => {}}
-    >
-      Custom layouts are being deprecated. They will be removed on [date].
-    </Banner>
+  <Layout paddingY="XL" paddingX="">
+    <div>
+      {#each $store.layouts as layout (layout._id)}
+        <NavItem
+          icon="Experience"
+          indentLevel={0}
+          selected={$store.selectedLayoutId === layout._id}
+          text={layout.name}
+          on:click={() => ($store.selectedLayoutId = layout._id)}
+        >
+          <LayoutDropdownMenu {layout} />
+        </NavItem>
+      {/each}
+    </div>
  </Layout>
-  {#each $store.layouts as layout (layout._id)}
-    <NavItem
-      icon="Experience"
-      indentLevel={0}
-      selected={$store.selectedLayoutId === layout._id}
-      text={layout.name}
-      on:click={() => ($store.selectedLayoutId = layout._id)}
-    >
-      <LayoutDropdownMenu {layout} />
-    </NavItem>
-  {/each}
 </Panel>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
@ -1,7 +1,7 @@
 <script>
  import Panel from "components/design/Panel.svelte"
  import { store, selectedLayout } from "builderStore"
-  import { Layout, Body, Button, notifications } from "@budibase/bbui"
+  import { Layout, Body, Button, Banner, notifications } from "@budibase/bbui"
  import { Component } from "builderStore/store/screenTemplates/utils/Component"

  const copyLayout = () => {
@ -37,6 +37,14 @@

 <Panel title={$selectedLayout?.name} icon="Experience" borderLeft>
  <Layout paddingX="L" paddingY="XL" gap="S">
+    <Banner
+      type="warning"
+      showCloseButton={false}
+      extraButtonText="View details"
+      extraButtonAction={() => {}}
+    >
+      Custom layouts are being deprecated. They will be removed on [date].
+    </Banner>
    <Body size="S">
      You can save the content of this layout by pressing the button below.
    </Body>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
@ -16,13 +16,6 @@
    try {
      const theme = ThemeOptions[e.detail] ?? ThemeOptions[2]
      await store.actions.theme.save(theme)
-      await store.actions.navigation.save({
-        ...get(store).navigation,
-        navBackground:
-          theme === "spectrum--light"
-            ? "var(--spectrum-global-color-gray-50)"
-            : "var(--spectrum-global-color-gray-100)",
-      })
    } catch (error) {
      notifications.error("Error updating theme")
    }
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@ -276,7 +276,7 @@ const performAppCreate = async (ctx: any) => {
      navigation: "Top",
      title: name,
      navWidth: "Large",
-      navBackground: "var(--spectrum-global-color-gray-50)",
+      navBackground: "var(--spectrum-global-color-gray-100)",
      links: [
        {
          url: "/home",