More ActionMenu conversion

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-26 14:21:30 +02:00
parent 2b394eab25
commit f63861771e
4 changed files with 15 additions and 29 deletions

View File

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

View File

@ -1,8 +1,7 @@
<script> <script>
import { notifications } from "@budibase/bbui" import { ActionMenu, MenuItem, Icon, Popover, notifications } from "@budibase/bbui"
import { ActionMenu, MenuItem, Icon, Popover } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" import { queries } from "stores/backend"
export let query export let query
@ -25,11 +24,11 @@
} }
</script> </script>
<ActionMenu bind:this={dropdown}> <ActionMenu bind:this={dropdown} let:closeOnClick>
<div slot="button" class="icon" on:click={dropdown.show}> <div slot="button" class="icon" on:click={dropdown.show}>
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<MenuItem icon="Delete" on:click={showModal}>Delete</MenuItem> <MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem>
</ActionMenu> </ActionMenu>
<ConfirmDialog <ConfirmDialog

View File

@ -2,8 +2,7 @@
import { store } from "builderStore" import { store } from "builderStore"
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { Icon, Popover, Modal, ModalContent, Input } from "@budibase/bbui" import { ActionMenu, MenuItem, Icon, Modal, ModalContent, Input } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
export let layout export let layout
@ -35,25 +34,14 @@
} }
</script> </script>
<div bind:this={anchor}> <ActionMenu bind:this={dropdown} let:closeOnClick>
<div class="icon" on:click={() => dropdown.show()}> <div slot="button" class="icon" on:click={dropdown.show}>
<Icon name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<DropdownContainer>
<DropdownItem
icon="ri-pencil-line"
title="Edit"
on:click={() => editLayoutNameModal.show()}
/>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={() => confirmDeleteDialog.show()}
/>
</DropdownContainer>
</Popover>
</div> </div>
<MenuItem icon="Edit" on:click={closeOnClick(editLayoutNameModal.show)}>Edit</MenuItem>
<MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem>
</ActionMenu>
<ConfirmDialog <ConfirmDialog
bind:this={confirmDeleteDialog} bind:this={confirmDeleteDialog}
title="Confirm Deletion" title="Confirm Deletion"

View File

@ -3,8 +3,7 @@
import { store, allScreens } from "builderStore" import { store, allScreens } from "builderStore"
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { ActionMenu, MenuItem, Icon, Popover } from "@budibase/bbui" import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
export let screenId export let screenId