MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Changes ActionMenu button slot to be called control

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-27 15:34:17 +02:00
parent 0a036e5f20
commit 2e7e18a8b6
9 changed files with 41 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/ActionMenu/ActionMenu.svelte
View File

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

2
packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
View File

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

2
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
View File

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

6
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
View File

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

9
packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
View File

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

60
packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
View File

@ -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} xs primary quiet slot="button" on:click={() => onItemChosen(item, idx)}> <ActionButton
icon={item.icon}
xs
primary
quiet
slot="control"
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>

21
packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
View File

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

10
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
View File

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

2
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
View File

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