Update drawer styles, drawer bindable inputs and settings bindable inputs

5 years ago · deb0b2998f
5 changed files with 108 additions and 123 deletions
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@ -1,7 +1,7 @@
 <script>
  import { slide } from "svelte/transition"
  import Portal from "svelte-portal"
-  import ActionButton from "../ActionButton/ActionButton.svelte"
+  import Button from "../Button/Button.svelte"
  import Body from "../Typography/Body.svelte"
  import Heading from "../Typography/Heading.svelte"

@ -38,13 +38,13 @@
      <header>
        <div class="text">
          <Heading size="XS">{title}</Heading>
-          <Body size="XXS">
+          <Body size="S">
            <slot name="description" />
          </Body>
        </div>
        <div class="buttons">
+          <Button secondary quiet on:click={hide}>Cancel</Button>
          <slot name="buttons" />
-          <ActionButton quiet icon="Close" on:click={hide} />
        </div>
      </header>
      <slot name="body" />
@ -59,7 +59,7 @@
    left: 260px;
    width: calc(100% - 520px);
    background: var(--background);
-    border: var(--border-light);
+    border-top: var(--border-light);
    z-index: 2;
  }

@ -68,17 +68,15 @@
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-light);
-    padding: var(--spectrum-alias-item-padding-s) 0;
-  }
-  header :global(*) + :global(*) {
-    margin: 0 var(--spectrum-alias-grid-baseline);
+    padding: var(--spacing-l) var(--spacing-xl);
+    gap: var(--spacing-xl);
  }

  .text {
    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    margin-left: var(--spectrum-alias-item-padding-s);
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
  }
 </style>
