global style abstraction, backend UI updates

packages/builder/src/accessLevels/AccessLevelView.svelte

@@ -67,8 +67,9 @@
 
     <Textbox label="Access Level Name" bind:text={clonedLevel.name} />
 
+    <h4 class="budibase__title--4">Permissions</h4>
     {#each permissionMatrix as permission}
-      <div>
+      <div class="permission-container">
         <Checkbox
           label={getPermissionName(permission.permission)}
           checked={permission.hasPermission}
@@ -78,15 +79,19 @@
 
   </form>
 
-  <ButtonGroup style="margin-top: 10px">
+  <div class="uk-modal-footer uk-text-right">
-    <ActionButton primary grouped on:click={save}>Save</ActionButton>
+    <ButtonGroup>
-    <ActionButton alert grouped on:click={() => onFinished()}>
+      <ActionButton primary grouped on:click={save}>Save</ActionButton>
-      Cancel
+      <ActionButton alert grouped on:click={() => onFinished()}>
-    </ActionButton>
+        Cancel
-  </ButtonGroup>
+      </ActionButton>
+    </ButtonGroup>
+  </div>
 
 </div>
 
 <style>
-
+  .permission-container {
+    margin-bottom: 10px;
+  }
 </style>

packages/builder/src/accessLevels/AccessLevelsRoot.svelte

@@ -82,7 +82,11 @@
     </table>
   {:else}(no actions added){/if}
 
-  <Modal bind:isOpen={isEditing}>
+  <Modal 
+    onClosed={() => isEditing = false}
+    bind:isOpen={isEditing}
+    title={isEditing ? "Edit Access Level" : "Create Access Level"}
+  >
     {#if isEditing}
       <AccessLevelView
         level={editingLevel}

packages/builder/src/actionsAndTriggers/Actions.svelte

@@ -19,20 +19,26 @@
 
   let actionsArray = []
   store.subscribe(s => {
-    actionsArray = pipe(s.actions, [keys, map(k => s.actions[k])])
+    actionsArray = pipe(
+      s.actions,
+      [keys, map(k => s.actions[k])]
+    )
   })
 
   let getDefaultOptionsHtml = defaultOptions =>
-    pipe(defaultOptions, [
+    pipe(
-      keys,
+      defaultOptions,
-      map(
+      [
-        k =>
+        keys,
-          `<span style="color:var(--slate)">${k}: </span>${JSON.stringify(
+        map(
-            defaultOptions[k]
+          k =>
-          )}`
+            `<span style="color:var(--slate)">${k}: </span>${JSON.stringify(
-      ),
+              defaultOptions[k]
-      join("<br>"),
+            )}`
-    ])
+        ),
+        join("<br>"),
+      ]
+    )
 
   let actionEditingFinished = action => {
     if (action) {
@@ -79,7 +85,9 @@
   </table>
 {:else}(no actions added){/if}
 
-<Modal bind:isOpen={isEditing}>
+<Modal
+  title={editingActionIsNew ? 'Create Action' : 'Edit Action'}
+  bind:isOpen={isEditing}>
   {#if isEditing}
     <ActionView
       action={editingAction}

packages/builder/src/actionsAndTriggers/TriggerView.svelte

@@ -14,7 +14,6 @@
   export let onFinished = action => {}
   export let allTriggers
   export let allActions
-  export let isNew = true
 
   let clonedTrigger = cloneDeep(trigger)
   let errors = []
@@ -55,10 +54,12 @@
       options={['', ...actionNames]}
       bind:selected={clonedTrigger.actionName} />
     <CodeArea
-      label="Condition (javascript)"
+      label="Condition"
+      javascript
       bind:text={clonedTrigger.condition} />
     <CodeArea
-      label="Action Options Creator (javascript)"
+      label="Action Options Creator"
+      javascript
       bind:text={clonedTrigger.optionsCreator} />
 
   </form>

packages/builder/src/actionsAndTriggers/Triggers.svelte

@@ -57,7 +57,10 @@
   </table>
 {:else}(no triggers added){/if}
 
-<Modal bind:isOpen={isEditing}>
+<Modal
+  title={editingTriggerIsNew ? 'Create Trigger' : 'Edit Trigger'}
+  onClosed={() => (isEditing = false)}
+  bind:isOpen={isEditing}>
   {#if isEditing}
     <TriggerView
       trigger={editingTrigger}

packages/builder/src/budibase.css

@@ -0,0 +1,93 @@
+/* Budibase Component Styles */
+.header {
+    font-size: 0.75rem;
+    color: #999;
+    text-transform: uppercase;
+    margin-top: 1rem;
+    font-weight: 500;
+}
+
+.budibase__title {
+    font-weight: 900;
+    font-size: 42px;
+}
+
+.budibase__title--2 {
+    font-weight: 700;
+    font-size: 32px;
+}
+
+.budibase__title--3 {
+    font-weight: 700;
+    font-size: 24px;
+}
+
+.budibase__title--4 {
+    font-weight: 700;
+    font-size: 18px;
+}
+
+.budibase__label--big {
+    font-weight: 400;
+    font-size: 14px;
+    opacity: 0.6;
+    text-transform: uppercase;
+}
+
+.budibase__label--medium {
+    font-weight: 500;
+    font-size: 12px;
+    opacity: 0.6;
+    text-transform: uppercase;
+}
+
+.budibase__label--small {
+    font-weight: 500;
+    font-size: 10px;
+    opacity: 0.6;
+    text-transform: uppercase;
+}
+
+.budibase__sub-heading {
+    font-weight: 500;
+    font-size: 16px;
+    opacity: 0.6;
+}
+
+.budibase__nav-item {
+    cursor: pointer;
+    padding: 0 7px 0 3px;
+    height: 35px;
+    margin: 5px 0;
+    border-radius: 0 5px 5px 0;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 0.8em;
+}
+
+.budibase__nav-item.selected {
+    color: var(--button-text);
+    background: var(--background-button) !important;
+}
+
+.budibase__nav-item:hover {
+    background: #fafafa;
+}
+
+.budibase__input {
+    width: 250px;
+    height: 35px;
+    border-radius: 3px;
+    border: 1px solid #DBDBDB;
+    text-align: left;
+    letter-spacing: 0.7px;
+    color: #163057;
+    font-size: 16px;
+    padding-left: 5px;
+}
+
+.uk-text-right {
+    display: flex;
+    justify-content: flex-start;
+}

packages/builder/src/common/ActionButton.svelte

@@ -33,7 +33,7 @@
     font-weight: bold;
     border-radius: 5px;
     border: none;
-    width: 120px;
+    min-width: 120px;
     height: 45px;
   }
 

packages/builder/src/common/ButtonGroup.svelte

@@ -11,6 +11,6 @@
     display: grid;
     grid-auto-flow: column;
     grid-gap: 5px;
-    width: 10%;
+    width: 50%;
   }
 </style>

packages/builder/src/common/CodeArea.svelte

@@ -1,10 +1,17 @@
 <script>
+  import { JavaScriptIcon } from "../common/Icons"
   // todo: use https://ace.c9.io
   export let text = ""
   export let label = ""
+  export let javascript = false
 </script>
 
-<div class="header">{label}</div>
+<div class="header">
+  {#if javascript}
+    <JavaScriptIcon />
+  {/if}
+  <span>{label}</span>
+</div>
 <textarea class="uk-textarea" bind:value={text} />
 
 <style>
@@ -13,10 +20,18 @@
     margin-top: 5px;
     margin-bottom: 10px;
     background: var(--lightslate);
-    color: var(--white);
     font-family: "Courier New", Courier, monospace;
     width: 95%;
     height: 100px;
     border-radius: 5px;
   }
+
+  span {
+    margin-left: 5px;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+  }
 </style>

packages/builder/src/common/ConfirmDialog.svelte

@@ -36,15 +36,15 @@
   <div class="uk-modal-dialog">
     <button class="uk-modal-close-default" type="button" uk-close />
     <div class="uk-modal-header">
-      <h2 class="uk-modal-title">{title}</h2>
+      <h4 class="budibase__title--4">{title}</h4>
     </div>
     <div class="uk-modal-body">
       <slot>{body}</slot>
     </div>
     <div class="uk-modal-footer">
       <ButtonGroup>
-        <ActionButton primary on:click={ok}>{okText}</ActionButton>
+        <ActionButton alert on:click={ok}>{okText}</ActionButton>
-        <ActionButton error on:click={cancel}>{cancelText}</ActionButton>
+        <ActionButton primary on:click={cancel}>{cancelText}</ActionButton>
       </ButtonGroup>
     </div>
   </div>

packages/builder/src/common/Icons/JavaScript.svelte

@@ -0,0 +1,31 @@
+<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M0.220001 0.220001H19.78V19.7802H0.220001V0.220001Z"
+    fill="#F0DB4F" />
+  <path
+    d="M18.1792 15.115C18.0359 14.2227 17.4541 13.4731 15.7305 12.7742C15.1317
+    12.4991 14.4642 12.302 14.2653 11.8483C14.1947 11.5842 14.1853 11.4355 14.23
+    11.2756C14.3583 10.7569 14.9775 10.5952 15.4683 10.7439C15.7844 10.8499
+    16.0836 11.0934 16.2641 11.482C17.1081 10.9355 17.1064 10.9391 17.6958
+    10.5634C17.48 10.2289 17.3648 10.0745 17.2236 9.93142C16.7159 9.36439
+    16.0242 9.07235 14.918 9.0947L14.3417 9.16923C13.7895 9.30876 13.2633 9.5986
+    12.9547 9.9872C12.0287 11.0378 12.2928 12.8766 13.4195 13.6333C14.5295
+    14.4664 16.1601 14.6559 16.3684 15.435C16.5711 16.3888 15.6675 16.6975
+    14.7694 16.5878C14.1075 16.4502 13.7394 16.1138 13.3414 15.502C12.6089
+    15.926 12.6089 15.926 11.8558 16.3591C12.0344 16.7495 12.222 16.9263 12.5214
+    17.2645C13.9383 18.7017 17.4839 18.6311 18.1198 16.4558C18.1456 16.3811
+    18.3169 15.883 18.1792 15.115V15.115ZM10.8534 9.20985H9.0239L9.0164
+    13.9399C9.0164 14.9458 9.06843 15.868 8.90484 16.1506C8.63718 16.7066
+    7.94359 16.6377 7.62749 16.5299C7.30578 16.3717 7.14218 16.1469 6.95265
+    15.8291C6.90062 15.7378 6.86156 15.6672 6.84843 15.6617L5.36093
+    16.5727C5.60828 17.0803 5.97265 17.521 6.43937 17.8072C7.13656 18.2256
+    8.07359 18.3539 9.05359 18.1289C9.6914 17.9431 10.2417 17.5583 10.5298
+    16.9725C10.9464 16.2045 10.857 15.275 10.8533 14.2469C10.8626 12.5695
+    10.8534 10.8925 10.8534 9.20985Z"
+    fill="#323330" />
+</svg>

packages/builder/src/common/Icons/index.js

@@ -15,3 +15,4 @@ export { default as CheckIcon } from "./Check.svelte"
 export { default as GridIcon } from "./Grid.svelte"
 export { default as ShapeIcon } from "./Shape.svelte"
 export { default as AddIcon } from "./Add.svelte"
+export { default as JavaScriptIcon } from "./JavaScript.svelte"

packages/builder/src/common/Modal.svelte

@@ -5,6 +5,7 @@
   export let isOpen = false
   export let onClosed = () => {}
   export let id = ""
+  export let title
 
   let ukModal
   let listenerAdded = false
@@ -26,11 +27,18 @@
 </script>
 
 <div bind:this={ukModal} uk-modal {id}>
-  <div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
+  <div class="uk-modal-dialog" uk-overflow-auto>
-    {#if onClosed}
+    {#if title}
-      <button class="uk-modal-close-default" type="button" uk-close />
+      <div class="uk-modal-header">
+        <h4 class="budibase__title--4">{title}</h4>
+      </div>
     {/if}
-    <slot />
+    <div class="uk-modal-body">
+      {#if onClosed}
+        <button class="uk-modal-close-default" type="button" uk-close />
+      {/if}
+      <slot />
+    </div>
   </div>
 </div>
 

packages/builder/src/common/NumberBox.svelte

@@ -16,6 +16,6 @@
 <div class="uk-margin">
   <label class="uk-form-label">{label}</label>
   <div class="uk-form-controls">
-    <input class="uk-input" {value} on:change={inputChanged} />
+    <input class="budibase__input" {value} on:change={inputChanged} />
   </div>
 </div>

packages/builder/src/common/Select.svelte

@@ -19,6 +19,7 @@
     color: var(--secondary50);
     font-weight: bold;
     position: relative;
+    max-width: 300px;
   }
 
   select {

packages/builder/src/database/ActionsHeader.svelte

@@ -38,15 +38,17 @@
     </div>
   {/if}
 
-  <Modal bind:isOpen={confirmDelete}>
+  <Modal onClosed={() => (confirmDelete = false)} bind:isOpen={confirmDelete}>
-    <div class="actions-modal-body">
+    <span>
-      Are you sure you want to delete {$store.currentNode.name} ?
+      Are you sure you want to delete {$store.currentNode.name}?
-    </div>
+    </span>
     <div class="uk-modal-footer uk-text-right">
-      <ActionButton alert on:click={deleteCurrentNode}>Yes</ActionButton>
+      <ButtonGroup>
-      <ActionButton primary on:click={() => (confirmDelete = false)}>
+        <ActionButton alert on:click={deleteCurrentNode}>Yes</ActionButton>
-        No
+        <ActionButton primary on:click={() => (confirmDelete = false)}>
-      </ActionButton>
+          No
+        </ActionButton>
+      </ButtonGroup>
     </div>
   </Modal>
 </div>

packages/builder/src/database/IndexView.svelte

@@ -14,15 +14,18 @@
 
   store.subscribe($store => {
     index = $store.currentNode
-    indexableRecords = pipe($store.hierarchy, [
+    indexableRecords = pipe(
-      hierarchyFunctions.getFlattenedHierarchy,
+      $store.hierarchy,
-      filter(hierarchyFunctions.isDecendant(index.parent())),
+      [
-      filter(hierarchyFunctions.isRecord),
+        hierarchyFunctions.getFlattenedHierarchy,
-      map(n => ({
+        filter(hierarchyFunctions.isDecendant(index.parent())),
-        node: n,
+        filter(hierarchyFunctions.isRecord),
-        isallowed: some(id => n.nodeId === id)(index.allowedRecordNodeIds),
+        map(n => ({
-      })),
+          node: n,
-    ])
+          isallowed: some(id => n.nodeId === id)(index.allowedRecordNodeIds),
+        })),
+      ]
+    )
   })
 
   const toggleAllowedRecord = record => {
@@ -40,7 +43,7 @@
   <Textbox bind:text={index.name} label="Name" />
 
   <div class="allowed-records">
-    <div>Records to Index</div>
+    <div class="index-label">Records to Index</div>
     {#each indexableRecords as rec}
       <input
         type="checkbox"
@@ -55,11 +58,9 @@
     bind:selected={index.indexType}
     options={['ancestor', 'reference']} />
 
-  <CodeArea bind:text={index.map} label="Map (javascript)" />
+  <CodeArea bind:text={index.map} javascript label="Map" />
-  <CodeArea bind:text={index.filter} label="Filter (javascript expression)" />
+  <CodeArea bind:text={index.filter} javascript label="Filter" />
-  <CodeArea
+  <CodeArea javascript bind:text={index.getShardName} label="Shard Name" />
-    bind:text={index.getShardName}
-    label="Shard Name (javascript expression)" />
 
 </form>
 
@@ -76,4 +77,9 @@
   .allowed-records > span {
     margin-right: 30px;
   }
+
+  .index-label {
+    color: #333;
+    font-size: 0.875rem;
+  }
 </style>

packages/builder/src/database/RecordView.svelte

@@ -150,6 +150,7 @@
 
   {#if editingField}
     <Modal
+      title="Manage Index Fields"
       bind:isOpen={editingField}
       onClosed={() => onFinishedFieldEdit(false)}>
       <FieldView

packages/builder/src/global.css

@@ -1,3 +1,5 @@
+@import "./budibase.css";
+
 :root {
     --primary100: #173157FF;
     --primary75: #454CA0BF;
@@ -100,91 +102,4 @@ h5 {
     font-family: var(--fontblack);
     font-size: 12pt;
     color: var(--darkslate);
-}
-
-
-/* Budibase Component Styles */
-.header {
-    font-size: 0.75rem;
-    color: #999;
-    text-transform: uppercase;
-    margin-top: 1rem;
-    font-weight: 500;
-}
-
-.budibase__title {
-    font-weight: 900;
-    font-size: 42px;
-}
-
-.budibase__title--2 {
-    font-weight: 700;
-    font-size: 32px;
-}
-
-.budibase__title--3 {
-    font-weight: 700;
-    font-size: 24px;
-}
-
-.budibase__title--4 {
-    font-weight: 700;
-    font-size: 18px;
-}
-
-.budibase__label--big {
-    font-weight: 400;
-    font-size: 14px;
-    opacity: 0.6;
-    text-transform: uppercase;
-}
-
-.budibase__label--medium {
-    font-weight: 500;
-    font-size: 12px;
-    opacity: 0.6;
-    text-transform: uppercase;
-}
-
-.budibase__label--small {
-    font-weight: 500;
-    font-size: 10px;
-    opacity: 0.6;
-    text-transform: uppercase;
-}
-
-.budibase__sub-heading {
-
-}
-
-.budibase__nav-item {
-    cursor: pointer;
-    padding: 0 7px 0 3px;
-    height: 35px;
-    margin: 5px 0;
-    border-radius: 0 5px 5px 0;
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-}
-
-.budibase__nav-item.selected {
-    color: var(--button-text);
-    background: var(--background-button) !important;
-}
-
-.budibase__nav-item:hover {
-    background: #fafafa;
-}
-
-.budibase__input {
-    width: 250px;
-    height: 50px;
-    border-radius: 3px;
-    border: 1px solid #DBDBDB;
-    text-align: left;
-    letter-spacing: 0.7px;
-    color: #163057;
-    font-size: 16px;
-    padding-left: 5px;
 }

packages/builder/src/nav/BackendNav.svelte

@@ -142,8 +142,6 @@
   .hierarchy {
     display: flex;
     flex-direction: column;
-    flex: 1 0 auto;
-    height: 100px;
   }
 
   .hierarchy-items-container {

packages/builder/src/nav/NavItem.svelte

@@ -14,4 +14,10 @@
   const setActive = () => store.setActiveNav(name)
 </script>
 
-<div class="budibase__nav-item" class:selected={navActive} on:click={setActive}>{label}</div>
+<div class="budibase__nav-item backend-nav-item" class:selected={navActive} on:click={setActive}>{label}</div>
+
+<style>
+  .backend-nav-item {
+    padding-left: 25px;
+  }
+</style>

packages/builder/src/userInterface/ComponentsHierarchy.svelte

@@ -92,7 +92,7 @@
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
+  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component?`}
   okText="Delete Component"
   onOk={() => store.deleteComponent(componentToDelete)} />
 

packages/builder/src/userInterface/EventsEditor/EventsEditor.svelte

@@ -115,6 +115,7 @@
     grid-template-columns: repeat(2, 1fr);
     border: 2px solid #f9f9f9;
     height: 80px;
+    width: 100%;
   }
 
   .event-name {

packages/builder/src/userInterface/MasterLayout.svelte

@@ -87,7 +87,7 @@
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
   title="Confirm Delete"
-  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component`}
+  body={`Are you sure you wish to delete this '${lastPartOfName(componentToDelete)}' component?`}
   okText="Delete Component"
   onOk={() => store.deleteComponent(componentToDelete)} />
 

packages/server/builder/assets/javascript-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"/><path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-15.672-14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 4.724 5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-4.045-3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333 12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-3.106-2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 3.249 3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-10.735.001-21.468.001-32.237z"/></svg>