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

Make quiet table even quieter

This commit is contained in:
Andrew Kingston 2024-06-18 10:27:04 +01:00
parent 1e492c7a1d
commit 11e75c2199
No known key found for this signature in database
5 changed files with 121 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/frontend-core/src/components/grid/layout/ButtonColumn.svelte
View File

@ -3,6 +3,7 @@
import { Button } from "@budibase/bbui" import { Button } from "@budibase/bbui"
import GridCell from "../cells/GridCell.svelte" import GridCell from "../cells/GridCell.svelte"
import GridScrollWrapper from "./GridScrollWrapper.svelte" import GridScrollWrapper from "./GridScrollWrapper.svelte"
import { BlankRowID } from "../lib/constants"
const { const {
renderedRows, renderedRows,
@ -17,6 +18,7 @@
isDragging, isDragging,
buttonColumnWidth, buttonColumnWidth,
showVScrollbar, showVScrollbar,
dispatch,
} = getContext("grid") } = getContext("grid")
let container let container
@ -89,6 +91,17 @@
</GridCell> </GridCell>
</div> </div>
{/each} {/each}
<div
class="row blank"
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
>
<GridCell
width={$buttonColumnWidth}
highlighted={$hoveredRowId === BlankRowID}
on:click={() => dispatch("add-row-inline")}
/>
</div>
</GridScrollWrapper> </GridScrollWrapper>
</div> </div>
</div> </div>
@ -129,8 +142,11 @@
align-items: center; align-items: center;
gap: 4px; gap: 4px;
} }
.blank :global(.cell:hover) {
cursor: pointer;
}
/* Add left cell border */ /* Add left cell border to all cells */
.button-column :global(.cell) { .button-column :global(.cell) {
border-left: var(--cell-border); border-left: var(--cell-border);
} }

9
packages/frontend-core/src/components/grid/layout/Grid.svelte
View File

@ -354,8 +354,13 @@
transition: none; transition: none;
} }
/* Overrides */ /* Overrides for quiet */
.grid.quiet :global(.grid-data-content .row > .cell:not(:last-child)) { .grid.quiet :global(.grid-data-content .row .cell:not(:last-child)),
.grid.quiet :global(.sticky-column .row .cell),
.grid.quiet :global(.new-row .cell:not(:last-child)) {
border-right: none; border-right: none;
} }
.grid.quiet :global(.sticky-column:before) {
display: none;
}
</style> </style>

29
packages/frontend-core/src/components/grid/layout/GridBody.svelte
View File

@ -2,6 +2,7 @@
import { getContext, onMount } from "svelte" import { getContext, onMount } from "svelte"
import GridScrollWrapper from "./GridScrollWrapper.svelte" import GridScrollWrapper from "./GridScrollWrapper.svelte"
import GridRow from "./GridRow.svelte" import GridRow from "./GridRow.svelte"
import GridCell from "../cells/GridCell.svelte"
import { BlankRowID } from "../lib/constants" import { BlankRowID } from "../lib/constants"
import ButtonColumn from "./ButtonColumn.svelte" import ButtonColumn from "./ButtonColumn.svelte"
@ -46,7 +47,6 @@
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div bind:this={body} class="grid-body"> <div bind:this={body} class="grid-body">
<GridScrollWrapper scrollHorizontally scrollVertically attachHandlers> <GridScrollWrapper scrollHorizontally scrollVertically attachHandlers>
{#each $renderedRows as row, idx} {#each $renderedRows as row, idx}
@ -54,13 +54,16 @@
{/each} {/each}
{#if $config.canAddRows} {#if $config.canAddRows}
<div <div
class="blank" class="row blank"
class:highlighted={$hoveredRowId === BlankRowID}
style="width:{columnsWidth}px"
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)} on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
on:click={() => dispatch("add-row-inline")} >
/> <GridCell
width={columnsWidth}
highlighted={$hoveredRowId === BlankRowID}
on:click={() => dispatch("add-row-inline")}
/>
</div>
{/if} {/if}
</GridScrollWrapper> </GridScrollWrapper>
{#if $props.buttons?.length} {#if $props.buttons?.length}
@ -76,15 +79,13 @@
overflow: hidden; overflow: hidden;
flex: 1 1 auto; flex: 1 1 auto;
} }
.blank { .row {
height: var(--row-height); display: flex;
background: var(--cell-background); flex-direction: row;
border-bottom: var(--cell-border); justify-content: flex-start;
border-right: var(--cell-border); align-items: stretch;
position: absolute;
} }
.blank.highlighted { .blank :global(.cell:hover) {
background: var(--cell-background-hover);
cursor: pointer; cursor: pointer;
} }
</style> </style>

