CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 20:41:03 +12:00
Code Issues Projects Releases Wiki Activity

rework ActionMenu and add noClose prop to MenuItem

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-27 11:48:47 +02:00
parent e6ce9aaa2f
commit 66081ffa3d
10 changed files with 56 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/bbui/src/ActionMenu/ActionMenu.svelte
View file

@ -1,8 +1,9 @@
<script> <script>
import { setContext } from "svelte"
import Popover from "../Popover/Popover.svelte" import Popover from "../Popover/Popover.svelte"
import Menu from "../Menu/Menu.svelte" import Menu from "../Menu/Menu.svelte"
export let supressOpen = false export let disabled = false
let anchor let anchor
let dropdown let dropdown
@ -20,18 +21,19 @@
dropdown.show() dropdown.show()
} }
const closeOnClickWrapper = (cb) => { const openMenu = () => {
dropdown.hide() if (!disabled) show()
cb()
} }
setContext("actionMenu", { show, hide })
</script> </script>
<div class="contents" use:getAnchor> <div class="contents" use:getAnchor on:click={openMenu}>
<slot name="button" /> <slot name="button" />
</div> </div>
<Popover bind:this={dropdown} {anchor} align="left"> <Popover bind:this={dropdown} {anchor} align="left">
<Menu> <Menu>
<slot open={show} closeOnClick={closeOnClickWrapper} /> <slot />
</Menu> </Menu>
</Popover> </Popover>

15
packages/bbui/src/Menu/Item.svelte
View file

@ -1,12 +1,25 @@
<script> <script>
import { createEventDispatcher, getContext } from "svelte"
const dispatch = createEventDispatcher()
const actionMenu = getContext("actionMenu")
export let dataCy export let dataCy
export let icon = undefined export let icon = undefined
export let disabled = undefined export let disabled = undefined
export let noClose = false
const onClick = () => {
if (actionMenu && !noClose) {
actionMenu.hide()
}
dispatch("click")
}
</script> </script>
<li <li
data-cy={dataCy} data-cy={dataCy}
on:click|preventDefault on:click|preventDefault={onClick}
class="spectrum-Menu-item" class="spectrum-Menu-item"
class:is-disabled={disabled} class:is-disabled={disabled}
role="menuitem" role="menuitem"

6
packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
View file

@ -20,11 +20,11 @@
} }
</script> </script>
<ActionMenu let:open let:closeOnClick> <ActionMenu>
<div slot="button" class="icon" on:click={open}> <div slot="button" class="icon">
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)} <MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}
>Delete</MenuItem >Delete</MenuItem
> >
</ActionMenu> </ActionMenu>

6
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
View file

@ -20,11 +20,11 @@
} }
</script> </script>
<ActionMenu let:open let:closeOnClick > <ActionMenu>
<div slot="button" class="icon" on:click={open}> <div slot="button" class="icon">
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem> <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu> </ActionMenu>
<ConfirmDialog <ConfirmDialog

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

@ -13,11 +13,11 @@
} }
</script> </script>
<ActionMenu let:open let:closeOnClick> <ActionMenu>
<div slot="button" class="icon" on:click={open}> <div slot="button" class="icon">
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)} <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
>Delete</MenuItem >Delete</MenuItem
> >
</ActionMenu> </ActionMenu>

8
packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
View file

@ -60,13 +60,13 @@
} }
</script> </script>
<ActionMenu let:open let:closeOnClick> <ActionMenu>
<div slot="button" class="icon" on:click={open}> <div slot="button" class="icon">
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<MenuItem icon="Edit" on:click={closeOnClick(editorModal.show)}>Edit</MenuItem <MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem
> >
<MenuItem icon="Delete" on:click={closeOnClick(showDeleteModal)} <MenuItem icon="Delete" on:click={showDeleteModal}
>Delete</MenuItem >Delete</MenuItem
> >
</ActionMenu> </ActionMenu>

