some style work

This commit is contained in:
Ell 2022-09-27 19:33:34 +02:00
parent e1c0a3cd17
commit 88a43f6434
7 changed files with 96 additions and 1787 deletions

1774
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -14,23 +14,26 @@ export default class SimpleTimeTrackerPlugin extends Plugin {
this.registerMarkdownCodeBlockProcessor("simple-time-tracker", (s, e, i) => { this.registerMarkdownCodeBlockProcessor("simple-time-tracker", (s, e, i) => {
e.empty(); e.empty();
e.addClass("simple-time-tracker");
let tracker = loadTracker(s); let tracker = loadTracker(s);
let running = isRunning(tracker);
let name = new TextComponent(e) let btn = new ButtonComponent(e)
.setPlaceholder("Name this segment"); .setButtonText(running ? "End" : "Start")
new ButtonComponent(e)
.setButtonText("Start")
.onClick(async () => { .onClick(async () => {
if (isRunning(tracker)) { if (running) {
endEntry(tracker); endEntry(tracker);
} else { } else {
startEntry(tracker, name.getValue()); startEntry(tracker, name.getValue());
} }
name.setValue("");
await saveTracker(tracker, this.app, i.getSectionInfo(e)); await saveTracker(tracker, this.app, i.getSectionInfo(e));
}); });
btn.buttonEl.addClass("simple-time-tracker-btn");
let name = new TextComponent(e)
.setPlaceholder("Segment Name")
.setDisabled(running);
name.inputEl.addClass("simple-time-tracker-txt");
displayTracker(tracker, e); displayTracker(tracker, e);
}); });

View file

@ -52,6 +52,14 @@ export function loadTracker(json: string): Tracker {
} }
export function displayTracker(tracker: Tracker, element: HTMLElement): void { export function displayTracker(tracker: Tracker, element: HTMLElement): void {
let timer = element.createDiv({ cls: "simple-time-tracker-timers" });
let current = timer.createEl("div", { cls: "simple-time-tracker-timer" });
current.createEl("span", { cls: "simple-time-tracker-timer-time", text: "00:00" });
current.createEl("span", { text: "CURRENT" });
let total = timer.createEl("div", { cls: "simple-time-tracker-timer" });
total.createEl("span", { cls: "simple-time-tracker-timer-time", text: "01:00" });
total.createEl("span", { text: "TOTAL" });
let list = element.createEl("ul"); let list = element.createEl("ul");
for (let entry of tracker.entries) for (let entry of tracker.entries)
list.createEl("li", { text: displayEntry(entry) }); list.createEl("li", { text: displayEntry(entry) });

View file

@ -3,3 +3,34 @@
width: 400px; width: 400px;
height: auto; height: auto;
} }
.simple-time-tracker-btn,
.simple-time-tracker-txt {
display: block;
margin-left: auto;
margin-right: auto;
}
.simple-time-tracker-btn {
margin-top: 10px;
margin-bottom: 10px;
}
.simple-time-tracker-timers {
display: flex;
justify-content: center;
text-align: center;
}
.simple-time-tracker-timers span {
display: block;
}
.simple-time-tracker-timer {
margin: 20px;
}
.simple-time-tracker-timer-time {
font-size: xx-large;
font-weight: bolder;
}

File diff suppressed because one or more lines are too long

View file

@ -3,3 +3,34 @@
width: 400px; width: 400px;
height: auto; height: auto;
} }
.simple-time-tracker-btn,
.simple-time-tracker-txt {
display: block;
margin-left: auto;
margin-right: auto;
}
.simple-time-tracker-btn {
margin-top: 10px;
margin-bottom: 10px;
}
.simple-time-tracker-timers {
display: flex;
justify-content: center;
text-align: center;
}
.simple-time-tracker-timers span {
display: block;
}
.simple-time-tracker-timer {
margin: 20px;
}
.simple-time-tracker-timer-time {
font-size: xx-large;
font-weight: bolder;
}

View file

@ -1,7 +1,7 @@
This is a time tracker: This is a time tracker:
```simple-time-tracker ```simple-time-tracker
{"entries":[{"name":"","startTime":1664290639233,"endTime":1664290642003},{"name":"","startTime":1664290643788,"endTime":1664290647600},{"name":"","startTime":1664290650678,"endTime":1664290653168},{"name":"Another segment","startTime":1664290658822,"endTime":1664290662444},{"name":"","startTime":1664290690793,"endTime":1664290692366},{"name":"","startTime":1664290695119,"endTime":1664290696140}]} {"entries":[{"name":"Test segment my dudes!","startTime":1664298280695,"endTime":1664298283168},{"name":"","startTime":1664298304811,"endTime":1664298305748},{"name":"","startTime":1664298308288,"endTime":1664298322668},{"name":"","startTime":1664298323435,"endTime":1664298324617},{"name":"","startTime":1664298325410,"endTime":1664298326481},{"name":"","startTime":1664298328460,"endTime":1664298788945},{"name":"","startTime":1664298940959,"endTime":1664298943024},{"name":"","startTime":1664299161618,"endTime":1664299162696},{"name":"","startTime":1664299510766,"endTime":1664299511737}]}
``` ```