mirror of
https://github.com/liyunze-coding/rython-task-bot-v2.git
synced 2026-09-22 07:24:27 +00:00
updated task count on widget
This commit is contained in:
parent
9a9c04905b
commit
81da44cbc6
10 changed files with 71 additions and 30 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue