github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-08-22 06:13:36 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

review suggestions

Browse source
This commit is contained in:
tehcneko 2025-05-25 16:32:17 +08:00
commit 80220221be
1 changed files with 14 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/webui/www/private/scripts/progressbar.js
View file

@ -39,25 +39,23 @@ window.qBittorrent.ProgressBar ??= (() => {
class ProgressBar extends HTMLElement { class ProgressBar extends HTMLElement {
static #progressBarUniqueId = 0; static #progressBarUniqueId = 0;
#value; #value = 0;
#styles; #styles = {
#id = ++ProgressBar.#progressBarUniqueId;
#light;
#dark;
constructor(value, styles = {}) {
super();
this.setValue(value);
this.#styles = {
height: 12, height: 12,
darkbg: "var(--color-background-blue)", darkbg: "var(--color-background-blue)",
darkfg: "var(--color-text-white)", darkfg: "var(--color-text-white)",
lightbg: "var(--color-background-default)", lightbg: "var(--color-background-default)",
lightfg: "var(--color-text-default)", lightfg: "var(--color-text-default)",
...styles
}; };
this.#dark = document.createElement("div"); #id = ++ProgressBar.#progressBarUniqueId;
#light = document.createElement("div");
#dark = document.createElement("div");
constructor(value) {
super();
this.#dark.style.width = "100%"; this.#dark.style.width = "100%";
this.#dark.style.height = `${this.#styles.height}px`; this.#dark.style.height = `${this.#styles.height}px`;
this.#dark.style.background = this.#styles.darkbg; this.#dark.style.background = this.#styles.darkbg;
@ -69,7 +67,6 @@ window.qBittorrent.ProgressBar ??= (() => {
this.#dark.style.top = "0"; this.#dark.style.top = "0";
this.#dark.style.lineHeight = `${this.#styles.height}px`; this.#dark.style.lineHeight = `${this.#styles.height}px`;
this.#light = document.createElement("div");
this.#light.style.width = "100%"; this.#light.style.width = "100%";
this.#light.style.height = `${this.#styles.height}px`; this.#light.style.height = `${this.#styles.height}px`;
this.#light.style.background = this.#styles.lightbg; this.#light.style.background = this.#styles.lightbg;
@ -91,10 +88,8 @@ window.qBittorrent.ProgressBar ??= (() => {
this.shadowRoot.host.style.margin = "0 auto"; this.shadowRoot.host.style.margin = "0 auto";
this.shadowRoot.appendChild(this.#dark); this.shadowRoot.appendChild(this.#dark);
this.shadowRoot.appendChild(this.#light); this.shadowRoot.appendChild(this.#light);
}
connectedCallback() { this.setValue(value);
this.#refresh();
} }
getValue() { getValue() {
@ -106,12 +101,6 @@ window.qBittorrent.ProgressBar ??= (() => {
if (Number.isNaN(value)) if (Number.isNaN(value))
value = 0; value = 0;
this.#value = Math.min(Math.max(value, 0), 100); this.#value = Math.min(Math.max(value, 0), 100);
this.#refresh();
}
#refresh() {
if (!this.isConnected)
return;
const displayedValue = `${window.qBittorrent.Misc.toFixedPointString(this.#value, 1)}%`; const displayedValue = `${window.qBittorrent.Misc.toFixedPointString(this.#value, 1)}%`;
this.#dark.textContent = displayedValue; this.#dark.textContent = displayedValue;