Merge branch 'master' of github.com:Budibase/budibase

packages/builder/src/budibase.css

@@ -1,8 +1,7 @@
 /* Budibase Component Styles */
 .header {
     font-size: 0.75rem;
-    color: #000333;
+    color: var(--ink);
-    opacity: 0.4;
     text-transform: uppercase;
     margin-top: 1rem;
     font-weight: 500;
@@ -81,10 +80,9 @@
     max-width: 250px;
     height: 35px;
     border-radius: 3px;
-    border: 1px solid #DBDBDB;
+    border: 1px solid var(--grey-dark);
     text-align: left;
-    letter-spacing: 0.7px;
+    color: var(--ink);
-    color: #000333;
     font-size: 16px;
     padding-left: 5px;
 }
@@ -103,27 +101,32 @@
 }
 
 .budibase__table {
-    border: 1px solid #ccc;
+    border: 1px solid var(--grey-dark);
     background: #fff;
     border-radius: 2px;
 }
 
 .budibase__table thead {
-    background: #fafafa;
+    background: var(--blue-light);
 }
 
 .budibase__table thead > tr > th {
-    color: var(--button-text);
+    color: var(--ink);
     text-transform: capitalize;
     font-weight: 500;
 }
 
 .budibase__table tr {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--grey-light);
 }
 
 .button--toggled {
-    background: #fafafa;
+    background: var(--blue-light);
-    color: var(--button-text);
+    color: var(--ink-light);
-    padding: 10px;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
 }

packages/builder/src/components/common/ActionButton.svelte

@@ -1,6 +1,7 @@
 <script>
   export let disabled = false
   export let hidden = false
+  export let secondary = false
   export let primary = true
   export let cancel = false
   export let alert = false
@@ -11,6 +12,7 @@
   on:click
   class="button"
   class:hidden
+  class:secondary
   class:primary
   class:alert
   class:cancel
@@ -22,12 +24,14 @@
 <style>
   .primary {
     color: #ffffff;
-    background: #0055ff;
+    background: var(--blue);
+    border: solid 1px var(--blue);
   }
 
   .alert {
-    color: rgba(255, 0, 31, 1);
+    color: white;
-    background: rgba(255, 0, 31, 0.1);
+    background: #e26d69;
+    border: solid 1px #e26d69;
   }
 
   .cancel {
@@ -35,18 +39,22 @@
     background: none;
   }
 
+  .secondary {
+    color: var(--ink);
+    border: solid 1px var(--grey-dark);
+    background: white;
+  }
+
   .button {
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
-    border-radius: 5px;
+    border-radius: 3px;
-    border: none;
     padding: 10px 20px;
-    height: 45px;
+    height: 40px;
   }
 
   .button:hover {
     cursor: pointer;
-    font-weight: 600;
     filter: saturate(90%);
   }
 

packages/builder/src/components/common/CodeArea.svelte

@@ -14,8 +14,7 @@
     background: var(--secondary80);
     color: var(--white);
     font-family: "Courier New", Courier, monospace;
-    width: 95%;
+    height: 200px;
-    height: 100px;
     border-radius: 5px;
   }
 </style>

packages/builder/src/components/common/Input.svelte

@@ -1,5 +1,5 @@
 <script>
-  import {onMount} from "svelte"
+  import { onMount } from "svelte"
   import { buildStyle } from "../../helpers.js"
   export let value = ""
   export let textAlign = "left"
@@ -18,11 +18,19 @@
     onChange(_value)
   }
 
-  $: displayValue = suffix && value && value.endsWith(suffix) ? value.replace(new RegExp(`${suffix}$`), "") : (value || "")
+  $: displayValue =
-  
+    suffix && value && value.endsWith(suffix)
+      ? value.replace(new RegExp(`${suffix}$`), "")
+      : value || ""
 </script>
 
-<input class:centerPlaceholder type="text" value={displayValue} {placeholder} {style} on:change={e => handleChange(e.target.value)} />
+<input
+  class:centerPlaceholder
+  type="text"
+  value={displayValue}
+  {placeholder}
+  {style}
+  on:change={e => handleChange(e.target.value)} />
 
 <style>
   input {

packages/builder/src/components/common/Inputs/InputGroup.svelte

@@ -13,7 +13,9 @@
     value.splice(idx, 1, val !== "auto" ? val + suffix : val)
 
     value = value
-    let _value = value.map(v => (!v.endsWith(suffix) && v !== "auto" ? v + suffix : v))
+    let _value = value.map(v =>
+      !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
+    )
     onChange(_value)
   }
 
