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

fix(ui): stabilize download table column interactions

Browse Source
This commit is contained in:
NimBold
2026-07-22 10:33:41 +03:30
parent 20a136cd1f
commit 16377aa0d6
5 changed files with 197 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DownloadItem.tsx
+13 -8
View File
@@ -11,6 +11,7 @@ import {
} from '../utils/downloadProgress';
import {
COLUMN_ALIGNMENT_JUSTIFY,
getColumnGridColumn,
type DownloadColumnAlignment,
type DownloadTableColumnKey
} from '../utils/downloadTableColumns';
@@ -23,7 +24,7 @@ interface DownloadItemProps {
columnOrder: DownloadTableColumnKey[];
columnAlignments: Record<DownloadTableColumnKey, DownloadColumnAlignment>;
tableGridTemplate: string;
tableMinWidth: number;
tableMinWidth: number | string;
setContextMenu: (menu: { x: number; y: number; id: string }) => void;
handlePause: (id: string, skipConfirm?: boolean) => void;
handleResume: (item: DownloadItemType) => void;
@@ -94,12 +95,16 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
const columnStyle = (key: DownloadTableColumnKey): React.CSSProperties => ({
'--column-justify': COLUMN_ALIGNMENT_JUSTIFY[columnAlignments[key]],
gridColumn: getColumnGridColumn(key, columnOrder),
} as React.CSSProperties);
const trailingColumnClass = (key: DownloadTableColumnKey) =>
key === columnOrder[columnOrder.length - 1] ? 'download-column-cell--trailing' : '';
const cells: Record<DownloadTableColumnKey, React.ReactNode> = {
'File Name': (
<div
className="download-column-cell download-file-cell download-column-file-name"
className={`download-column-cell download-file-cell download-column-file-name ${trailingColumnClass('File Name')}`}
style={columnStyle('File Name')}
>
<div className="download-cell-content">
@@ -114,7 +119,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
),
Size: (
<div
className="download-column-cell download-cell-truncate download-size-cell tabular-nums"
className={`download-column-cell download-cell-truncate download-size-cell tabular-nums ${trailingColumnClass('Size')}`}
style={columnStyle('Size')}
title={hasDownloadedAmount ? downloadedSizeLabel : completedSizeLabel}
aria-label={hasDownloadedAmount ? downloadedSizeLabel : completedSizeLabel}
@@ -136,7 +141,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
),
Status: (
<div
className="download-column-cell download-status-cell"
className={`download-column-cell download-status-cell ${trailingColumnClass('Status')}`}
style={columnStyle('Status')}
>
{download.status === 'completed' ? (
@@ -197,23 +202,23 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
</div>
),
Speed: (
<div className="download-column-cell download-cell-truncate" style={columnStyle('Speed')}>
<div className={`download-column-cell download-cell-truncate ${trailingColumnClass('Speed')}`} style={columnStyle('Speed')}>
<span className="download-cell-content tabular-nums" title={displaySpeed}>
{displaySpeed}
</span>
</div>
),
ETA: (
<div className="download-column-cell download-cell-truncate" style={columnStyle('ETA')}>
<div className={`download-column-cell download-cell-truncate ${trailingColumnClass('ETA')}`} style={columnStyle('ETA')}>
<span className="download-cell-content tabular-nums" title={displayEta}>
{displayEta}
</span>
</div>
),
'Date Added': (
<div className="download-column-cell download-cell-right download-column-date-added" style={columnStyle('Date Added')}>
<div className={`download-column-cell download-cell-right download-column-date-added ${trailingColumnClass('Date Added')}`} style={columnStyle('Date Added')}>
<span
className="download-cell-content download-date-value group-hover:hidden tabular-nums"
className="download-cell-content download-date-value tabular-nums"
title={download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'}
>
{download.dateAdded ? new Date(download.dateAdded).toLocaleDateString() : '-'}