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

Settings panel layout update
2024-07-14 18:55:45 +12:00 · 2023-03-28 18:36:58 +01:00 · 2023-03-28 18:36:58 +01:00 · bcbed08a40
parent e181b5652a 56477ab569
commit bcbed08a40
11 changed files with 282 additions and 319 deletions
--- 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

--- 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;
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@ -74,11 +74,13 @@
  })
 </script>

-<div class="property-control" class:highlighted={highlighted && nullishValue}>
-  {#if type !== "boolean" && label}
-    <div class="label">
-      <Label>{label}</Label>
-    </div>
+<div
+  class="property-control"
+  class:wide={!label}
+  class:highlighted={highlighted && nullishValue}
+>
+  {#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;
-    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);
+    margin: 0 calc(-1 * var(--spacing-xl));
+    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>
--- 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}
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
@ -117,49 +117,51 @@
 {#each sections as section, idx (section.name)}
  {#if section.visible}
    <DetailSummary name={section.name} collapsible={false}>
-      {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
-        <PropertyControl
-          control={Input}
-          label="Name"
-          key="_instanceName"
-          value={componentInstance._instanceName}
-          onChange={val => updateSetting({ key: "_instanceName" }, val)}
-        />
-      {/if}
-      {#each section.settings as setting (setting.key)}
-        {#if setting.visible}
+      <div class="settings">
+        {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
          <PropertyControl
-            type={setting.type}
-            control={getComponentForSetting(setting)}
-            label={setting.label}
-            key={setting.key}
-            value={componentInstance[setting.key]}
-            defaultValue={setting.defaultValue}
-            nested={setting.nested}
-            onChange={val => updateSetting(setting, val)}
-            highlighted={$store.highlightedSettingKey === setting.key}
-            info={setting.info}
-            props={{
-              // Generic settings
-              placeholder: setting.placeholder || null,
-
-              // Select settings
-              options: setting.options || [],
-
-              // Number fields
-              min: setting.min ?? null,
-              max: setting.max ?? null,
-            }}
-            {bindings}
-            {componentBindings}
-            {componentInstance}
-            {componentDefinition}
+            control={Input}
+            label="Name"
+            key="_instanceName"
+            value={componentInstance._instanceName}
+            onChange={val => updateSetting({ key: "_instanceName" }, val)}
          />
        {/if}
-      {/each}
-      {#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")}
-        <ResetFieldsButton {componentInstance} />
-      {/if}
+        {#each section.settings as setting (setting.key)}
+          {#if setting.visible}
+            <PropertyControl
+              type={setting.type}
+              control={getComponentForSetting(setting)}
+              label={setting.label}
+              key={setting.key}
+              value={componentInstance[setting.key]}
+              defaultValue={setting.defaultValue}
+              nested={setting.nested}
+              onChange={val => updateSetting(setting, val)}
+              highlighted={$store.highlightedSettingKey === setting.key}
+              info={setting.info}
+              props={{
+                // Generic settings
+                placeholder: setting.placeholder || null,
+
+                // Select settings
+                options: setting.options || [],
+
+                // Number fields
+                min: setting.min ?? null,
+                max: setting.max ?? null,
+              }}
+              {bindings}
+              {componentBindings}
+              {componentInstance}
+              {componentDefinition}
+            />
+          {/if}
+        {/each}
+        {#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>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/DesignSection.svelte
+++ b/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}
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/StyleSection.svelte
+++ b/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,27 +33,27 @@
 </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}
-          key={prop.key}
-          value={style[prop.key]}
-          onChange={val => updateStyle(prop.key, val)}
-          props={getControlProps(prop)}
-          {bindings}
-        />
-      </div>
+      <PropertyControl
+        label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
+        control={prop.control}
+        key={prop.key}
+        value={style[prop.key]}
+        onChange={val => updateStyle(prop.key, val)}
+        props={getControlProps(prop)}
+        {bindings}
+      />
    {/each}
  </div>
 </DetailSummary>

 <style>
-  .group-content {
-    display: grid;
+  .styles {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
    align-items: stretch;
-    gap: var(--spacing-l);
+    gap: 8px;
  }
 </style>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
+++ b/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",
--- 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 => {
@ -225,6 +215,7 @@
    showCloseButton
    onClickCloseButton={() => $goto("../")}
    borderLeft
+    wide
  >
    <Layout paddingX="L" paddingY="XL" gap="S">
      <Search
@ -233,64 +224,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>
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
--- a/packages/client/src/components/context/DeviceBindingsProvider.svelte
+++ b/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]) {