@@ -44,5 +46,4 @@
   .inputs-group {
     flex: 1;
   }
-
 </style>

packages/builder/src/components/common/Modal.svelte

@@ -50,10 +50,10 @@
 <style>
   .uk-modal-dialog {
     border-radius: 0.3rem;
-    width: 60%;
+    width: 520px;
     height: 80vh;
     display: flex;
     flex-direction: column;
-    padding: 0;
+    padding: 40px;
   }
 </style>

packages/builder/src/components/common/Select.svelte

@@ -20,11 +20,9 @@
 <style>
   .select-container {
     font-size: 14px;
-    color: var(--secondary60);
-    font-weight: bold;
     position: relative;
-    max-width: 400px;
+    border: var(--grey-dark) 1px solid;
-    min-width: 275px;
+    max-width: 256px;
   }
 
   .adjusted {
@@ -43,7 +41,7 @@
     font-family: sans-serif;
     font-weight: 400;
     font-size: 14px;
-    color: #000333;
+    color: var(--ink);
     padding: 0 40px 0px 20px;
     width: 100%;
     max-width: 100%;
@@ -63,6 +61,6 @@
     width: 30px;
     height: 30px;
     pointer-events: none;
-    color: var(--secondary100);
+    color: var(--ink);
   }
 </style>

packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte

@@ -145,19 +145,19 @@
   }
 
   table {
-    border: 1px solid #ccc;
+    border: 1px solid var(--grey-dark);
     background: #fff;
     border-radius: 3px;
     border-collapse: collapse;
   }
 
   thead {
-    background: #f9f9f9;
+    background: var(--blue-light);
-    border: 1px solid #ccc;
+    border: 1px solid var(--grey-dark);
   }
 
   thead th {
-    color: var(--button-text);
+    color: var(--ink);
     text-transform: capitalize;
     font-weight: 500;
     font-size: 14px;
@@ -166,14 +166,14 @@
   }
 
   tbody tr {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--grey-dark);
     transition: 0.3s background-color;
-    color: var(--secondary100);
+    color: var(--ink);
     font-size: 14px;
   }
 
   tbody tr:hover {
-    background: #fafafa;
+    background: var(--grey-light);
   }
 
   .table-controls {

packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte

@@ -35,7 +35,7 @@
   }
 </script>
 
