rythondev/rython-task-bot-v2
1
0
Fork 0
mirror of https://github.com/liyunze-coding/rython-task-bot-v2.git synced 2026-09-22 07:24:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated task count on widget

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
widgets/horizontal/index.html
View file

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

26
widgets/horizontal/scripts/tasklist-view.js
View file

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

2
widgets/horizontal/styles/structure.css
View file

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

6
widgets/horizontal/styles/style.css
View file

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

1
widgets/streamer-only/index.html
View file

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

25
widgets/streamer-only/scripts/tasklist-view.js
View file

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

6
widgets/streamer-only/styles/style.css
View file

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

1
widgets/vertical/index.html
View file

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

25
widgets/vertical/scripts/tasklist-view.js
View file

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

8
widgets/vertical/styles/style.css
View file

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