merge main branch
This commit is contained in:
commit
aaf9b9e305
|
@ -29,7 +29,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="contents" use:getAnchor on:click={openMenu}>
|
<div class="contents" use:getAnchor on:click={openMenu}>
|
||||||
<slot name="button" />
|
<slot name="control" />
|
||||||
</div>
|
</div>
|
||||||
<Popover bind:this={dropdown} {anchor} align="left">
|
<Popover bind:this={dropdown} {anchor} align="left">
|
||||||
<Menu>
|
<Menu>
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="button" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon s hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}
|
<MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}
|
||||||
|
|
|
@ -21,7 +21,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="button" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon s hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
|
|
|
@ -14,12 +14,10 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="button" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon s hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
>Delete</MenuItem
|
|
||||||
>
|
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
|
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
|
|
|
@ -61,14 +61,11 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="button" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon s hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem
|
<MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
|
||||||
>
|
<MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
|
||||||
<MenuItem icon="Delete" on:click={showDeleteModal}
|
|
||||||
>Delete</MenuItem
|
|
||||||
>
|
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
|
|
||||||
<Modal bind:this={editorModal}>
|
<Modal bind:this={editorModal}>
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
<script>
|
<script>
|
||||||
import { ActionMenu, ActionGroup, ActionButton, MenuItem } from "@budibase/bbui"
|
import {
|
||||||
|
ActionMenu,
|
||||||
|
ActionGroup,
|
||||||
|
ActionButton,
|
||||||
|
MenuItem,
|
||||||
|
} from "@budibase/bbui"
|
||||||
import { store, currentAssetName } from "builderStore"
|
import { store, currentAssetName } from "builderStore"
|
||||||
import structure from "./componentStructure.json"
|
import structure from "./componentStructure.json"
|
||||||
|
|
||||||
$: enrichedStructure = enrichStructure(structure, $store.components)
|
$: enrichedStructure = enrichStructure(structure, $store.components)
|
||||||
|
|
||||||
let selectedIndex
|
|
||||||
let anchors = []
|
|
||||||
let popover
|
|
||||||
$: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
|
|
||||||
|
|
||||||
const enrichStructure = (structure, definitions) => {
|
const enrichStructure = (structure, definitions) => {
|
||||||
let enrichedStructure = []
|
let enrichedStructure = []
|
||||||
structure.forEach((item) => {
|
structure.forEach((item) => {
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
return enrichedStructure
|
return enrichedStructure
|
||||||
}
|
}
|
||||||
|
|
||||||
const onItemChosen = async (item, idx, open) => {
|
const onItemChosen = async (item, idx) => {
|
||||||
if (item.isCategory) {
|
if (item.isCategory) {
|
||||||
// Select and open this category
|
// Select and open this category
|
||||||
selectedIndex = idx
|
selectedIndex = idx
|
||||||
|
@ -46,7 +46,14 @@
|
||||||
<ActionGroup>
|
<ActionGroup>
|
||||||
{#each enrichedStructure as item, idx}
|
{#each enrichedStructure as item, idx}
|
||||||
<ActionMenu disabled={!item.isCategory}>
|
<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}
|
{item.name}
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
{#each item.children || [] as item}
|
{#each item.children || [] as item}
|
||||||
|
@ -54,7 +61,8 @@
|
||||||
<MenuItem
|
<MenuItem
|
||||||
dataCy={`component-${item.name}`}
|
dataCy={`component-${item.name}`}
|
||||||
icon={item.icon}
|
icon={item.icon}
|
||||||
on:click={() => onItemChosen(item)}>
|
on:click={() => onItemChosen(item)}
|
||||||
|
>
|
||||||
{item.name}
|
{item.name}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -62,37 +70,3 @@
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
{/each}
|
{/each}
|
||||||
</ActionGroup>
|
</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>
|
</script>
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="button" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon s hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
>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}
|
||||||
<MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem>
|
>Move down</MenuItem
|
||||||
<MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem>
|
>
|
||||||
<MenuItem
|
<MenuItem noClose icon="Duplicate" on:click={duplicateComponent}
|
||||||
icon="Cut"
|
>Duplicate</MenuItem
|
||||||
on:click={() => storeComponentForCopy(true)}>Cut</MenuItem
|
>
|
||||||
|
<MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}
|
||||||
|
>Cut</MenuItem
|
||||||
>
|
>
|
||||||
<MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}
|
<MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}
|
||||||
>Copy</MenuItem
|
>Copy</MenuItem
|
||||||
|
|
|
@ -40,15 +40,11 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="button" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon s hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Edit" on:click={editLayoutNameModal.show}
|
<MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
|
||||||
>Edit</MenuItem
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
>
|
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
|
|
||||||
>Delete</MenuItem
|
|
||||||
>
|
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
|
|
||||||
<ConfirmDialog
|
<ConfirmDialog
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="button" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon s hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
|
|
|
@ -70,7 +70,7 @@
|
||||||
bindings={bindableProperties}
|
bindings={bindableProperties}
|
||||||
on:change={event => updateFieldValue(idx, event.detail)} />
|
on:change={event => updateFieldValue(idx, event.detail)} />
|
||||||
<ActionButton
|
<ActionButton
|
||||||
s
|
size="S"
|
||||||
quiet
|
quiet
|
||||||
icon="Delete"
|
icon="Delete"
|
||||||
on:click={() => removeField(field[0])} />
|
on:click={() => removeField(field[0])} />
|
||||||
|
|
Loading…
Reference in New Issue