merge main branch

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-27 16:19:42 +02:00
commit aaf9b9e305
10 changed files with 42 additions and 74 deletions

View File

@ -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>

View File

@ -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}

View File

@ -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>

View File

@ -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

View File

@ -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}>

View File

@ -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>

View File

@ -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

View File

@ -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

View File

@ -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>

View File

@ -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])} />