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

fix(downloads): harden queue drag and reorder behavior

Browse Source
This commit is contained in:
NimBold
2026-07-23 07:40:02 +03:30
parent 18e9200b74
commit 9302911ac7
6 changed files with 388 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.css
+63 -3
View File
@@ -1981,20 +1981,24 @@ html[data-list-density="relaxed"] {
gap: 7px;
min-width: 0;
max-width: 420px;
overflow: hidden;
min-height: 17px;
overflow: visible;
color: hsl(var(--text-muted));
font-size: 10px;
font-weight: 500;
line-height: 1;
line-height: 1.2;
letter-spacing: 0;
white-space: nowrap;
text-overflow: ellipsis;
}
.downloads-queue-reorder-hint > span:first-child {
display: block;
min-width: 0;
overflow: hidden;
padding-block: 1px;
text-overflow: ellipsis;
line-height: 1.2;
}
.downloads-queue-reorder-shortcut {
@@ -2213,6 +2217,55 @@ body.is-column-resizing .column-resize-handle:hover::after {
background: hsl(var(--accent-color));
box-shadow: 0 0 0 1px hsl(var(--accent-color) / 0.18), 0 0 8px hsl(var(--accent-color) / 0.55);
transform: translateY(-1px);
transition: top 100ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 100ms ease;
will-change: top;
}
.download-queue-drag-preview {
position: absolute;
inset-inline: 0;
z-index: 10;
display: flex;
align-items: center;
gap: 10px;
height: var(--download-row-height);
margin: var(--download-row-margin) 0;
padding: 0 var(--download-row-padding-x);
overflow: hidden;
border: 1px solid hsl(var(--accent-color) / 0.58);
border-radius: 6px;
background: hsl(var(--surface-overlay) / 0.94);
box-shadow: 0 8px 20px hsl(0 0% 0% / 0.28), 0 0 0 1px hsl(var(--accent-color) / 0.14);
color: hsl(var(--text-primary));
font-size: var(--download-row-font-size);
pointer-events: none;
transform: translateZ(0);
transition: top 70ms linear;
will-change: top;
}
.download-queue-drag-preview-icon {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
}
.download-queue-drag-preview-name {
min-width: 0;
overflow: hidden;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.download-queue-drag-preview-count {
flex: 0 0 auto;
padding: 2px 6px;
border-radius: 999px;
background: hsl(var(--accent-color) / 0.2);
color: hsl(var(--text-primary));
font-size: 10px;
font-weight: 700;
}
.download-row {
@@ -2267,18 +2320,25 @@ html[data-list-density="relaxed"] .download-ghost-row {
}
.download-row.is-queue-drag-source {
opacity: 0.48;
opacity: 0.16;
box-shadow: inset 0 0 0 1px hsl(var(--accent-color) / 0.3);
}
.download-row.is-queue-reorderable {
cursor: grab;
touch-action: none;
transition: background-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.download-row.is-queue-reorderable:active {
cursor: grabbing;
}
body.is-queue-dragging,
body.is-queue-dragging * {
cursor: grabbing !important;
}
.download-row:focus-visible {
outline: 2px solid hsl(var(--accent-color) / 0.7);
outline-offset: -1px;