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

release: publish v2.0.21 responsive accessibility audit

Browse Source 
Refine all primary views across supported desktop widths, preserve compact download actions, strengthen keyboard and assistive semantics, confirm irreversible actions, complete new bilingual UI strings, and unify live speed visualization colors.
This commit is contained in:
Sucukdeluxe
2026-08-11 06:03:07 +02:00
parent eda3a3f744
commit 6c5946c88d
28 changed files with 1361 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/App.tsx
+120 -55
View File
@@ -1317,6 +1317,14 @@ export function readBandwidthChartPalette(
};
}
export function readDownloadSpeedSparklinePalette(
readProperty: (property: string) => string
): { accent: string } {
return {
accent: readProperty("--ui-speed-accent").trim()
};
}
export function appendBandwidthSample(
history: { time: number; speed: number }[],
speed: number,
@@ -1462,14 +1470,15 @@ const BandwidthChart = memo(function BandwidthChart({ running, paused, speedHist
ctx.fill();
}, [running, paused]);
useEffect(() => {
drawChart();
if (!running || paused) {
return;
}
const interval = setInterval(() => {
drawChart();
}, 250);
useEffect(() => {
drawChart();
if (!running || paused) {
return;
}
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const interval = setInterval(() => {
drawChart();
}, reducedMotion ? 1000 : 250);
return () => clearInterval(interval);
}, [drawChart, running, paused]);
@@ -1492,11 +1501,13 @@ const BandwidthChart = memo(function BandwidthChart({ running, paused, speedHist
drawChart();
}, [drawChart, paused]);
return (
<div ref={containerRef} className="bandwidth-chart-container">
<canvas ref={canvasRef} />
</div>
);
return (
<div ref={containerRef} className="bandwidth-chart-container">
<canvas aria-label="Bandbreitenverlauf der letzten 60 Sekunden" ref={canvasRef} role="img">
Bandbreitenverlauf der letzten 60 Sekunden
</canvas>
</div>
);
});
interface DownloadSpeedSparklineProps {
@@ -1528,9 +1539,8 @@ const DownloadSpeedSparkline = memo(function DownloadSpeedSparkline({ speedBps,
const hist = speedStateRef.current.history;
if (hist.length < 2) return;
const isDark = document.documentElement.getAttribute("data-theme") !== "light";
const accent = isDark ? "#f2942d" : "#c2701a";
const fill = isDark ? "rgba(242, 148, 45, 0.16)" : "rgba(194, 112, 26, 0.16)";
const rootStyle = getComputedStyle(document.documentElement);
const palette = readDownloadSpeedSparklinePalette((property) => rootStyle.getPropertyValue(property));
let maxV = 0;
for (const v of hist) if (v > maxV) maxV = v;
@@ -1549,13 +1559,16 @@ const DownloadSpeedSparkline = memo(function DownloadSpeedSparkline({ speedBps,
ctx.lineTo(px(hist.length - 1), pad + h);
ctx.lineTo(px(0), pad + h);
ctx.closePath();
ctx.fillStyle = fill;
ctx.fill();
ctx.save();
ctx.globalAlpha = 0.16;
ctx.fillStyle = palette.accent;
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.moveTo(px(0), py(hist[0]));
for (let i = 1; i < hist.length; i += 1) ctx.lineTo(px(i), py(hist[i]));
ctx.strokeStyle = accent;
ctx.strokeStyle = palette.accent;
ctx.lineWidth = 1.5;
ctx.lineJoin = "round";
ctx.stroke();
@@ -3883,20 +3896,37 @@ export function App(): ReactElement {
};
const removeCollectorTab = (id: string): void => {
const removal = planCollectorTabRemoval(
collectorTabsRef.current,
activeCollectorTabRef.current,
id
);
if (removal.tabs === collectorTabsRef.current) {
const tab = collectorTabsRef.current.find((entry) => entry.id === id);
if (!tab || collectorTabsRef.current.length <= 1) {
return;
}
collectorTabsRef.current = removal.tabs;
activeCollectorTabRef.current = removal.activeTabId;
setCollectorTabs(removal.tabs);
setActiveCollectorTab(removal.activeTabId);
setSelectedCollectorRowIds(new Set());
setCollectorError("");
const linkCount = tab.text.split(/\r?\n/).filter((line) => line.trim().length > 0).length;
void askConfirmPrompt({
title: "Sammlung entfernen",
message: linkCount > 0
? `Soll die Sammlung ${tab.name} mit ${linkCount} Link(s) wirklich entfernt werden?`
: `Soll die leere Sammlung ${tab.name} wirklich entfernt werden?`,
confirmLabel: "Sammlung entfernen",
danger: true
}).then((confirmed) => {
if (!confirmed) {
return;
}
const removal = planCollectorTabRemoval(
collectorTabsRef.current,
activeCollectorTabRef.current,
id
);
if (removal.tabs === collectorTabsRef.current) {
return;
}
collectorTabsRef.current = removal.tabs;
activeCollectorTabRef.current = removal.activeTabId;
setCollectorTabs(removal.tabs);
setActiveCollectorTab(removal.activeTabId);
setSelectedCollectorRowIds(new Set());
setCollectorError("");
});
};
const openCollectorInput = (): void => {
@@ -3957,11 +3987,24 @@ export function App(): ReactElement {
indexes.add(index);
}
}
setCollectorTabs((prev) => prev.map((entry) => entry.id === activeId
? { ...entry, text: entry.text.split(/\r?\n/).filter((_line, index) => !indexes.has(index)).join("\n") }
: entry));
setSelectedCollectorRowIds(new Set());
setCollectorError("");
if (indexes.size === 0) {
return;
}
void askConfirmPrompt({
title: "Ausgewählte Links löschen",
message: "Die ausgewählten Links werden aus der Sammlung entfernt. Dieser Schritt kann nicht rückgängig gemacht werden.",
confirmLabel: "Links löschen",
danger: true
}).then((confirmed) => {
if (!confirmed) {
return;
}
setCollectorTabs((prev) => prev.map((entry) => entry.id === activeId
? { ...entry, text: entry.text.split(/\r?\n/).filter((_line, index) => !indexes.has(index)).join("\n") }
: entry));
setSelectedCollectorRowIds(new Set());
setCollectorError("");
});
};
const onPackageStartEdit = useCallback((packageId: string, packageName: string): void => {
@@ -5067,17 +5110,37 @@ export function App(): ReactElement {
const statisticsActions: StatisticsViewActions = {
onRangeChange: setStatisticsRange,
onResetSession: () => {
void window.rd.resetSessionStats().then(() => {
showToast("Session-Statistik zurückgesetzt", 1800);
}).catch((error) => {
showToast(`Session-Reset fehlgeschlagen: ${String(error)}`, 2400);
void askConfirmPrompt({
title: "Sitzungsstatistik zurücksetzen",
message: "Die Zähler, Downloadmenge und Geschwindigkeitsdaten der aktuellen Sitzung werden gelöscht. Dieser Schritt kann nicht rückgängig gemacht werden.",
confirmLabel: "Sitzung zurücksetzen",
danger: true
}).then((confirmed) => {
if (!confirmed) {
return;
}
return window.rd.resetSessionStats().then(() => {
showToast("Session-Statistik zurückgesetzt", 1800);
}).catch((error) => {
showToast(`Session-Reset fehlgeschlagen: ${String(error)}`, 2400);
});
});
},
onResetAll: () => {
void window.rd.resetDownloadStats().then(() => {
showToast("Gesamt-Downloadstatistik zurückgesetzt", 1800);
}).catch((error) => {
showToast(`Download-Reset fehlgeschlagen: ${String(error)}`, 2400);
void askConfirmPrompt({
title: "Gesamtstatistik zurücksetzen",
message: "Alle dauerhaft gespeicherten Download- und Providerstatistiken werden gelöscht. Dieser Schritt kann nicht rückgängig gemacht werden.",
confirmLabel: "Gesamt zurücksetzen",
danger: true
}).then((confirmed) => {
if (!confirmed) {
return;
}
return window.rd.resetDownloadStats().then(() => {
showToast("Gesamt-Downloadstatistik zurückgesetzt", 1800);
}).catch((error) => {
showToast(`Download-Reset fehlgeschlagen: ${String(error)}`, 2400);
});
});
},
onResetErrors: () => {
@@ -6457,17 +6520,19 @@ export function App(): ReactElement {
return (
<>
<span className="col-key">{ki + 1}</span>
<span
className="col-masked link-popup-click"
title={`${key.masked}\nKlicken zum Kopieren`}
onClick={() => {
<button
aria-label={`${key.label} kopieren`}
className="col-masked link-popup-click"
type="button"
title={`${key.masked}\nKlicken zum Kopieren`}
onClick={() => {
void navigator.clipboard.writeText(key.token)
.then(() => showToast(`${key.label} kopiert`, 1800))
.catch(() => showToast("Kopieren fehlgeschlagen", 2200));
}}
>
{key.masked}
</span>
.catch(() => showToast("Kopieren fehlgeschlagen", 2200));
}}
>
{key.masked}
</button>
<span className="col-usage">{humanSize(key.dailyUsedBytes)}</span>
<span className="col-limit">{key.disabled ? "Deaktiviert" : key.dailyLimitBytes > 0 ? humanSize(key.dailyLimitBytes) : "Kein Limit"}</span>
<span className={`col-status status-pill status-pill-${statusDisplay.tone}`} title={statusDisplay.title}>{statusDisplay.label}</span>
@@ -6519,8 +6584,8 @@ export function App(): ReactElement {
<div className="link-popup-list">
{linkPopup.links.map((link, i) => (
<div key={i} className="link-popup-row">
<span className="link-popup-name link-popup-click" title={`${link.name}\nKlicken zum Kopieren`} onClick={() => { void navigator.clipboard.writeText(link.name).then(() => showToast("Name kopiert")).catch(() => showToast("Kopieren fehlgeschlagen")); }}>{link.name}</span>
<span className="link-popup-url link-popup-click" title={`${link.url}\nKlicken zum Kopieren`} onClick={() => { void navigator.clipboard.writeText(link.url).then(() => showToast("Link kopiert")).catch(() => showToast("Kopieren fehlgeschlagen")); }}>{link.url}</span>
<button aria-label={`${link.name} kopieren`} className="link-popup-name link-popup-click" type="button" title={`${link.name}\nKlicken zum Kopieren`} onClick={() => { void navigator.clipboard.writeText(link.name).then(() => showToast("Name kopiert")).catch(() => showToast("Kopieren fehlgeschlagen")); }}>{link.name}</button>
<button aria-label="Link kopieren" className="link-popup-url link-popup-click" type="button" title={`${link.url}\nKlicken zum Kopieren`} onClick={() => { void navigator.clipboard.writeText(link.url).then(() => showToast("Link kopiert")).catch(() => showToast("Kopieren fehlgeschlagen")); }}>{link.url}</button>
</div>
))}
</div>
src/renderer/i18n.ts
+37 -10
View File
@@ -53,7 +53,7 @@ const pairs = [
["Alle Einträge", "All entries"], ["Heute", "Today"], ["Letzte 7 Tage", "Last 7 days"], ["Älter", "Older"], ["Gelöscht", "Deleted"], ["Fehlgeschlagen", "Failed"],
["Dauer", "Duration"], ["Durchschnitt", "Average"], ["Zielordner", "Destination folder"], ["Verlaufsfilter", "History filters"], ["Verlauf leeren", "Clear history"], ["Verlaufsaktionen", "History actions"],
["Einträge", "Entries"], ["Erneut hinzufügen", "Add again"], ["Im Ordner zeigen", "Show in folder"], ["Auswahl löschen", "Clear selection"], ["Verlauf durchsuchen", "Search history"], ["Name, Pfad, Hoster oder Provider", "Name, path, hoster or provider"],
["Verlaufstabelle", "History table"], ["Verlauf wird geladen", "Loading history"], ["Die gespeicherten Einträge werden geladen.", "Saved entries are being loaded."], ["Noch kein Verlauf", "No history yet"], ["Keine passenden Einträge", "No matching entries"],
["Verlaufstabelle", "History table"], ["Verlaufsseiten", "History pages"], ["Vorherige Verlaufsseite", "Previous history page"], ["Nächste Verlaufsseite", "Next history page"], ["Zurück", "Back"], ["Vor", "Next"], ["Verlauf wird geladen", "Loading history"], ["Die gespeicherten Einträge werden geladen.", "Saved entries are being loaded."], ["Verlauf wird geladen. Die gespeicherten Einträge werden geladen.", "History is loading. Saved entries are being loaded."], ["Noch kein Verlauf", "No history yet"], ["Keine passenden Einträge", "No matching entries"],
["Abgeschlossene und gelöschte Pakete erscheinen hier.", "Completed and deleted packages appear here."], ["Passe Filter oder Suche an.", "Adjust the filter or search."], ["Öffne die Ansicht erneut, um es noch einmal zu versuchen.", "Open the view again to retry."],
["Alle sichtbaren Einträge auswählen", "Select all visible entries"], ["Details anzeigen", "Show details"], ["Details ausblenden", "Hide details"],
["Sichtbar:", "Visible:"], ["pro Seite", "per page"],
@@ -62,16 +62,16 @@ const pairs = [
["Keine Links gesammelt", "No links collected"], ["Keine passenden Links", "No matching links"], ["Füge Links oder Text ein, um sie zu sammeln.", "Paste links or text to collect them."], ["Links durchsuchen", "Search links"],
["Datenmenge", "Data volume"], ["Sitzungszähler", "Session counter"], ["Sieben Tage", "Seven days"], ["30 Tage", "30 days"], ["Zeitraum", "Period"], ["Erfolgreich", "Successful"],
["Sitzungszähler und Ergebnisse der aktuellen Queue werden angezeigt.", "Session counters and results for the current queue are shown."], ["Sitzung zurücksetzen", "Reset session"], ["Gesamt zurücksetzen", "Reset total"], ["Fehler zurücksetzen", "Reset errors"],
["Bandbreitenverlauf", "Bandwidth history"], ["Provider", "Provider"], ["Daten", "Data"], ["Ergebnisse", "Results"],
["Bandbreitenverlauf", "Bandwidth history"], ["Bandbreitenverlauf der letzten 60 Sekunden", "Bandwidth history for the last 60 seconds"], ["Provider", "Provider"], ["Daten", "Data"], ["Ergebnisse", "Results"],
["Nie", "Never"], ["Sofort", "Immediately"], ["Beim App-Start", "On app startup"], ["Sobald Paket fertig ist", "When package completes"], ["Überschreiben", "Overwrite"], ["Überspringen", "Skip"], ["Nachfragen", "Ask"],
["Abbrechen", "Cancel"], ["Speichern", "Save"], ["Schließen", "Close"], ["Löschen", "Delete"], ["Suchen", "Search"], ["Zurücksetzen", "Reset"], ["Testen", "Test"], ["Öffnen", "Open"],
["Noch keine Downloads", "No downloads yet"], ["Füge Links hinzu, um den ersten Download zu starten.", "Add links to start the first download."], ["Keine passenden Downloads", "No matching downloads"], ["Alle anzeigen", "Show all"],
["Neue Sammlung", "New collection"], ["Linksammler-Aktionen", "Link collector actions"], ["Links erfassen", "Capture links"], ["DLC importieren", "Import DLC"], ["Datei importieren", "Import file"],
["Sammlung verarbeiten", "Process collection"], ["Queue exportieren", "Export queue"], ["An Downloads übergeben", "Send to downloads"], ["Auswahl entfernen", "Remove selection"], ["Gesammelte Links", "Collected links"],
["Sammlung verarbeiten", "Process collection"], ["Queue exportieren", "Export queue"], ["An Downloads übergeben", "Send to downloads"], ["Auswahl entfernen", "Remove selection"], ["Ausgewählte Links löschen", "Delete selected links"], ["Links löschen", "Delete links"], ["Die ausgewählten Links werden aus der Sammlung entfernt. Dieser Schritt kann nicht rückgängig gemacht werden.", "The selected links will be removed from the collection. This action cannot be undone."], ["Gesammelte Links", "Collected links"],
["Auswahl", "Selection"], ["Links werden verarbeitet", "Processing links"], ["Die laufende Aktion wird abgeschlossen.", "The current action is being completed."], ["Die lokale Sammlung bleibt unverändert.", "The local collection remains unchanged."],
["Passe die Suche an oder lösche den Filter.", "Adjust the search or clear the filter."], ["Füge Links hinzu oder importiere eine vorhandene Liste.", "Add links or import an existing list."], ["Keine passenden Links", "No matching links"], ["Noch keine Links", "No links yet"],
["Link auswählen", "Select link"], ["Lokal", "Local"], ["Übernehmen", "Apply"], ["Eine URL oder Rohzeile pro Zeile", "One URL or raw line per line"],
["Die Accountdaten werden aktualisiert.", "Account data is being updated."], ["Accounts werden geladen", "Loading accounts"], ["Die gespeicherten Accounts bleiben unverändert.", "Saved accounts remain unchanged."],
["Die Accountdaten werden aktualisiert.", "Account data is being updated."], ["Accountdaten werden aktualisiert.", "Account data is being updated."], ["Accounts werden geladen", "Loading accounts"], ["Die gespeicherten Accounts bleiben unverändert.", "Saved accounts remain unchanged."], ["Keine passenden Dienste oder Zugangstypen gefunden.", "No matching services or access types found."],
["Füge einen Account hinzu, um Downloads über einen Anbieter zu starten.", "Add an account to start downloads through a provider."], ["Noch keine Accounts", "No accounts yet"], ["Keine Provider konfiguriert.", "No providers configured."],
["Keine eigenen Zuordnungen.", "No custom assignments."], ["Hoster-Routing hinzufügen", "Add hoster routing"], ["Hoster hinzufügen…", "Add hoster…"], ["Eigener Hoster…", "Custom hoster…"], ["Noch keine Rotations-Ereignisse.", "No rotation events yet."],
["Prüfen und speichern", "Check and save"], ["Wähle einen Dienst und trage die passenden Zugangsdaten ein.", "Choose a service and enter the matching credentials."], ["Accounts durchsuchen", "Search accounts"],
@@ -96,7 +96,8 @@ const pairs = [
["Sitzungszähler und Ergebnisse des zuletzt beendeten Laufs werden angezeigt.", "Session counters and results from the last completed run are shown."], ["Nicht verfügbar", "Unavailable"],
["Heute wurden noch keine Providerbytes erfasst.", "No provider bytes have been recorded today."], ["Noch keine gespeicherten Providerbytes vorhanden.", "No stored provider bytes available yet."],
["In der aktuellen Queue sind noch keine Providerwerte vorhanden.", "No provider values are available in the current queue yet."], ["Statistik-Zeitraum", "Statistics time range"], ["Statistik-Dashboard", "Statistics dashboard"],
["Statistiken zurücksetzen", "Reset statistics"], ["Erfolgsquote", "Success rate"], ["Live aus der aktuellen Renderer-Sitzung", "Live from the current renderer session"],
["Statistiken zurücksetzen", "Reset statistics"], ["Sitzungsstatistik zurücksetzen", "Reset session statistics"], ["Die Zähler, Downloadmenge und Geschwindigkeitsdaten der aktuellen Sitzung werden gelöscht. Dieser Schritt kann nicht rückgängig gemacht werden.", "The counters, download volume, and speed data for the current session will be deleted. This action cannot be undone."], ["Gesamtstatistik zurücksetzen", "Reset total statistics"], ["Alle dauerhaft gespeicherten Download- und Providerstatistiken werden gelöscht. Dieser Schritt kann nicht rückgängig gemacht werden.", "All permanently stored download and provider statistics will be deleted. This action cannot be undone."], ["Erfolgsquote", "Success rate"], ["Live aus der aktuellen Renderer-Sitzung", "Live from the current renderer session"],
["Sammlung entfernen", "Remove collection"],
["Kontextmenü", "Context menu"], ["Die Oberfläche hat einen Fehler ausgelöst", "The interface encountered an error"],
["Die Anzeige wurde gestoppt, um Datenverlust zu vermeiden. Die laufenden Downloads im Hintergrund sind nicht betroffen. Der Fehler wurde ins Log geschrieben.", "The interface was stopped to prevent data loss. Downloads running in the background are not affected. The error was written to the log."],
["Oberfläche neu laden", "Reload interface"], ["Unbekannter Fehler", "Unknown error"],
@@ -216,7 +217,7 @@ function translateDynamic(value: string, language: AppLanguage): string {
if (language === "en") {
const update = value.match(/^(.+) ist verfügbar\. Installierte Version: (.+)\.$/);
if (update) return `${update[1]} is available. Installed version: ${update[2]}.`;
const pagination = value.match(/^(\d+\s*[–-]\s*\d+) von (\d+)$/);
const pagination = value.match(/^([\d.,]+\s*[–-]\s*[\d.,]+) von ([\d.,]+)$/);
if (pagination) return `${pagination[1]} of ${pagination[2]}`;
const schedule = value.match(/^Zeitregel (\d+)$/);
if (schedule) return `Schedule rule ${schedule[1]}`;
@@ -228,6 +229,8 @@ function translateDynamic(value: string, language: AppLanguage): string {
if (labelledCount) return `${({ Einträge: "Entries", Sichtbar: "Visible", Ausgewählt: "Selected" } as const)[labelledCount[1] as "Einträge" | "Sichtbar" | "Ausgewählt"]}: ${labelledCount[2]}`;
const perPage = value.match(/^(\d+) pro Seite$/);
if (perPage) return `${perPage[1]} per page`;
const pageStatus = value.match(/^Seite ([\d.,\s]+) von ([\d.,\s]+)$/);
if (pageStatus) return `Page ${pageStatus[1]} of ${pageStatus[2]}`;
const filter = value.match(/^(Alle|Aktiv|Wartend|Pausiert|Fertig|Fehler) (\d+)$/);
if (filter) return `${deToEn.get(filter[1]) ?? filter[1]} ${filter[2]}`;
const remaining = value.match(/^(.+) von (.+) übrig$/);
@@ -292,7 +295,9 @@ function translateDynamic(value: string, language: AppLanguage): string {
if (warnings) return `${warnings[1]} errors, ${warnings[2]} warnings (latest ${warnings[3]})`;
const capture = value.match(/^Links für (.+) lokal erfassen\.$/);
if (capture) return `Capture links locally for ${capture[1]}.`;
const copy = value.match(/^(.+) Klicken zum Kopieren$/);
const collectorSelection = value.match(/^(.+) aus (.+), Zeile (\d+) auswählen$/);
if (collectorSelection) return `Select ${collectorSelection[1]} from ${collectorSelection[2]}, line ${collectorSelection[3]}`;
const copy = value.match(/^([\s\S]+?)\s+Klicken zum Kopieren$/);
if (copy) return `Click to copy ${copy[1]}`;
const cancelledPart = value.match(/^· (\d+) abgebrochen$/);
if (cancelledPart) return `· ${cancelledPart[1]} cancelled`;
@@ -340,11 +345,21 @@ function translateDynamic(value: string, language: AppLanguage): string {
if (toggleAll) return `Toggle all ${toggleAll[1]}`;
const removeSelected = value.match(/^Ausgewählte entfernen \((\d+)\)$/);
if (removeSelected) return `Remove selected (${removeSelected[1]})`;
const removeCollection = value.match(/^Soll die Sammlung (.+) mit (\d+) Link\(s\) wirklich entfernt werden\?$/);
if (removeCollection) return `Do you really want to remove collection ${removeCollection[1]} with ${removeCollection[2]} link(s)?`;
const removeEmptyCollection = value.match(/^Soll die leere Sammlung (.+) wirklich entfernt werden\?$/);
if (removeEmptyCollection) return `Do you really want to remove the empty collection ${removeEmptyCollection[1]}?`;
const copyTitle = value.match(/^([\s\S]+?)\s+Klicken zum Kopieren$/);
if (copyTitle) return `Click to copy ${copyTitle[1]}`;
const moveColumnDirection = value.match(/^(.+) nach (links|rechts) verschieben$/);
if (moveColumnDirection) return `Move ${deToEn.get(moveColumnDirection[1]) ?? moveColumnDirection[1]} ${moveColumnDirection[2] === "links" ? "left" : "right"}`;
const moveColumn = value.match(/^(.+) verschieben$/);
if (moveColumn) return `Move ${deToEn.get(moveColumn[1]) ?? moveColumn[1]}`;
const copied = value.match(/^(.+) kopiert$/);
if (copied) return `${copied[1]} copied`;
const suffixes: Array<[RegExp, string]> = [
[/^(.+) auswählen$/, "Select $1"], [/^(.+) einklappen$/, "Collapse $1"], [/^(.+) ausklappen$/, "Expand $1"],
[/^(.+) aktivieren$/, "Enable $1"], [/^(.+) deaktivieren$/, "Disable $1"], [/^(.+) Aktionen$/, "$1 actions"], [/^(.+) entfernen$/, "Remove $1"]
[/^(.+) aktivieren$/, "Enable $1"], [/^(.+) deaktivieren$/, "Disable $1"], [/^(.+) Aktionen$/, "$1 actions"], [/^(.+) entfernen$/, "Remove $1"], [/^(.+) kopieren$/, "Copy $1"]
];
for (const [pattern, replacement] of suffixes) if (pattern.test(value)) return value.replace(pattern, replacement);
return value
@@ -355,7 +370,7 @@ function translateDynamic(value: string, language: AppLanguage): string {
} else {
const update = value.match(/^(.+) is available\. Installed version: (.+)\.$/);
if (update) return `${update[1]} ist verfügbar. Installierte Version: ${update[2]}.`;
const pagination = value.match(/^(\d+\s*[–-]\s*\d+) of (\d+)$/);
const pagination = value.match(/^([\d.,]+\s*[–-]\s*[\d.,]+) of ([\d.,]+)$/);
if (pagination) return `${pagination[1]} von ${pagination[2]}`;
const schedule = value.match(/^Schedule rule (\d+)$/);
if (schedule) return `Zeitregel ${schedule[1]}`;
@@ -469,6 +484,18 @@ function translateDynamic(value: string, language: AppLanguage): string {
if (historyQuestion) return `${historyQuestion[1]} Einträge aus dem Verlauf entfernen?`;
const historyRemoved = value.match(/^(\d+) history entries removed$/);
if (historyRemoved) return `${historyRemoved[1]} Verlaufseinträge entfernt`;
const removeCollection = value.match(/^Do you really want to remove collection (.+) with (\d+) link\(s\)\?$/);
if (removeCollection) return `Soll die Sammlung ${removeCollection[1]} mit ${removeCollection[2]} Link(s) wirklich entfernt werden?`;
const removeEmptyCollection = value.match(/^Do you really want to remove the empty collection (.+)\?$/);
if (removeEmptyCollection) return `Soll die leere Sammlung ${removeEmptyCollection[1]} wirklich entfernt werden?`;
const pageStatus = value.match(/^Page ([\d.,\s]+) of ([\d.,\s]+)$/);
if (pageStatus) return `Seite ${pageStatus[1]} von ${pageStatus[2]}`;
const collectorSelection = value.match(/^Select (.+) from (.+), line (\d+)$/);
if (collectorSelection) return `${collectorSelection[1]} aus ${collectorSelection[2]}, Zeile ${collectorSelection[3]} auswählen`;
const moveColumnDirection = value.match(/^Move (.+) (left|right)$/);
if (moveColumnDirection) return `${enToDe.get(moveColumnDirection[1]) ?? moveColumnDirection[1]} nach ${moveColumnDirection[2] === "left" ? "links" : "rechts"} verschieben`;
const moveColumn = value.match(/^Move (.+)$/);
if (moveColumn) return `${enToDe.get(moveColumn[1]) ?? moveColumn[1]} verschieben`;
const packageCount = value.match(/^(\d+) package\(s\)$/);
if (packageCount) return `${packageCount[1]} Paket(e)`;
const linkCount = value.match(/^(\d+) link\(s\)$/);
@@ -483,7 +510,7 @@ function translateDynamic(value: string, language: AppLanguage): string {
if (copied) return `${copied[1]} kopiert`;
const suffixes: Array<[RegExp, string]> = [
[/^Select (.+)$/, "$1 auswählen"], [/^Collapse (.+)$/, "$1 einklappen"], [/^Expand (.+)$/, "$1 ausklappen"],
[/^Enable (.+)$/, "$1 aktivieren"], [/^Disable (.+)$/, "$1 deaktivieren"], [/^(.+) actions$/, "$1 Aktionen"], [/^Remove (.+)$/, "$1 entfernen"]
[/^Enable (.+)$/, "$1 aktivieren"], [/^Disable (.+)$/, "$1 deaktivieren"], [/^(.+) actions$/, "$1 Aktionen"], [/^Remove (.+)$/, "$1 entfernen"], [/^Copy (.+)$/, "$1 kopieren"]
];
for (const [pattern, replacement] of suffixes) if (pattern.test(value)) return value.replace(pattern, replacement);
return value
src/renderer/shell/shell.css
+20 -12
View File
@@ -132,7 +132,7 @@
.md-shell-header-actions button:focus-visible,
.md-shell-sidebar-toggle:focus-visible,
.md-avatar-menu-action:focus-visible {
outline: 2px solid var(--ui-accent);
outline: 2px solid var(--ui-focus);
outline-offset: 2px;
}
@@ -165,7 +165,7 @@
border: 0;
border-radius: 6px;
background: var(--ui-primary);
color: #0f0f0f;
color: var(--ui-primary-text);
cursor: pointer;
font-size: 14px;
font-weight: 600;
@@ -180,7 +180,7 @@
.md-update-trigger:focus-visible,
.md-update-dialog button:focus-visible,
.md-update-release-notes summary:focus-visible {
outline: 2px solid var(--ui-accent);
outline: 2px solid var(--ui-focus);
outline-offset: 2px;
}
@@ -509,15 +509,19 @@
opacity: 0;
}
.md-shell-sidebar.is-responsive-rail .md-shell-sidebar-toggle {
top: 12px;
.md-shell-sidebar.is-responsive-rail .md-shell-sidebar-toggle {
top: -48px;
right: auto;
left: 11px;
width: 32px;
height: 32px;
transform: none;
opacity: 1;
}
opacity: 1;
}
.md-shell.has-collapsed-sidebar:is(.is-compact, .is-minimum) .md-shell-navigation {
padding-left: 44px;
}
.md-shell-sidebar:hover .md-shell-sidebar-toggle,
.md-shell-sidebar.is-collapsed .md-shell-sidebar-toggle,
@@ -755,7 +759,7 @@
.md-dialog :where(button, summary, input, select, textarea):focus-visible,
.md-context-menu [role="menuitem"]:focus-visible {
outline: 2px solid var(--ui-accent);
outline: 2px solid var(--ui-focus);
outline-offset: 2px;
}
@@ -880,15 +884,19 @@
}
}
@media (max-width: 1120px) {
@media (max-width: 1120px) {
.md-shell.is-minimum {
gap: 6px;
padding: 6px 8px 8px;
}
.md-shell.is-minimum .md-shell-workspace {
gap: 6px;
}
.md-shell.is-minimum .md-shell-workspace {
gap: 6px;
}
.md-shell.is-minimum .md-shell-sidebar.is-responsive-rail .md-shell-sidebar-toggle {
top: -46px;
}
.md-dialog-backdrop,
.md-overlay-host .md-dialog-backdrop,
src/renderer/styles.css
+14 -7
View File
@@ -3143,13 +3143,20 @@ td {
color: var(--muted);
}
.link-popup-click {
cursor: pointer;
border-radius: 4px;
padding: 1px 3px;
margin: -1px -3px;
transition: background 0.1s;
}
.link-popup-click {
appearance: none;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
border-radius: 4px;
padding: 1px 3px;
margin: -1px -3px;
min-width: 0;
text-align: left;
transition: background 0.1s;
}
.link-popup-click:hover {
background: var(--button-bg-hover);
src/renderer/theme.css
+24 -12
View File
@@ -7,20 +7,26 @@
--ui-active: #333436;
--ui-hover: #373535;
--ui-tooltip: #4F4D4D;
--ui-border: #3D3D3D;
--ui-border: #3D3D3D;
--ui-control-border: #707070;
--ui-text: #FFFFFF;
--ui-text-secondary: #EAEDF3;
--ui-text-muted: #919191;
--ui-primary: #D6D6D6;
--ui-primary-hover: #E6E6E6;
--ui-primary-text: #181A1F;
--ui-accent: #4A4A4A;
--ui-speed-accent: #F2942D;
--ui-focus: #9AB8E8;
--ui-speed-accent: #4ADE80;
--ui-progress-track-text: #FFFFFF;
--ui-progress-fill-text: #181A1F;
--ui-success: #4ADE80;
--ui-warning: #F1C786;
--ui-danger: #F06464;
--ui-error-action-text: #181A1F;
--ui-success-text: #4ADE80;
--ui-warning: #F1C786;
--ui-warning-text: #F1C786;
--ui-danger: #F06464;
--ui-danger-text: #F06464;
--ui-error-action-text: var(--ui-primary-text);
--ui-modal-secondary: #35383D;
--ui-overlay: rgba(0, 0, 0, 0.60);
color-scheme: dark;
@@ -34,20 +40,26 @@
--ui-active: #DEE6F5;
--ui-hover: #E8ECF3;
--ui-tooltip: #35383D;
--ui-border: #D0D4DB;
--ui-border: #D0D4DB;
--ui-control-border: #7B8491;
--ui-text: #181A1F;
--ui-text-secondary: #343842;
--ui-text-muted: #667085;
--ui-primary: #3A3A3A;
--ui-primary-hover: #202020;
--ui-primary-text: #FFFFFF;
--ui-accent: #5E5E5E;
--ui-speed-accent: #C2701A;
--ui-focus: #24558D;
--ui-speed-accent: #1E9E55;
--ui-progress-track-text: #181A1F;
--ui-progress-fill-text: #181A1F;
--ui-success: #1E9E55;
--ui-warning: #E8B85D;
--ui-danger: #D94747;
--ui-error-action-text: #181A1F;
--ui-success-text: #137A3D;
--ui-warning: #E8B85D;
--ui-warning-text: #7A4B00;
--ui-danger: #D94747;
--ui-danger-text: #B4232F;
--ui-error-action-text: var(--ui-primary-text);
--ui-modal-secondary: #E7E9ED;
--ui-overlay: rgba(0, 0, 0, 0.45);
color-scheme: light;
@@ -151,7 +163,7 @@ textarea,
summary,
[tabindex]:not([tabindex="-1"])
):focus-visible {
outline: 2px solid var(--ui-accent);
outline: 2px solid var(--ui-focus);
outline-offset: 2px;
}
@@ -384,7 +396,7 @@ textarea,
.ui-error-boundary-details:focus-visible,
.ui-error-boundary-reload:focus-visible {
outline: 2px solid var(--ui-accent);
outline: 2px solid var(--ui-focus);
outline-offset: 2px;
}
src/renderer/views/collector/CollectorView.tsx
+6 -5
View File
@@ -77,8 +77,9 @@ export function CollectorSidebar({ model, actions }: CollectorViewProps): ReactE
);
}
export function CollectorToolbar({ model, actions }: CollectorViewProps): ReactElement {
return (
export function CollectorToolbar({ model, actions }: CollectorViewProps): ReactElement {
const activeTab = model.tabs.find((tab) => tab.id === model.activeTabId) ?? model.tabs[0];
return (
<Toolbar className="collector-toolbar" data-visual-region="collector-toolbar" label="Linksammler-Aktionen">
<ToolbarGroup label="Links erfassen">
<button className="collector-action collector-action-primary" disabled={model.busy} onClick={actions.onOpenInput} type="button">Links hinzufügen</button>
@@ -87,7 +88,7 @@ export function CollectorToolbar({ model, actions }: CollectorViewProps): ReactE
</ToolbarGroup>
<ToolbarGroup label="Sammlung verarbeiten">
<button className="collector-action" disabled={model.busy} onClick={actions.onExportQueue} type="button">Queue exportieren</button>
<button className="collector-action" disabled={model.busy || model.tabs.length === 0} onClick={actions.onSubmit} type="button">An Downloads übergeben</button>
<button className="collector-action" disabled={model.busy || !activeTab || activeTab.linkCount === 0} onClick={actions.onSubmit} type="button">An Downloads übergeben</button>
<button className="collector-action collector-action-danger" disabled={model.busy || model.selectedIds.length === 0} onClick={actions.onRemoveSelected} type="button">Auswahl entfernen</button>
</ToolbarGroup>
<ToolbarSearch
@@ -129,8 +130,8 @@ export function CollectorContent({ model, actions }: CollectorViewProps): ReactE
model.rows.map((row) => (
<div className={`collector-row${selected.has(row.id) ? " is-selected" : ""}`} key={row.id} role="row">
<span className="collector-column-select" role="cell">
<input
aria-label="Link auswählen"
<input
aria-label={`${row.value} aus ${row.tabName}, Zeile ${row.lineNumber} auswählen`}
checked={selected.has(row.id)}
onChange={() => actions.onSelectionChange(row.id)}
type="checkbox"
src/renderer/views/collector/collector.css
+20 -11
View File
@@ -130,18 +130,18 @@
.collector-action-primary {
background: var(--ui-primary);
border-color: var(--ui-primary);
color: #181A1F;
color: var(--ui-primary-text);
}
.collector-action-primary:hover:not(:disabled) {
background: var(--ui-primary-hover);
color: #181A1F;
color: var(--ui-primary-text);
}
.collector-action-danger:not(:disabled) {
border-color: color-mix(in srgb, var(--ui-danger) 70%, var(--ui-border));
color: var(--ui-danger);
}
.collector-action-danger:not(:disabled) {
border-color: color-mix(in srgb, var(--ui-danger) 70%, var(--ui-border));
color: var(--ui-danger-text);
}
.collector-action:disabled {
cursor: default;
@@ -172,8 +172,8 @@
height: 41px;
}
.collector-table-header-row {
color: var(--ui-text-muted);
.collector-table-header-row {
color: var(--ui-text-secondary);
font-size: 11px;
font-weight: 700;
height: 41px;
@@ -272,7 +272,7 @@
.collector-dialog-primary {
background: var(--ui-primary);
border-color: var(--ui-primary);
color: #181A1F;
color: var(--ui-primary-text);
}
.collector-dialog-secondary {
@@ -300,8 +300,17 @@
}
}
@media (max-width: 1120px) {
.collector-table-header-row,
@media (max-width: 1120px) {
.collector-toolbar {
flex-wrap: wrap;
}
.collector-toolbar .ui-toolbar-search {
flex: 1 0 100%;
width: 100%;
}
.collector-table-header-row,
.collector-row {
grid-template-columns: 44px minmax(108px, 0.7fr) minmax(250px, 2.2fr) 66px 82px;
min-width: 610px;
src/renderer/views/downloads/DownloadsTable.tsx
+47 -18
View File
@@ -1,4 +1,4 @@
import { memo, useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactElement } from "react";
import { memo, useEffect, useLayoutEffect, useRef, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type ReactElement } from "react";
import type { DownloadItem } from "../../../shared/types";
import {
compactProviderLabels,
@@ -47,16 +47,16 @@ function isPackageRowDisclosureExcluded(target: EventTarget | null): boolean {
}
export const downloadColumnDefinitions: Record<string, { label: string; width: string; sortable?: DownloadSortColumn }> = {
name: { label: "Name", width: "minmax(290px, 2.3fr)", sortable: "name" },
size: { label: "Geladen / Größe", width: "minmax(140px, 1.1fr)", sortable: "size" },
progress: { label: "Fortschritt", width: "minmax(105px, 0.85fr)", sortable: "progress" },
hoster: { label: "Hoster", width: "minmax(90px, 0.85fr)", sortable: "hoster" },
account: { label: "Service", width: "minmax(90px, 0.85fr)" },
prio: { label: "Priorität", width: "minmax(85px, 0.8fr)" },
name: { label: "Name", width: "minmax(var(--downloads-name-min, 290px), 2.3fr)", sortable: "name" },
size: { label: "Geladen / Größe", width: "minmax(var(--downloads-size-min, 140px), 1.1fr)", sortable: "size" },
progress: { label: "Fortschritt", width: "minmax(var(--downloads-progress-min, 105px), 0.85fr)", sortable: "progress" },
hoster: { label: "Hoster", width: "minmax(var(--downloads-hoster-min, 90px), 0.85fr)", sortable: "hoster" },
account: { label: "Service", width: "minmax(var(--downloads-service-min, 90px), 0.85fr)" },
prio: { label: "Priorität", width: "minmax(var(--downloads-priority-min, 85px), 0.8fr)" },
status: { label: "Status", width: "minmax(var(--downloads-status-min, 210px), 1.2fr)" },
speed: { label: "Geschwindigkeit", width: "minmax(120px, 1fr)" },
availability: { label: "Verfügbarkeit", width: "minmax(110px, 1fr)" },
added: { label: "Hinzugefügt am", width: "minmax(135px, 1fr)" }
speed: { label: "Geschwindigkeit", width: "minmax(var(--downloads-speed-min, 120px), 1fr)" },
availability: { label: "Verfügbarkeit", width: "minmax(var(--downloads-availability-min, 110px), 1fr)" },
added: { label: "Hinzugefügt am", width: "minmax(var(--downloads-added-min, 135px), 1fr)" }
};
export type AvailabilityState = "online" | "partial" | "offline" | "checking";
@@ -103,14 +103,21 @@ export interface DownloadsTableActions {
onMovePackageDown: (packageId: string) => void;
onRemoveItem: (itemId: string) => void;
onOpenContextMenu: (id: string, x: number, y: number, packageId?: string) => void;
onColumnPointerDown: (column: string, event: ReactPointerEvent<HTMLDivElement>) => void;
onColumnPointerMove: (column: string, event: ReactPointerEvent<HTMLDivElement>) => void;
onColumnPointerUp: (column: string, event: ReactPointerEvent<HTMLDivElement>) => void;
onColumnPointerCancel: (column: string, event: ReactPointerEvent<HTMLDivElement>) => void;
onColumnPointerDown: (column: string, event: DownloadColumnPointerInput) => void;
onColumnPointerMove: (column: string, event: DownloadColumnPointerInput) => void;
onColumnPointerUp: (column: string, event: DownloadColumnPointerInput) => void;
onColumnPointerCancel: (column: string, event: DownloadColumnPointerInput) => void;
onColumnContextMenu: (column: string, x: number, y: number) => void;
onSortColumn: (column: DownloadSortColumn) => void;
}
export interface DownloadColumnPointerInput {
clientX: number;
currentTarget: HTMLDivElement;
pointerId: number;
preventDefault: () => void;
}
function displayedStatus(item: DownloadItem, sessionRunning: boolean): string {
const value = item.fullStatus.trim();
if (value === "Wartet") return "";
@@ -548,15 +555,33 @@ export interface DownloadsTableHeaderProps {
visibleIds: string[];
}
function moveColumnWithPointerActions(column: string, direction: -1 | 1, element: HTMLDivElement, actions: DownloadsTableActions): void {
const sibling = direction < 0 ? element.previousElementSibling : element.nextElementSibling;
if (!sibling?.matches(".downloads-column-header")) return;
const currentRect = element.getBoundingClientRect();
const siblingRect = sibling.getBoundingClientRect();
const startX = currentRect.left + currentRect.width / 2;
const clientX = siblingRect.left + siblingRect.width / 2 + direction;
const pointerId = -1;
const pointerEvent = (x: number): DownloadColumnPointerInput => ({ clientX: x, currentTarget: element, pointerId, preventDefault: () => {} });
actions.onColumnPointerDown(column, pointerEvent(startX));
actions.onColumnPointerMove(column, pointerEvent(clientX));
actions.onColumnPointerUp(column, pointerEvent(clientX));
}
export function DownloadsTableHeader({ actions, columnOrder, gridTemplate, sortColumn, sortDirection, selectedCount, visibleIds }: DownloadsTableHeaderProps): ReactElement {
const allSelected = visibleIds.length > 0 && selectedCount === visibleIds.length;
const mixedSelection = selectedCount > 0 && selectedCount < visibleIds.length;
return (
<div className="downloads-table-header" role="row" style={{ gridTemplateColumns: downloadGridTemplate(gridTemplate) }}>
<span className="downloads-selection-cell" role="columnheader"><input aria-label="Alle sichtbaren Downloads auswählen" checked={visibleIds.length > 0 && selectedCount === visibleIds.length} onChange={(event) => actions.onSetVisibleSelection(visibleIds, event.target.checked)} type="checkbox" /></span>
{columnOrder.map((column) => {
<span className="downloads-selection-cell" role="columnheader"><input aria-checked={mixedSelection ? "mixed" : allSelected} aria-label="Alle sichtbaren Downloads auswählen" checked={allSelected} onChange={(event) => actions.onSetVisibleSelection(visibleIds, event.target.checked)} ref={(input) => { if (input) input.indeterminate = mixedSelection; }} type="checkbox" /></span>
{columnOrder.map((column, index) => {
const definition = downloadColumnDefinitions[column];
if (!definition) return null;
const ariaSort = definition.sortable ? sortColumn === definition.sortable ? sortDirection === "asc" ? "ascending" : "descending" : "none" : undefined;
return (
<div
aria-sort={ariaSort}
className="downloads-column-header"
data-download-column={column}
key={column}
@@ -575,8 +600,12 @@ export function DownloadsTableHeader({ actions, columnOrder, gridTemplate, sortC
role="columnheader"
>
{definition.sortable
? <button onClick={() => actions.onSortColumn(definition.sortable!)} type="button">{definition.label}{sortColumn === definition.sortable ? sortDirection === "asc" ? " ↑" : " ↓" : ""}</button>
: definition.label}
? <button className="downloads-column-sort" onClick={() => actions.onSortColumn(definition.sortable!)} type="button">{definition.label}{sortColumn === definition.sortable ? sortDirection === "asc" ? " ↑" : " ↓" : ""}</button>
: <span className="downloads-column-label">{definition.label}</span>}
<span aria-label={`${definition.label} verschieben`} className="downloads-column-move-controls" onPointerDown={(event) => event.stopPropagation()} role="group">
{index > 0 ? <button aria-label={`${definition.label} nach links verschieben`} onClick={(event) => { event.stopPropagation(); const element = event.currentTarget.closest<HTMLDivElement>(".downloads-column-header"); if (element) moveColumnWithPointerActions(column, -1, element, actions); }} type="button">←</button> : null}
{index < columnOrder.length - 1 ? <button aria-label={`${definition.label} nach rechts verschieben`} onClick={(event) => { event.stopPropagation(); const element = event.currentTarget.closest<HTMLDivElement>(".downloads-column-header"); if (element) moveColumnWithPointerActions(column, 1, element, actions); }} type="button">→</button> : null}
</span>
</div>
);
})}
src/renderer/views/downloads/DownloadsView.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ export function DownloadsSidebar({ actions, model }: { actions: DownloadsViewAct
<aside className="downloads-sidebar" data-visual-region="downloads-sidebar">
<div className="downloads-mode-title">Pakete</div>
<SlidingSelection activeKey={model.filter} aria-label="Downloadfilter" as="nav" axis="vertical">
{filters.map((filter) => <button className={model.filter === filter.id ? "is-active" : ""} data-sliding-selection-active={model.filter === filter.id} data-sliding-selection-item="true" key={filter.id} onClick={() => actions.onFilterChange(filter.id)} type="button"><span>{filter.label}</span><b>{model.counts[filter.id]}</b></button>)}
{filters.map((filter) => <button aria-current={model.filter === filter.id ? "page" : undefined} className={model.filter === filter.id ? "is-active" : ""} data-sliding-selection-active={model.filter === filter.id} data-sliding-selection-item="true" key={filter.id} onClick={() => actions.onFilterChange(filter.id)} type="button"><span>{filter.label}</span><b>{model.counts[filter.id]}</b></button>)}
</SlidingSelection>
<label className="downloads-provider-filter"><span>Service</span><select aria-label="Service filtern" disabled={model.providerOptions.length <= 1} onChange={(event) => actions.onProviderFilterChange(event.target.value)} value={model.providerFilter}><option value="all">Alle Services</option>{model.providerOptions.map((provider) => <option key={provider.id} value={provider.id}>{provider.label}</option>)}</select></label>
<label className="downloads-sidebar-search"><span>Downloads durchsuchen</span><input className="downloads-search-input" onChange={(event) => actions.onQueryChange(event.target.value)} placeholder="Paket, Datei oder Service" type="search" value={model.query} /></label>
src/renderer/views/downloads/downloads.css
+76 -11
View File
@@ -200,7 +200,7 @@
.downloads-footer button,
.downloads-action-cell button,
.downloads-collapse-button,
.downloads-column-header button {
.downloads-column-sort {
min-height: 36px;
height: 36px;
border: 1px solid var(--ui-border);
@@ -261,7 +261,7 @@
.downloads-table-body {
box-sizing: border-box;
width: 100%;
min-width: 1191px;
min-width: var(--downloads-table-min-width, 1191px);
}
.downloads-table-header {
@@ -419,6 +419,11 @@
text-align: left;
}
.downloads-cell-slot > :is(.downloads-status-cell, .downloads-service-cell) {
justify-content: flex-start;
text-align: left;
}
.downloads-cell,
.downloads-name-cell {
display: flex;
@@ -508,6 +513,7 @@
}
.downloads-column-header {
position: relative;
display: flex;
align-items: center;
justify-content: center;
@@ -565,7 +571,7 @@
}
}
.downloads-column-header button {
.downloads-column-sort {
width: 100%;
border: 0;
padding: 0;
@@ -579,10 +585,50 @@
text-align: left;
}
.downloads-column-header[data-download-column="name"] button {
.downloads-column-header[data-download-column="name"] .downloads-column-sort {
text-align: left;
}
.downloads-column-move-controls {
position: absolute;
inset: 50% 2px auto auto;
display: flex;
gap: 2px;
padding: 2px;
border: 1px solid var(--ui-border);
border-radius: 4px;
opacity: 0;
background: var(--ui-table-header);
box-shadow: 0 1px 4px color-mix(in srgb, var(--ui-text) 18%, transparent);
pointer-events: none;
transform: translateY(-50%);
}
.downloads-column-header:hover .downloads-column-move-controls,
.downloads-column-header:focus-within .downloads-column-move-controls {
opacity: 1;
pointer-events: auto;
}
.downloads-column-move-controls button {
display: inline-flex;
width: 22px;
height: 24px;
min-height: 24px;
align-items: center;
justify-content: center;
border: 0;
border-radius: 3px;
padding: 0;
color: var(--ui-text);
background: var(--ui-modal-secondary);
}
.downloads-column-move-controls button:hover,
.downloads-column-move-controls button:focus-visible {
background: var(--ui-hover);
}
.downloads-link-state {
flex: 0 0 8px;
width: 8px;
@@ -642,15 +688,15 @@
}
.downloads-availability.is-online {
color: var(--ui-success);
color: var(--ui-success-text);
}
.downloads-availability.is-partial {
color: var(--ui-warning);
color: var(--ui-warning-text);
}
.downloads-availability.is-offline {
color: var(--ui-danger);
color: var(--ui-danger-text);
}
.downloads-availability.is-checking {
@@ -712,14 +758,33 @@
container-type: inline-size;
}
:is(.downloads-status-full, .downloads-status-compact, .downloads-service-full, .downloads-service-compact) {
display: block;
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.downloads-status-compact,
.downloads-service-compact {
display: none;
}
.md-shell.is-compact .downloads-view,
.md-shell.is-minimum .downloads-view {
.md-shell.is-compact .downloads-content,
.md-shell.is-minimum .downloads-content {
--downloads-table-min-width: 1016px;
--downloads-name-min: 180px;
--downloads-size-min: 96px;
--downloads-progress-min: 78px;
--downloads-hoster-min: 62px;
--downloads-service-min: 78px;
--downloads-priority-min: 65px;
--downloads-status-min: 90px;
--downloads-speed-min: 84px;
--downloads-availability-min: 82px;
--downloads-added-min: 105px;
}
@container (max-width: 150px) {
@@ -728,7 +793,7 @@
}
.downloads-status-compact {
display: inline;
display: block;
}
.downloads-service-full {
@@ -736,7 +801,7 @@
}
.downloads-service-compact {
display: inline;
display: block;
}
}
src/renderer/views/history/HistoryView.tsx
+79 -15
View File
@@ -1,14 +1,13 @@
import type { ChangeEvent, MouseEvent, ReactElement } from "react";
import { useEffect, useState, type ChangeEvent, type MouseEvent, type ReactElement } from "react";
import {
DataTable,
DataTableBody,
DataTableEmpty,
DataTableFooter,
DataTableHeader
} from "../../ui/DataTable";
import { Toolbar, ToolbarGroup, ToolbarSearch } from "../../ui/Toolbar";
import { SlidingSelection } from "../../ui/SlidingSelection";
import type { HistoryFilter, HistoryRow, HistoryViewModel } from "./history-model";
import { paginateHistoryRows, type HistoryFilter, type HistoryPage, type HistoryRow, type HistoryViewModel } from "./history-model";
import "./history.css";
export interface HistoryViewActions {
@@ -109,18 +108,65 @@ export function HistoryToolbar({ model, actions }: HistoryViewProps): ReactEleme
);
}
export function HistoryContent({ model, actions }: HistoryViewProps): ReactElement {
export function historyPageStatusLabel(page: HistoryPage): string {
return `Seite ${page.page} von ${page.totalPages}`;
}
export function HistoryPagination({
page,
onPageChange
}: {
page: HistoryPage;
onPageChange: (page: number) => void;
}): ReactElement {
return (
<nav aria-label="Verlaufsseiten" className="history-pagination" data-visual-region="history-pagination">
<span className="history-pagination-size">{page.pageSize} pro Seite</span>
<div className="history-pagination-controls">
<button
aria-label="Vorherige Verlaufsseite"
disabled={page.page <= 1}
onClick={() => onPageChange(page.page - 1)}
type="button"
>Zurück</button>
<span aria-atomic="true" aria-current="page" aria-live="polite" className="history-pagination-status">
<span>{page.rangeLabel}</span>
<span>{historyPageStatusLabel(page)}</span>
</span>
<button
aria-label="Nächste Verlaufsseite"
disabled={page.page >= page.totalPages}
onClick={() => onPageChange(page.page + 1)}
type="button"
>Vor</button>
</div>
</nav>
);
}
interface HistoryContentPageProps extends HistoryViewProps {
page: HistoryPage;
onPageChange: (page: number) => void;
}
export function HistoryContentPage({ model, actions, page, onPageChange }: HistoryContentPageProps): ReactElement {
const selected = new Set(model.selectedIds);
const expanded = new Set(model.expandedIds);
const visibleIds = model.rows.map((row) => row.id);
const visibleIds = page.rows.map((row) => row.id);
const allVisibleSelected = visibleIds.length > 0 && visibleIds.every((id) => selected.has(id));
const showEmpty = !model.loading && !model.error && model.rows.length === 0;
const emptyTitle = model.totalCount === 0 && !model.query && model.filter === "all"
? "Noch kein Verlauf"
: "Keine passenden Einträge";
const announcement = model.loading
? { role: "status" as const, live: "polite" as const, message: "Verlauf wird geladen. Die gespeicherten Einträge werden geladen." }
: model.error
? { role: "alert" as const, live: "assertive" as const, message: `${model.error}. Öffne die Ansicht erneut, um es noch einmal zu versuchen.` }
: null;
return (
<section aria-label="Verlaufstabelle" className="history-content">
<h1 className="history-main-title">Verlauf</h1>
<DataTable className="history-table" label="Verlauf">
<DataTableHeader className="history-table-header">
<div className="history-table-header-row" role="row">
@@ -150,7 +196,7 @@ export function HistoryContent({ model, actions }: HistoryViewProps): ReactEleme
) : showEmpty ? (
<DataTableEmpty description={emptyTitle === "Noch kein Verlauf" ? "Abgeschlossene und gelöschte Pakete erscheinen hier." : "Passe Filter oder Suche an."} title={emptyTitle} />
) : (
model.rows.map((row) => {
page.rows.map((row) => {
const isSelected = selected.has(row.id);
const isExpanded = expanded.has(row.id);
const onContextMenu = (event: MouseEvent<HTMLElement>): void => {
@@ -212,23 +258,42 @@ export function HistoryContent({ model, actions }: HistoryViewProps): ReactEleme
)}
</DataTableBody>
</DataTable>
{announcement ? (
<div role={announcement.role} aria-live={announcement.live} aria-atomic="true" className="history-announcement">
{announcement.message}
</div>
) : null}
<HistoryPagination onPageChange={onPageChange} page={page} />
</section>
);
}
export function HistoryFooter({ model }: Pick<HistoryViewProps, "model">): ReactElement {
const count = model.rows.length;
function PaginatedHistoryContent({ model, actions }: HistoryViewProps): ReactElement {
const [requestedPage, setRequestedPage] = useState(1);
const page = paginateHistoryRows(model.rows, requestedPage);
useEffect(() => {
setRequestedPage((current) => current === page.page ? current : page.page);
}, [page.page]);
return (
<DataTableFooter
className="history-pagination"
data-visual-region="history-pagination"
pageSize={count}
paginationVisible
rangeLabel={count === 0 ? "0 von 0" : `1–${count} von ${count}`}
<HistoryContentPage
actions={actions}
model={model}
onPageChange={setRequestedPage}
page={page}
/>
);
}
export function HistoryContent({ model, actions }: HistoryViewProps): ReactElement {
return <PaginatedHistoryContent actions={actions} key={`${model.filter}\u0000${model.query}`} model={model} />;
}
export function HistoryFooter(_props: Pick<HistoryViewProps, "model">): null {
return null;
}
export function HistoryView({ model, actions }: HistoryViewProps): ReactElement {
return (
<div className="history-workspace-view">
@@ -236,7 +301,6 @@ export function HistoryView({ model, actions }: HistoryViewProps): ReactElement
<div className="history-view-main">
<HistoryToolbar actions={actions} model={model} />
<HistoryContent actions={actions} model={model} />
<HistoryFooter model={model} />
</div>
</div>
);
src/renderer/views/history/history-model.ts
+33
View File
@@ -38,6 +38,17 @@ export interface HistoryViewModel {
totalCount: number;
}
export interface HistoryPage {
rows: HistoryRow[];
page: number;
pageSize: number;
totalItems: number;
totalPages: number;
rangeLabel: string;
}
export const HISTORY_PAGE_SIZE = 100;
const providerLabels: Record<DebridProvider, string> = {
realdebrid: "Real-Debrid",
megadebrid: "Mega-Debrid",
@@ -58,6 +69,7 @@ const statusLabels: Record<HistoryViewStatus, string> = {
};
const numberFormatter = new Intl.NumberFormat("de-DE", { maximumFractionDigits: 1 });
const integerFormatter = new Intl.NumberFormat("de-DE", { maximumFractionDigits: 0 });
const dateFormatter = new Intl.DateTimeFormat("de-DE", {
day: "2-digit",
month: "2-digit",
@@ -92,6 +104,27 @@ function formatDuration(durationSeconds: number): string {
return `${minutes}:${String(seconds).padStart(2, "0")}`;
}
export function paginateHistoryRows(rows: HistoryRow[], requestedPage: number): HistoryPage {
const totalItems = rows.length;
const totalPages = Math.max(1, Math.ceil(totalItems / HISTORY_PAGE_SIZE));
const normalizedPage = Number.isFinite(requestedPage) ? Math.trunc(requestedPage) : 1;
const page = Math.min(totalPages, Math.max(1, normalizedPage));
const startIndex = (page - 1) * HISTORY_PAGE_SIZE;
const endIndex = Math.min(totalItems, startIndex + HISTORY_PAGE_SIZE);
const rangeLabel = totalItems === 0
? "0 von 0"
: `${integerFormatter.format(startIndex + 1)}–${integerFormatter.format(endIndex)} von ${integerFormatter.format(totalItems)}`;
return {
rows: rows.slice(startIndex, endIndex),
page,
pageSize: HISTORY_PAGE_SIZE,
totalItems,
totalPages,
rangeLabel
};
}
function localDayStart(timestamp: number): number {
const date = new Date(timestamp);
date.setHours(0, 0, 0, 0);
src/renderer/views/history/history.css
+80 -9
View File
@@ -8,7 +8,7 @@
.history-view-main {
display: grid;
grid-template-rows: auto minmax(0, 1fr) 60px;
grid-template-rows: auto minmax(0, 1fr);
min-width: 0;
}
@@ -108,20 +108,46 @@
white-space: nowrap;
}
.history-action-danger:not(:disabled) {
border-color: color-mix(in srgb, var(--ui-danger) 70%, var(--ui-border));
color: var(--ui-danger);
.history-action-danger:not(:disabled) {
border-color: color-mix(in srgb, var(--ui-danger) 70%, var(--ui-border));
color: var(--ui-danger-text);
}
.history-content {
display: grid;
grid-template-rows: auto minmax(0, 1fr) 60px;
height: 100%;
min-height: 0;
min-width: 0;
overflow: hidden;
}
.history-main-title {
align-items: center;
border-bottom: 1px solid var(--ui-border);
color: var(--ui-text);
display: flex;
font-size: 18px;
font-weight: 700;
line-height: 24px;
margin: 0;
min-height: 44px;
padding: 10px 14px;
}
.history-announcement {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.history-content .history-table {
height: 100%;
min-height: 0;
overflow: auto;
}
@@ -255,19 +281,19 @@
.history-status-completed {
background: color-mix(in srgb, var(--ui-success) 16%, transparent);
border-color: color-mix(in srgb, var(--ui-success) 60%, var(--ui-border));
color: var(--ui-success);
color: var(--ui-success-text);
}
.history-status-deleted {
background: color-mix(in srgb, var(--ui-danger) 15%, transparent);
border-color: color-mix(in srgb, var(--ui-danger) 60%, var(--ui-border));
color: var(--ui-danger);
color: var(--ui-danger-text);
}
.history-status-failed {
background: color-mix(in srgb, var(--ui-danger) 15%, transparent);
border-color: color-mix(in srgb, var(--ui-danger) 60%, var(--ui-border));
color: var(--ui-danger);
color: var(--ui-danger-text);
}
.history-row-size,
@@ -335,11 +361,56 @@
}
.history-table-error .ui-data-table-empty-title {
color: var(--ui-danger);
color: var(--ui-danger-text);
}
.history-pagination {
.history-pagination {
align-items: center;
border-top: 1px solid var(--ui-border);
box-sizing: border-box;
color: var(--ui-text-secondary);
display: flex;
gap: 16px;
height: 60px;
justify-content: space-between;
padding: 10px 14px 10px 60px;
}
.history-pagination-size,
.history-pagination-status {
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.history-pagination-controls,
.history-pagination-status {
align-items: center;
display: flex;
gap: 10px;
}
.history-pagination button {
background: var(--ui-input);
border: 1px solid var(--ui-border);
border-radius: 5px;
color: var(--ui-text);
font: inherit;
height: 32px;
min-width: 72px;
padding: 0 12px;
}
.history-pagination button:hover:not(:disabled) {
background: var(--ui-hover);
}
.history-pagination button:disabled {
cursor: default;
opacity: 0.45;
}
.md-shell-main:has(.history-content) > .md-shell-footer {
display: none;
}
@media (max-width: 1366px) {
src/renderer/views/settings/AccountWorkspace.tsx
+67 -33
View File
@@ -14,14 +14,33 @@ import {
DataTableHeader
} from "../../ui/DataTable";
import { Dialog } from "../../ui/Dialog";
import {
ACCOUNT_COLUMNS,
type AccountAddFilter,
import {
ACCOUNT_COLUMNS,
getSettingsSelectNavigationIndex,
type AccountAddFilter,
type AccountAddOption,
type AccountRowViewModel
} from "./settings-model";
export type AccountWorkspacePanel = "overview" | "rules";
export type AccountWorkspacePanel = "overview" | "rules";
const ACCOUNT_WORKSPACE_PANELS: readonly { id: AccountWorkspacePanel; label: string }[] = [
{ id: "overview", label: "Übersicht" },
{ id: "rules", label: "Verwendungsregeln" }
];
function getAccountPanelNavigationIndex(currentIndex: number, key: string): number | null {
if (key === "ArrowRight") {
return getSettingsSelectNavigationIndex(currentIndex, ACCOUNT_WORKSPACE_PANELS.length, "ArrowDown");
}
if (key === "ArrowLeft") {
return getSettingsSelectNavigationIndex(currentIndex, ACCOUNT_WORKSPACE_PANELS.length, "ArrowUp");
}
if (key === "Home" || key === "End") {
return getSettingsSelectNavigationIndex(currentIndex, ACCOUNT_WORKSPACE_PANELS.length, key);
}
return null;
}
export interface AccountRulesViewModel {
providerOrder: readonly string[];
@@ -253,7 +272,7 @@ function AccountOverview({ model, actions }: AccountWorkspaceProps): ReactElemen
const selectedIds = new Set(model.selectedIds);
return (
<>
<DataTable className="settings-account-table" label="Accounts">
<DataTable aria-busy={model.busy} className="settings-account-table" label="Accounts">
<DataTableHeader className="settings-account-table-header">
<div className="settings-account-table-grid" role="row">
<span aria-label="Aktiviert" className="settings-account-column-enable" role="columnheader" />
@@ -412,9 +431,11 @@ function AccountRules({ model, actions }: AccountWorkspaceProps): ReactElement {
}
export function AccountWorkspace({ model, actions }: AccountWorkspaceProps): ReactElement {
return (
<div className="settings-account-workspace">
<header className="settings-account-heading">
return (
<div className="settings-account-workspace">
{model.busy ? <span aria-live="polite" className="settings-visually-hidden" role="status">Accountdaten werden aktualisiert.</span> : null}
{model.error ? <span className="settings-visually-hidden" role="alert">{model.error}</span> : null}
<header className="settings-account-heading">
<div>
<h2>Accountverwaltung</h2>
<p>Accounts hinzufügen, prüfen und verwalten.</p>
@@ -431,27 +452,32 @@ export function AccountWorkspace({ model, actions }: AccountWorkspaceProps): Rea
</label>
) : null}
</header>
<SlidingSelection activeKey={model.activePanel} aria-label="Accountverwaltung" axis="horizontal" className="settings-account-tabs" role="tablist">
<button
aria-controls="settings-account-overview"
aria-selected={model.activePanel === "overview"}
data-sliding-selection-active={model.activePanel === "overview"}
data-sliding-selection-item="true"
id="settings-account-overview-tab"
onClick={() => actions.onPanelChange("overview")}
role="tab"
type="button"
>Übersicht</button>
<button
aria-controls="settings-account-rules"
aria-selected={model.activePanel === "rules"}
data-sliding-selection-active={model.activePanel === "rules"}
data-sliding-selection-item="true"
id="settings-account-rules-tab"
onClick={() => actions.onPanelChange("rules")}
role="tab"
type="button"
>Verwendungsregeln</button>
<SlidingSelection activeKey={model.activePanel} aria-label="Accountverwaltung" aria-orientation="horizontal" axis="horizontal" className="settings-account-tabs" role="tablist">
{ACCOUNT_WORKSPACE_PANELS.map((panel, index) => (
<button
aria-controls={`settings-account-${panel.id}`}
aria-selected={model.activePanel === panel.id}
data-sliding-selection-active={model.activePanel === panel.id}
data-sliding-selection-item="true"
id={`settings-account-${panel.id}-tab`}
key={panel.id}
onClick={() => actions.onPanelChange(panel.id)}
onKeyDown={(event) => {
const nextIndex = getAccountPanelNavigationIndex(index, event.key);
if (nextIndex === null) {
return;
}
event.preventDefault();
const tablist = event.currentTarget.closest('[role="tablist"]');
const tabs = tablist?.querySelectorAll<HTMLElement>('[role="tab"]');
tabs?.[nextIndex]?.focus();
actions.onPanelChange(ACCOUNT_WORKSPACE_PANELS[nextIndex].id);
}}
role="tab"
tabIndex={model.activePanel === panel.id ? 0 : -1}
type="button"
>{panel.label}</button>
))}
</SlidingSelection>
<div
aria-labelledby="settings-account-overview-tab"
@@ -502,6 +528,8 @@ export function AccountAddDialog({
<div className="settings-account-picker-selector">
<span>Dienst / Zugangstyp</span>
<input
aria-controls={model.options.length === 0 ? "settings-account-picker-empty" : "settings-account-picker-results"}
aria-describedby={model.options.length === 0 ? "settings-account-picker-empty" : undefined}
aria-label="Dienst oder Zugangstyp suchen"
className="settings-control"
onChange={(event) => actions.onQueryChange(event.target.value)}
@@ -515,8 +543,13 @@ export function AccountAddDialog({
<span>Dienst</span>
<span>Typ/Funktion</span>
</div>
<div aria-label="Dienst / Zugangstyp" className="settings-account-picker-list" role="listbox">
{model.options.map((option) => (
{model.options.length === 0 ? (
<div aria-live="polite" className="settings-account-picker-empty" id="settings-account-picker-empty" role="status">
Keine passenden Dienste oder Zugangstypen gefunden.
</div>
) : (
<div aria-label="Dienst / Zugangstyp" className="settings-account-picker-list" id="settings-account-picker-results" role="listbox">
{model.options.map((option) => (
<button
aria-selected={option.id === model.selectedOptionId}
className={`settings-account-picker-row${option.id === model.selectedOptionId ? " is-selected" : ""}`}
@@ -532,8 +565,9 @@ export function AccountAddDialog({
</span>
<span>{option.functionLabel}</span>
</button>
))}
</div>
))}
</div>
)}
</div>
{selectedOption ? (
<>
src/renderer/views/settings/SettingsForm.tsx
+91 -35
View File
@@ -13,10 +13,50 @@ export interface SettingsFormActions {
onCommit?: (fieldId: string, value: string) => void;
}
export interface SettingsFormProps {
model: SettingsFormViewModel;
actions: SettingsFormActions;
}
export interface SettingsFormProps {
model: SettingsFormViewModel;
actions: SettingsFormActions;
}
export type SettingsSelectKeyboardAction =
| { type: "close" }
| { type: "focus"; index: number }
| null;
export function getSettingsSelectKeyboardAction(
key: string,
currentIndex: number,
optionCount: number
): SettingsSelectKeyboardAction {
if (key === "Escape") {
return { type: "close" };
}
if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
return { type: "focus", index: getSettingsSelectNavigationIndex(currentIndex, optionCount, key) };
}
return null;
}
export function closeSettingsSelectAndRestoreFocus(
close: () => void,
trigger: Pick<HTMLButtonElement, "focus"> | null
): void {
close();
trigger?.focus();
}
function getThemeNavigationIndex(currentIndex: number, optionCount: number, key: string): number | null {
if (key === "ArrowRight" || key === "ArrowDown") {
return getSettingsSelectNavigationIndex(currentIndex, optionCount, "ArrowDown");
}
if (key === "ArrowLeft" || key === "ArrowUp") {
return getSettingsSelectNavigationIndex(currentIndex, optionCount, "ArrowUp");
}
if (key === "Home" || key === "End") {
return getSettingsSelectNavigationIndex(currentIndex, optionCount, key);
}
return null;
}
function FieldHelp({ field }: { field: SettingsFieldViewModel }): ReactElement | null {
return field.help ? <span className="settings-field-help" id={`${field.id}-help`}>{field.help}</span> : null;
@@ -87,28 +127,27 @@ function SelectControl({ field, actions }: { field: SettingsSelectFieldViewModel
requestAnimationFrame(() => optionRefs.current[nextIndex]?.focus());
};
const closeAndRestoreFocus = (): void => {
closeSettingsSelectAndRestoreFocus(() => setOpen(false), triggerRef.current);
};
useEffect(() => {
if (!open) return;
const close = (event: MouseEvent): void => {
if (event.target instanceof Node && !rootRef.current?.contains(event.target)) setOpen(false);
};
const onKeyDown = (event: globalThis.KeyboardEvent): void => {
if (event.key === "Escape") setOpen(false);
};
window.addEventListener("mousedown", close);
window.addEventListener("keydown", onKeyDown);
return () => {
window.removeEventListener("mousedown", close);
window.removeEventListener("keydown", onKeyDown);
};
}, [open]);
const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>): void => {
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End") {
const action = getSettingsSelectKeyboardAction(event.key, selectedIndex, field.options.length);
if (action?.type === "focus") {
event.preventDefault();
const nextIndex = getSettingsSelectNavigationIndex(selectedIndex, field.options.length, event.key);
setOpen(true);
focusOption(nextIndex);
focusOption(action.index);
return;
}
if (event.key === "Enter" || event.key === " ") {
@@ -119,17 +158,20 @@ function SelectControl({ field, actions }: { field: SettingsSelectFieldViewModel
};
const onOptionKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number): void => {
if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Home" || event.key === "End") {
const action = getSettingsSelectKeyboardAction(event.key, index, field.options.length);
if (action?.type === "focus") {
event.preventDefault();
const nextIndex = getSettingsSelectNavigationIndex(index, field.options.length, event.key);
focusOption(nextIndex);
focusOption(action.index);
}
};
const onSelectKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
if (!open || getSettingsSelectKeyboardAction(event.key, selectedIndex, field.options.length)?.type !== "close") {
return;
}
if (event.key === "Escape") {
event.preventDefault();
setOpen(false);
triggerRef.current?.focus();
}
event.preventDefault();
event.stopPropagation();
closeAndRestoreFocus();
};
const onBlur = (event: FocusEvent<HTMLDivElement>): void => {
@@ -139,7 +181,7 @@ function SelectControl({ field, actions }: { field: SettingsSelectFieldViewModel
return (
<div className="settings-field">
<label id={`${field.id}-label`}>{field.label}</label>
<div className={`settings-select${open ? " is-open" : ""}${field.disabled ? " is-disabled" : ""}`} onBlur={onBlur} ref={rootRef}>
<div className={`settings-select${open ? " is-open" : ""}${field.disabled ? " is-disabled" : ""}`} onBlur={onBlur} onKeyDown={onSelectKeyDown} ref={rootRef}>
<button
aria-controls={`${field.id}-options`}
aria-expanded={open}
@@ -165,11 +207,12 @@ function SelectControl({ field, actions }: { field: SettingsSelectFieldViewModel
key={option.value}
onClick={() => {
actions.onChange(field.id, option.value);
setOpen(false);
closeAndRestoreFocus();
}}
onKeyDown={(event) => onOptionKeyDown(event, index)}
ref={(element) => { optionRefs.current[index] = element; }}
role="option"
tabIndex={-1}
type="button"
>{option.label}</button>
))}
@@ -187,19 +230,32 @@ function SettingsField({ field, actions }: { field: SettingsFieldViewModel; acti
if (field.kind === "select") {
return <SelectControl actions={actions} field={field} />;
}
if (field.kind === "theme") {
return (
<fieldset className="settings-field settings-theme-field" disabled={field.disabled}>
<legend>{field.label}</legend>
<div aria-describedby={field.help ? `${field.id}-help` : undefined} className="settings-theme-options" role="radiogroup">
{field.options.map((option) => (
<button
aria-checked={field.value === option.value}
className={`settings-theme-option${field.value === option.value ? " is-active" : ""}`}
key={option.value}
onClick={() => actions.onChange(field.id, option.value)}
role="radio"
type="button"
if (field.kind === "theme") {
const selectedIndex = Math.max(0, field.options.findIndex((option) => option.value === field.value));
return (
<fieldset className="settings-field settings-theme-field" disabled={field.disabled}>
<legend id={`${field.id}-label`}>{field.label}</legend>
<div aria-describedby={field.help ? `${field.id}-help` : undefined} aria-labelledby={`${field.id}-label`} className="settings-theme-options" role="radiogroup">
{field.options.map((option, index) => (
<button
aria-checked={field.value === option.value}
className={`settings-theme-option${field.value === option.value ? " is-active" : ""}`}
key={option.value}
onClick={() => actions.onChange(field.id, option.value)}
onKeyDown={(event) => {
const nextIndex = getThemeNavigationIndex(index, field.options.length, event.key);
if (nextIndex === null) {
return;
}
event.preventDefault();
const group = event.currentTarget.closest('[role="radiogroup"]');
const radios = group?.querySelectorAll<HTMLElement>('[role="radio"]');
radios?.[nextIndex]?.focus();
actions.onChange(field.id, field.options[nextIndex].value);
}}
role="radio"
tabIndex={index === selectedIndex ? 0 : -1}
type="button"
>
<span aria-hidden="true" className={`settings-theme-preview is-${option.value}`} />
<span>{option.label}</span>
src/renderer/views/settings/settings.css
+48 -9
View File
@@ -117,13 +117,18 @@
font-size: 12px;
}
.settings-save-state.is-clean,
.settings-save-state.is-saved {
color: var(--ui-success-text);
}
.settings-save-state.is-dirty,
.settings-save-state.is-saving {
color: var(--ui-warning);
color: var(--ui-warning-text);
}
.settings-save-state.is-error {
color: var(--ui-danger);
color: var(--ui-danger-text);
}
.settings-content-body {
@@ -209,7 +214,7 @@
height: 44px;
min-width: 0;
padding: 0 12px;
border: 1px solid var(--ui-border);
border: 1px solid var(--ui-control-border);
border-radius: 6px;
outline: 0;
background: var(--ui-input);
@@ -231,7 +236,7 @@
justify-content: space-between;
gap: 12px;
padding: 0 12px;
border: 1px solid var(--ui-border);
border: 1px solid var(--ui-control-border);
border-radius: 6px;
background: var(--ui-input);
color: var(--ui-text);
@@ -312,7 +317,7 @@
.settings-account-row:focus-visible,
.settings-account-action-button:focus-visible,
.settings-account-picker-row:focus-visible {
outline: 2px solid var(--ui-accent);
outline: 2px solid var(--ui-focus);
outline-offset: 2px;
}
@@ -470,13 +475,13 @@
.settings-button-primary {
border-color: var(--ui-primary);
background: var(--ui-primary);
color: #181A1F;
color: var(--ui-primary-text);
}
.settings-button-danger {
border-color: color-mix(in srgb, var(--ui-danger) 70%, var(--ui-border));
background: transparent;
color: var(--ui-danger);
color: var(--ui-danger-text);
}
.settings-button:hover:not(:disabled),
@@ -488,7 +493,7 @@
.settings-button-primary:hover:not(:disabled) {
background: var(--ui-primary-hover);
color: #181A1F;
color: var(--ui-primary-text);
}
.settings-account-workspace {
@@ -677,15 +682,28 @@
background: var(--ui-success);
}
.settings-account-status-badge.is-ok {
color: var(--ui-success-text);
}
.settings-account-status-badge.is-free::before,
.settings-account-status-badge.is-unknown::before {
background: var(--ui-warning);
}
.settings-account-status-badge.is-free,
.settings-account-status-badge.is-unknown {
color: var(--ui-warning-text);
}
.settings-account-status-badge.is-invalid::before {
background: var(--ui-danger);
}
.settings-account-status-badge.is-invalid {
color: var(--ui-danger-text);
}
.settings-account-status-badge.is-disabled::before {
background: var(--ui-text-muted);
}
@@ -746,7 +764,7 @@
.settings-account-table-error .ui-data-table-empty-title,
.settings-account-dialog-error {
color: var(--ui-danger);
color: var(--ui-danger-text);
}
.settings-account-rules {
@@ -879,6 +897,16 @@
overflow-y: auto;
}
.settings-account-picker-empty {
display: grid;
min-height: 72px;
padding: 16px;
place-items: center;
color: var(--ui-text-muted);
font-size: 13px;
text-align: center;
}
.settings-account-picker-row {
width: 100%;
min-height: 36px;
@@ -905,6 +933,17 @@
box-shadow: inset 3px 0 0 var(--ui-accent);
}
.settings-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
border: 0;
white-space: nowrap;
}
.settings-account-picker-service {
display: flex;
min-width: 0;
src/renderer/views/statistics/statistics.css
+4 -4
View File
@@ -53,7 +53,7 @@
.statistics-range:focus-visible,
.statistics-reset:focus-visible {
outline: 2px solid var(--ui-accent);
outline: 2px solid var(--ui-focus);
outline-offset: 2px;
}
@@ -132,7 +132,7 @@
}
.statistics-reset-danger {
color: var(--ui-danger);
color: var(--ui-danger-text);
}
.statistics-reset:disabled {
@@ -178,7 +178,7 @@
}
.statistics-kpi-danger .statistics-kpi-value {
color: var(--ui-danger);
color: var(--ui-danger-text);
}
.statistics-kpi-source {
@@ -309,7 +309,7 @@
}
.statistics-provider-errors {
color: var(--ui-danger);
color: var(--ui-danger-text);
}
.statistics-provider-empty {