updated task count on widget

This commit is contained in:
liyunze 2026-08-16 22:50:12 +10:00
parent 9a9c04905b
commit 81da44cbc6
10 changed files with 71 additions and 30 deletions

View file

@ -17,6 +17,7 @@
<div class="task-panel">
<div class="panel-header">
<span id="title">!taskhelp</span>
<span id="task-count">0/0</span>
</div>
<div class="scroll-viewport">
<div class="scroll-track" id="scrollTrack">

View file

@ -62,6 +62,7 @@ class TaskList {
track: el.querySelector(".scroll-track"),
content: el.querySelector(".scroll-content"),
viewport: el.querySelector(".scroll-viewport"),
count: el.querySelector("#task-count"),
};
}
@ -100,15 +101,13 @@ class TaskList {
if (!section) return this;
section.color = color;
document
.querySelectorAll(".section")
.forEach((el) => {
if (el.dataset.key !== sectionId) return;
const title = el.querySelector(":scope > .section-title");
if (!title) return;
title.style.setProperty("--user-color", color);
title.classList.add("has-user-color");
});
document.querySelectorAll(".section").forEach((el) => {
if (el.dataset.key !== sectionId) return;
const title = el.querySelector(":scope > .section-title");
if (!title) return;
title.style.setProperty("--user-color", color);
title.classList.add("has-user-color");
});
return this;
}
@ -221,6 +220,7 @@ class TaskList {
this.#els.content.innerHTML = "";
this.#data = [];
this.#firstRender = true;
this.#updateTaskCount();
}
// ── render ─────────────────────────────────────────
@ -235,11 +235,18 @@ class TaskList {
this.#patchContainer(this.#els.content, this.#data, true);
}
this.#updateTaskCount();
if (this.#pendingRemovals === 0) {
this.#syncScroll();
}
}
#updateTaskCount() {
if (!this.#els.count) return;
this.#els.count.textContent = `${this.doneCount}/${this.taskCount}`;
}
// ── animations ─────────────────────────────────────
#animateIn(el) {
@ -317,7 +324,6 @@ class TaskList {
);
}
// ── dom helpers ────────────────────────────────────
#stripHtml(text) {

View file

@ -24,7 +24,7 @@ body {
.panel-header {
display: flex;
justify-content: center;
justify-content: space-between;
align-items: center;
text-align: center;
width: var(--header-width);

View file

@ -138,6 +138,12 @@ body {
font-size: var(--title-font-size);
}
#task-count {
flex-shrink: 0;
white-space: nowrap;
font-size: var(--title-font-size);
}
.task-number {
flex-shrink: 0;
min-width: 16px;

View file

@ -17,6 +17,7 @@
<div class="task-panel">
<div class="panel-header">
<span id="title">!taskhelp</span>
<span id="task-count">0/0</span>
</div>
<div class="scroll-viewport">
<div class="scroll-track" id="scrollTrack">

View file

@ -31,6 +31,7 @@ class TaskList {
track: el.querySelector(".scroll-track"),
content: el.querySelector(".scroll-content"),
viewport: el.querySelector(".scroll-viewport"),
count: el.querySelector("#task-count"),
};
}
@ -77,15 +78,13 @@ class TaskList {
if (!section) return this;
section.color = color;
document
.querySelectorAll(".section")
.forEach((el) => {
if (el.dataset.key !== sectionId) return;
const title = el.querySelector(":scope > .section-title");
if (!title) return;
title.style.setProperty("--user-color", color);
title.classList.add("has-user-color");
});
document.querySelectorAll(".section").forEach((el) => {
if (el.dataset.key !== sectionId) return;
const title = el.querySelector(":scope > .section-title");
if (!title) return;
title.style.setProperty("--user-color", color);
title.classList.add("has-user-color");
});
return this;
}
@ -198,6 +197,7 @@ class TaskList {
this.#els.content.innerHTML = "";
this.#data = [];
this.#firstRender = true;
this.#updateTaskCount();
}
// ── render ─────────────────────────────────────────
@ -212,11 +212,18 @@ class TaskList {
this.#patchContainer(this.#els.content, this.#data, true);
}
this.#updateTaskCount();
if (this.#pendingRemovals === 0) {
this.#syncScroll();
}
}
#updateTaskCount() {
if (!this.#els.count) return;
this.#els.count.textContent = `${this.doneCount}/${this.taskCount}`;
}
// ── animations ─────────────────────────────────────
#animateIn(el) {

View file

@ -126,6 +126,12 @@ body {
font-size: var(--title-font-size);
}
#task-count {
flex-shrink: 0;
white-space: nowrap;
font-size: var(--title-font-size);
}
.task-number {
flex-shrink: 0;
min-width: 16px;

View file

@ -17,6 +17,7 @@
<div class="task-panel">
<div class="panel-header">
<span id="title">!taskhelp</span>
<span id="task-count">0/0</span>
</div>
<div class="scroll-viewport">
<div class="scroll-track" id="scrollTrack">

View file

@ -62,6 +62,7 @@ class TaskList {
track: el.querySelector(".scroll-track"),
content: el.querySelector(".scroll-content"),
viewport: el.querySelector(".scroll-viewport"),
count: el.querySelector("#task-count"),
};
}
@ -100,15 +101,13 @@ class TaskList {
if (!section) return this;
section.color = color;
document
.querySelectorAll(".section")
.forEach((el) => {
if (el.dataset.key !== sectionId) return;
const title = el.querySelector(":scope > .section-title");
if (!title) return;
title.style.setProperty("--user-color", color);
title.classList.add("has-user-color");
});
document.querySelectorAll(".section").forEach((el) => {
if (el.dataset.key !== sectionId) return;
const title = el.querySelector(":scope > .section-title");
if (!title) return;
title.style.setProperty("--user-color", color);
title.classList.add("has-user-color");
});
return this;
}
@ -221,6 +220,7 @@ class TaskList {
this.#els.content.innerHTML = "";
this.#data = [];
this.#firstRender = true;
this.#updateTaskCount();
}
// ── render ─────────────────────────────────────────
@ -235,11 +235,18 @@ class TaskList {
this.#patchContainer(this.#els.content, this.#data, true);
}
this.#updateTaskCount();
if (this.#pendingRemovals === 0) {
this.#syncScroll();
}
}
#updateTaskCount() {
if (!this.#els.count) return;
this.#els.count.textContent = `${this.doneCount}/${this.taskCount}`;
}
// ── animations ─────────────────────────────────────
#animateIn(el) {

View file

@ -106,7 +106,7 @@ body {
}
.section-title.has-user-color {
color: var(--user-color); /*auto user color*/
color: var(--user-color); /*auto user color*/
}
.task.done,
@ -126,6 +126,12 @@ body {
font-size: var(--title-font-size);
}
#task-count {
flex-shrink: 0;
white-space: nowrap;
font-size: var(--title-font-size);
}
.task-number {
flex-shrink: 0;
min-width: 16px;