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

converts component dropdown to action

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-26 12:29:45 +02:00
parent 0b0dd3cbea
commit 21ee564f5b
1 changed files with 15 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@
import { store, currentAsset } from "builderStore" import { store, currentAsset } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { findComponentParent } from "builderStore/storeUtils" import { findComponentParent } from "builderStore/storeUtils"
import { Icon, Popover } from "@budibase/bbui" import { ActionMenu, MenuItem, MenuSection, Icon, Popover } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
export let component export let component
@ -72,62 +72,20 @@
} }
</script> </script>
<div bind:this={anchor} on:click|stopPropagation> <ActionMenu bind:this={dropdown}>
<div class="icon" on:click={dropdown.show}><Icon hoverable name="MoreSmallList" /></div> <div slot="button" class="icon" on:click={dropdown.show}>
<Popover bind:this={dropdown} width="170px" {anchor} align="left"> <Icon s hoverable name="MoreSmallList" />
<DropdownContainer on:click={hideDropdown}> </div>
<DropdownItem <MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
icon="ri-delete-bin-line" <MenuItem icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem>
title="Delete" <MenuItem icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem>
on:click={() => confirmDeleteDialog.show()} <MenuItem icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem>
/> <MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>Cut</MenuItem>
<DropdownItem <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>Copy</MenuItem>
icon="ri-arrow-up-line" <MenuItem icon="LayersBringToFront" on:click={() => pasteComponent("above")} disabled={noPaste}>Paste above</MenuItem>
title="Move up" <MenuItem icon="LayersSendToBack" on:click={() => pasteComponent("below")} disabled={noPaste}>Paste below</MenuItem>
on:click={moveUpComponent} <MenuItem icon="ShowOneLayer" on:click={() => pasteComponent("inside")} disabled={noPaste || noChildrenAllowed}>Paste inside</MenuItem>
/> </ActionMenu>
<DropdownItem
icon="ri-arrow-down-line"
title="Move down"
on:click={moveDownComponent}
/>
<DropdownItem
icon="ri-repeat-one-line"
title="Duplicate"
on:click={duplicateComponent}
/>
<DropdownItem
icon="ri-scissors-cut-line"
title="Cut"
on:click={() => storeComponentForCopy(true)}
/>
<DropdownItem
icon="ri-file-copy-line"
title="Copy"
on:click={() => storeComponentForCopy(false)}
/>
<hr class="hr-style" />
<DropdownItem
icon="ri-insert-row-top"
title="Paste above"
disabled={noPaste}
on:click={() => pasteComponent("above")}
/>
<DropdownItem
icon="ri-insert-row-bottom"
title="Paste below"
disabled={noPaste}
on:click={() => pasteComponent("below")}
/>
<DropdownItem
icon="ri-insert-column-right"
title="Paste inside"
disabled={noPaste || noChildrenAllowed}
on:click={() => pasteComponent("inside")}
/>
</DropdownContainer>
</Popover>
</div>
<ConfirmDialog <ConfirmDialog
bind:this={confirmDeleteDialog} bind:this={confirmDeleteDialog}
title="Confirm Deletion" title="Confirm Deletion"