56
packages/frontend-core/src/components/grid/layout/NewRow.svelte
View File

@ -177,39 +177,41 @@
<!-- Only show new row functionality if we have any columns --> <!-- Only show new row functionality if we have any columns -->
{#if visible} {#if visible}
<div <div
class="container" class="new-row"
class:floating={offset > 0} class:floating={offset > 0}
style="--offset:{offset}px; --sticky-width:{width}px;" style="--offset:{offset}px; --sticky-width:{width}px;"
> >
<div class="underlay sticky" transition:fade|local={{ duration: 130 }} /> <div class="underlay sticky" transition:fade|local={{ duration: 130 }} />
<div class="underlay" transition:fade|local={{ duration: 130 }} /> <div class="underlay" transition:fade|local={{ duration: 130 }} />
<div class="sticky-column" transition:fade|local={{ duration: 130 }}> <div class="sticky-column" transition:fade|local={{ duration: 130 }}>
<GutterCell expandable on:expand={addViaModal} rowHovered> <div class="row">
<Icon name="Add" color="var(--spectrum-global-color-gray-500)" /> <GutterCell expandable on:expand={addViaModal} rowHovered>
{#if isAdding} <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
<div in:fade={{ duration: 130 }} class="loading-overlay" />
{/if}
</GutterCell>
{#if $stickyColumn}
{@const cellId = getCellID(NewRowID, $stickyColumn.name)}
<DataCell
{cellId}
rowFocused
column={$stickyColumn}
row={newRow}
focused={$focusedCellId === cellId}
width={$stickyColumn.width}
{updateValue}
topRow={offset === 0}
>
{#if $stickyColumn?.schema?.autocolumn}
<div class="readonly-overlay">Can't edit auto column</div>
{/if}
{#if isAdding} {#if isAdding}
<div in:fade={{ duration: 130 }} class="loading-overlay" /> <div in:fade={{ duration: 130 }} class="loading-overlay" />
{/if} {/if}
</DataCell> </GutterCell>
{/if} {#if $stickyColumn}
{@const cellId = getCellID(NewRowID, $stickyColumn.name)}
<DataCell
{cellId}
rowFocused
column={$stickyColumn}
row={newRow}
focused={$focusedCellId === cellId}
width={$stickyColumn.width}
{updateValue}
topRow={offset === 0}
>
{#if $stickyColumn?.schema?.autocolumn}
<div class="readonly-overlay">Can't edit auto column</div>
{/if}
{#if isAdding}
<div in:fade={{ duration: 130 }} class="loading-overlay" />
{/if}
</DataCell>
{/if}
</div>
</div> </div>
<div class="normal-columns" transition:fade|local={{ duration: 130 }}> <div class="normal-columns" transition:fade|local={{ duration: 130 }}>
<GridScrollWrapper scrollHorizontally attachHandlers> <GridScrollWrapper scrollHorizontally attachHandlers>
@ -276,7 +278,7 @@
margin-left: -6px; margin-left: -6px;
} }
.container { .new-row {
position: absolute; position: absolute;
top: var(--default-row-height); top: var(--default-row-height);
left: 0; left: 0;
@ -286,10 +288,10 @@
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
} }
.container :global(.cell) { .new-row :global(.cell) {
--cell-background: var(--spectrum-global-color-gray-75) !important; --cell-background: var(--spectrum-global-color-gray-75) !important;
} }
.container.floating :global(.cell) { .new-row.floating :global(.cell) {
height: calc(var(--row-height) + 1px); height: calc(var(--row-height) + 1px);
border-top: var(--cell-border); border-top: var(--cell-border);
} }

114
packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
View File

@ -66,62 +66,58 @@
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="content"> <GridScrollWrapper scrollVertically attachHandlers>
<GridScrollWrapper scrollVertically attachHandlers> {#each $renderedRows as row, idx}
{#each $renderedRows as row, idx} {@const rowSelected = !!$selectedRows[row._id]}
{@const rowSelected = !!$selectedRows[row._id]} {@const rowHovered = $hoveredRowId === row._id}
{@const rowHovered = $hoveredRowId === row._id} {@const rowFocused = $focusedRow?._id === row._id}
{@const rowFocused = $focusedRow?._id === row._id} {@const cellId = getCellID(row._id, $stickyColumn?.name)}
{@const cellId = getCellID(row._id, $stickyColumn?.name)} <div
<div class="row"
class="row" on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)}
on:mouseenter={$isDragging ? null : () => ($hoveredRowId = row._id)} on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))} >
> <GutterCell {row} {rowFocused} {rowHovered} {rowSelected} />
<GutterCell {row} {rowFocused} {rowHovered} {rowSelected} /> {#if $stickyColumn}
{#if $stickyColumn} <DataCell
<DataCell {row}
{row} {cellId}
{cellId} {rowFocused}
{rowFocused} selected={rowSelected}
selected={rowSelected} highlighted={rowHovered || rowFocused}
highlighted={rowHovered || rowFocused} rowIdx={row.__idx}
rowIdx={row.__idx} topRow={idx === 0}
topRow={idx === 0} focused={$focusedCellId === cellId}
focused={$focusedCellId === cellId} selectedUser={$selectedCellMap[cellId]}
selectedUser={$selectedCellMap[cellId]} width={$stickyColumn.width}
width={$stickyColumn.width} column={$stickyColumn}
column={$stickyColumn} contentLines={$contentLines}
contentLines={$contentLines} />
/> {/if}
{/if} </div>
</div> {/each}
{/each} {#if $config.canAddRows}
{#if $config.canAddRows} <div
<div class="row blank"
class="row new" on:mouseenter={$isDragging ? null : () => ($hoveredRowId = BlankRowID)}
on:mouseenter={$isDragging on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
? null on:click={() => dispatch("add-row-inline")}
: () => ($hoveredRowId = BlankRowID)} >
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)} <GutterCell rowHovered={$hoveredRowId === BlankRowID}>
on:click={() => dispatch("add-row-inline")} <Icon name="Add" color="var(--spectrum-global-color-gray-500)" />
> </GutterCell>
<GutterCell rowHovered={$hoveredRowId === BlankRowID}> {#if $stickyColumn}
<Icon name="Add" color="var(--spectrum-global-color-gray-500)" /> <GridCell
</GutterCell> width={$stickyColumn.width}
{#if $stickyColumn} highlighted={$hoveredRowId === BlankRowID}
<GridCell >
width={$stickyColumn.width} <KeyboardShortcut padded keybind="Ctrl+Enter" />
highlighted={$hoveredRowId === BlankRowID} </GridCell>
> {/if}
<KeyboardShortcut padded keybind="Ctrl+Enter" /> </div>
</GridCell> {/if}
{/if} </GridScrollWrapper>
</div>
{/if}
</GridScrollWrapper>
</div>
</div> </div>
<style> <style>
@ -174,11 +170,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
} }
.content { .blank :global(.cell:hover) {
position: relative;
flex: 1 1 auto;
}
.row.new :global(*:hover) {
cursor: pointer; cursor: pointer;
} }
</style> </style>