10
packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
import { ActionMenu, ActionGroup, ActionButton, MenuItem, Icon } from "@budibase/bbui" import { ActionMenu, ActionGroup, ActionButton, MenuItem } from "@budibase/bbui"
import { store, currentAssetName } from "builderStore" import { store, currentAssetName } from "builderStore"
import { iterateeAry } from "lodash/fp/_mapping"
import structure from "./componentStructure.json" import structure from "./componentStructure.json"
$: enrichedStructure = enrichStructure(structure, $store.components) $: enrichedStructure = enrichStructure(structure, $store.components)
@ -37,7 +36,6 @@ import { iterateeAry } from "lodash/fp/_mapping"
if (item.isCategory) { if (item.isCategory) {
// Select and open this category // Select and open this category
selectedIndex = idx selectedIndex = idx
open()
} else { } else {
// Add this component // Add this component
await store.actions.components.create(item.component) await store.actions.components.create(item.component)
@ -47,8 +45,8 @@ import { iterateeAry } from "lodash/fp/_mapping"
<ActionGroup> <ActionGroup>
{#each enrichedStructure as item, idx} {#each enrichedStructure as item, idx}
<ActionMenu supressOpen={item.isCategory} let:open let:closeOnClick> <ActionMenu disabled={!item.isCategory}>
<ActionButton icon={item.icon} xs primary quiet slot="button" on:click={() => onItemChosen(item, idx, open)}> <ActionButton icon={item.icon} 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}
@ -56,7 +54,7 @@ import { iterateeAry } from "lodash/fp/_mapping"
<MenuItem <MenuItem
dataCy={`component-${item.name}`} dataCy={`component-${item.name}`}
icon={item.icon} icon={item.icon}
on:click={closeOnClick(onItemChosen(item))}> on:click={() => onItemChosen(item)}>
{item.name} {item.name}
</MenuItem> </MenuItem>
{/if} {/if}

20
packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
View file

@ -66,36 +66,36 @@
} }
</script> </script>
<ActionMenu let:closeOnClick let:open> <ActionMenu>
<div slot="button" class="icon" on:click={open}> <div slot="button" class="icon">
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)} <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
>Delete</MenuItem >Delete</MenuItem
> >
<MenuItem icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem> <MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem>
<MenuItem icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem> <MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem>
<MenuItem icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem> <MenuItem noClose icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem>
<MenuItem <MenuItem
icon="Cut" icon="Cut"
on:click={closeOnClick(() => storeComponentForCopy(true))}>Cut</MenuItem on:click={() => storeComponentForCopy(true)}>Cut</MenuItem
> >
<MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)} <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}
>Copy</MenuItem >Copy</MenuItem
> >
<MenuItem <MenuItem
icon="LayersBringToFront" icon="LayersBringToFront"
on:click={closeOnClick(() => pasteComponent("above"))} on:click={() => pasteComponent("above")}
disabled={noPaste}>Paste above</MenuItem disabled={noPaste}>Paste above</MenuItem
> >
<MenuItem <MenuItem
icon="LayersSendToBack" icon="LayersSendToBack"
on:click={closeOnClick(() => pasteComponent("below"))} on:click={() => pasteComponent("below")}
disabled={noPaste}>Paste below</MenuItem disabled={noPaste}>Paste below</MenuItem
> >
<MenuItem <MenuItem
icon="ShowOneLayer" icon="ShowOneLayer"
on:click={closeOnClick(() => pasteComponent("inside"))} on:click={() => pasteComponent("inside")}
disabled={noPaste || noChildrenAllowed}>Paste inside</MenuItem disabled={noPaste || noChildrenAllowed}>Paste inside</MenuItem
> >
</ActionMenu> </ActionMenu>

8
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
View file

@ -39,14 +39,14 @@
} }
</script> </script>
<ActionMenu let:open let:closeOnClick> <ActionMenu>
<div slot="button" class="icon" on:click={open}> <div slot="button" class="icon">
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<MenuItem icon="Edit" on:click={closeOnClick(editLayoutNameModal.show)} <MenuItem icon="Edit" on:click={editLayoutNameModal.show}
>Edit</MenuItem >Edit</MenuItem
> >
<MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)} <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}
>Delete</MenuItem >Delete</MenuItem
> >
</ActionMenu> </ActionMenu>

6
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
View file

@ -23,11 +23,11 @@
} }
</script> </script>
<ActionMenu let:open let:closeOnClick> <ActionMenu>
<div slot="button" class="icon" on:click={open}> <div slot="button" class="icon">
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem> <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu> </ActionMenu>
<ConfirmDialog <ConfirmDialog