Skip to content

Commit a90a0ea

Browse files
TorstenDittmannTorstenDittmann
authored
Merge pull request #2920 from appwrite/feat-native-scrollbar-and-sticky-col
2 parents 8f7baa4 + dc93bc5 commit a90a0ea

4 files changed

Lines changed: 102 additions & 75 deletions

File tree

‎bun.lock‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@
2222
"@ai-sdk/svelte": "^1.1.24",
2323
"@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@41152f5",
2424
"@appwrite.io/pink-icons": "0.25.0",
25-
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@df765cc",
25+
"@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bfe7ce3",
2626
"@appwrite.io/pink-legacy": "^1.0.3",
27-
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@df765cc",
27+
"@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bfe7ce3",
2828
"@faker-js/faker": "^9.9.0",
2929
"@plausible-analytics/tracker": "^0.4.4",
3030
"@popperjs/core": "^2.11.8",

‎src/lib/helpers/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export type Column = PinkColumn & {
6262
draggable?: boolean;
6363
resizedWidth?: number;
6464
isAction?: boolean;
65+
sticky?: { side: 'left' | 'right'; offset?: number };
6566
};
6667

6768
export function isValueOfStringEnum<T extends Record<string, string>>(

‎src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte‎

Lines changed: 95 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@
129129
: 24;
130130
131131
let selectedRows = [];
132-
let showExpandIconForId: number | null = null;
133132
let spreadsheetContainer: SpreadsheetContainer;
134133
let previouslyFocusedElement: Element | null = null;
135134
@@ -207,6 +206,7 @@
207206
width: getColumnWidth('$id', 250),
208207
minimumWidth: 250,
209208
draggable: false,
209+
sticky: $isSmallViewport ? undefined : { side: 'left', offset: 40 },
210210
type: 'string',
211211
icon: IconFingerPrint,
212212
isEditable: false,
@@ -775,7 +775,7 @@
775775
776776
$: canShowDatetimePopover = true;
777777
778-
$: if (table.fields) {
778+
$: if (table.fields && typeof $isSmallViewport === 'boolean') {
779779
makeTableColumns();
780780
}
781781
@@ -789,6 +789,24 @@
789789
previouslyFocusedElement = null;
790790
});
791791
}
792+
793+
function getSpreadsheetCellProps(
794+
rowId: string | undefined,
795+
columnId: string | undefined,
796+
state
797+
) {
798+
if (columnId !== '$id' || !rowId || state?.isHeader || state?.isEmptyRow) {
799+
return undefined;
800+
}
801+
802+
return {
803+
style: `
804+
--row-expand-opacity: ${state?.hovered ? '1' : '0'};
805+
--row-expand-pointer-events: ${state?.hovered ? 'auto' : 'none'};
806+
--row-expand-transform: ${state?.hovered ? 'translateX(0)' : 'translateX(4px)'};
807+
`
808+
};
809+
}
792810
</script>
793811

