mirror of
https://github.com/Ellpeck/ObsidianSimpleTimeTracker.git
synced 2024-11-28 12:08:34 +01:00
feat: Implement collapsing nested subentries
This commit is contained in:
parent
7f75b08e4d
commit
de12a997a7
2 changed files with 40 additions and 1 deletions
|
@ -10,6 +10,7 @@ export interface Entry {
|
||||||
startTime: string;
|
startTime: string;
|
||||||
endTime: string;
|
endTime: string;
|
||||||
subEntries: Entry[];
|
subEntries: Entry[];
|
||||||
|
collapsed?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function saveTracker(tracker: Tracker, app: App, fileName: string, section: MarkdownSectionInformation): Promise<void> {
|
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);
|
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");
|
let entryButtons = row.createEl("td");
|
||||||
entryButtons.addClass("simple-time-tracker-table-buttons");
|
entryButtons.addClass("simple-time-tracker-table-buttons");
|
||||||
new ButtonComponent(entryButtons)
|
new ButtonComponent(entryButtons)
|
||||||
|
@ -370,7 +392,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
|
||||||
await saveTracker(tracker, this.app, getFile(), getSectionInfo());
|
await saveTracker(tracker, this.app, getFile(), getSectionInfo());
|
||||||
});
|
});
|
||||||
|
|
||||||
if (entry.subEntries) {
|
if (entry.subEntries && !entry.collapsed) {
|
||||||
for (let sub of orderedEntries(entry.subEntries, settings))
|
for (let sub of orderedEntries(entry.subEntries, settings))
|
||||||
addEditableTableRow(tracker, sub, table, newSegmentNameBox, trackerRunning, getFile, getSectionInfo, settings, indent + 1, component);
|
addEditableTableRow(tracker, sub, table, newSegmentNameBox, trackerRunning, getFile, getSectionInfo, settings, indent + 1, component);
|
||||||
}
|
}
|
||||||
|
|
17
styles.css
17
styles.css
|
@ -79,3 +79,20 @@
|
||||||
.simple-time-tracker-table tr:hover {
|
.simple-time-tracker-table tr:hover {
|
||||||
background-color: var(--background-modifier-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%);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue