From f51abb45cd22fed0cf8fcd0aa3767221e40a44ba Mon Sep 17 00:00:00 2001 From: Romein van Buren Date: Tue, 17 Jan 2023 18:00:57 +0100 Subject: [PATCH] Grid: correct indentation and column widths --- frontend/src/components/grid-items.svelte | 168 ++++++++++++++++++++++ frontend/src/components/grid.svelte | 162 +-------------------- 2 files changed, 171 insertions(+), 159 deletions(-) create mode 100644 frontend/src/components/grid-items.svelte diff --git a/frontend/src/components/grid-items.svelte b/frontend/src/components/grid-items.svelte new file mode 100644 index 0000000..50656c9 --- /dev/null +++ b/frontend/src/components/grid-items.svelte @@ -0,0 +1,168 @@ + + +{#each _items as item (item[key])} + select(item[key])} + on:dblclick={() => doubleClick(item[key])} + on:contextmenu|preventDefault={evt => showContextMenu(evt, item)} + class:selected={activeKey === item[key] && !activeChildKey} + > + + {#if item.children?.length} + + {/if} + + + {#each columns as column, columnIndex} + {@const value = item[column.key]} + +
+ {formatValue(value)} +
+ + {/each} + + + {#if item.children && childrenOpen[item[key]]} + selectChild(item[key], e.detail)} + on:closeAll={closeAll} + /> + {/if} +{/each} + + diff --git a/frontend/src/components/grid.svelte b/frontend/src/components/grid.svelte index f747d97..b68d00c 100644 --- a/frontend/src/components/grid.svelte +++ b/frontend/src/components/grid.svelte @@ -1,6 +1,5 @@
0}> @@ -99,13 +25,6 @@ {/if} - - - {#each columns as column} - - {/each} - - {#if showHeaders && columns.some(col => col.title)} @@ -118,47 +37,7 @@ {/if} - {#each _items as item (item[key])} - select(item[key])} - on:dblclick={() => doubleClick(item[key])} - on:contextmenu|preventDefault={evt => showContextMenu(evt, item)} - class:selected={activeKey === item[key] && !activeChildKey} - > - - - {#each columns as column} - {@const value = item[column.key]} - - {/each} - - - {#if item.children && childrenOpen[item[key]]} - - - - - {/if} - {/each} +
- {#if item.children?.length} - - {/if} - -
{formatValue(value)}
-
- selectChild(item[key], e.detail)} - on:closeAll={closeAll} - /> -
@@ -201,43 +80,8 @@ cursor: pointer; } - td, th { + th { padding: 0.3rem; text-overflow: ellipsis; } - td.has-toggle { - width: calc(20px + 0.3rem); - } - td.subgrid-parent { - padding: 0; - } - - td .value { - height: 2.1ex; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 25em; - } - - tbody tr.selected td { - background-color: #00008b; - color: #fff; - } - - button.toggle { - color: inherit; - padding: 0; - margin: 0; - display: contents; - } - button.toggle :global(svg) { - width: 15px; - height: 15px; - vertical-align: top; - } - - .right { - text-align: right; - }