Merge pull request #9951 from Budibase/settings-panel-update

Settings panel layout update

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
 

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;
+    width: 310px;
-    flex: 0 0 420px;
+    flex: 0 0 310px;
   }
   .header {
     flex: 0 0 48px;

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -74,11 +74,13 @@
   })
 </script>
 
-<div class="property-control" class:highlighted={highlighted && nullishValue}>
+<div
-  {#if type !== "boolean" && label}
+  class="property-control"
-    <div class="label">
+  class:wide={!label}
-      <Label>{label}</Label>
+  class:highlighted={highlighted && nullishValue}
-    </div>
+>
+  {#if label}
+    <Label size="M">{label}</Label>
   {/if}
   <div id={`${key}-prop-control`} class="control">
     <svelte:component
@@ -90,7 +92,6 @@
       onChange={handleChange}
       bindings={allBindings}
       name={key}
-      text={label}
       {nested}
       {key}
       {type}
@@ -105,28 +106,34 @@
 <style>
   .property-control {
     position: relative;
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-columns: 90px 1fr;
-    justify-content: flex-start;
+    align-items: center;
-    align-items: stretch;
     transition: background 130ms ease-out, border-color 130ms ease-out;
     border-left: 4px solid transparent;
-    margin: -6px calc(-1 * var(--spacing-xl));
+    margin: 0 calc(-1 * var(--spacing-xl));
-    padding: 6px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
+    padding: 0 var(--spacing-xl) 0 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;
   }
+  .property-control.wide .control {
+    grid-column: 1 / -1;
+  }
   .text {
-    margin-top: var(--spectrum-global-dimension-size-65);
     font-size: var(--spectrum-global-dimension-font-size-75);
     color: var(--grey-6);
+    grid-column: 2 / 2;
+  }
+  .property-control.wide .text {
+    grid-column: 1 / -1;
   }
 </style>

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}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte

@@ -117,6 +117,7 @@
 {#each sections as section, idx (section.name)}
   {#if section.visible}
     <DetailSummary name={section.name} collapsible={false}>
+      <div class="settings">
         {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
           <PropertyControl
             control={Input}
@@ -160,6 +161,7 @@
         {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")}
           <ResetFieldsButton {componentInstance} />
         {/if}
+      </div>
     </DetailSummary>
   {/if}
 {/each}
@@ -168,3 +170,13 @@
     <EjectBlockButton />
   </DetailSummary>
 {/if}
+
+<style>
+  .settings {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 8px;
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte

@@ -27,7 +27,6 @@
     <StyleSection
       {style}
       name={style.label}
-      columns={style.columns}
       properties={style.settings}
       {componentInstance}
       {bindings}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte

@@ -4,7 +4,6 @@
   import { store } from "builderStore"
 
   export let name
-  export let columns
   export let properties
   export let componentInstance
   export let bindings = []
@@ -34,9 +33,8 @@
 </script>
 
 <DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
-  <div class="group-content" style="grid-template-columns: {columns || '1fr'}">
+  <div class="styles">
     {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
-      <div style="grid-column: {prop.column || 'auto'}">
       <PropertyControl
         label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
         control={prop.control}
@@ -46,15 +44,16 @@
         props={getControlProps(prop)}
         {bindings}
       />
-      </div>
     {/each}
   </div>
 </DetailSummary>
 
 <style>
-  .group-content {
+  .styles {
-    display: grid;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
+    gap: 8px;
   }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js

@@ -3,7 +3,6 @@ import ColorPicker from "components/design/settings/controls/ColorPicker.svelte"
 
 export const margin = {
   label: "Margin",
-  columns: "1fr 1fr",
   settings: [
     {
       label: "Top",
@@ -90,7 +89,6 @@ export const margin = {
 
 export const padding = {
   label: "Padding",
-  columns: "1fr 1fr",
   settings: [
     {
       label: "Top",
@@ -177,7 +175,6 @@ export const padding = {
 
 export const size = {
   label: "Size",
-  columns: "1fr 1fr",
   settings: [
     {
       label: "Width",
@@ -196,7 +193,6 @@ export const size = {
 
 export const background = {
   label: "Background",
-  columns: "auto 1fr",
   settings: [
     {
       label: "Color",
@@ -285,7 +281,6 @@ export const background = {
 
 export const border = {
   label: "Border",
-  columns: "1fr 1fr",
   settings: [
     {
       label: "Color",

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 {
+  import { Layout, Search, Icon, Body, notifications } from "@budibase/bbui"
-    Layout,
-    ActionGroup,
-    ActionButton,
-    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 => {
@@ -225,6 +215,7 @@
     showCloseButton
     onClickCloseButton={() => $goto("../")}
     borderLeft
+    wide
   >
     <Layout paddingX="L" paddingY="XL" gap="S">
       <Search
@@ -233,21 +224,6 @@
         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">
@@ -258,8 +234,7 @@
                 on:dragstart={() => onDragStart(component.component)}
                 on:dragend={onDragEnd}
                 class="component"
-                  class:selected={selectedIndex ===
+                class:selected={selectedIndex === orderMap[component.component]}
-                    orderMap[component.component]}
                 on:click={() => addComponent(component.component)}
                 on:mouseover={() => (selectedIndex = null)}
                 on:focus
@@ -275,23 +250,6 @@
           There aren't any components matching the current filter
         </Body>
       {/if}
-      {: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>
-      {/if}
     </Layout>
   </Panel>
 </div>

packages/client/src/components/context/DeviceBindingsProvider.svelte

@@ -4,7 +4,7 @@
 
   let width = window.innerWidth
   let height = window.innerHeight
-  const tabletBreakpoint = 768
+  const tabletBreakpoint = 720
   const desktopBreakpoint = 1280
   const resizeObserver = new ResizeObserver(entries => {
     if (entries?.[0]) {