Merge branch 'spectrum-bbui' of github.com:Budibase/budibase into spectrum-bbui-forms

2021-04-20 14:06:33 +01:00 · 2021-04-20 14:06:33 +01:00 · 6ac5a999cb
parent 12bd6a37d5 7e7e501244
commit 6ac5a999cb
14 changed files with 203 additions and 149 deletions
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/packages/bbui/src/ActionButton/ActionButton.svelte
@ -60,6 +60,8 @@
 </button>
  
 <style>
-  
+    span {
+        text-transform: capitalize;
+    }
 </style>
  
--- a/packages/bbui/src/Form/Search.svelte
+++ b/packages/bbui/src/Form/Search.svelte
@ -0,0 +1,25 @@
+<form class="spectrum-Search">
+  <div class="spectrum-Textfield">
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-icon-18-Magnify" />
+    </svg>
+    <input
+      type="search"
+      placeholder="Search"
+      name="search"
+      value=""
+      class="spectrum-Textfield-input spectrum-Search-input"
+      autocomplete="off" />
+  </div>
+  <button type="reset" class="spectrum-ClearButton spectrum-Search-clearButton">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Cross75"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Cross75" />
+    </svg>
+  </button>
+</form>
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@ -0,0 +1,19 @@
+<script context="module">
+    export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
+</script>
+
+<script>
+    export let direction = "n"
+    export let name = "Add"
+    export let hidden = false
+    export let s = false
+    export let m = false;
+    export let l = false;
+    export let xl = false
+
+    $: rotation = directions.indexOf(direction) * 45
+</script>
+
+<svg on:click class:spectrum-Icon--sizeS={s} class:spectrum-Icon--sizeM={m} class:spectrum-Icon--sizeL={l} class:spectrum-Icon--sizeXL={xl} class="spectrum-Icon" focusable="false" aria-hidden={hidden} aria-label="{name}" style={`transform: rotate(${rotation}deg)`}>
+    <use xlink:href="#spectrum-icon-18-{name}" />
+</svg>
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@ -11,7 +11,7 @@ export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
 export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
 export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
 export { default as Button } from "./Button/Button.svelte"
-export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
+export { default as Icon, directions } from "./Icon/Icon.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
@ -40,6 +40,7 @@ export { default as Table } from "./Table/Table.svelte"
 export { default as Tabs } from "./Tabs/Tabs.svelte"
 export { default as Tab } from "./Tabs/Tab.svelte"
 export { default as Divider } from "./Divider/Divider.svelte"
+export { default as Search } from "./Form/Search.svelte"

 // Typography
 export { default as Body } from "./Typography/Body.svelte"
--- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
+++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte
@ -1,33 +1,45 @@
 <script>
  import AutomationList from "./AutomationList.svelte"
  import CreateAutomationModal from "./CreateAutomationModal.svelte"
-  import { Modal } from "@budibase/bbui"
+  import { Modal, Tabs, Tab } from "@budibase/bbui"
  let modal
 </script>

 <div class="title">
-  <h1>Automations</h1>
+  <Tabs selected="Automations">
+    <Tab title="Automations">
+      <div class="tab-content-padding">
+        <AutomationList />
+        <Modal bind:this={modal}>
+          <CreateAutomationModal />
+        </Modal>
+      </div>
+    </Tab>
+  </Tabs>
  <i
    on:click={modal.show}
    data-cy="new-automation"
    class="ri-add-circle-fill" />
 </div>
