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

ActionMenu API improvements

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-26 14:42:45 +02:00
parent bc391d32a3
commit c655209f89
4 changed files with 55 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,22 +4,11 @@
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
import { ActionMenu, MenuItem, Icon, Popover } 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"
export let datasource export let datasource
let dropdown
let confirmDeleteDialog let confirmDeleteDialog
function hideEditor() {
dropdown?.hide()
}
function showModal() {
hideEditor()
confirmDeleteDialog.show()
}
async function deleteDatasource() { async function deleteDatasource() {
const wasSelectedSource = $datasources.selected const wasSelectedSource = $datasources.selected
await datasources.delete(datasource) await datasources.delete(datasource)
@ -28,11 +17,10 @@
if (wasSelectedSource === datasource._id) { if (wasSelectedSource === datasource._id) {
$goto("./datasource") $goto("./datasource")
} }
hideEditor()
} }
</script> </script>
<ActionMenu bind:this={dropdown} let:open let:closeOnClick > <ActionMenu let:open let:closeOnClick >
<div slot="button" class="icon" on:click={open}> <div slot="button" class="icon" on:click={open}>
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>

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

@ -9,17 +9,13 @@
Icon, Icon,
Modal, Modal,
ModalContent, ModalContent,
Popover,
Button,
Input, Input,
} from "@budibase/bbui" } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
export let table export let table
let anchor
let editorModal let editorModal
let dropdown
let confirmDeleteDialog let confirmDeleteDialog
let error = "" let error = ""
let originalName = table.name let originalName = table.name
@ -64,20 +60,24 @@
} }
</script> </script>
<ActionMenu bind:this={dropdown} let:open let:closeOnClick> <ActionMenu let:open let:closeOnClick>
<div slot="button" class="icon" on:click={open}> <div slot="button" class="icon" on:click={open}>
<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={closeOnClick(editorModal.show)}>Edit</MenuItem
<MenuItem icon="Delete" on:click={closeOnClick(showDeleteModal)}>Delete</MenuItem> >
<MenuItem icon="Delete" on:click={closeOnClick(showDeleteModal)}
>Delete</MenuItem
>
</ActionMenu> </ActionMenu>
<Modal bind:this={editorModal}> <Modal bind:this={editorModal}>
<ModalContent <ModalContent
title='Edit Table' title="Edit Table"
confirmText='Save' confirmText="Save"
onConfirm={save} onConfirm={save}
disabled={table.name === originalName || error}> disabled={table.name === originalName || error}
>
<Input <Input
label="Table Name" label="Table Name"
thin thin

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

@ -3,23 +3,17 @@
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 { ActionMenu, MenuItem, MenuSection, Icon, Popover } from "@budibase/bbui" import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
export let component export let component
let confirmDeleteDialog let confirmDeleteDialog
let dropdown
let anchor let anchor
$: definition = store.actions.components.getDefinition(component?._component) $: definition = store.actions.components.getDefinition(component?._component)
$: noChildrenAllowed = !component || !definition?.hasChildren $: noChildrenAllowed = !component || !definition?.hasChildren
$: noPaste = !$store.componentToPaste $: noPaste = !$store.componentToPaste
const hideDropdown = () => {
dropdown.hide()
}
const moveUpComponent = () => { const moveUpComponent = () => {
const asset = get(currentAsset) const asset = get(currentAsset)
const parent = findComponentParent(asset.props, component._id) const parent = findComponentParent(asset.props, component._id)
@ -72,19 +66,38 @@
} }
</script> </script>
<ActionMenu bind:this={dropdown}> <ActionMenu let:closeOnClick let:open>
<div slot="button" class="icon" on:click={dropdown.show}> <div slot="button" class="icon" on:click={open}>
<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={closeOnClick(confirmDeleteDialog.show)}
>Delete</MenuItem
>
<MenuItem icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem> <MenuItem icon="ChevronUp" on:click={moveUpComponent}>Move up</MenuItem>
<MenuItem icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem> <MenuItem icon="ChevronDown" on:click={moveDownComponent}>Move down</MenuItem>
<MenuItem icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem> <MenuItem icon="Duplicate" on:click={duplicateComponent}>Duplicate</MenuItem>
<MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}>Cut</MenuItem> <MenuItem
<MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}>Copy</MenuItem> icon="Cut"
<MenuItem icon="LayersBringToFront" on:click={() => pasteComponent("above")} disabled={noPaste}>Paste above</MenuItem> on:click={closeOnClick(() => storeComponentForCopy(true))}>Cut</MenuItem
<MenuItem icon="LayersSendToBack" on:click={() => pasteComponent("below")} disabled={noPaste}>Paste below</MenuItem> >
<MenuItem icon="ShowOneLayer" on:click={() => pasteComponent("inside")} disabled={noPaste || noChildrenAllowed}>Paste inside</MenuItem> <MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}
>Copy</MenuItem
>
<MenuItem
icon="LayersBringToFront"
on:click={closeOnClick(() => pasteComponent("above"))}
disabled={noPaste}>Paste above</MenuItem
>
<MenuItem
icon="LayersSendToBack"
on:click={closeOnClick(() => pasteComponent("below"))}
disabled={noPaste}>Paste below</MenuItem
>
<MenuItem
icon="ShowOneLayer"
on:click={closeOnClick(() => pasteComponent("inside"))}
disabled={noPaste || noChildrenAllowed}>Paste inside</MenuItem
>
</ActionMenu> </ActionMenu>
<ConfirmDialog <ConfirmDialog
bind:this={confirmDeleteDialog} bind:this={confirmDeleteDialog}

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

@ -2,15 +2,20 @@
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 { ActionMenu, MenuItem, Icon, Modal, ModalContent, Input } from "@budibase/bbui" import {
ActionMenu,
MenuItem,
Icon,
Modal,
ModalContent,
Input,
} from "@budibase/bbui"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
export let layout export let layout
let confirmDeleteDialog let confirmDeleteDialog
let editLayoutNameModal let editLayoutNameModal
let dropdown
let anchor
let name = layout.name let name = layout.name
const deleteLayout = async () => { const deleteLayout = async () => {
@ -34,12 +39,16 @@
} }
</script> </script>
<ActionMenu bind:this={dropdown} let:closeOnClick> <ActionMenu let:open let:closeOnClick>
<div slot="button" class="icon" on:click={dropdown.show}> <div slot="button" class="icon" on:click={open}>
<Icon s hoverable name="MoreSmallList" /> <Icon s hoverable name="MoreSmallList" />
</div> </div>
<MenuItem icon="Edit" on:click={closeOnClick(editLayoutNameModal.show)}>Edit</MenuItem> <MenuItem icon="Edit" on:click={closeOnClick(editLayoutNameModal.show)}
<MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}>Delete</MenuItem> >Edit</MenuItem
>
<MenuItem icon="Delete" on:click={closeOnClick(confirmDeleteDialog.show)}
>Delete</MenuItem
>
</ActionMenu> </ActionMenu>
<ConfirmDialog <ConfirmDialog