794812
<SpreadsheetContainer bind:this={spreadsheetContainer}>
@@ -798,9 +816,11 @@
798816
allowSelection
799817
useVirtualizer
800818
keyboardNavigation
819+
showScrollbars
801820
bind:selectedRows
802821
selection={rowSelection}
803822
bind:columns={$tableColumns}
823+
getCellProps={getSpreadsheetCellProps}
804824
loading={$spreadsheetLoading}
805825
emptyCells={emptyCellsCount}
806826
rowCount={$paginatedRows.virtualLength}
@@ -920,79 +940,70 @@
920940
{#each $tableColumns as { id: columnId, isEditable, hide } (columnId)}
921941
{@const rowColumn = $columns.find((col) => col.key === columnId)}
922942
{#if columnId === '$id' && !hide}
923-
<button
924-
on:mouseenter={() => {
925-
showExpandIconForId = index;
926-
}}
927-
on:mouseleave={() => {
928-
showExpandIconForId = null;
929-
}}>
930-
<Spreadsheet.Cell {root} {isEditable} column={columnId}>
931-
<Layout.Stack
932-
gap="none"
933-
direction="row"
934-
alignItems="center"
935-
alignContent="center"
936-
justifyContent="space-between">
937-
<Id value={row.$id} tooltipPortal tooltipDelay={200}
938-
>{row.$id}</Id>
939-
940-
<Popover let:show let:hide portal padding="none">
941-
{@const opacityValue =
942-
showExpandIconForId === index ? '1' : '0'}
943-
<button
944-
on:mouseenter={show}
945-
on:mouseleave={hide}
946-
style:opacity={opacityValue}
947-
style:transition="opacity 225ms ease-in-out">
948-
<Button.Button
949-
size="xs"
950-
icon
951-
variant="secondary"
952-
on:click={() => {
953-
hide();
954-
previouslyFocusedElement =
955-
document.activeElement;
956-
$databaseRowSheetOptions.autoFocus = false;
957-
onSelectSheetOption(
958-
'update',
959-
null,
960-
'row',
961-
row
962-
);
963-
}}>
964-
<Icon icon={IconArrowExpand} size="s" />
965-
</Button.Button>
966-
</button>
943+
<Spreadsheet.Cell {root} {isEditable} column={columnId}>
944+
<Layout.Stack
945+
class="row-id-cell-content"
946+
gap="none"
947+
direction="row"
948+
alignItems="center"
949+
alignContent="center"
950+
justifyContent="space-between">
951+
<Id value={row.$id} tooltipPortal tooltipDelay={200}>
952+
{row.$id}
953+
</Id>
954+
955+
<Popover let:show let:hide portal padding="none">
956+
<div
957+
class="row-expand-trigger"
958+
on:mouseenter={show}
959+
on:mouseleave={hide}>
960+
<Button.Button
961+
size="xs"
962+
icon
963+
variant="secondary"
964+
on:click={() => {
965+
hide();
966+
previouslyFocusedElement =
967+
document.activeElement;
968+
$databaseRowSheetOptions.autoFocus = false;
969+
onSelectSheetOption(
970+
'update',
971+
null,
972+
'row',
973+
row
974+
);
975+
}}>
976+
<Icon icon={IconArrowExpand} size="s" />
977+
</Button.Button>
978+
</div>
979+
980+
<svelte:fragment slot="tooltip">
981+
<Layout.Stack
982+
inline
983+
gap="xxs"
984+
direction="row"
985+
alignItems="center"
986+
alignContent="center"
987+
style="padding: var(--gap-XS, 6px) var(--gap-S, 8px);">
988+
Expand row
967989

968-
<svelte:fragment slot="tooltip">
969990
<Layout.Stack
970991
inline
971-
gap="xxs"
992+
gap="xxxs"
972993
direction="row"
973994
alignItems="center"
974-
alignContent="center"
975-
style="padding: var(--gap-XS, 6px) var(--gap-S, 8px);">
976-
Expand row
977-
978-
<Layout.Stack
979-
inline
980-
gap="xxxs"
981-
direction="row"
982-
alignItems="center"
983-
alignContent="center">
984-
<Keyboard size="s" key="⌘" />
985-
<Keyboard
986-
key={'Enter'}
987-
autoWidth
988-
size="s" />
989-
</Layout.Stack>
995+
alignContent="center">
996+
<Keyboard size="s" key="⌘" />
997+
<Keyboard
998+
key={'Enter'}
999+
autoWidth
1000+
size="s" />
9901001
</Layout.Stack>
991-
</svelte:fragment>
992-
</Popover>
993-
</Layout.Stack>
994-
</Spreadsheet.Cell>
995-
</button>
1002+
</Layout.Stack>
1003+
</svelte:fragment>
1004+
</Popover>
1005+
</Layout.Stack>
1006+
</Spreadsheet.Cell>
9961007
{:else}
9971008
<Spreadsheet.Cell {root} {isEditable} column={columnId}>
9981009
{#if columnId === '$createdAt' || columnId === '$updatedAt'}
@@ -1377,4 +1388,19 @@
13771388
top: 0 !important;
13781389
}
13791390
}
1391+
1392+
.row-id-cell-content {
1393+
min-width: 0;
1394+
}
1395+
1396+
.row-expand-trigger {
1397+
display: flex;
1398+
flex: 0 0 auto;
1399+
opacity: var(--row-expand-opacity, 0);
1400+
pointer-events: var(--row-expand-pointer-events, none);
1401+
transition:
1402+
opacity 225ms ease-in-out,
1403+
transform 225ms ease-in-out;
1404+
transform: var(--row-expand-transform, translateX(4px));
1405+
}
13801406
</style>

0 commit comments

Comments
 (0)