-<AutomationList />
-<Modal bind:this={modal}>
-  <CreateAutomationModal />
-</Modal>

 <style>
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
+  }
+
+  i {
+    font-size: 20px;
+    position: absolute;
+    top: var(--spacing-l);
+    right: var(--spacing-l);
+  }
+
  .title {
    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .title h1 {
-    font-size: var(--font-size-m);
-    font-weight: 500;
-    margin: 0;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
  }
  .title i {
    font-size: 20px;
--- a/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
@ -8,12 +8,11 @@
    screenSearchString,
  } from "builderStore"
  import { roles } from "stores/backend"
-  import { FrontendTypes } from "constants"
  import ComponentNavigationTree from "components/design/NavigationPanel/ComponentNavigationTree/index.svelte"
  import Layout from "components/design/NavigationPanel/Layout.svelte"
  import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
  import NewLayoutModal from "components/design/NavigationPanel/NewLayoutModal.svelte"
-  import { Modal, Switcher, Select, Input } from "@budibase/bbui"
+  import { Modal, Select, Input, Tabs, Tab } from "@budibase/bbui"

  const tabs = [
    {
@ -27,14 +26,11 @@
  ]

  let modal
-  let routes = {}
-  $: tab = $params.assetType
+  $: selected = tabs.find(t => t.key === $params.assetType).title

  const navigate = ({ detail }) => {
-    if (!detail) {
-      return
-    }
-    $goto(`../${detail.heading.key}`)
+    const { key } = tabs.find(t => t.title === detail)
+    $goto(`../${key}`)
  }

  const updateAccessRole = event => {
@ -68,16 +64,11 @@
 </script>

 <div class="title">
-  <Switcher headings={tabs} bind:value={tab} on:change={navigate}>
-    {#if tab === FrontendTypes.SCREEN}
-      <i
-        on:click={modal.show}
-        data-cy="new-screen"
-        class="ri-add-circle-fill" />
+  <Tabs {selected} on:select={navigate}>
+    <Tab title="Screens">
+      <div class="tab-content-padding">
        <div class="role-select">
          <Select
-          extraThin
-          secondary
            on:change={updateAccessRole}
            value={$selectedAccessRole}
            label="Filter by Access"
@ -86,7 +77,6 @@
            options={$roles} />
          <div class="search-screens">
            <Input
-            extraThin
              placeholder="Enter a route to search"
              label="Search Screens"
              bind:value={$screenSearchString} />
@ -101,7 +91,10 @@
        <Modal bind:this={modal}>
          <NewScreenModal />
        </Modal>
-    {:else if tab === FrontendTypes.LAYOUT}
+      </div>
+    </Tab>
+    <Tab title="Layouts">
+      <div class="tab-content-padding">
        <i
          on:click={modal.show}
          data-cy="new-layout"
@ -112,8 +105,10 @@
        <Modal bind:this={modal}>
          <NewLayoutModal />
        </Modal>
-    {/if}
-  </Switcher>
+      </div>
+    </Tab>
+  </Tabs>
+  <i on:click={modal.show} data-cy="new-screen" class="ri-add-circle-fill" />
 </div>

 <style>
@ -127,8 +122,8 @@
  .title i {
    font-size: 20px;
    position: absolute;
-    top: 0;
-    right: 0;
+    top: var(--spacing-l);
+    right: var(--spacing-l);
  }
  .title i:hover {
    cursor: pointer;
@ -144,6 +139,10 @@
    gap: var(--spacing-m);
  }

+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
+  }
+
  .search-screens {
    position: relative;
  }
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@ -1,6 +1,7 @@
 <script>
  import { get } from "svelte/store"
  import { store, selectedComponent, currentAsset } from "builderStore"
+  import { Tabs, Tab } from '@budibase/bbui'
  import { FrontendTypes } from "constants"
  import CategoryTab from "./CategoryTab.svelte"
  import DesignView from "./DesignView.svelte"
@ -44,25 +45,12 @@
  }
 </script>

-<CategoryTab
-  onClick={category => (selectedCategory = category)}
-  {categories}
-  {selectedCategory} />
-
+<Tabs selected="Settings">
+  <Tab title="Settings">
+    <div class="tab-content-padding">
      {#if definition && definition.name}
        <div class="instance-name">{definition.name}</div>
      {/if}
-
-<div class="component-props-container">
-  {#if selectedCategory.value === 'design'}
-    <DesignView
-      componentInstance={$selectedComponent}
-      componentDefinition={definition}
-      {onStyleChanged}
-      {onCustomStyleChanged}
-      {onUpdateTransition}
-      {onResetStyles} />
-  {:else if selectedCategory.value === 'settings'}
      <SettingsView
      componentInstance={$selectedComponent}
      componentDefinition={definition}
@ -70,21 +58,33 @@
      onChange={store.actions.components.updateProp}
      onScreenPropChange={setAssetProps}
      assetInstance={$store.currentView !== 'component' && $currentAsset} />
-  {/if}
    </div>
+  </Tab>
+  <Tab title="Design">
+    <div class="tab-content-padding">
+      {#if definition && definition.name}
+        <div class="instance-name">{definition.name}</div>
+      {/if}
+      <DesignView
+      componentInstance={$selectedComponent}
+      componentDefinition={definition}
+      {onStyleChanged}
+      {onCustomStyleChanged}
+      {onUpdateTransition}
+      {onResetStyles} />
+    </div>
+  </Tab>
+</Tabs>

 <style>
-  .component-props-container {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    margin-left: -20px;
-    margin-right: -20px;
-    padding: 0 20px;
+
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
  }

  .instance-name {
    font-size: var(--font-size-xs);
+    margin-bottom: var(--spacing-l);
    font-weight: 500;
    color: var(--grey-7);
  }
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@ -1,6 +1,6 @@
 <script>  
  import { goto } from "@roxi/routify"
-  import { ActionButton, Heading, Spacer } from "@budibase/bbui"
+  import { ActionButton, Heading, Spacer, Icon } from "@budibase/bbui"
  import { notifications } from "@budibase/bbui"
  import Spinner from "components/common/Spinner.svelte"
  import download from "downloadjs"
@ -36,7 +36,7 @@
    </ActionButton>
    {#if appExportLoading}
      <Spinner size="10" />
-    {:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}
+    {:else}<ActionButton icon="Download" quiet />{/if}
  </div>
 </div>

--- a/packages/builder/src/components/start/BuilderSettingsButton.svelte
+++ b/packages/builder/src/components/start/BuilderSettingsButton.svelte
@ -6,7 +6,7 @@
 </script>

 <div>
-  <Button overBackground quiet icon="Settings" text on:click={modal.show}>
+  <Button primary quiet icon="Settings" text on:click={modal.show}>
    Settings
  </Button>
 </div>
--- a/packages/builder/src/pages/builder/[application]/_reset.svelte
+++ b/packages/builder/src/pages/builder/[application]/_reset.svelte
@ -1,7 +1,7 @@
 <script>
  import { store, automationStore } from "builderStore"
  import { roles } from "stores/backend"
-  import { Button } from "@budibase/bbui"
+  import { Button, ActionGroup, ActionButton, Icon } from "@budibase/bbui"
  import SettingsLink from "components/settings/Link.svelte"
  import ThemeEditorDropdown from "components/settings/ThemeEditorDropdown.svelte"
  import FeedbackNavLink from "components/feedback/FeedbackNavLink.svelte"
@ -60,14 +60,11 @@
        </button>

        <!-- This gets all indexable subroutes and sticks them in the top nav. -->
+        <ActionGroup>
          {#each $layout.children as { path, title }}
-          <span
-            class:active={$isActive(path)}
-            class="topnavitem"
-            on:click={topItemNavigate(path)}>
-            {title}
-          </span>
+            <ActionButton quiet selected={$isActive(path)} on:click={topItemNavigate(path)}>{title}</ActionButton>
          {/each}
+        </ActionGroup>
      </div>
      <div class="toprightnav">
        <ThemeEditorDropdown />
@ -76,6 +73,7 @@
          <a
            target="_blank"
            href="https://github.com/Budibase/budibase/discussions">
+            <Icon />
            <i class="ri-github-fill" />
          </a>
        </div>
@ -144,7 +142,7 @@

  .topleftnav {
    display: flex;
-    align-items: center;
+    place-items: center;
  }

  .topnavitem {
--- a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte
@ -28,13 +28,10 @@

  .nav {
    overflow-y: auto;
-    background: var(--background);
-    padding: var(--spacing-l) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
-    gap: var(--spacing-l);
    border-right: var(--border-light);
  }

--- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/_layout.svelte
@ -1,6 +1,6 @@
 <script>
  import { isActive, goto } from "@roxi/routify"
-  import { Switcher, Modal } from "@budibase/bbui"
+  import { Switcher, Modal, Tabs, Tab } from "@budibase/bbui"
  import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
  import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
  import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@ -17,11 +17,11 @@
    },
  ]

-  let tab = $isActive("./datasource") ? "datasource" : "table"
+  let selected = $isActive("./datasource") ? "External" : "Internal"

  function selectFirstTableOrSource({ detail }) {
-    const type = detail.heading.key
-    if (type === "datasource") {
+    const { key } = tabs.find(t => t.title === detail)
+    if (key === "datasource") {
      $goto("./datasource")
    } else {
      $goto("./table")
@ -34,28 +34,30 @@
 <!-- routify:options index=0 -->
 <div class="root">
  <div class="nav">
-    <Switcher
-      headings={tabs}
-      bind:value={tab}
-      on:change={selectFirstTableOrSource}>
-      <div class="title">
-        <i
-          data-cy={`new-${tab}`}
-          class="ri-add-circle-fill"
-          on:click={modal.show} />
-      </div>
-      {#if tab === 'table'}
+    <Tabs {selected} on:select={selectFirstTableOrSource}>
+      <Tab title="Internal">
+        <div class="tab-content-padding">
          <TableNavigator />
          <Modal bind:this={modal}>
            <CreateTableModal />
          </Modal>
-      {:else if tab === 'datasource'}
+        </div>
+      </Tab>
+      <Tab title="External">
+        <div class="tab-content-padding">
          <DatasourceNavigator />
          <Modal bind:this={modal}>
            <CreateDatasourceModal />
          </Modal>
-      {/if}
-    </Switcher>
+        </div>
+      </Tab>
+    </Tabs>
+    <div class="title">
+      <i
+        data-cy={`new-${selected === 'External' ? 'datasource' : 'tabel'}`}
+        class="ri-add-circle-fill"
+        on:click={modal.show} />
+    </div>
  </div>
  <div class="content">
    <slot />
@ -84,16 +86,17 @@
  .content :global(> span) {
    display: contents;
  }
+  .tab-content-padding {
+    padding: 0 var(--spacing-s);
+  }

  .nav {
    overflow-y: auto;
    background: var(--background);
-    padding: var(--spacing-l) var(--spacing-xl);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
-    gap: var(--spacing-l);
    position: relative;
    border-right: var(--border-light);
  }
@ -102,7 +105,7 @@
    font-size: 20px;
    position: absolute;
    top: var(--spacing-l);
-    right: var(--spacing-xl);
+    right: var(--spacing-l);
  }

  i:hover {
--- a/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
@ -5,7 +5,7 @@

  onMount(async () => {
    // navigate to first table in list, if not already selected
-    $datasources.list.length > 0 && $goto(`../${$datasources.list[0]._id}`)
+    $datasources.list.length > 0 && $goto(`./${$datasources.list[0]._id}`)
  })
 </script>

--- a/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
@ -177,7 +177,7 @@
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
-    padding: var(--spacing-l) var(--spacing-xl) 60px var(--spacing-xl);
+    padding: 0 0 60px 0;
    overflow-y: auto;
    border-right: var(--border-light);
  }
@ -206,8 +206,6 @@
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
-    gap: var(--spacing-l);
-    padding: var(--spacing-l) var(--spacing-xl);
    border-left: var(--border-light);
    overflow-x: hidden;
  }