From 5d5b10723406286cd50ea6a59aa03d3176f33ec7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 11 May 2022 13:06:41 +0100
Subject: [PATCH] Add initial layouts panel and add explicit panels for theme
 and navigation tabs

---
 .../NavigationPanel.svelte => Panel.svelte}   | 15 ++++-
 .../design/settings/SettingsPanel.svelte      | 66 -------------------
 ...Panel.svelte => ComponentListPanel.svelte} |  0
 ...ionPanel.svelte => LayoutListPanel.svelte} |  6 +-
 ...ionPanel.svelte => ScreenListPanel.svelte} |  0
 5 files changed, 16 insertions(+), 71 deletions(-)
 rename packages/builder/src/components/design/{navigation/NavigationPanel.svelte => Panel.svelte} (87%)
 delete mode 100644 packages/builder/src/components/design/settings/SettingsPanel.svelte
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/{ComponentNavigationPanel.svelte => ComponentListPanel.svelte} (100%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/{LayoutNavigationPanel.svelte => LayoutListPanel.svelte} (87%)
 rename packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/{ScreenNavigationPanel.svelte => ScreenListPanel.svelte} (100%)

diff --git a/packages/builder/src/components/design/navigation/NavigationPanel.svelte b/packages/builder/src/components/design/Panel.svelte
similarity index 87%
rename from packages/builder/src/components/design/navigation/NavigationPanel.svelte
rename to packages/builder/src/components/design/Panel.svelte
index ebcf0c534d..8dabbd40da 100644
--- a/packages/builder/src/components/design/navigation/NavigationPanel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -2,20 +2,26 @@
   import { Icon, Heading } from "@budibase/bbui"
 
   export let title
+  export let icon
   export let showAddButton = false
   export let showBackButton = false
   export let showExpandIcon = false
   export let onClickAddButton
   export let onClickBackButton
+  export let borderLeft = false
+  export let borderRight = false
 
   let wide = false
 </script>
 
-<div class="navigation-panel" class:wide>
+<div class="navigation-panel" class:wide class:borderLeft class:borderRight>
   <div class="header">
     {#if showBackButton}
       <Icon name="ArrowLeft" hoverable on:click={onClickBackButton} />
     {/if}
+    {#if icon}
+      <Icon name={icon} />
+    {/if}
     <div class="title">
       <Heading size="XS">{title || ""}</Heading>
     </div>
@@ -41,13 +47,18 @@
   .navigation-panel {
     width: 280px;
     background: var(--background);
-    border-right: var(--border-light);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
     transition: width 130ms ease-out;
   }
+  .navigation-panel.border-left {
+    border-left: var(--border-light);
+  }
+  .navigation-panel.border-right {
+    border-right: var(--border-light);
+  }
   .navigation-panel.wide {
     width: 420px;
   }
diff --git a/packages/builder/src/components/design/settings/SettingsPanel.svelte b/packages/builder/src/components/design/settings/SettingsPanel.svelte
deleted file mode 100644
index 968cb4e957..0000000000
--- a/packages/builder/src/components/design/settings/SettingsPanel.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-  import { Icon, Heading } from "@budibase/bbui"
-
-  export let title
-  export let icon
-</script>
-
-<div class="settings-panel">
-  {#if title}
-    <div class="header">
-      {#if icon}
-        <Icon name={icon} />
-      {/if}
-      <div class="title" {title}>
-        <Heading size="XS">{title || ""}</Heading>
-      </div>
-    </div>
-  {/if}
-  <div class="body">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .settings-panel {
-    width: 280px;
-    background: var(--background);
-    border-left: var(--border-light);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-  .header {
-    flex: 0 0 48px;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 0 var(--spacing-l);
-    border-bottom: var(--border-light);
-    gap: var(--spacing-m);
-  }
-  .header :global(*) {
-    color: var(--spectrum-global-color-gray-700);
-  }
-  .title {
-    flex: 1 1 auto;
-    width: 0;
-  }
-  .title :global(h1) {
-    overflow: hidden;
-    font-weight: 600;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .body {
-    flex: 1 1 auto;
-    overflow: auto;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentNavigationPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentNavigationPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutNavigationPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
similarity index 87%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutNavigationPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
index 5158c11352..6dbc728ca5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutNavigationPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
@@ -1,12 +1,12 @@
 <script>
-  import NavigationPanel from "components/design/navigation/NavigationPanel.svelte"
+  import Panel from "components/design/Panel.svelte"
   import { Banner, Layout } from "@budibase/bbui"
   import NavItem from "components/common/NavItem.svelte"
   import { store } from "builderStore"
   import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
 </script>
 
-<NavigationPanel title="Layouts">
+<Panel title="Layouts" borderRight>
   <Layout paddingX="L" paddingY="XL" gap="S">
     <Banner
       type="warning"
@@ -28,7 +28,7 @@
       <LayoutDropdownMenu {layout} />
     </NavItem>
   {/each}
-</NavigationPanel>
+</Panel>
 
 <!--      -->
 <!--      color={RoleUtils.getRoleColour(screen.routing.roleId)}-->
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenNavigationPanel.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte