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

Update column settings button to be a detail popover

This commit is contained in:
Andrew Kingston 2024-10-28 14:09:57 +00:00
parent 76ccdbaa12
commit 67c5cc4a45
No known key found for this signature in database
2 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/builder/src/components/backend/DataTable/buttons/grid/ColumnsSettingContent.svelte
View File

@ -210,6 +210,7 @@
anchor={relationshipPanelAnchor} anchor={relationshipPanelAnchor}
align="left" align="left"
> >
<div class="nested">
{#if relationshipPanelColumns.length} {#if relationshipPanelColumns.length}
<div class="relationship-header"> <div class="relationship-header">
{relationshipFieldName} columns {relationshipFieldName} columns
@ -220,6 +221,7 @@
permissions={[FieldPermissions.READONLY, FieldPermissions.HIDDEN]} permissions={[FieldPermissions.READONLY, FieldPermissions.HIDDEN]}
fromRelationshipField={relationshipField} fromRelationshipField={relationshipField}
/> />
</div>
</Popover> </Popover>
{/if} {/if}
@ -230,11 +232,13 @@
} }
.content { .content {
padding: 12px 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
} }
.nested {
padding: 12px;
}
.columns { .columns {
display: grid; display: grid;
align-items: center; align-items: center;
@ -262,6 +266,6 @@
} }
.relationship-header { .relationship-header {
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-600);
padding: 12px 12px 0 12px; margin-bottom: 12px;
} }
</style> </style>

15
packages/builder/src/components/backend/DataTable/buttons/grid/GridColumnsSettingButton.svelte
View File

@ -12,11 +12,11 @@
import ColumnsSettingContent from "./ColumnsSettingContent.svelte" import ColumnsSettingContent from "./ColumnsSettingContent.svelte"
import { isEnabled } from "helpers/featureFlags" import { isEnabled } from "helpers/featureFlags"
import { FeatureFlag } from "@budibase/types" import { FeatureFlag } from "@budibase/types"
import DetailPopover from "components/common/DetailPopover.svelte"
const { tableColumns, datasource } = getContext("grid") const { tableColumns, datasource } = getContext("grid")
let open = false let popover
let anchor
$: anyRestricted = $tableColumns.filter( $: anyRestricted = $tableColumns.filter(
col => !col.visible || col.readonly col => !col.visible || col.readonly
@ -32,24 +32,23 @@
: [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN] : [FieldPermissions.WRITABLE, FieldPermissions.HIDDEN]
</script> </script>
<div bind:this={anchor}> <DetailPopover bind:this={popover} title="Column settings">
<svelte:fragment slot="anchor" let:open>
<ActionButton <ActionButton
icon="ColumnSettings" icon="ColumnSettings"
quiet quiet
size="M" size="M"
on:click={() => (open = !open)} on:click={popover?.open}
selected={open || anyRestricted} selected={open || anyRestricted}
disabled={!$tableColumns.length} disabled={!$tableColumns.length}
accentColor="#674D00" accentColor="#674D00"
> >
{text} {text}
</ActionButton> </ActionButton>
</div> </svelte:fragment>
<Popover bind:open {anchor} align="left">
<ColumnsSettingContent <ColumnsSettingContent
columns={$tableColumns} columns={$tableColumns}
canSetRelationshipSchemas={isEnabled(FeatureFlag.ENRICHED_RELATIONSHIPS)} canSetRelationshipSchemas={isEnabled(FeatureFlag.ENRICHED_RELATIONSHIPS)}
{permissions} {permissions}
/> />
</Popover> </DetailPopover>