From db7f267887eefb8c490be9cfae78289396a57159 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 8 Mar 2023 19:22:19 +0000
Subject: [PATCH] Update component settings to be left aligned and update long
 component settings labels to be shorter

---
 packages/bbui/src/Drawer/Drawer.svelte        |   2 +-
 .../src/components/design/Panel.svelte        |  14 +--
 .../settings/controls/PropertyControl.svelte  |  31 +++---
 .../settings/ComponentSettingsPanel.svelte    |   2 +-
 .../new/_components/NewComponentPanel.svelte  | 104 ++++++------------
 packages/client/manifest.json                 |  38 +++----
 6 files changed, 71 insertions(+), 120 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 43729cd794..932236bc0c 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -7,7 +7,7 @@
   export let title
   export let fillWidth
   export let left = "314px"
-  export let width = "calc(100% - 576px)"
+  export let width = "calc(100% - 626px)"
 
   let visible = false
 
diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index 6c8753a99e..dbf42c51a5 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -3,7 +3,6 @@
 
   export let title
   export let icon
-  export let expandable = false
   export let showAddButton = false
   export let showBackButton = false
   export let showCloseButton = false
@@ -12,8 +11,8 @@
   export let onClickCloseButton
   export let borderLeft = false
   export let borderRight = false
+  export let wide = false
 
-  let wide = false
   $: customHeaderContent = $$slots["panel-header-content"]
 </script>
 
@@ -28,13 +27,6 @@
     <div class="title">
       <Heading size="XXS">{title || ""}</Heading>
     </div>
