From 578d05092666f5af373ea6aa6c418eb75336cd80 Mon Sep 17 00:00:00 2001 From: Sucukdeluxe Date: Mon, 2 Mar 2026 23:16:45 +0100 Subject: [PATCH] =?UTF-8?q?Merge=20Gr=C3=B6=C3=9Fe/Geladen=20into=20single?= =?UTF-8?q?=20progress=20bar=20column=20(JDownloader=202=20style)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.6 --- package.json | 2 +- src/renderer/App.tsx | 40 +++++++++++++++++++++++------ src/renderer/styles.css | 57 +++++++++++++++++++++++++++++++++++------ 3 files changed, 82 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 55feef4..a07f44b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "real-debrid-downloader", - "version": "1.5.29", + "version": "1.5.30", "description": "Real-Debrid Downloader Desktop (Electron + React + TypeScript)", "main": "build/main/main/main.js", "author": "Sucukdeluxe", diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index f221552..4b077a8 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -2077,11 +2077,10 @@ export function App(): ReactElement {
{(["name", "size", "hoster"] as PkgSortColumn[]).flatMap((col) => { - const labels: Record = { name: "Name", size: "Größe", hoster: "Hoster" }; + const labels: Record = { name: "Name", size: "Geladen / Größe", hoster: "Hoster" }; const isActive = downloadsSortColumn === col; const before: React.ReactNode[] = []; if (col === "size") before.push(Fortschritt); - if (col === "hoster") before.push(Geladen); return [ ...before, {entry.name}
{entry.status === "completed" ? "100%" : "-"} - {humanSize(entry.totalBytes)} - {humanSize(entry.downloadedBytes)} + {(() => { + const pct = entry.totalBytes > 0 ? Math.min(100, Math.round((entry.downloadedBytes / entry.totalBytes) * 100)) : 0; + return entry.totalBytes > 0 ? ( + + + {humanSize(entry.downloadedBytes)} / {humanSize(entry.totalBytes)} + + ) : "-"; + })()} {entry.provider ? providerLabels[entry.provider] : "-"} {entry.status === "completed" ? "Abgeschlossen" : "Gelöscht"} - @@ -2806,8 +2812,17 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs {dlProgress}% - {humanSize(items.reduce((sum, item) => sum + (item.totalBytes || item.downloadedBytes || 0), 0))} - {humanSize(items.reduce((sum, item) => sum + (item.downloadedBytes || 0), 0))} + {(() => { + const totalBytes = items.reduce((sum, item) => sum + (item.totalBytes || item.downloadedBytes || 0), 0); + const dlBytes = items.reduce((sum, item) => sum + (item.downloadedBytes || 0), 0); + const pct = totalBytes > 0 ? Math.min(100, Math.round((dlBytes / totalBytes) * 100)) : 0; + return totalBytes > 0 ? ( + + + {humanSize(dlBytes)} / {humanSize(totalBytes)} + + ) : "-"; + })()} { const hosters = [...new Set(items.map((item) => formatHoster(item)).filter((h) => h !== "-"))]; return hosters.join(", "); @@ -2837,8 +2852,17 @@ const PackageCard = memo(function PackageCard({ pkg, items, packageSpeed, isFirs ) : "-"} - {(item.totalBytes || item.downloadedBytes) ? humanSize(item.totalBytes || item.downloadedBytes || 0) : "-"} - {item.downloadedBytes > 0 ? humanSize(item.downloadedBytes) : "-"} + {(() => { + const total = item.totalBytes || item.downloadedBytes || 0; + const dl = item.downloadedBytes || 0; + const pct = total > 0 ? Math.min(100, Math.round((dl / total) * 100)) : 0; + return total > 0 ? ( + + + {humanSize(dl)} / {humanSize(total)} + + ) : "-"; + })()} {formatHoster(item)} {item.fullStatus} diff --git a/src/renderer/styles.css b/src/renderer/styles.css index 9f2023c..c7f6b5d 100644 --- a/src/renderer/styles.css +++ b/src/renderer/styles.css @@ -577,7 +577,7 @@ body, .pkg-column-header { display: grid; - grid-template-columns: 1fr 70px 90px 90px 220px 180px 100px; + grid-template-columns: 1fr 70px 160px 220px 180px 100px; gap: 8px; padding: 5px 12px; background: var(--card); @@ -603,7 +603,7 @@ body, .pkg-columns { display: grid; - grid-template-columns: 1fr 70px 90px 90px 220px 180px 100px; + grid-template-columns: 1fr 70px 160px 220px 180px 100px; gap: 8px; align-items: center; min-width: 0; @@ -624,7 +624,6 @@ body, } .pkg-columns .pkg-col-progress, -.pkg-columns .pkg-col-downloaded, .pkg-columns .pkg-col-size, .pkg-columns .pkg-col-hoster, .pkg-columns .pkg-col-status, @@ -636,11 +635,55 @@ body, white-space: nowrap; } -.pkg-col-progress, -.pkg-col-downloaded { +.pkg-col-progress { font-variant-numeric: tabular-nums; } +.progress-size { + display: block; + position: relative; + width: 100%; + height: 18px; + background: var(--progress-track); + border-radius: 4px; + overflow: hidden; +} + +.progress-size-bar { + position: absolute; + top: 0; + left: 0; + height: 100%; + background: linear-gradient(90deg, #3bc9ff, #22d3ee); + border-radius: 4px; + transition: width 0.15s ease; +} + +.progress-size-text { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 600; + font-variant-numeric: tabular-nums; + color: var(--text); + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + white-space: nowrap; +} + +.progress-size-small { + height: 14px; +} + +.progress-size-small .progress-size-text { + font-size: 9px; +} + .progress-inline { display: block; position: relative; @@ -1189,7 +1232,7 @@ td { .item-row { display: grid; - grid-template-columns: 1fr 70px 90px 90px 220px 180px 100px; + grid-template-columns: 1fr 70px 160px 220px 180px 100px; gap: 8px; align-items: center; margin: 0 -12px; @@ -1649,7 +1692,6 @@ td { } .pkg-column-header .pkg-col-progress, - .pkg-column-header .pkg-col-downloaded, .pkg-column-header .pkg-col-size, .pkg-column-header .pkg-col-hoster, .pkg-column-header .pkg-col-status, @@ -1658,7 +1700,6 @@ td { } .pkg-columns .pkg-col-progress, - .pkg-columns .pkg-col-downloaded, .pkg-columns .pkg-col-size, .pkg-columns .pkg-col-hoster, .pkg-columns .pkg-col-status,