--- a/packages/bbui/src/Drawer/DrawerContent.svelte
+++ b/packages/bbui/src/Drawer/DrawerContent.svelte
@ -19,7 +19,7 @@
  .container {
    height: 100%;
    display: grid;
-    grid-template-columns: 290px 1fr;
+    grid-template-columns: 320px 1fr;
  }
  .no-sidebar {
    grid-template-columns: 1fr;
@ -27,12 +27,15 @@
  .sidebar {
    border-right: var(--border-light);
    overflow: auto;
+    padding: var(--spacing-xl);
+    scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar {
    display: none;
  }
  .main {
    font-family: var(--font-sans);
+    padding: var(--spacing-xl);
  }
  .main :global(textarea) {
    min-height: 200px;
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@ -1,20 +1,9 @@
 <script>
  import groupBy from "lodash/fp/groupBy"
-  import {
-    Search,
-    TextArea,
-    Heading,
-    Label,
-    DrawerContent,
-    Layout,
-  } from "@budibase/bbui"
+  import { Search, TextArea, DrawerContent } from "@budibase/bbui"
  import { createEventDispatcher } from "svelte"
  import { isValid } from "@budibase/string-templates"
-  import {
-    getBindableProperties,
-    readableToRuntimeBinding,
-  } from "builderStore/dataBinding"
-  import { currentAsset, store } from "builderStore"
+  import { readableToRuntimeBinding } from "builderStore/dataBinding"
  import { handlebarsCompletions } from "constants/completions"
  import { addToText } from "./utils"

@ -22,44 +11,36 @@

  export let bindableProperties
  export let value = ""
-  export let bindingDrawer
-  export let valid = true
+  export let valid

-  let originalValue = value
  let helpers = handlebarsCompletions()
  let getCaretPosition
  let search = ""

-  $: value && checkValid()
-  $: bindableProperties = getBindableProperties(
-    $currentAsset,
-    $store.selectedComponentId
-  )
-  $: dispatch("update", value)
-  $: ({ instance, context } = groupBy("type", bindableProperties))
+  $: valid = isValid(readableToRuntimeBinding(bindableProperties, value))
+  $: dispatch("change", value)
+  $: ({ context } = groupBy("type", bindableProperties))
  $: searchRgx = new RegExp(search, "ig")
-
-  function checkValid() {
-    // TODO: need to convert the value to the runtime binding
-    const runtimeBinding = readableToRuntimeBinding(bindableProperties, value)
-    valid = isValid(runtimeBinding)
-  }
-
-  export function cancel() {
-    dispatch("update", originalValue)
-    bindingDrawer.close()
-  }
+  $: filteredColumns = context?.filter(context => {
+    return context.readableBinding.match(searchRgx)
+  })
+  $: filteredHelpers = helpers?.filter(helper => {
+    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
+  })
 </script>

 <DrawerContent>
  <svelte:fragment slot="sidebar">
-    <Layout>
-      <Search placeholder="Search" bind:value={search} />
-      {#if context}
+    <div class="container">
+      <section>
+        <div class="heading">Search</div>
+        <Search placeholder="Search" bind:value={search} />
+      </section>
+      {#if filteredColumns?.length}
        <section>
-          <Heading size="XS">Columns</Heading>
+          <div class="heading">Columns</div>
          <ul>
-            {#each context.filter( context => context.readableBinding.match(searchRgx) ) as { readableBinding }}
+            {#each filteredColumns as { readableBinding }}
              <li
                on:click={() => {
                  value = addToText(value, getCaretPosition(), readableBinding)
@ -71,39 +52,29 @@
          </ul>
        </section>
      {/if}
-      {#if instance}
+      {#if filteredHelpers?.length}
        <section>
-          <Heading size="XS">Components</Heading>
+          <div class="heading">Helpers</div>
          <ul>
-            {#each instance.filter( instance => instance.readableBinding.match(searchRgx) ) as { readableBinding }}
-              <li on:click={() => addToText(readableBinding)}>
-                {readableBinding}
+            {#each filteredHelpers as helper}
+              <li
+                on:click={() => {
+                  value = addToText(value, getCaretPosition(), helper.text)
+                }}
+              >
+                <div class="helper">
+                  <div class="helper__name">{helper.displayText}</div>
+                  <div class="helper__description">
+                    {@html helper.description}
+                  </div>
+                  <pre class="helper__example">{helper.example || ''}</pre>
+                </div>
              </li>
            {/each}
          </ul>
        </section>
      {/if}
-      <section>
-        <Heading size="XS">Helpers</Heading>
-        <ul>
-          {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
-            <li
-              on:click={() => {
-                value = addToText(value, getCaretPosition(), helper.text)
-              }}
-            >
-              <div>
-                <Label extraSmall>{helper.displayText}</Label>
-                <div class="description">
-                  {@html helper.description}
-                </div>
-                <pre>{helper.example || ''}</pre>
-              </div>
-            </li>
-          {/each}
-        </ul>
-      </section>
-    </Layout>
+    </div>
  </svelte:fragment>
  <div class="main">
    <TextArea
@ -122,50 +93,78 @@
 </DrawerContent>

 <style>
-  .main {
-    padding: var(--spacing-m);
-  }
-
  .main :global(textarea) {
    min-height: 150px !important;
  }

+  .container {
+    margin: calc(-1 * var(--spacing-xl));
+  }
+  .heading {
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--spectrum-global-color-gray-600);
+    padding: var(--spacing-xl) 0 var(--spacing-m) 0;
+  }
+
  section {
-    display: grid;
-    grid-gap: var(--spacing-s);
+    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
+  }
+  section:not(:first-child) {
+    border-top: var(--border-light);
  }
  ul {
    list-style: none;
-    margin: 0;
    padding: 0;
+    margin: 0;
  }

  li {
-    display: flex;
-    font-family: var(--font-sans);
    font-size: var(--font-size-s);
-    color: var(--grey-7);
    padding: var(--spacing-m);
-    margin: auto 0px;
-    align-items: center;
-    cursor: pointer;
-    border-top: var(--border-light);
-    border-width: 1px 0 1px 0;
    border-radius: 4px;
+    border: var(--border-light);
+    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
+      border-color 130ms ease-in-out;
  }
-
-  pre,
-  .description {
-    white-space: normal;
+  li:not(:last-of-type) {
+    margin-bottom: var(--spacing-s);
+  }
+  li :global(*) {
+    transition: color 130ms ease-in-out;
  }
-
  li:hover {
-    background-color: var(--grey-2);
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-global-color-gray-500);
    cursor: pointer;
  }
+  li:hover :global(*) {
+    color: var(--spectrum-global-color-gray-900) !important;
+  }

-  li:active {
-    color: var(--blue);
+  .helper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: var(--spacing-xs);
+  }
+  .helper__name {
+    font-weight: bold;
+  }
+  .helper__description,
+  .helper__description :global(*) {
+    color: var(--spectrum-global-color-gray-700);
+  }
+  .helper__example {
+    white-space: normal;
+    margin: 0.5rem 0 0 0;
+    font-weight: 700;
+  }
+  .helper__description :global(p) {
+    margin: 0;
  }

  .syntax-error {
@ -173,21 +172,8 @@
    color: var(--red);
    font-size: 12px;
  }
-
  .syntax-error a {
    color: var(--red);
    text-decoration: underline;
  }
-
-  .description :global(p) {
-    color: var(--grey-7);
-  }
-
-  .description :global(p:hover) {
-    color: var(--ink);
-  }
-
-  .description :global(p a) {
-    color: var(--grey-7);
-  }
 </style>
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@ -17,10 +17,10 @@

  const dispatch = createEventDispatcher()
  let bindingDrawer
-  $: tempValue = Array.isArray(value) ? value : []
  $: readableValue = runtimeToReadableBinding(bindings, value)
+  $: tempValue = readableValue

-  const handleClose = () => {
+  const saveBinding = () => {
    onChange(tempValue)
    bindingDrawer.hide()
  }
@ -48,13 +48,12 @@
  <svelte:fragment slot="description">
    Add the objects on the left to enrich your text.
  </svelte:fragment>
-  <Button cta slot="buttons" on:click={handleClose}>Save</Button>
+  <Button cta slot="buttons" on:click={saveBinding}>Save</Button>
  <svelte:component
    this={panel}
    slot="body"
    value={readableValue}
-    close={handleClose}
-    on:update={event => (tempValue = event.detail)}
+    on:change={event => (tempValue = event.detail)}
    bindableProperties={bindings}
  />
 </Drawer>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
@ -20,7 +20,6 @@
  export let onChange = () => {}

  let bindingDrawer
-  let temporaryBindableValue = value
  let anchor
  let valid

@ -29,10 +28,11 @@
    $store.selectedComponentId
  )
  $: safeValue = getSafeValue(value, props.defaultValue, bindableProperties)
+  $: tempValue = safeValue
  $: replaceBindings = val => readableToRuntimeBinding(bindableProperties, val)

  const handleClose = () => {
-    handleChange(temporaryBindableValue)
+    handleChange(tempValue)
    bindingDrawer.hide()
  }

@ -107,8 +107,7 @@
          slot="body"
          bind:valid
          value={safeValue}
-          close={handleClose}
-          on:update={e => (temporaryBindableValue = e.detail)}
+          on:change={e => (tempValue = e.detail)}
          {bindableProperties}
        />
      </Drawer>