Merge pull request #1026 from Budibase/minor-ui-updates-to-bindings-and-actions-drawer

Minor UI updates to bindings and actions drawer

packages/builder/package.json

@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.54.1",
+    "@budibase/bbui": "^1.55.2",
     "@budibase/client": "^0.5.3",
     "@budibase/colorpicker": "^1.0.1",
     "@budibase/string-templates": "^0.5.3",

packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte

@@ -26,10 +26,9 @@
 <div class="drawer-contents">
   <div class="container" data-cy="binding-dropdown-modal">
     <div class="list">
-      <Heading extraSmall>Objects</Heading>
-      <Spacer medium />
       {#if context}
-        <Heading extraSmall>Tables</Heading>
+        <Heading extraSmall>Columns</Heading>
+        <Spacer small />
         <ul>
           {#each context as { readableBinding }}
             <li on:click={() => addToText(readableBinding)}>
@@ -53,8 +52,8 @@
       <TextArea
         thin
         bind:value
-        placeholder="Add text, or click the objects on the left to add them to the
-        textbox." />
+        placeholder="Add text, or click the objects on the left to add them to
+        the textbox." />
     </div>
   </div>
 </div>
@@ -63,15 +62,20 @@
   .container {
     height: 100%;
     display: grid;
-    grid-template-columns: auto 1fr;
+    grid-template-columns: 260px 1fr;
   }
   .list {
-    width: 150px;
-    border-right: 1.5px solid var(--grey-4);
-    padding: var(--spacing-s);
+    border-right: var(--border-light);
+    padding: var(--spacing-l);
+    overflow: auto;
   }
+
+  .list::-webkit-scrollbar {
+    display: none;
+  }
+
   .text {
-    padding: var(--spacing-s);
+    padding: var(--spacing-xl);
     font-family: var(--font-sans);
   }
   .text :global(p) {
@@ -89,10 +93,12 @@
     font-family: var(--font-sans);
     font-size: var(--font-size-xs);
     color: var(--grey-7);
-    padding: var(--spacing-s) 0;
+    padding: var(--spacing-m) 0;
     margin: auto 0px;
     align-items: center;
     cursor: pointer;
+    border: var(--border-light);
+    border-width: 1px 0 1px 0;
   }
 
   li:hover {

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -1,10 +1,10 @@
 <script>
   import {
     Button,
-    TextButton,
     Body,
     DropdownMenu,
     ModalContent,
+    Spacer,
   } from "@budibase/bbui"
   import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
   import actionTypes from "./actions"
@@ -48,12 +48,11 @@
   <div class="actions-list">
     <div>
       <div bind:this={addActionButton}>
-        <TextButton text small blue on:click={addActionDropdown.show}>
-          <div style="height: 20px; width: 20px;">
-            <AddIcon />
-          </div>
+        <Spacer small />
+        <Button wide secondary on:click={addActionDropdown.show}>
           Add Action
-        </TextButton>
+        </Button>
+        <Spacer medium />
       </div>
       <DropdownMenu
         bind:this={addActionDropdown}
@@ -74,13 +73,12 @@
         <div class="action-container">
           <div class="action-header" on:click={selectAction(action)}>
             <span class:selected={action === selectedAction}>
-              {index + 1}.
-              {action[EVENT_TYPE_KEY]}
+              {index + 1}. {action[EVENT_TYPE_KEY]}
             </span>
           </div>
           <i
             class="ri-close-fill"
-            style="margin-left: var(--spacing-m);"
+            style="margin-left: auto;"
             on:click={() => deleteAction(index)} />
         </div>
       {/each}
@@ -107,7 +105,7 @@
 
   .action-header > span {
     margin-bottom: var(--spacing-m);
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-xs);
   }
 
   .action-header > span:hover,
@@ -117,13 +115,13 @@
   }
 
   .actions-list {
-    border: var(--border-light);
+    border-right: var(--border-light);
     padding: var(--spacing-s);
   }
 
   .available-action {
     padding: var(--spacing-s);
-    font-size: var(--font-size-m);
+    font-size: var(--font-size-xs);
     cursor: pointer;
   }
 
@@ -135,7 +133,7 @@
     height: 40vh;
     display: grid;
     grid-gap: var(--spacing-m);
-    grid-template-columns: 15% 1fr;
+    grid-template-columns: 260px 1fr;
     grid-auto-flow: column;
     min-height: 0;
     padding-top: 0;
@@ -143,15 +141,13 @@
   }
 
   .action-container {
-    border: var(--border-light);
-    border-width: 1px 0 0 0;
+    border-top: var(--border-light);
     display: flex;
     align-items: center;
   }
 
   .selected-action-container {
-    padding-bottom: var(--spacing-s);
-    padding-top: var(--spacing-s);
+    padding: var(--spacing-xl);
   }
 
   a {
@@ -164,4 +160,9 @@
   a:hover {
     color: var(--blue);
   }
+
+  i:hover {
+    color: var(--red);
+    cursor: pointer;
+  }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditorModal.svelte

@@ -156,7 +156,7 @@
   }
 
   .available-action {
-    padding: var(--spacing-s);
+    padding: var(--spacing-m);
     font-size: var(--font-size-m);
     cursor: pointer;
   }

packages/builder/yarn.lock

@@ -842,10 +842,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.54.1":
-  version "1.54.1"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.54.1.tgz#ad0439c0be6a4dc818cd9dacda00f053b0daa9d5"
-  integrity sha512-ZY2OP/tF+ReMSyzZIGZV6wpQ4eIEzYGxZV3n+C+oNjzK5u3rwWPCDEVDlZgJSqJ61z+sEf2zuIyAh88lq9RTaA==
+"@budibase/bbui@^1.55.2":
+  version "1.55.2"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.55.2.tgz#be636e8b86b7e516a08eb626bb50c4b1f9774bf8"
+  integrity sha512-CevH/olxDFIko9uwYUpUTevPmpShrLwJSR7+wn/JetZERwhTwbLhOXzpsyXaK226qQ8vWhm0U31HRSKI1HwDDg==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"