gsadmin/Firelink
1
0
Fork 0
mirror of https://github.com/nimbold/Firelink.git synced 2026-08-07 18:03:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): truncate download table cells correctly

Browse Source
This commit is contained in:
NimBold
2026-06-18 19:53:33 +03:30
parent 645d566540
commit 62945a5516
2 changed files with 46 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DownloadItem.tsx
+33 -10
View File
@@ -45,12 +45,15 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
}
if (statusTextRef.current) {
statusTextRef.current.innerText = `${(progress.fraction * 100).toFixed(0)}%`;
statusTextRef.current.title = `${(progress.fraction * 100).toFixed(0)}%`;
}
if (speedTextRef.current) {
speedTextRef.current.innerText = progress.speed;
speedTextRef.current.title = progress.speed;
}
if (etaTextRef.current) {
etaTextRef.current.innerText = progress.eta;
etaTextRef.current.title = progress.eta;
}
});
@@ -78,14 +81,14 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
</div>
<div className="download-cell-truncate">
<span className="tabular-nums">
<span className="tabular-nums" title={download.size && download.size !== '-' ? download.size : 'Unknown'}>
{download.size && download.size !== '-' ? download.size : 'Unknown'}
</span>
</div>
<div className="download-status-cell">
{download.status === 'completed' ? (
<span className="download-status download-status-completed">Completed</span>
<span className="download-status download-status-completed" title="Completed">Completed</span>
) : (
<>
<div className="download-progress-track">
@@ -101,10 +104,19 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
/>
</div>
<span
ref={statusTextRef}
className={`download-status flex items-center gap-1.5 ${
download.status === 'paused' ? 'download-status-paused' :
download.status === 'failed' ? 'download-status-failed' :
ref={statusTextRef}
title={
download.status === 'queued' && queueIndex !== -1
? `Queued #${queueIndex + 1}`
: download.status === 'downloading'
? `${((download.fraction || 0) * 100).toFixed(0)}%`
: download.status === 'processing'
? 'Processing'
: download.status.charAt(0).toUpperCase() + download.status.slice(1)
}
className={`download-status flex items-center gap-1.5 ${
download.status === 'paused' ? 'download-status-paused' :
download.status === 'failed' ? 'download-status-failed' :
download.status === 'processing' ? 'download-status-processing' :
download.status === 'downloading' ? 'download-status-downloading' :
download.status === 'queued' ? 'download-status-queued' :
@@ -129,19 +141,30 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
</div>
<div className="download-cell-truncate">
<span ref={speedTextRef} className="tabular-nums">
<span
ref={speedTextRef}
className="tabular-nums"
title={download.status === 'downloading' ? download.speed : download.status === 'processing' ? 'Processing…' : '-'}
>
{download.status === 'downloading' ? download.speed : download.status === 'processing' ? 'Processing…' : '-'}
</span>
</div>
<div className="download-cell-truncate">
<span ref={etaTextRef} className="tabular-nums">
<span
ref={etaTextRef}
className="tabular-nums"
title={download.status === 'downloading' ? download.eta : download.status === 'processing' ? 'Muxing…' : '-'}
>
{download.status === 'downloading' ? download.eta : download.status === 'processing' ? 'Muxing…' : '-'}
</span>
</div>
<div className="download-cell-right">
<span className="truncate group-hover:hidden tabular-nums ml-auto">
<span
className="truncate group-hover:hidden tabular-nums ml-auto"
title={download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'}
>
{download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'}
</span>
src/index.css
+13 -6
View File
@@ -1034,10 +1034,13 @@
display: flex;
align-items: center;
min-width: 0;
overflow: hidden;
}
.download-cell-truncate > span,
.download-cell-right > span {
display: block;
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
@@ -1087,12 +1090,16 @@
overflow: hidden;
}
.download-status-cell > span {
min-width: 48px;
flex-shrink: 0;
font-size: 10px;
font-variant-numeric: tabular-nums;
}
.download-status-cell > span {
min-width: 0;
max-width: 100%;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10px;
font-variant-numeric: tabular-nums;
}
.download-progress-track {
width: 100%;