-<header>
+<div class="heading">
   {#if !showFieldView}
     <i class="ri-list-settings-line button--toggled" />
     <h3 class="budibase__title--3">Create / Edit Model</h3>
@@ -43,22 +43,20 @@
     <i class="ri-file-list-line button--toggled" />
     <h3 class="budibase__title--3">Create / Edit Field</h3>
   {/if}
-</header>
+</div>
 {#if !showFieldView}
   <div class="padding">
-    <h4 class="budibase__label--big">Settings</h4>
-
     {#if $store.errors && $store.errors.length > 0}
       <ErrorsBox errors={$store.errors} />
     {/if}
-
+    <div class="textbox">
-    <Textbox label="Name" bind:text={model.name} />
+      <Textbox label="Name" bind:text={model.name} />
-
+    </div>
     <div class="table-controls">
-      <span class="budibase__label--big">Fields</span>
+      <span class="label">Fields</span>
-      <h4 class="hoverable new-field" on:click={() => (showFieldView = true)}>
+      <div class="hoverable new-field" on:click={() => (showFieldView = true)}>
         Add new field
-      </h4>
+      </div>
     </div>
 
     <table class="uk-table fields-table budibase__table">
@@ -67,7 +65,6 @@
           <th>Edit</th>
           <th>Name</th>
           <th>Type</th>
-          <th>Values</th>
           <th />
         </tr>
       </thead>
@@ -90,9 +87,9 @@
         {/each}
       </tbody>
     </table>
-    <div class="uk-margin">
+    <footer>
       <ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
-    </div>
+    </footer>
   </div>
 {:else}
   <FieldView
@@ -104,41 +101,63 @@
 
 <style>
   .padding {
-    padding: 20px;
+    padding-top: 40px;
+  }
+
+  .label {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .textbox {
+    margin: 0px 40px 0px 40px;
+    font-size: 14px;
+    font-weight: 500;
   }
 
   .new-field {
     font-size: 16px;
     font-weight: bold;
-    color: var(--button-text);
+    color: var(--blue);
   }
 
   .fields-table {
-    margin: 1rem 1rem 0rem 0rem;
+    margin: 8px 40px 0px 40px;
     border-collapse: collapse;
+    width: 88%;
   }
 
   tbody > tr:hover {
-    background-color: var(--primary10);
+    background-color: var(--grey-light);
   }
 
   .table-controls {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    margin: 0px 40px;
   }
 
   .ri-more-line:hover {
     cursor: pointer;
   }
 
-  heading {
+  .heading {
-    padding: 20px 20px 0 20px;
+    padding: 40px 40px 0 40px;
     display: flex;
     align-items: center;
   }
 
   h3 {
     margin: 0 0 0 10px;
+    color: var(--ink);
+  }
+
+  footer {
+    background-color: var(--grey-light);
+    margin-top: 40px;
+    padding: 20px 40px 20px 40px;
+    display: flex;
+    justify-content: flex-end;
   }
 </style>

packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte

@@ -79,19 +79,28 @@
   </form>
 </div>
 <footer>
+  <div class="button">
+    <ActionButton secondary on:click={goBack}>Cancel</ActionButton>
+  </div>
   <ActionButton primary on:click={save}>Save</ActionButton>
-  <ActionButton alert on:click={goBack}>Cancel</ActionButton>
 </footer>
 
 <style>
   .root {
-    margin: 20px;
+    margin: 40px;
   }
   footer {
-    padding: 20px;
+    padding: 20px 40px;
     border-radius: 0 0 5px 5px;
     bottom: 0;
     left: 0;
-    background: #fafafa;
+    background: var(--grey-light);
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .button {
+    margin-right: 20px;
   }
 </style>

packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte

@@ -39,51 +39,49 @@
   }
 </script>
 
-<heading>
+<div class="header">
   <i class="ri-eye-line button--toggled" />
   <h3 class="budibase__title--3">Create / Edit View</h3>
-</heading>
+</div>
 <form on:submit|preventDefault class="uk-form-stacked root">
-  <h4 class="budibase__label--big">Settings</h4>
   {#if $store.errors && $store.errors.length > 0}
     <ErrorsBox errors={$store.errors} />
   {/if}
-  <div class="uk-grid-small" uk-grid>
+  <div class="main">
-    <div class="uk-width-1-2@s">
+    <div class="uk-grid-small" uk-grid>
-      <Textbox bind:text={view.name} label="Name" />
+      <div class="uk-width-1-2@s">
+        <Textbox bind:text={view.name} label="Name" />
+      </div>
+    </div>
+    <div class="code-snippets">
+      {#each Object.values(SNIPPET_EDITORS) as snippetType}
+        <span
+          class="snippet-selector__heading hoverable"
+          class:highlighted={currentSnippetEditor === snippetType}
+          on:click={() => (currentSnippetEditor = snippetType)}>
+          {snippetType}
+        </span>
+      {/each}
+      {#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
+        <CodeArea bind:text={view.map} label="Map" />
+      {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
+        <CodeArea bind:text={view.filter} label="Filter" />
+      {:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
+        <CodeArea bind:text={view.reduce} label="Reduce" />
+      {/if}
     </div>
   </div>
-
+  <div class="buttons">
-  <h4 class="budibase__label--big">Snippets</h4>
+    <div class="button">
-  {#each Object.values(SNIPPET_EDITORS) as snippetType}
+      <ActionButton secondary on:click={deleteView}>Delete</ActionButton>
-    <span
+    </div>
-      class="snippet-selector__heading hoverable"
+    <ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
-      class:highlighted={currentSnippetEditor === snippetType}
+  </div>
-      on:click={() => (currentSnippetEditor = snippetType)}>
-      {snippetType}
-    </span>
-  {/each}
-  {#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
-    <CodeArea bind:text={view.map} label="Map" />
-  {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
-    <CodeArea bind:text={view.filter} label="Filter" />
-  {:else if currentSnippetEditor === SNIPPET_EDITORS.REDUCE}
-    <CodeArea bind:text={view.reduce} label="Reduce" />
-  {/if}
-
-  <ActionButton color="secondary" on:click={saveView}>Save</ActionButton>
-  <ActionButton alert on:click={deleteView}>Delete</ActionButton>
 </form>
 
 <style>
   .root {
     height: 100%;
-    padding: 15px;
-  }
-
-  .snippet-selector__heading {
-    margin-right: 20px;
-    opacity: 0.7;
   }
 
   .highlighted {
@@ -92,11 +90,38 @@
 
   h3 {
     margin: 0 0 0 10px;
+    color: var(--ink);
   }
 
-  heading {
+  .snippet-selector__heading {
-    padding: 20px 20px 0 20px;
+    margin-right: 20px;
+    font-size: 14px;
+    color: var(--ink-lighter);
+  }
+
+  .header {
+    padding: 20px 40px 0 40px;
     display: flex;
     align-items: center;
   }
+
+  .main {
+    margin: 20px 40px 0px 40px;
+  }
+
+  .code-snippets {
+    margin: 20px 0px 20px 0px;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+    background-color: var(--grey-light);
+    margin: 0 40px;
+    padding: 20px 0;
+  }
+
+  .button {
+    margin-right: 20px;
+  }
 </style>

packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte

@@ -22,7 +22,11 @@
 </script>
 
 <form on:submit|preventDefault class="uk-form-stacked">
-  <div>
+  <div class="main">
+    <div class="heading">
+      <i class="ri-list-settings-line button--toggled" />
+      <div class="title">Create User</div>
+    </div>
     <div class="uk-margin">
       <label class="uk-form-label" for="form-stacked-text">Username</label>
       <input class="uk-input" type="text" bind:value={username} />
@@ -41,18 +45,40 @@
     </div>
   </div>
   <footer>
-    <ActionButton alert on:click={onClosed}>Cancel</ActionButton>
+    <div class="button">
+      <ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
+    </div>
     <ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
   </footer>
 </form>
 
 <style>
-  div {
+  .main {
-    padding: 30px;
+    padding: 40px 40px 20px 40px;
   }
+
+  .title {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--ink);
+    margin-left: 12px;
+  }
+
+  .heading {
+    display: flex;
+    align-items: baseline;
+  }
+
   footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
     padding: 20px;
-    background: #fafafa;
+    background: var(--grey-light);
-    border-radius: 0.5rem;
+    border-radius: 0 0 5px 5px;
+  }
+
+  .button {
+    margin-right: 20px;
   }
 </style>

packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte

@@ -151,7 +151,7 @@
   }
 </script>
 
-<div class="root" on:click|stopPropagation={() => {}}>
+<div class="root boundary" on:click|stopPropagation={() => {}}>
   <button>
     <MoreIcon />
   </button>

packages/builder/src/components/userInterface/FlatButton.svelte

@@ -1,5 +1,5 @@
 <script>
-  import {buildStyle} from "../../helpers.js"
+  import { buildStyle } from "../../helpers.js"
   export let value = ""
   export let text = ""
   export let icon = ""
@@ -8,19 +8,24 @@
   export let selected = false
   export let fontWeight = ""
 
-  $: style = buildStyle({padding, fontWeight})
+  $: style = buildStyle({ padding, fontWeight })
   $: useIcon = !!icon
 </script>
 
-<div class="flatbutton" {style} class:selected on:click={() => onClick(value || text)}>
+<div
+  class="flatbutton"
+  {style}
+  class:selected
+  on:click={() => onClick(value || text)}>
   {#if useIcon}
     <i class={icon} />
   {:else}
-    <span>{@html text}</span>
+    <span>
+      {@html text}
+    </span>
   {/if}
 </div>
 
-
 <style>
   .flatbutton {
     cursor: pointer;
@@ -42,7 +47,7 @@
     color: #ffffff;
   }
 
-  i{
+  i {
     font-size: 20px;
   }
 </style>

packages/builder/src/components/userInterface/FlatButtonGroup.svelte

@@ -28,10 +28,8 @@
     onChange(val)
   }
 
-
   const checkSelected = val =>
     isMultiSelect ? value.includes(val) : value === val
-
 </script>
 
 <div class="flatbutton-group">

packages/builder/src/components/userInterface/ModelSelect.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { backendUiStore } from "builderStore"
+
+  export let value
+</script>
+
+<div class="uk-margin block-field">
+  <div class="uk-form-controls">
+    <select class="budibase__input" on:change {value}>
+      {#each $backendUiStore.models as model}
+        <option value={model._id}>{model.name}</option>
+      {/each}
+    </select>
+  </div>
+</div>

packages/builder/src/components/userInterface/OptionSelect.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, beforeUpdate } from "svelte"
-  import {buildStyle} from "../../helpers.js"
+  import { buildStyle } from "../../helpers.js"
   export let options = []
   export let value = ""
   export let styleBindingProperty
@@ -214,10 +214,10 @@
     height: auto;
     padding: 5px 0px;
     cursor: pointer;
-    padding-left: 10px
+    padding-left: 10px;
   }
 
   li:hover {
-    background-color:#e6e6e6
+    background-color: #e6e6e6;
   }
 </style>

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -1,6 +1,7 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import Checkbox from "../common/Checkbox.svelte"
+import ModelSelect from "components/userInterface/ModelSelect.svelte"
 
 import { all } from "./propertyCategories.js"
 
@@ -273,14 +274,20 @@ export default {
           _component: "@budibase/standard-components/datatable",
           description: "A component that generates a table from your data.",
           icon: "ri-archive-drawer-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           children: [],
         },
         {
           name: "Form",
           description: "A component that generates a form from your data.",
           icon: "ri-file-edit-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           _component: "@budibase/standard-components/dataform",
           template: {
             component: "@budibase/materialdesign-components/Form",
@@ -294,7 +301,10 @@ export default {
           _component: "@budibase/standard-components/datachart",
           description: "Shiny chart",
           icon: "ri-bar-chart-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           children: [],
         },
         {
@@ -302,7 +312,10 @@ export default {
           _component: "@budibase/standard-components/datalist",
           description: "Shiny list",
           icon: "ri-file-list-fill",
-          properties: { design: { ...all } },
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Model", key: "model", control: ModelSelect }],
+          },
           children: [],
         },
         {

packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte

@@ -5,7 +5,6 @@
 </script>
 
 <div class="uk-margin block-field">
-  <label class="uk-form-label">Model</label>
   <div class="uk-form-controls">
     <select class="budibase__input" bind:value>
       {#each $backendUiStore.models as model}

packages/standard-components/src/DataChart.svelte

@@ -20,17 +20,17 @@
     height: "400",
     dataFormat: "json",
     dataSource: {
-      data: $store[model._id] || [],
+      data: $store[model] || [],
     },
   }
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
+    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
     const response = await _bb.api.get(FETCH_RECORDS_URL)
     if (response.status === 200) {
       const json = await response.json()
       store.update(state => {
-        state[model._id] = json
+        state[model] = json
         return state
       })
     } else {

packages/standard-components/src/DataList.svelte

@@ -10,13 +10,15 @@
   let store = _bb.store
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
+    if (!model || !model.length) return
+
+    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
     const response = await _bb.api.get(FETCH_RECORDS_URL)
     if (response.status === 200) {
       const json = await response.json()
 
       store.update(state => {
-        state[model._id] = json
+        state[model] = json
         return state
       })
     } else {
@@ -24,7 +26,8 @@
     }
   }
 
-  $: data = $store[model._id] || []
+  $: data = $store[model] || []
+  $: if (model) fetchData()
 
   onMount(async () => {
     await fetchData()

packages/standard-components/src/DataTable.svelte

@@ -10,13 +10,14 @@
   let store = _bb.store
 
   async function fetchData() {
-    const FETCH_RECORDS_URL = `/api/${_instanceId}/all_${model._id}/records`
+    const FETCH_RECORDS_URL = `/api/${_instanceId}/views/all_${model}`
+
     const response = await _bb.api.get(FETCH_RECORDS_URL)
     if (response.status === 200) {
       const json = await response.json()
 
       store.update(state => {
-        state[model._id] = json
+        state[model] = json
         return state
       })
 
@@ -26,7 +27,8 @@
     }
   }
 
-  $: data = $store[model._id] || []
+  $: data = $store[model] || []
+  $: if (model) fetchData()
 
   onMount(async () => {
     await fetchData()