CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-09 00:06:05 +12:00
Code Issues Projects Releases Wiki Activity

Update grid menu to use popover

Browse source
This commit is contained in:
Andrew Kingston 2024-04-24 20:50:07 +01:00
parent 957facb99c
commit 2e8560fd21
3 changed files with 78 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
View file

@ -5,7 +5,7 @@
import { debounce } from "../../../utils/utils" import { debounce } from "../../../utils/utils"
import GridPopover from "../overlays/GridPopover.svelte" import GridPopover from "../overlays/GridPopover.svelte"
const { API, dispatch, cache } = getContext("grid") const { API, cache } = getContext("grid")
export let value export let value
export let api export let api
@ -205,14 +205,6 @@
close() close()
} }
const showRelationship = async id => {
const relatedRow = await API.fetchRow({
tableId: schema.tableId,
rowId: id,
})
dispatch("edit-row", relatedRow)
}
const readable = value => { const readable = value => {
if (value == null) { if (value == null) {
return "" return ""
@ -282,6 +274,8 @@
</div> </div>
</div> </div>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
{#if isOpen} {#if isOpen}
<GridPopover open={isOpen} {anchor} {gridID} {invertX} on:close={close}> <GridPopover open={isOpen} {anchor} {gridID} {invertX} on:close={close}>
<div class="dropdown" on:wheel|stopPropagation> <div class="dropdown" on:wheel|stopPropagation>

2
packages/frontend-core/src/components/grid/overlays/GridPopover.svelte
View file

@ -36,7 +36,7 @@
<Popover <Popover
open open
{anchor} {anchor}
align={invertX ? "right" : "left"} align="left"
portalTarget="#{gridID} .grid-popover-container" portalTarget="#{gridID} .grid-popover-container"
offset={1} offset={1}
> >

140
packages/frontend-core/src/components/grid/overlays/MenuOverlay.svelte
View file

@ -1,7 +1,8 @@
<script> <script>
import { clickOutside, Menu, MenuItem, Helpers } from "@budibase/bbui" import { Menu, MenuItem, Helpers } from "@budibase/bbui"
import { getContext } from "svelte" import { getContext } from "svelte"
import { NewRowID } from "../lib/constants" import { NewRowID } from "../lib/constants"
import GridPopover from "./GridPopover.svelte"
const { const {
focusedRow, focusedRow,
@ -18,8 +19,11 @@
focusedRowId, focusedRowId,
notifications, notifications,
isDatasourcePlus, isDatasourcePlus,
gridID,
} = getContext("grid") } = getContext("grid")
let anchor
$: style = makeStyle($menu) $: style = makeStyle($menu)
$: isNewRow = $focusedRowId === NewRowID $: isNewRow = $focusedRowId === NewRowID
@ -48,75 +52,79 @@
} }
</script> </script>
<div bind:this={anchor} {style} class="menu-anchor" />
{#if $menu.visible} {#if $menu.visible}
<div class="menu" {style} use:clickOutside={() => menu.actions.close()}> {#key style}
<Menu> <GridPopover
<MenuItem {anchor}
icon="Copy" {gridID}
on:click={clipboard.actions.copy} on:close={menu.actions.close}
on:click={menu.actions.close} maxHeight={null}
> >
Copy <Menu>
</MenuItem> <MenuItem
<MenuItem icon="Copy"
icon="Paste" on:click={clipboard.actions.copy}
disabled={$copiedCell == null || $focusedCellAPI?.isReadonly()} on:click={menu.actions.close}
on:click={clipboard.actions.paste} >
on:click={menu.actions.close} Copy
> </MenuItem>
Paste <MenuItem
</MenuItem> icon="Paste"
<MenuItem disabled={$copiedCell == null || $focusedCellAPI?.isReadonly()}
icon="Maximize" on:click={clipboard.actions.paste}
disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows} on:click={menu.actions.close}
on:click={() => dispatch("edit-row", $focusedRow)} >
on:click={menu.actions.close} Paste
> </MenuItem>
Edit row in modal <MenuItem
</MenuItem> icon="Maximize"
<MenuItem disabled={isNewRow || !$config.canEditRows || !$config.canExpandRows}
icon="Copy" on:click={() => dispatch("edit-row", $focusedRow)}
disabled={isNewRow || !$focusedRow?._id || !$isDatasourcePlus} on:click={menu.actions.close}
on:click={() => copyToClipboard($focusedRow?._id)} >
on:click={menu.actions.close} Edit row in modal
> </MenuItem>
Copy row _id <MenuItem
</MenuItem> icon="Copy"
<MenuItem disabled={isNewRow || !$focusedRow?._id || !$isDatasourcePlus}
icon="Copy" on:click={() => copyToClipboard($focusedRow?._id)}
disabled={isNewRow || !$focusedRow?._rev} on:click={menu.actions.close}
on:click={() => copyToClipboard($focusedRow?._rev)} >
on:click={menu.actions.close} Copy row _id
> </MenuItem>
Copy row _rev <MenuItem
</MenuItem> icon="Copy"
<MenuItem disabled={isNewRow || !$focusedRow?._rev}
icon="Duplicate" on:click={() => copyToClipboard($focusedRow?._rev)}
disabled={isNewRow || !$config.canAddRows} on:click={menu.actions.close}
on:click={duplicate} >
> Copy row _rev
Duplicate row </MenuItem>
</MenuItem> <MenuItem
<MenuItem icon="Duplicate"
icon="Delete" disabled={isNewRow || !$config.canAddRows}
disabled={isNewRow || !$config.canDeleteRows} on:click={duplicate}
on:click={deleteRow} >
> Duplicate row
Delete row </MenuItem>
</MenuItem> <MenuItem
</Menu> icon="Delete"
</div> disabled={isNewRow || !$config.canDeleteRows}
on:click={deleteRow}
>
Delete row
</MenuItem>
</Menu>
</GridPopover>
{/key}
{/if} {/if}
<style> <style>
.menu { .menu-anchor {
opacity: 0;
pointer-events: none;
position: absolute; position: absolute;
background: var(--cell-background);
border: 1px solid var(--spectrum-global-color-gray-300);
width: 180px;
border-radius: 4px;
display: flex;
flex-direction: column;
box-shadow: 0 0 20px -4px rgba(0, 0, 0, 0.15);
} }
</style> </style>