merge main branch
This commit is contained in:
commit
aaf9b9e305
|
@ -29,7 +29,7 @@
|
|||
</script>
|
||||
|
||||
<div class="contents" use:getAnchor on:click={openMenu}>
|
||||
<slot name="button" />
|
||||
<slot name="control" />
|
||||
</div>
|
||||
<Popover bind:this={dropdown} {anchor} align="left">
|
||||
<Menu>
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
</script>
|
||||
|
||||
<ActionMenu>
|
||||
<div slot="button" class="icon">
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
</script>
|
||||
|
||||
<ActionMenu>
|
||||
<div slot="button" class="icon">
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
|
|
|
@ -14,12 +14,10 @@
|
|||
</script>
|
||||
|
||||
<ActionMenu>
|
||||
<div slot="button" class="icon">
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
|
||||
>Delete</MenuItem
|
||||
>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
</ActionMenu>
|
||||
|
||||
<ConfirmDialog
|
||||
|
|
|
@ -61,14 +61,11 @@
|
|||
</script>
|
||||
|
||||
<ActionMenu>
|
||||
<div slot="button" class="icon">
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem
|
||||
>
|
||||
<MenuItem icon="Delete" on:click={showDeleteModal}
|
||||
>Delete</MenuItem
|
||||
>
|
||||
<MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
|
||||
<MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
|
||||
</ActionMenu>
|
||||
|
||||
<Modal bind:this={editorModal}>
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
<script>
|
||||
import { ActionMenu, ActionGroup, ActionButton, MenuItem } from "@budibase/bbui"
|
||||
import {
|
||||
ActionMenu,
|
||||
ActionGroup,
|
||||
ActionButton,
|
||||
MenuItem,
|
||||
} from "@budibase/bbui"
|
||||
import { store, currentAssetName } from "builderStore"
|
||||
import structure from "./componentStructure.json"
|
||||
|
||||
$: enrichedStructure = enrichStructure(structure, $store.components)
|
||||
|
||||
let selectedIndex
|
||||
let anchors = []
|
||||
let popover
|
||||
$: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
|
||||
|
||||
const enrichStructure = (structure, definitions) => {
|
||||
let enrichedStructure = []
|
||||
structure.forEach((item) => {
|
||||
|
@ -32,7 +32,7 @@
|
|||
return enrichedStructure
|
||||
}
|
||||
|
||||
const onItemChosen = async (item, idx, open) => {
|
||||
const onItemChosen = async (item, idx) => {
|
||||
if (item.isCategory) {
|
||||
// Select and open this category
|
||||
selectedIndex = idx
|
||||
|
@ -46,7 +46,14 @@
|
|||
<ActionGroup>
|
||||
{#each enrichedStructure as item, idx}
|
||||
<ActionMenu disabled={!item.isCategory}>
|
||||
<ActionButton icon={item.icon} size="XS" primary quiet slot="button" on:click={() => onItemChosen(item, idx)}>
|
||||
<ActionButton
|
||||
icon={item.icon}
|
||||
size="XS"
|
||||
primary
|
||||
quiet
|
||||
slot="button"
|
||||
on:click={() => onItemChosen(item, idx)}
|
||||
>
|
||||
{item.name}
|
||||
</ActionButton>
|
||||
{#each item.children || [] as item}
|
||||
|
@ -54,7 +61,8 @@
|
|||
<MenuItem
|
||||
dataCy={`component-${item.name}`}
|
||||
icon={item.icon}
|
||||
on:click={() => onItemChosen(item)}>
|
||||
on:click={() => onItemChosen(item)}
|
||||
>
|
||||
{item.name}
|
||||
</MenuItem>
|
||||
{/if}
|
||||
|
@ -62,37 +70,3 @@
|
|||
</ActionMenu>
|
||||
{/each}
|
||||
</ActionGroup>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-l);
|
||||
}
|
||||
|
||||
.category {
|
||||
color: var(--grey-7);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
gap: var(--spacing-s);
|
||||
font-size: var(--spectrum-global-dimension-font-size-75);
|
||||
}
|
||||
.category span {
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
}
|
||||
.category.active,
|
||||
.category:hover {
|
||||
color: var(--ink);
|
||||
}
|
||||
.category i:not(:last-child) {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -67,18 +67,21 @@
|
|||
</script>
|
||||
|
||||
<ActionMenu>
|
||||
<div slot="button" class="icon">
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
|
||||
>Delete</MenuItem
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
<MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}
|
||||
>Move up</MenuItem
|
||||
>
|
||||
<MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem>
|
||||
<MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem>
|
||||
<MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem>
|
||||
<MenuItem
|
||||
icon="Cut"
|
||||
on:click={() => storeComponentForCopy(true)}>Cut</MenuItem
|
||||
<MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}
|
||||
>Move down</MenuItem
|
||||
>
|
||||
<MenuItem noClose icon="Duplicate" on:click={duplicateComponent}
|
||||
>Duplicate</MenuItem
|
||||
>
|
||||
<MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}
|
||||
>Cut</MenuItem
|
||||
>
|
||||
<MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}
|
||||
>Copy</MenuItem
|
||||
|
|
|
@ -40,15 +40,11 @@
|
|||
</script>
|
||||
|
||||
<ActionMenu>
|
||||
<div slot="button" class="icon">
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Edit" on:click={editLayoutNameModal.show}
|
||||
>Edit</MenuItem
|
||||
>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
|
||||
>Delete</MenuItem
|
||||
>
|
||||
<MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
</ActionMenu>
|
||||
|
||||
<ConfirmDialog
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
</script>
|
||||
|
||||
<ActionMenu>
|
||||
<div slot="button" class="icon">
|
||||
<div slot="control" class="icon">
|
||||
<Icon s hoverable name="MoreSmallList" />
|
||||
</div>
|
||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||
|
|
|
@ -70,7 +70,7 @@
|
|||
bindings={bindableProperties}
|
||||
on:change={event => updateFieldValue(idx, event.detail)} />
|
||||
<ActionButton
|
||||
s
|
||||
size="S"
|
||||
quiet
|
||||
icon="Delete"
|
||||
on:click={() => removeField(field[0])} />
|
||||
|
|
Loading…
Reference in New Issue