Merge pull request #280 from Budibase/nav-dropdown

UI update for dropdown

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

@@ -1,4 +1,4 @@
-<script>
+ <script>
   import { MoreIcon } from "components/common/Icons"
   import { store } from "builderStore"
   import { getComponentDefinition } from "builderStore/store"
@@ -155,24 +155,16 @@
     <MoreIcon />
   </button>
   <ul class="menu" bind:this={dropdownEl} on:click={hideDropdown}>
-    <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
-    <li on:click={moveUpComponent}>Move up</li>
-    <li on:click={moveDownComponent}>Move down</li>
-    <li on:click={copyComponent}>Duplicate</li>
-    <li on:click={() => storeComponentForCopy(true)}>Cut</li>
-    <li on:click={() => storeComponentForCopy(false)}>Copy</li>
-    <hr />
-    <li class:disabled={noPaste} on:click={() => pasteComponent('above')}>
-      Paste above
-    </li>
-    <li class:disabled={noPaste} on:click={() => pasteComponent('below')}>
-      Paste below
-    </li>
-    <li
-      class:disabled={noPaste || noChildrenAllowed}
-      on:click={() => pasteComponent('inside')}>
-      Paste inside
-    </li>
+    <li class="item" on:click={() => confirmDeleteDialog.show()}><i class="icon ri-delete-bin-2-line"></i>Delete</li>
+    <li class="item" on:click={moveUpComponent}><i class="icon ri-arrow-up-line"></i>Move up</li>
+    <li class="item" on:click={moveDownComponent}><i class="icon ri-arrow-down-line"></i>Move down</li>
+    <li class="item" on:click={copyComponent}><i class="icon ri-repeat-one-line"></i>Duplicate</li>
+    <li class="item" on:click={() => storeComponentForCopy(true)}><i class="icon ri-scissors-cut-line"></i>Cut</li>
+    <li class="item" on:click={() => storeComponentForCopy(false)}><i class="icon ri-file-copy-line"></i>Copy</li>
+    <hr class="hr-style">
+    <li class="item" class:disabled={noPaste} on:click={() => pasteComponent('above')}><i class="icon ri-insert-row-top"></i>Paste above</li>
+    <li class="item" class:disabled={noPaste} on:click={() => pasteComponent('below')}><i class="icon ri-insert-row-bottom"></i>Paste below</li>
+    <li class="item" class:disabled={noPaste || noChildrenAllowed} on:click={() => pasteComponent('inside')}><i class="icon ri-insert-column-right"></i>Paste inside</li>
   </ul>
 </div>
 
@@ -195,33 +187,44 @@
     padding: 5px;
     background: transparent;
     cursor: pointer;
-    color: var(--button-text);
+    color: var(--ink);
     outline: none;
   }
 
   .menu {
     z-index: 100000;
     overflow: visible;
-    padding: 10px 0;
+    padding: 12px 0px;
+    border-radius: 5px;
   }
 
   .menu li {
     border-style: none;
     background-color: transparent;
     list-style-type: none;
-    padding: 4px 5px 4px 15px;
+    padding: 4px 16px;
     margin: 0;
     width: 100%;
     box-sizing: border-box;
   }
 
+  .item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+  }
+
+  .icon {
+    margin-right: 8px;
+  }
+
   .menu li:not(.disabled) {
     cursor: pointer;
-    color: var(--ink);
+    color: var(--ink-light);
   }
 
   .menu li:not(.disabled):hover {
-    color: var(--button-text);
+    color: var(--ink);
     background-color: var(--grey-light);
   }
 
@@ -229,4 +232,9 @@
     color: var(--grey-dark);
     cursor: default;
   }
+
+  .hr-style {
+    margin: 8px 0;
+    color: var(--grey-dark)
+  }
 </style>

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

@@ -78,9 +78,9 @@
 
   .actions {
     display: none;
-    height: 20px;
-    width: 28px;
-    color: var(--slate);
+    height: 24px;
+    width: 24px;
+    color: var(--ink);
     padding: 0px 5px;
     border-style: none;
     background: rgba(0, 0, 0, 0);
@@ -89,7 +89,7 @@
   }
 
   .item:hover {
-    background: #fafafa;
+    background: var(--grey-light);
     cursor: pointer;
   }
   .item:hover .actions {

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

@@ -22,8 +22,9 @@ export const layout = [
     label: "Direction",
     key: "flex-direction",
     control: OptionSelect,
-    initialValue: "Row",
+    initialValue: "Select Option",
     options: [
+      { label: "Select Option", value: "" },
       { label: "Row", value: "row" },
       { label: "Row Reverse", value: "rowReverse" },
       { label: "column", value: "column" },
@@ -34,8 +35,9 @@ export const layout = [
     label: "Justify",
     key: "justify-content",
     control: OptionSelect,
-    initialValue: "Flex Start",
+    initialValue: "Select Option",
     options: [
+      { label: "Select Option", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -48,8 +50,9 @@ export const layout = [
     label: "Align",
     key: "align-items",
     control: OptionSelect,
-    initialValue: "Flex Start",
+    initialValue: "Select Option",
     options: [
+      { label: "Select Option", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -61,8 +64,9 @@ export const layout = [
     label: "Wrap",
     key: "flex-wrap",
     control: OptionSelect,
-    initialValue: "NoWrap",
+    initialValue: "Select Option",
     options: [
+      { label: "Select Option", value: "" },
       { label: "No Wrap", value: "nowrap" },
       { label: "Wrap", value: "wrap" },
       { label: "Wrap Reverse", value: "wrap-reverse" },

packages/builder/src/pages/_layout.svelte

@@ -197,7 +197,7 @@
   .nav-item-title {
     font-size: 14px;
     color: var(--ink);
-    font-weight: 500;
+    font-weight: 400;
     margin-left: 12px;
   }