improved collapse styling

Ellpeck · Aug 9, 2024 · ed0ad21 · ed0ad21
1 parent 1ddefa5
commit ed0ad21
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/src/tracker.ts b/src/tracker.ts
@@ -349,18 +349,17 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
     let expandButton = new ButtonComponent(nameField.label)
         .setClass("clickable-icon")
         .setClass("simple-time-tracker-expand-button")
-        .setIcon(`chevron-${entry.collapsed ? 'right' : 'down'}`)
-        .setTooltip(entry.collapsed ? "Expand" : "Collapse")
+        .setIcon(`chevron-${entry.collapsed ? "left" : "down"}`)
         .onClick(async () => {
             if (entry.collapsed) {
-                delete entry.collapsed;
+                entry.collapsed = undefined;
             } else {
                 entry.collapsed = true;
             }
-            await saveTracker(tracker, this.app, getFile(), getSectionInfo());
+            await saveTracker(tracker, getFile(), getSectionInfo());
         });
-    if (!entry.subEntries?.length) expandButton.buttonEl.style.visibility = 'hidden';
-    nameField.cell.insertBefore(expandButton.buttonEl, nameField.label);
+    if (!entry.subEntries)
+        expandButton.buttonEl.style.visibility = "hidden";
 
     let entryButtons = row.createEl("td");
     entryButtons.addClass("simple-time-tracker-table-buttons");
@@ -393,7 +392,7 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
                 renderNameAsMarkdown(nameField.label, getFile, component);
             } else {
                 nameField.beginEdit(entry.name);
-                expandButton.buttonEl.style.display = 'none';
+                expandButton.buttonEl.style.display = "none";
                 // only allow editing start and end times if we don't have sub entries
                 if (!entry.subEntries) {
                     startField.beginEdit(entry.startTime);

diff --git a/styles.css b/styles.css
@@ -64,7 +64,12 @@
 }
 
 .simple-time-tracker-table .clickable-icon {
-    display: inline;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.simple-time-tracker-expand-button {
+    margin-inline-start: 0.5em;
 }
 
 .simple-time-tracker-input {

diff --git a/test-vault/test-markdown.md b/test-vault/test-markdown.md
@@ -1,4 +1,5 @@
 Tested for #tag, *italic*, [link](test2), etc:
 ```simple-time-tracker
-{"entries":[{"name":"`Segment 1`","startTime":"2022-09-27T19:51:18.000Z","endTime":"2022-09-27T19:51:24.000Z"},{"name":"Segment 2","startTime":"2022-09-27T19:51:25.000Z","endTime":"2022-09-27T19:51:26.000Z"},{"name":"#tag Seqment 3 *add* #tag1 text","startTime":null,"endTime":null,"subEntries":[{"name":"Part 1 #tagp1","startTime":"2024-03-17T11:16:00.382Z","endTime":"2024-03-17T11:16:15.966Z","subEntries":null},{"name":"Part 3","startTime":"2024-03-17T11:17:08.000Z","endTime":"2024-03-17T11:17:24.000Z","subEntries":null}]},{"name":"#tag3 Segment 4","startTime":null,"endTime":null,"subEntries":[{"name":"Part 1 #tag4","startTime":"2024-03-17T12:22:04.000Z","endTime":"2024-03-17T12:22:16.000Z","subEntries":null},{"name":"#tag5 Part 2 *italic*","startTime":"2024-03-17T12:22:20.000Z","endTime":"2024-03-17T12:22:24.000Z","subEntries":null}]},{"name":"*italic* Segment 5 #tag6 [test2](test2)","startTime":"2024-03-17T12:40:37.000Z","endTime":"2024-03-17T12:40:45.000Z","subEntries":null},{"name":"Segment 6","startTime":"2024-03-27T13:20:56.000Z","endTime":null,"subEntries":null}]}
+{"entries":[{"name":"`Segment 1`","startTime":"2022-09-27T19:51:18.000Z","endTime":"2022-09-27T19:51:24.000Z"},{"name":"Segment 2","startTime":"2022-09-27T19:51:25.000Z","endTime":"2022-09-27T19:51:26.000Z"},{"name":"#tag Seqment 3 *add* #tag1 text","startTime":null,"endTime":null,"subEntries":[{"name":"Part 1 #tagp1","startTime":"2024-03-17T11:16:00.382Z","endTime":"2024-03-17T11:16:15.966Z","subEntries":null},{"name":"Part 3","startTime":"2024-03-17T11:17:08.000Z","endTime":"2024-03-17T11:17:24.000Z","subEntries":null}],"collapsed":true},{"name":"#tag3 Segment 4","startTime":null,"endTime":null,"subEntries":[{"name":"Part 1 #tag4","startTime":"2024-03-17T12:22:04.000Z","endTime":"2024-03-17T12:22:16.000Z","subEntries":null},{"name":"#tag5 Part 2 *italic*","startTime":"2024-03-17T12:22:20.000Z","endTime":"2024-03-17T12:22:24.000Z","subEntries":null}]},{"name":"*italic* Segment 5 #tag6 [test2](test2)","startTime":"2024-03-17T12:40:37.000Z","endTime":"2024-03-17T12:40:45.000Z","subEntries":null},{"name":"Segment 6","startTime":"2024-03-27T13:20:56.000Z","endTime":"2024-08-09T16:27:18.029Z","subEntries":null}]}
 ```
+