mirror of
https://github.com/nimbold/Firelink.git
synced 2026-08-27 11:07:08 +00:00
fix(ui): add missing styling for queued/retrying states and processing speed labels
- Add --status-queued and --status-retrying CSS vars to all theme blocks - Add .download-status-queued/.download-status-retrying CSS classes - Add .download-progress-fill.queued/.retrying with pulse animation for retrying - Wire retrying status into hover action buttons and context menu (pause/resume/redownload) - Show 'Processing…'/'Muxing…' text in speed/ETA columns during processing state - Fix light theme: add missing --status-* vars to :root block
This commit is contained in:
@@ -94,7 +94,8 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
|
|||||||
className={`download-progress-fill ${
|
className={`download-progress-fill ${
|
||||||
download.status === 'paused' ? 'paused' :
|
download.status === 'paused' ? 'paused' :
|
||||||
download.status === 'processing' ? 'processing' :
|
download.status === 'processing' ? 'processing' :
|
||||||
download.status === 'queued' ? 'queued' : ''
|
download.status === 'queued' ? 'queued' :
|
||||||
|
download.status === 'retrying' ? 'retrying' : ''
|
||||||
}`}
|
}`}
|
||||||
style={{ width: `${(download.fraction || 0) * 100}%` }}
|
style={{ width: `${(download.fraction || 0) * 100}%` }}
|
||||||
/>
|
/>
|
||||||
@@ -106,7 +107,8 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
|
|||||||
download.status === 'failed' ? 'download-status-failed' :
|
download.status === 'failed' ? 'download-status-failed' :
|
||||||
download.status === 'processing' ? 'download-status-processing' :
|
download.status === 'processing' ? 'download-status-processing' :
|
||||||
download.status === 'downloading' ? 'download-status-downloading' :
|
download.status === 'downloading' ? 'download-status-downloading' :
|
||||||
download.status === 'queued' ? 'download-status-queued' : ''
|
download.status === 'queued' ? 'download-status-queued' :
|
||||||
|
download.status === 'retrying' ? 'download-status-retrying' : ''
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{download.status === 'queued' && queueIndex !== -1 ? (
|
{download.status === 'queued' && queueIndex !== -1 ? (
|
||||||
@@ -127,11 +129,15 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span ref={speedTextRef} className="tabular-nums">{download.status === 'downloading' ? download.speed : '-'}</span>
|
<span ref={speedTextRef} className="tabular-nums">
|
||||||
|
{download.status === 'downloading' ? download.speed : download.status === 'processing' ? 'Processing…' : '-'}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span ref={etaTextRef} className="tabular-nums">{download.status === 'downloading' ? download.eta : '-'}</span>
|
<span ref={etaTextRef} className="tabular-nums">
|
||||||
|
{download.status === 'downloading' ? download.eta : download.status === 'processing' ? 'Muxing…' : '-'}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="download-cell-right">
|
<div className="download-cell-right">
|
||||||
@@ -160,7 +166,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
|
|||||||
</button>
|
</button>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{(download.status === 'downloading' || download.status === 'processing') && (
|
{(download.status === 'downloading' || download.status === 'processing' || download.status === 'retrying') && (
|
||||||
<button onClick={() => handlePause(download.id)} className="app-icon-button h-7 w-7" title="Pause">
|
<button onClick={() => handlePause(download.id)} className="app-icon-button h-7 w-7" title="Pause">
|
||||||
<Pause size={14} fill="currentColor" />
|
<Pause size={14} fill="currentColor" />
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -281,7 +281,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
|||||||
|
|
||||||
<div className="h-[1px] bg-border-modal/60 my-1.5 mx-2"></div>
|
<div className="h-[1px] bg-border-modal/60 my-1.5 mx-2"></div>
|
||||||
|
|
||||||
{(contextItem.status === 'downloading' || contextItem.status === 'queued') && (
|
{(contextItem.status === 'downloading' || contextItem.status === 'queued' || contextItem.status === 'retrying') && (
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setContextMenu(null);
|
setContextMenu(null);
|
||||||
@@ -293,7 +293,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(contextItem.status === 'paused' || contextItem.status === 'failed') && (
|
{(contextItem.status === 'paused' || contextItem.status === 'failed' || contextItem.status === 'retrying') && (
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setContextMenu(null);
|
setContextMenu(null);
|
||||||
@@ -305,7 +305,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
|||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{['completed', 'failed', 'paused'].includes(contextItem.status) && (
|
{['completed', 'failed', 'paused', 'retrying'].includes(contextItem.status) && (
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setContextMenu(null);
|
setContextMenu(null);
|
||||||
|
|||||||
@@ -24,6 +24,12 @@
|
|||||||
--sidebar-panel-bg: 0 0% 95%;
|
--sidebar-panel-bg: 0 0% 95%;
|
||||||
--workspace-bg: 0 0% 98%;
|
--workspace-bg: 0 0% 98%;
|
||||||
--statusbar-bg: 0 0% 96%;
|
--statusbar-bg: 0 0% 96%;
|
||||||
|
--status-completed: 136 62% 48%;
|
||||||
|
--status-paused: 0 0% 56%;
|
||||||
|
--status-downloading: 211 100% 56%;
|
||||||
|
--status-failed: 0 62% 58%;
|
||||||
|
--status-queued: 38 92% 50%;
|
||||||
|
--status-retrying: 50 100% 50%;
|
||||||
--sidebar-border: 0 0% 0% / 0.12;
|
--sidebar-border: 0 0% 0% / 0.12;
|
||||||
--sidebar-hover: 0 0% 0% / 0.06;
|
--sidebar-hover: 0 0% 0% / 0.06;
|
||||||
}
|
}
|
||||||
@@ -78,6 +84,8 @@
|
|||||||
--status-paused: 0 0% 56%;
|
--status-paused: 0 0% 56%;
|
||||||
--status-downloading: 211 100% 56%;
|
--status-downloading: 211 100% 56%;
|
||||||
--status-failed: 0 62% 58%;
|
--status-failed: 0 62% 58%;
|
||||||
|
--status-queued: 38 95% 55%;
|
||||||
|
--status-retrying: 50 100% 60%;
|
||||||
--sidebar-shell-bg: 0 0% 11%;
|
--sidebar-shell-bg: 0 0% 11%;
|
||||||
--sidebar-panel-bg: 0 0% 13%;
|
--sidebar-panel-bg: 0 0% 13%;
|
||||||
--workspace-bg: 0 0% 11%;
|
--workspace-bg: 0 0% 11%;
|
||||||
@@ -109,6 +117,8 @@
|
|||||||
--status-paused: 65 92% 76%;
|
--status-paused: 65 92% 76%;
|
||||||
--status-downloading: 191 97% 77%;
|
--status-downloading: 191 97% 77%;
|
||||||
--status-failed: 0 100% 67%;
|
--status-failed: 0 100% 67%;
|
||||||
|
--status-queued: 38 95% 60%;
|
||||||
|
--status-retrying: 50 100% 65%;
|
||||||
--sidebar-shell-bg: 231 15% 15%;
|
--sidebar-shell-bg: 231 15% 15%;
|
||||||
--sidebar-panel-bg: 232 14% 23%;
|
--sidebar-panel-bg: 232 14% 23%;
|
||||||
--workspace-bg: 231 15% 18%;
|
--workspace-bg: 231 15% 18%;
|
||||||
@@ -140,6 +150,8 @@
|
|||||||
--status-paused: 40 71% 73%;
|
--status-paused: 40 71% 73%;
|
||||||
--status-downloading: 193 43% 67%;
|
--status-downloading: 193 43% 67%;
|
||||||
--status-failed: 354 42% 56%;
|
--status-failed: 354 42% 56%;
|
||||||
|
--status-queued: 40 71% 60%;
|
||||||
|
--status-retrying: 50 85% 55%;
|
||||||
--sidebar-shell-bg: 220 18% 18%;
|
--sidebar-shell-bg: 220 18% 18%;
|
||||||
--sidebar-panel-bg: 220 17% 27%;
|
--sidebar-panel-bg: 220 17% 27%;
|
||||||
--workspace-bg: 220 16% 22%;
|
--workspace-bg: 220 16% 22%;
|
||||||
@@ -1069,6 +1081,15 @@
|
|||||||
background: hsl(199 89% 48%);
|
background: hsl(199 89% 48%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.download-progress-fill.queued {
|
||||||
|
background: hsl(var(--status-queued));
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-progress-fill.retrying {
|
||||||
|
background: hsl(var(--status-retrying));
|
||||||
|
animation: pulse-progress 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
.download-status {
|
.download-status {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
@@ -1097,6 +1118,16 @@
|
|||||||
color: hsl(199 89% 48%);
|
color: hsl(199 89% 48%);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.download-status-queued {
|
||||||
|
color: hsl(var(--status-queued));
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.download-status-retrying {
|
||||||
|
color: hsl(var(--status-retrying));
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.glass-panel {
|
.glass-panel {
|
||||||
@@ -1143,6 +1174,11 @@
|
|||||||
to { opacity: 1; }
|
to { opacity: 1; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-progress {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.6; }
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes modal-in {
|
@keyframes modal-in {
|
||||||
from { opacity: 0; transform: scale(0.98); }
|
from { opacity: 0; transform: scale(0.98); }
|
||||||
to { opacity: 1; transform: scale(1); }
|
to { opacity: 1; transform: scale(1); }
|
||||||
|
|||||||
Reference in New Issue
Block a user