component nav dropdown menu

packages/builder/src/builderStore/store/index.js

@@ -64,11 +64,16 @@ export const getStore = () => {
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
+  store.storeComponentForCopy = storeComponentForCopy(store)
+  store.pasteComponent = pasteComponent(store)
   return store
 }
 
 export default getStore
 
+export const getComponentDefinition = (state, name) =>
+  name.startsWith("##") ? getBuiltin(name) : state.components[name]
+
 const setPackage = (store, initial) => async pkg => {
   const [main_screens, unauth_screens] = await Promise.all([
     api
@@ -317,8 +322,6 @@ const setCurrentPage = store => pageName => {
   })
 }
 
-// const getComponentDefinition = (components, name) => components.find(c => c.name === name)
-
 /**
  * @param  {string} componentToAdd - name of the component to add to the application
  * @param  {string} presetName - name of the component preset if defined
@@ -344,9 +347,7 @@ const addChildComponent = store => (componentToAdd, presetName) => {
       return state
     }
 
-    const component = componentToAdd.startsWith("##")
+    const component = getComponentDefinition(componentToAdd)
-      ? getBuiltin(componentToAdd)
-      : state.components[componentToAdd]
 
     const presetProps = presetName ? component.presets[presetName] : {}
 
@@ -398,14 +399,18 @@ const addTemplatedComponent = store => props => {
   })
 }
 
+const _selectComponent = (state, component) => {
+  const componentDef = component._component.startsWith("##")
+    ? component
+    : state.components[component._component]
+  state.currentComponentInfo = makePropsSafe(componentDef, component)
+  state.currentView = "component"
+  return state
+}
+
 const selectComponent = store => component => {
   store.update(state => {
-    const componentDef = component._component.startsWith("##")
+    return _selectComponent(state, component)
-      ? component
-      : state.components[component._component]
-    state.currentComponentInfo = makePropsSafe(componentDef, component)
-    state.currentView = "component"
-    return state
   })
 }
 
@@ -534,7 +539,6 @@ const copyComponent = store => component => {
       p._id = uuid()
     })
     parent._children = [...parent._children, copiedComponent]
-    s.curren
     _saveCurrentPreviewItem(s)
     s.currentComponentInfo = copiedComponent
     return s
@@ -572,10 +576,58 @@ const getPathToComponent = store => component => {
   return path
 }
 
+const generateNewIdsForComponent = component =>
+  walkProps(component, p => {
+    p._id = uuid()
+  })
+
+const storeComponentForCopy = store => (component, cut = false) => {
+  store.update(s => {
+    const copiedComponent = cloneDeep(component)
+    s.componentToPaste = copiedComponent
+    if (cut) {
+      const parent = getParent(s.currentPreviewItem.props, component._id)
+      parent._children = parent._children.filter(c => c._id !== component._id)
+      _selectComponent(s, parent)
+    }
+
+    return s
+  })
+}
+
+const pasteComponent = store => (targetComponent, mode) => {
+  store.update(s => {
+    if (!s.componentToPaste) return s
+
+    const componentToPaste = cloneDeep(s.componentToPaste)
+    generateNewIdsForComponent(componentToPaste)
+    delete componentToPaste._cutId
+
+    if (mode === "inside") {
+      targetComponent._children.push(componentToPaste)
+      return s
+    }
+
+    const parent = getParent(s.currentPreviewItem.props, targetComponent)
+
+    const targetIndex = parent._children.indexOf(targetComponent)
+    const index = mode === "above" ? targetIndex : targetIndex + 1
+    parent._children.splice(index, 0, cloneDeep(componentToPaste))
+
+    _saveCurrentPreviewItem(s)
+    _selectComponent(s, componentToPaste)
+
+    return s
+  })
+}
+
 const getParent = (rootProps, child) => {
   let parent
   walkProps(rootProps, (p, breakWalk) => {
-    if (p._children && p._children.includes(child)) {
+    if (
+      p._children &&
+      (p._children.includes(child) || p._children.some(c => c._id === child))
+    ) {
       parent = p
       breakWalk()
     }

packages/builder/src/components/common/Icons/More.svelte

@@ -0,0 +1,8 @@
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  viewBox="0 0 24 24" 
+  width="24" 
+  height="24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path d="M4.5 10.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S6 12.825 6 12s-.675-1.5-1.5-1.5zm15 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5S21 12.825 21 12s-.675-1.5-1.5-1.5zm-7.5 0c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5z"/>
+</svg>

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

@@ -31,3 +31,4 @@ export { default as EmailIcon } from "./Email.svelte"
 export { default as TwitterIcon } from "./Twitter.svelte"
 export { default as InfoIcon } from "./Info.svelte"
 export { default as CloseIcon } from "./Close.svelte"
+export { default as MoreIcon } from "./More.svelte"

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

@@ -0,0 +1,116 @@
+<script>
+import { MoreIcon } from "components/common/Icons"
+import { store } from "builderStore"
+import { getComponentDefinition } from "builderStore/store"
+import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+import { last } from "lodash/fp"
+import UIkit from "uikit"
+
+export let component
+
+let confirmDeleteDialog
+let dropdownEl
+
+$: dropdown = UIkit.dropdown(dropdownEl, { mode: "click", offset: 0, pos: "bottom-right" });
+$: noChildrenAllowed = !component || getComponentDefinition($store, component._component).children === false
+$: noPaste = !$store.componentToPaste || $store.componentToPaste._id === component._id
+
+const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
+const showDropdown = () => {
+  dropdown.show()
+}
+
+/*
+{#if index > 0}
+            <button
+              class:solo={index === components.length - 1}
+              on:click|stopPropagation={() => onMoveUpComponent(component)}>
+              <ChevronUpIcon />
+            </button>
+          {/if}
+          {#if index < components.length - 1}
+            <button
+              class:solo={index === 0}
+              on:click|stopPropagation={moveDownComponent(component)}>
+              <ChevronDownIcon />
+            </button>
+          {/if}
+*/
+
+</script>
+
+<div class="root" on:click|stopPropagation={()  => {}}>
+  <button>
+    <MoreIcon />
+  </button>
+  <ul class="menu" bind:this={dropdownEl} on:mouseout={() => dropdown.hide()} on:click={() => dropdown.hide()}>
+    <li on:click={() => confirmDeleteDialog.show()}>Delete</li>
+    <li on:click={() => store.moveUpComponent(component)}>Move up</li>
+    <li on:click={() => store.moveDownComponent(component)}>Move down</li>
+    <li on:click={() => store.copyComponent(component)}>Duplicate</li>
+    <li on:click={() => store.storeComponentForCopy(component, true)}>Cut</li>
+    <li on:click={() => store.storeComponentForCopy(component)}>Copy</li>
+    <hr />
+    <li class:disabled={noPaste} on:click={() => store.pasteComponent(component, "above")}>Paste above</li>
+    <li class:disabled={noPaste} on:click={() => store.pasteComponent(component, "below")}>Paste below</li>
+    <li class:disabled={noPaste || noChildrenAllowed} on:click={() => store.pasteComponent(component, "inside")}>Paste inside</li>    
+  </ul>
+</div>
+
+
+
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Delete"
+  body={`Are you sure you wish to delete this '${lastPartOfName(component)}' component?`}
+  okText="Delete Component"
+  onOk={() => store.deleteComponent(component)} />
+
+<style>
+
+.root {
+  overflow: hidden;
+  z-index:9;
+}
+
+.root button {
+  border-style: none;
+  border-radius: 2px;
+  padding: 5px;
+  background: var(--grey);
+  cursor: pointer;
+}
+
+.menu {
+  z-index: 100000;
+  overflow: visible;
+  padding: 10px 0
+}
+
+.menu li {
+  border-style: none;
+  background-color: transparent;
+  list-style-type: none;
+  padding: 4px 5px 4px 15px;
+  margin: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+
+.menu li:not(.disabled) {
+  cursor: pointer;
+  color: var(--ink);
+}
+
+.menu li:not(.disabled):hover {
+  color: var(--button-text);
+  background-color: var(--grey-light); 
+}
+
+.disabled {
+  color: var(--grey-dark);
+  cursor: default;
+}
+
+</style>

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

@@ -3,6 +3,7 @@
   import { store } from "builderStore"
   import { last } from "lodash/fp"
   import { pipe } from "components/common/core"
+  import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
   import {
     XCircleIcon,
     ChevronUpIcon,
@@ -51,30 +52,9 @@
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 53}px">
         <div>{get_capitalised_name(component._component)}</div>
-        <div class="reorder-buttons">
+        <div class="actions">
-          {#if index > 0}
+          <ComponentDropdownMenu component={component}/>
-            <button
-              class:solo={index === components.length - 1}
-              on:click|stopPropagation={() => onMoveUpComponent(component)}>
-              <ChevronUpIcon />
-            </button>
-          {/if}
-          {#if index < components.length - 1}
-            <button
-              class:solo={index === 0}
-              on:click|stopPropagation={moveDownComponent(component)}>
-              <ChevronDownIcon />
-            </button>
-          {/if}
         </div>
-        <button
-          class="copy"
-          on:click|stopPropagation={() => onCopyComponent(component)}>
-          <CopyIcon />
-        </button>
-        <button on:click|stopPropagation={() => onDeleteComponent(component)}>
-          <XCircleIcon />
-        </button>
       </div>
 
       {#if component._children}
@@ -111,7 +91,7 @@
     font-size: 13px;
   }
 
-  .item button {
+  .actions {
     display: none;
     height: 20px;
     width: 28px;
@@ -120,37 +100,15 @@
     border-style: none;
     background: rgba(0, 0, 0, 0);
     cursor: pointer;
-  }
+    position: relative;
-
-  .item button.copy {
-    width: 26px;
   }
 
   .item:hover {
     background: #fafafa;
     cursor: pointer;
   }
-  .item:hover button {
+  .item:hover .actions {
     display: block;
   }
 
-  .item:hover button:hover {
-    color: var(--button-text);
-  }
-
-  .reorder-buttons {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
-  .reorder-buttons > button {
-    flex: 1 1 auto;
-    width: 30px;
-    height: 15px;
-  }
-
-  .reorder-buttons > button.solo {
-    padding-top: 2px;
-  }
 </style>

packages/builder/src/pages/[application]/frontend/_layout.svelte

@@ -103,6 +103,7 @@
     overflow: scroll;
     display: flex;
     flex-direction: column;
+    z-index: 5;
   }
 
   .preview-pane {