{title}
@@ -22,11 +23,17 @@
align-items: center;
gap: var(--spacing-m);
padding: var(--spacing-xs) var(--spacing-l);
+ color: var(--ink);
+ }
+ .dropdown-item.disabled,
+ .dropdown-item.disabled .subtitle {
+ pointer-events: none;
+ color: var(--grey-5);
}
.dropdown-item.big {
padding: var(--spacing-s) var(--spacing-l);
}
- .dropdown-item:hover {
+ .dropdown-item:not(.disabled):hover {
background-color: var(--grey-2);
cursor: pointer;
}
@@ -45,7 +52,6 @@
.title {
font-weight: 500;
- color: var(--ink);
}
.subtitle {
@@ -55,6 +61,5 @@
i {
font-size: 16px;
- color: var(--ink);
}
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 59a8e4e1ed..7567bc5366 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -3,10 +3,10 @@
import { store } from "builderStore"
import { getComponentDefinition } from "builderStore/storeUtils"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
- import { last, cloneDeep } from "lodash/fp"
+ import { last } from "lodash/fp"
import { getParent, saveCurrentPreviewItem } from "builderStore/storeUtils"
- import { uuid } from "builderStore/uuid"
import { DropdownMenu } from "@budibase/bbui"
+ import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
export let component
@@ -18,27 +18,27 @@
!component || !getComponentDefinition($store, component._component).children
$: noPaste = !$store.componentToPaste
- const lastPartOfName = c => (c ? last(c._component.split("/")) : "")
+ const lastPartOfName = (c) => (c ? last(c._component.split("/")) : "")
const hideDropdown = () => {
dropdown.hide()
}
- const selectComponent = component => {
+ const selectComponent = (component) => {
store.selectComponent(component)
const path = store.getPathToComponent(component)
$goto(`./:page/:screen/${path}`)
}
const moveUpComponent = () => {
- store.update(s => {
+ store.update((s) => {
const parent = getParent(s.currentPreviewItem.props, component)
if (parent) {
const currentIndex = parent._children.indexOf(component)
if (currentIndex === 0) return s
- const newChildren = parent._children.filter(c => c !== component)
+ const newChildren = parent._children.filter((c) => c !== component)
newChildren.splice(currentIndex - 1, 0, component)
parent._children = newChildren
}
@@ -50,14 +50,14 @@
}
const moveDownComponent = () => {
- store.update(s => {
+ store.update((s) => {
const parent = getParent(s.currentPreviewItem.props, component)
if (parent) {
const currentIndex = parent._children.indexOf(component)
if (currentIndex === parent._children.length - 1) return s
- const newChildren = parent._children.filter(c => c !== component)
+ const newChildren = parent._children.filter((c) => c !== component)
newChildren.splice(currentIndex + 1, 0, component)
parent._children = newChildren
}
@@ -74,11 +74,11 @@
}
const deleteComponent = () => {
- store.update(state => {
+ store.update((state) => {
const parent = getParent(state.currentPreviewItem.props, component)
if (parent) {
- parent._children = parent._children.filter(c => c !== component)
+ parent._children = parent._children.filter((c) => c !== component)
selectComponent(parent)
}
@@ -92,7 +92,7 @@
store.storeComponentForCopy(component, cut)
}
- const pasteComponent = mode => {
+ const pasteComponent = (mode) => {
// lives in store - also used by drag drop
store.pasteComponent(component, mode)
}
@@ -100,63 +100,51 @@
{}}>
+
+ confirmDeleteDialog.show()} />
+
+
+
+ storeComponentForCopy(true)} />
+ storeComponentForCopy(false)} />
+
+ pasteComponent('above')} />
+ pasteComponent('below')} />
+ pasteComponent('inside')} />
+
+
-
+
+
-
-
- confirmDeleteDialog.show()}> - - Delete - -
- - - Move up - -
- - - Move down - -
- - - Duplicate - -
- storeComponentForCopy(true)}> - - Cut - -
- storeComponentForCopy(false)}> - - Copy - -
- pasteComponent('above')}> - - Paste above - -
- pasteComponent('below')}> - - Paste below - -
- pasteComponent('inside')}> - - Paste inside - -
-