feat: Implement collapsing nested subentries

This commit is contained in:
James Rupert Tan 2024-06-07 05:35:53 -05:00
parent 7f75b08e4d
commit de12a997a7
2 changed files with 40 additions and 1 deletions

View file

@ -10,6 +10,7 @@ export interface Entry {
startTime: string;
endTime: string;
subEntries: Entry[];
collapsed?: number;
}
export async function saveTracker(tracker: Tracker, app: App, fileName: string, section: MarkdownSectionInformation): Promise<void> {
@ -318,6 +319,27 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
renderNameAsMarkdown(nameField.label, getFile, component);
if (entry.subEntries?.length) {
let expandButton = new ButtonComponent(nameField.label)
.setClass("clickable-icon")
.setClass("simple-time-tracker-expand-button")
.setIcon(`chevron-${entry.collapsed ? 'right' : 'down'}`)
.setTooltip("Collapse")
.onClick(async () => {
if (entry.collapsed) {
delete entry.collapsed;
} else {
entry.collapsed = 1;
}
await saveTracker(tracker, this.app, getFile(), getSectionInfo());
});
let nameWrapper = nameField.cell.createDiv({cls: "simple-time-tracker-table-expandwrapper"});
nameWrapper.style.marginLeft = nameField.label.style.marginLeft;
nameField.label.style.marginLeft = null;
nameWrapper.insertBefore(nameField.label, null);
nameWrapper.insertBefore(expandButton.buttonEl, null);
}
let entryButtons = row.createEl("td");
entryButtons.addClass("simple-time-tracker-table-buttons");
new ButtonComponent(entryButtons)
@ -370,7 +392,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
await saveTracker(tracker, this.app, getFile(), getSectionInfo());
});
if (entry.subEntries) {
if (entry.subEntries && !entry.collapsed) {
for (let sub of orderedEntries(entry.subEntries, settings))
addEditableTableRow(tracker, sub, table, newSegmentNameBox, trackerRunning, getFile, getSectionInfo, settings, indent + 1, component);
}

View file

@ -79,3 +79,20 @@
.simple-time-tracker-table tr:hover {
background-color: var(--background-modifier-hover);
}
.simple-time-tracker-table :is(td,th):first-child {
/* HACKY hardcoded 2em to make room for expand/collapse button */
padding-left: 2em;
}
.simple-time-tracker-table-expandwrapper {
position: relative;
}
.simple-time-tracker-expand-button {
position: absolute;
/* HACKY there should be a better way to position this */
left: 0;
top: 50%;
transform: translate(-100%, -50%);
}