CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-21 03:43:21 +12:00
Code Issues Projects Releases Wiki Activity

Update relationship popover styles and position

Browse source
This commit is contained in:
Andrew Kingston 2024-09-04 09:19:51 +01:00
parent ea7d9d722d
commit b067b8ad54
No known key found for this signature in database
2 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -29,6 +29,7 @@
let searching = false let searching = false
let container let container
let anchor let anchor
let relationshipAnchor
let relationshipFields let relationshipFields
$: fieldValue = parseValue(value) $: fieldValue = parseValue(value)
@ -57,6 +58,7 @@
}, {}) }, {})
$: showRelationshipFields = $: showRelationshipFields =
relationshipAnchor &&
relationshipFields && relationshipFields &&
Object.keys(relationshipFields).length && Object.keys(relationshipFields).length &&
focused && focused &&
@ -242,11 +244,13 @@
return value return value
} }
const displayRelationshipFields = relationship => { const displayRelationshipFields = (e, relationship) => {
relationshipAnchor = e.target
relationshipFields = relationFields[relationship._id] relationshipFields = relationFields[relationship._id]
} }
const hideRelationshipFields = () => { const hideRelationshipFields = () => {
relationshipAnchor = null
relationshipFields = undefined relationshipFields = undefined
} }
@ -281,7 +285,7 @@
<div <div
class="badge" class="badge"
class:extra-info={!!relationFields[relationship._id]} class:extra-info={!!relationFields[relationship._id]}
on:mouseover={() => displayRelationshipFields(relationship)} on:mouseenter={e => displayRelationshipFields(e, relationship)}
on:focus={() => {}} on:focus={() => {}}
on:mouseleave={() => hideRelationshipFields()} on:mouseleave={() => hideRelationshipFields()}
> >
@ -359,7 +363,7 @@
{/if} {/if}
{#if showRelationshipFields} {#if showRelationshipFields}
<GridPopover {anchor} minWidth={300} maxWidth={400}> <GridPopover anchor={relationshipAnchor} maxWidth={400} offset={4}>
<div class="relationship-fields"> <div class="relationship-fields">
{#each Object.entries(relationshipFields) as [fieldName, fieldValue]} {#each Object.entries(relationshipFields) as [fieldName, fieldValue]}
<div class="relationship-field-name"> <div class="relationship-field-name">
@ -543,15 +547,19 @@
.relationship-fields { .relationship-fields {
margin: var(--spacing-m) var(--spacing-l); margin: var(--spacing-m) var(--spacing-l);
display: grid; display: grid;
grid-template-columns: minmax(auto, 50%) auto; grid-template-columns: auto 1fr;
grid-row-gap: var(--spacing-m); grid-row-gap: var(--spacing-m);
grid-column-gap: var(--spacing-m); grid-column-gap: var(--spacing-xl);
} }
.relationship-field-name { .relationship-field-name {
text-transform: uppercase; text-transform: uppercase;
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-600);
font-size: var(--font-size-xs); font-size: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 120px;
} }
.relationship-field-value { .relationship-field-value {
overflow: hidden; overflow: hidden;

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

@ -15,6 +15,7 @@
export let open = true export let open = true
export let resizable = false export let resizable = false
export let wrap = true export let wrap = true
export let offset = 0
const { gridID } = getContext("grid") const { gridID } = getContext("grid")
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -42,8 +43,8 @@
{align} {align}
{resizable} {resizable}
{wrap} {wrap}
{offset}
portalTarget="#{gridID} .grid-popover-container" portalTarget="#{gridID} .grid-popover-container"
offset={0}
> >
<div <div
class="grid-popover-contents" class="grid-popover-contents"