Administrator/Multi-Debrid-Downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 596 Wiki Activity

tune(downloads): slow package disclosure motion

Browse Source
This commit is contained in:
Sucukdeluxe
2026-08-14 23:13:57 +02:00
parent 318a4f6913
commit 4d1127a802
3 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/downloads/download-disclosure-transition.ts
+1 -1
View File
@@ -5,7 +5,7 @@ import {
type DownloadVirtualWindowOptions type DownloadVirtualWindowOptions
} from "./download-virtualizer"; } from "./download-virtualizer";
export const DOWNLOAD_DISCLOSURE_DURATION_MS = 300; export const DOWNLOAD_DISCLOSURE_DURATION_MS = 600;
export const DOWNLOAD_DISCLOSURE_MAX_ANIMATED_ITEMS = 64; export const DOWNLOAD_DISCLOSURE_MAX_ANIMATED_ITEMS = 64;
export function scheduleDownloadDisclosureActivation( export function scheduleDownloadDisclosureActivation(
src/renderer/views/downloads/downloads.css
+4 -4
View File
@@ -290,7 +290,7 @@
position: relative; position: relative;
height: var(--downloads-virtual-total-height); height: var(--downloads-virtual-total-height);
min-height: 0; min-height: 0;
transition: height 300ms cubic-bezier(0.22, 1, 0.36, 1); transition: height 600ms cubic-bezier(0.22, 1, 0.36, 1);
} }
.downloads-virtual-row { .downloads-virtual-row {
@@ -299,7 +299,7 @@
height: var(--downloads-virtual-row-height); height: var(--downloads-virtual-row-height);
transform: translateY(var(--downloads-virtual-row-top)); transform: translateY(var(--downloads-virtual-row-top));
overflow: hidden; overflow: hidden;
transition: height 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms cubic-bezier(0.22, 1, 0.36, 1); transition: height 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
} }
.downloads-virtual-row > .downloads-package-card { .downloads-virtual-row > .downloads-package-card {
@@ -584,11 +584,11 @@
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.downloads-virtual-spacer { .downloads-virtual-spacer {
transition-duration: 300ms !important; transition-duration: 600ms !important;
} }
.downloads-virtual-row { .downloads-virtual-row {
transition-duration: 300ms, 300ms, 300ms !important; transition-duration: 600ms, 600ms, 600ms !important;
} }
.downloads-table.is-column-drag-active [data-download-column], .downloads-table.is-column-drag-active [data-download-column],
tests/downloads-view.test.tsx
+6 -4
View File
@@ -19,6 +19,7 @@ import {
type DownloadsModelInput type DownloadsModelInput
} from "../src/renderer/views/downloads/downloads-model"; } from "../src/renderer/views/downloads/downloads-model";
import { import {
DOWNLOAD_DISCLOSURE_DURATION_MS,
DOWNLOAD_DISCLOSURE_MAX_ANIMATED_ITEMS, DOWNLOAD_DISCLOSURE_MAX_ANIMATED_ITEMS,
activateDownloadDisclosureTransition, activateDownloadDisclosureTransition,
getDownloadDisclosurePinnedIds, getDownloadDisclosurePinnedIds,
@@ -277,8 +278,9 @@ describe("virtualisierte Paketanimation", () => {
it("behält die ausdrücklich gewünschte Paketbewegung auch bei reduzierten Systemanimationen bei", () => { it("behält die ausdrücklich gewünschte Paketbewegung auch bei reduzierten Systemanimationen bei", () => {
const css = fs.readFileSync(path.join(process.cwd(), "src/renderer/views/downloads/downloads.css"), "utf8"); const css = fs.readFileSync(path.join(process.cwd(), "src/renderer/views/downloads/downloads.css"), "utf8");
expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.downloads-virtual-spacer\s*\{[^}]*transition-duration:\s*300ms !important;/s); expect(DOWNLOAD_DISCLOSURE_DURATION_MS).toBe(600);
expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.downloads-virtual-row\s*\{[^}]*transition-duration:\s*300ms, 300ms, 300ms !important;/s); expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.downloads-virtual-spacer\s*\{[^}]*transition-duration:\s*600ms !important;/s);
expect(css).toMatch(/@media \(prefers-reduced-motion: reduce\)[\s\S]*\.downloads-virtual-row\s*\{[^}]*transition-duration:\s*600ms, 600ms, 600ms !important;/s);
}); });
it("behält ausfahrende Unterzeilen bis zum Animationsende und reduziert ihre Höhe auf null", () => { it("behält ausfahrende Unterzeilen bis zum Animationsende und reduziert ihre Höhe auf null", () => {
@@ -1046,8 +1048,8 @@ describe("downloads view", () => {
expect(css).toMatch(/:is\(\.downloads-status-full, \.downloads-status-compact, \.downloads-service-full, \.downloads-service-compact\)\s*\{[^}]*min-width:\s*0;[^}]*overflow:\s*hidden;[^}]*text-overflow:\s*ellipsis;[^}]*white-space:\s*nowrap;/s); expect(css).toMatch(/:is\(\.downloads-status-full, \.downloads-status-compact, \.downloads-service-full, \.downloads-service-compact\)\s*\{[^}]*min-width:\s*0;[^}]*overflow:\s*hidden;[^}]*text-overflow:\s*ellipsis;[^}]*white-space:\s*nowrap;/s);
expect(css).toMatch(/@container\s*\(max-width:\s*150px\)[\s\S]*\.downloads-status-full[^{]*\{[^}]*display:\s*none;[\s\S]*\.downloads-status-compact[^{]*\{[^}]*display:\s*block;/s); expect(css).toMatch(/@container\s*\(max-width:\s*150px\)[\s\S]*\.downloads-status-full[^{]*\{[^}]*display:\s*none;[\s\S]*\.downloads-status-compact[^{]*\{[^}]*display:\s*block;/s);
expect(css).toMatch(/@container\s*\(max-width:\s*150px\)[\s\S]*\.downloads-service-full[^{]*\{[^}]*display:\s*none;[\s\S]*\.downloads-service-compact[^{]*\{[^}]*display:\s*block;/s); expect(css).toMatch(/@container\s*\(max-width:\s*150px\)[\s\S]*\.downloads-service-full[^{]*\{[^}]*display:\s*none;[\s\S]*\.downloads-service-compact[^{]*\{[^}]*display:\s*block;/s);
expect(css).toMatch(/\.downloads-virtual-spacer\s*\{[^}]*transition:\s*height 300ms cubic-bezier\(0\.22, 1, 0\.36, 1\);/s); expect(css).toMatch(/\.downloads-virtual-spacer\s*\{[^}]*transition:\s*height 600ms cubic-bezier\(0\.22, 1, 0\.36, 1\);/s);
expect(css).toMatch(/\.downloads-virtual-row\s*\{[^}]*transition:\s*height 300ms[^;]*transform 300ms[^;]*opacity 300ms/s); expect(css).toMatch(/\.downloads-virtual-row\s*\{[^}]*transition:\s*height 600ms[^;]*transform 600ms[^;]*opacity 600ms/s);
expect(css).toMatch(/\.downloads-footer\s*\{[^}]*height:\s*60px;[^}]*padding:\s*0 12px 0 60px;/s); expect(css).toMatch(/\.downloads-footer\s*\{[^}]*height:\s*60px;[^}]*padding:\s*0 12px 0 60px;/s);
expect(css).toMatch(/\.downloads-package-card\s*\{[^}]*border:\s*0;[^}]*border-bottom:\s*1px solid color-mix\(in srgb, var\(--ui-border\) 72%, transparent\);[^}]*padding:\s*0;/s); expect(css).toMatch(/\.downloads-package-card\s*\{[^}]*border:\s*0;[^}]*border-bottom:\s*1px solid color-mix\(in srgb, var\(--ui-border\) 72%, transparent\);[^}]*padding:\s*0;/s);
expect(css).toMatch(/\.downloads-package-card\s*\{[^}]*box-shadow:\s*none;/s); expect(css).toMatch(/\.downloads-package-card\s*\{[^}]*box-shadow:\s*none;/s);