Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 10:26:08 +01:00
Code Issues Packages Projects Releases Activity

feat(views/table): improve expand/collapse button

Browse Source
This commit is contained in:
Elian Doran
2025-07-14 12:04:13 +03:00
parent 5f9a6a9f76
commit ec7dacfc9b
1 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/client/src/widgets/view_widgets/table_view/index.ts
View File

@@ -6,7 +6,7 @@ import SpacedUpdate from "../../../services/spaced_update.js";
import type { CommandListenerData, EventData } from "../../../components/app_context.js"; import type { CommandListenerData, EventData } from "../../../components/app_context.js";
import type { Attribute } from "../../../services/attribute_parser.js"; import type { Attribute } from "../../../services/attribute_parser.js";
import note_create, { CreateNoteOpts } from "../../../services/note_create.js"; import note_create, { CreateNoteOpts } from "../../../services/note_create.js";
import {Tabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, ColumnDefinition, DataTreeModule} from 'tabulator-tables'; import {Tabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, ColumnDefinition, DataTreeModule, Options} from 'tabulator-tables';
import "tabulator-tables/dist/css/tabulator.css"; import "tabulator-tables/dist/css/tabulator.css";
import "../../../../src/stylesheets/table.css"; import "../../../../src/stylesheets/table.css";
import { canReorderRows, configureReorderingRows } from "./dragging.js"; import { canReorderRows, configureReorderingRows } from "./dragging.js";
@@ -65,6 +65,26 @@ const TPL = /*html*/`
justify-content: left; justify-content: left;
gap: 0.5em; gap: 0.5em;
} }
.tabulator button.tree-expand,
.tabulator button.tree-collapse {
display: inline-block;
appearance: none;
border: 0;
background: transparent;
width: 1.5em;
position: relative;
vertical-align: middle;
}
.tabulator button.tree-expand span,
.tabulator button.tree-collapse span {
position: absolute;
top: 0;
left: 0;
font-size: 1.5em;
transform: translateY(-50%);
}
</style> </style>
<div class="table-view-container"></div> <div class="table-view-container"></div>
@@ -127,8 +147,7 @@ export default class TableView extends ViewMode<StateInfo> {
const { definitions: rowData, hasChildren } = await buildRowDefinitions(this.parentNote, info); const { definitions: rowData, hasChildren } = await buildRowDefinitions(this.parentNote, info);
const movableRows = canReorderRows(this.parentNote) && !hasChildren; const movableRows = canReorderRows(this.parentNote) && !hasChildren;
const columnDefs = buildColumnDefinitions(info, movableRows); const columnDefs = buildColumnDefinitions(info, movableRows);
let opts: Options = {
this.api = new Tabulator(el, {
layout: "fitDataFill", layout: "fitDataFill",
index: "noteId", index: "noteId",
columns: columnDefs, columns: columnDefs,
@@ -136,16 +155,25 @@ export default class TableView extends ViewMode<StateInfo> {
persistence: true, persistence: true,
movableColumns: true, movableColumns: true,
movableRows, movableRows,
dataTree: hasChildren,
dataTreeElementColumn: "title",
footerElement: buildFooter(this.parentNote), footerElement: buildFooter(this.parentNote),
persistenceWriterFunc: (_id, type: string, data: object) => { persistenceWriterFunc: (_id, type: string, data: object) => {
(this.persistentData as Record<string, {}>)[type] = data; (this.persistentData as Record<string, {}>)[type] = data;
this.spacedUpdate.scheduleUpdate(); this.spacedUpdate.scheduleUpdate();
}, },
persistenceReaderFunc: (_id, type: string) => this.persistentData?.[type], persistenceReaderFunc: (_id, type: string) => this.persistentData?.[type],
}); };
if (hasChildren) {
opts = {
...opts,
dataTree: hasChildren,
dataTreeElementColumn: "title",
dataTreeExpandElement: `<button class="tree-expand"><span class="bx bx-chevron-right"></span></button>`,
dataTreeCollapseElement: `<button class="tree-collapse"><span class="bx bx-chevron-down"></span></button>`
}
}
this.api = new Tabulator(el, opts);
if (movableRows) { if (movableRows) {
configureReorderingRows(this.api); configureReorderingRows(this.api);
} }