-    {#if expandable}
-      <Icon
-        name={wide ? "Minimize" : "Maximize"}
-        hoverable
-        on:click={() => (wide = !wide)}
-      />
-    {/if}
     {#if showAddButton}
       <div class="add-button" on:click={onClickAddButton}>
         <Icon name="Add" />
@@ -74,8 +66,8 @@
     border-right: var(--border-light);
   }
   .panel.wide {
-    width: 420px;
-    flex: 0 0 420px;
+    width: 310px;
+    flex: 0 0 310px;
   }
   .header {
     flex: 0 0 48px;
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index ab448b850c..e021cc4288 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -75,12 +75,10 @@
 </script>
 
 <div class="property-control" class:highlighted={highlighted && nullishValue}>
-  {#if type !== "boolean" && label}
-    <div class="label">
-      <Label>{label}</Label>
-    </div>
+  {#if label}
+    <Label size="M">{label}</Label>
   {/if}
-  <div id={`${key}-prop-control`} class="control">
+  <div id={`${key}-prop-control`} class="control" class:wide={!label}>
     <svelte:component
       this={control}
       {componentInstance}
@@ -90,7 +88,6 @@
       onChange={handleChange}
       bindings={allBindings}
       name={key}
-      text={label}
       {nested}
       {key}
       {type}
@@ -105,28 +102,32 @@
 <style>
   .property-control {
     position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
+    display: grid;
+    grid-template-columns: 90px 1fr;
+    align-items: center;
     transition: background 130ms ease-out, border-color 130ms ease-out;
     border-left: 4px solid transparent;
     margin: -6px calc(-1 * var(--spacing-xl));
-    padding: 6px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
+    padding: 2px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
+    gap: 8px;
+  }
+  .property-control :global(.spectrum-FieldLabel) {
+    white-space: normal;
   }
   .property-control.highlighted {
     background: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-blue-400);
   }
-  .label {
-    padding-bottom: var(--spectrum-global-dimension-size-65);
-  }
   .control {
     position: relative;
   }
+  .control.wide {
+    grid-column: 1 / -1;
+  }
   .text {
-    margin-top: var(--spectrum-global-dimension-size-65);
+    margin-top: 4px;
     font-size: var(--spectrum-global-dimension-font-size-75);
     color: var(--grey-6);
+    grid-column: 1 / -1;
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
index 1e889ffe93..2ff605cc77 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte
@@ -37,7 +37,7 @@
 
 {#if $selectedComponent}
   {#key $selectedComponent._id}
-    <Panel {title} icon={componentDefinition?.icon} borderLeft>
+    <Panel {title} icon={componentDefinition?.icon} borderLeft wide>
       <span slot="panel-header-content">
         <div class="settings-tabs">
           {#each tabs as tab}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
index 033881c0ac..5246b26bc7 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@@ -1,22 +1,13 @@
 <script>
   import Panel from "components/design/Panel.svelte"
   import { goto } from "@roxi/routify"
-  import {
-    Layout,
-    ActionGroup,
-    ActionButton,
-    Search,
-    Icon,
-    Body,
-    notifications,
-  } from "@budibase/bbui"
+  import { Layout, Search, Icon, Body, notifications } from "@budibase/bbui"
   import structure from "./componentStructure.json"
   import { store, selectedComponent, selectedScreen } from "builderStore"
   import { onMount } from "svelte"
   import { fly } from "svelte/transition"
   import { findComponentPath } from "builderStore/componentUtils"
 
-  let section = "components"
   let searchString
   let searchRef
   let selectedIndex
@@ -37,7 +28,6 @@
     allowedComponents,
     searchString
   )
-  $: blocks = enrichedStructure.find(x => x.name === "Blocks").children
   $: orderMap = createComponentOrderMap(componentList)
 
   const getAllowedComponents = (allComponents, screen, component) => {
@@ -127,6 +117,11 @@
       }
     })
 
+    // Swap blocks and plugins
+    let tmp = enrichedStructure[1]
+    enrichedStructure[1] = enrichedStructure[0]
+    enrichedStructure[0] = tmp
+
     return enrichedStructure
   }
 
@@ -137,11 +132,6 @@
       return []
     }
 
-    // Remove blocks if there is no search string
-    if (!search) {
-      structure = structure.filter(category => category.name !== "Blocks")
-    }
-
     // Return only items which match the search string
     let filteredStructure = []
     structure.forEach(category => {
@@ -224,6 +214,7 @@
     showCloseButton
     onClickCloseButton={() => $goto("../")}
     borderLeft
+    wide
   >
     <Layout paddingX="L" paddingY="XL" gap="S">
       <Search
@@ -232,64 +223,31 @@
         on:change={e => (searchString = e.detail)}
         bind:inputRef={searchRef}
       />
-      {#if !searchString}
-        <ActionGroup compact justified>
-          <ActionButton
-            fullWidth
-            selected={section === "components"}
-            on:click={() => (section = "components")}>Components</ActionButton
-          >
-          <ActionButton
-            fullWidth
-            selected={section === "blocks"}
-            on:click={() => (section = "blocks")}>Blocks</ActionButton
-          >
-        </ActionGroup>
-      {/if}
-      {#if searchString || section === "components"}
-        {#if filteredStructure.length}
-          {#each filteredStructure as category}
-            <Layout noPadding gap="XS">
-              <div class="category-label">{category.name}</div>
-              {#each category.children as component}
-                <div
-                  draggable="true"
-                  on:dragstart={() => onDragStart(component.component)}
-                  on:dragend={onDragEnd}
-                  class="component"
-                  class:selected={selectedIndex ===
-                    orderMap[component.component]}
-                  on:click={() => addComponent(component.component)}
-                  on:mouseover={() => (selectedIndex = null)}
-                  on:focus
-                >
-                  <Icon name={component.icon} />
-                  <Body size="XS">{component.name}</Body>
-                </div>
-              {/each}
-            </Layout>
-          {/each}
-        {:else}
-          <Body size="S">
-            There aren't any components matching the current filter
-          </Body>
-        {/if}
+      {#if filteredStructure.length}
+        {#each filteredStructure as category}
+          <Layout noPadding gap="XS">
+            <div class="category-label">{category.name}</div>
+            {#each category.children as component}
+              <div
+                draggable="true"
+                on:dragstart={() => onDragStart(component.component)}
+                on:dragend={onDragEnd}
+                class="component"
+                class:selected={selectedIndex === orderMap[component.component]}
+                on:click={() => addComponent(component.component)}
+                on:mouseover={() => (selectedIndex = null)}
+                on:focus
+              >
+                <Icon name={component.icon} />
+                <Body size="XS">{component.name}</Body>
+              </div>
+            {/each}
+          </Layout>
+        {/each}
       {:else}
-        <Body size="S">Blocks are collections of pre-built components</Body>
-        <Layout noPadding gap="XS">
-          {#each blocks as block}
-            <div
-              draggable="true"
-              class="component"
-              on:click={() => addComponent(block.component)}
-              on:dragstart={() => onDragStart(block.component)}
-              on:dragend={onDragEnd}
-            >
-              <Icon name={block.icon} />
-              <Body size="XS">{block.name}</Body>
-            </div>
-          {/each}
-        </Layout>
+        <Body size="S">
+          There aren't any components matching the current filter
+        </Body>
       {/if}
     </Layout>
   </Panel>
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index e24fa3a68a..6bd03f702f 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -967,12 +967,12 @@
       },
       {
         "type": "boolean",
-        "label": "Show delete icon",
+        "label": "Allow delete",
         "key": "closable"
       },
       {
         "type": "event",
-        "label": "On click delete icon",
+        "label": "On click delete",
         "key": "onClick",
         "dependsOn": "closable"
       }
@@ -3269,7 +3269,7 @@
       },
       {
         "type": "boolean",
-        "label": "Allow manual entry",
+        "label": "Manual entry",
         "key": "allowManualEntry",
         "defaultValue": false
       },
@@ -3328,7 +3328,7 @@
       },
       {
         "type": "boolean",
-        "label": "Enable creating markers",
+        "label": "Enable adding",
         "key": "creationEnabled",
         "defaultValue": false
       },
@@ -3374,13 +3374,13 @@
       },
       {
         "type": "text",
-        "label": "Default Location (when empty)",
+        "label": "Default Location",
         "key": "defaultLocation",
         "placeholder": "51.5072,-0.1276"
       },
       {
         "type": "number",
-        "label": "Default Location Zoom Level (0-100)",
+        "label": "Default Zoom (0-100)",
         "key": "zoomLevel",
         "placeholder": 50,
         "max": 100,
@@ -3786,7 +3786,7 @@
       },
       {
         "type": "boolean",
-        "label": "Allow row selection",
+        "label": "Row selection",
         "key": "allowSelectRows",
         "defaultValue": false,
         "info": "Row selection is only compatible with internal or SQL tables"
@@ -3895,7 +3895,7 @@
       {
         "type": "boolean",
         "key": "linkPeek",
-        "label": "Open link in modal"
+        "label": "Open in modal"
       },
       {
         "type": "boolean",
@@ -3904,7 +3904,7 @@
       },
       {
         "type": "boolean",
-        "label": "Use button for click action",
+        "label": "Show button",
         "key": "showButton"
       },
       {
@@ -4468,7 +4468,7 @@
           },
           {
             "type": "columns",
-            "label": "Table Columns",
+            "label": "Columns",
             "key": "tableColumns",
             "dependsOn": "dataSource",
             "placeholder": "All columns",
@@ -4529,7 +4529,7 @@
           },
           {
             "type": "boolean",
-            "label": "Allow row selection",
+            "label": "Row selection",
             "key": "allowSelectRows",
             "info": "Row selection is only compatible with internal or SQL tables"
           },
@@ -4593,7 +4593,7 @@
           {
             "type": "boolean",
             "key": "showTitleButton",
-            "label": "Show button above table",
+            "label": "Show button",
             "defaultValue": false
           },
           {
@@ -4659,7 +4659,7 @@
       },
       {
         "type": "searchfield",
-        "label": "Search Columns",
+        "label": "Search Cols.",
         "key": "searchColumns",
         "placeholder": "Choose search columns",
         "info": "Only the first 5 search columns will be used"
@@ -4735,7 +4735,7 @@
           {
             "type": "boolean",
             "key": "cardPeek",
-            "label": "Open link in modal"
+            "label": "Open in modal"
           },
           {
             "type": "url",
@@ -4750,7 +4750,7 @@
           },
           {
             "type": "boolean",
-            "label": "Use button for click action",
+            "label": "Add button",
             "key": "showCardButton"
           },
           {
@@ -4775,11 +4775,11 @@
           {
             "type": "boolean",
             "key": "showTitleButton",
-            "label": "Show link button"
+            "label": "Show button"
           },
           {
             "type": "boolean",
-            "label": "Open link in modal",
+            "label": "Open in modal",
             "key": "titleButtonPeek"
           },
           {
@@ -4800,7 +4800,7 @@
         "settings": [
           {
             "type": "field",
-            "label": "ID column for linking (appended to URL)",
+            "label": "ID column",
             "key": "linkColumn",
             "placeholder": "Default"
           }
@@ -5178,7 +5178,7 @@
           },
           {
             "type": "boolean",
-            "label": "Show delete button",
+            "label": "Allow delete",
             "key": "showDeleteButton",
             "defaultValue": false,
             "dependsOn": {