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

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

@ -210,16 +210,18 @@
anchor={relationshipPanelAnchor} anchor={relationshipPanelAnchor}
align="left" align="left"
> >
{#if relationshipPanelColumns.length} <div class="nested">
<div class="relationship-header"> {#if relationshipPanelColumns.length}
{relationshipFieldName} columns <div class="relationship-header">
</div> {relationshipFieldName} columns
{/if} </div>
<svelte:self {/if}
columns={relationshipPanelColumns} <svelte:self
permissions={[FieldPermissions.READONLY, FieldPermissions.HIDDEN]} columns={relationshipPanelColumns}
fromRelationshipField={relationshipField} permissions={[FieldPermissions.READONLY, FieldPermissions.HIDDEN]}
/> 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>

35
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">
<ActionButton <svelte:fragment slot="anchor" let:open>
icon="ColumnSettings" <ActionButton
quiet icon="ColumnSettings"
size="M" quiet
on:click={() => (open = !open)} size="M"
selected={open || anyRestricted} on:click={popover?.open}
disabled={!$tableColumns.length} selected={open || anyRestricted}
accentColor="#674D00" disabled={!$tableColumns.length}
> accentColor="#674D00"
{text} >
</ActionButton> {text}
</div> </ActionButton>
</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>