Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 230 Wiki Activity

Polish update and settings workspace UI

Browse Source 
Keep download progress inside the updater popover, slow changelog transitions, and improve dark-theme checkbox contrast. Expand diagnostics, prevent cleanup option clipping, improve navigation readability, and cover the affected states in Electron regression tests. Prepare version 1.0.15 release metadata.
This commit is contained in:
Sucukdeluxe
2026-08-13 04:41:42 +02:00
parent f4df47c89f
commit c0d45ab268
10 changed files with 311 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+5 -3
View File
@@ -23,8 +23,10 @@
<button type="button" class="update-changelog-toggle" id="updateChangelogToggle" onclick="toggleUpdateChangelog()" aria-controls="updateChangelogPanel" aria-expanded="false">Changelog anzeigen</button>
</div>
<div class="update-changelog-panel" id="updateChangelogPanel" aria-hidden="true">
<div class="update-changelog-content" id="updateChangelogContent"></div>
<p class="update-changelog-empty" id="updateChangelogEmpty" hidden>Kein Changelog verfügbar.</p>
<div class="update-changelog-panel-inner">
<div class="update-changelog-content" id="updateChangelogContent"></div>
<p class="update-changelog-empty" id="updateChangelogEmpty" hidden>Kein Changelog verfügbar.</p>
</div>
</div>
</div>
@@ -940,7 +942,7 @@
<div class="settings-card" data-settings-pane="updates" hidden>
<h3 id="updateTitle">Updates</h3>
<p id="versionInfo" class="card-intro">Version: v1.0.14</p>
<p id="versionInfo" class="card-intro">Version: v1.0.15</p>
<button type="button" class="btn-secondary" id="checkUpdateBtn" onclick="checkUpdate()">Nach Updates suchen</button>
</div>
src/styles.css
+14 -4
View File
@@ -3000,22 +3000,32 @@ input[type="checkbox"].vod-select-checkbox {
}
.update-changelog-panel {
max-height: 0;
display: grid;
grid-template-rows: 0fr;
max-height: 320px;
overflow: hidden;
padding: 0 14px;
opacity: 0;
transform: translateY(-4px);
transition: max-height 260ms cubic-bezier(0.22, 0.76, 0.22, 1), padding 260ms cubic-bezier(0.22, 0.76, 0.22, 1), opacity 180ms ease, transform 260ms cubic-bezier(0.22, 0.76, 0.22, 1);
transition: grid-template-rows 440ms cubic-bezier(0.22, 0.76, 0.22, 1), padding 440ms cubic-bezier(0.22, 0.76, 0.22, 1), opacity 320ms ease, transform 440ms cubic-bezier(0.22, 0.76, 0.22, 1);
}
.update-changelog-panel.is-expanded {
max-height: 320px;
overflow: auto;
grid-template-rows: 1fr;
padding: 14px;
opacity: 1;
transform: translateY(0);
}
.update-changelog-panel-inner {
min-height: 0;
overflow: hidden;
}
.update-changelog-panel.is-expanded .update-changelog-panel-inner {
overflow: auto;
}
.update-changelog-content {
display: grid;
gap: 12px;
src/workspace.css
+51 -3
View File
@@ -323,7 +323,7 @@ textarea:disabled,
margin: 0;
padding: 0;
overflow: hidden;
color: var(--workspace-text-muted);
color: var(--workspace-text);
background: transparent;
border: 1px solid transparent;
border-radius: var(--workspace-radius-small);
@@ -1456,6 +1456,16 @@ input[type="checkbox"]:checked {
border-color: var(--workspace-primary);
}
body.theme-twitch #settingsTab input[type="checkbox"]:checked,
body.theme-dark #settingsTab input[type="checkbox"]:checked,
body.theme-discord #settingsTab input[type="checkbox"]:checked,
body.theme-youtube #settingsTab input[type="checkbox"]:checked,
body.theme-apple #settingsTab input[type="checkbox"]:checked {
background-color: #22c55e;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E");
border-color: #22c55e;
}
input[type="radio"] {
accent-color: var(--workspace-primary);
}
@@ -2643,6 +2653,14 @@ input[type="checkbox"].vod-select-checkbox:focus-visible {
}
}
@media (prefers-color-scheme: dark) {
body.theme-system #settingsTab input[type="checkbox"]:checked {
background-color: #22c55e;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 5'/%3E%3C/svg%3E");
border-color: #22c55e;
}
}
@media (prefers-reduced-motion: reduce) {
.vod-bulk-bar {
transition: transform 280ms cubic-bezier(0.22, 0.76, 0.22, 1), opacity 220ms ease, visibility 0s linear 280ms !important;
@@ -2662,7 +2680,7 @@ input[type="checkbox"].vod-select-checkbox:focus-visible {
}
.update-changelog-panel {
transition: max-height 260ms cubic-bezier(0.22, 0.76, 0.22, 1), padding 260ms cubic-bezier(0.22, 0.76, 0.22, 1), opacity 180ms ease, transform 260ms cubic-bezier(0.22, 0.76, 0.22, 1) !important;
transition: grid-template-rows 440ms cubic-bezier(0.22, 0.76, 0.22, 1), padding 440ms cubic-bezier(0.22, 0.76, 0.22, 1), opacity 320ms ease, transform 440ms cubic-bezier(0.22, 0.76, 0.22, 1) !important;
}
.top-nav::before {
@@ -2934,6 +2952,7 @@ input[type="checkbox"].vod-select-checkbox:focus-visible {
.workspace-update-popover .update-banner-progress-wrap {
width: 100%;
margin: 0;
}
.workspace-update-popover .update-banner-progress-track {
@@ -3519,6 +3538,35 @@ input[type="checkbox"].vod-select-checkbox:focus-visible {
width: 100%;
}
#settingsTab .settings-card[data-settings-pane="storage"] {
width: 720px;
}
#settingsTab.active[data-settings-pane="debug"],
#settingsTab.active[data-settings-pane="metrics"] {
display: flex;
flex-direction: column;
overflow: hidden;
}
#settingsTab[data-settings-pane="debug"] .settings-card[data-settings-pane="debug"],
#settingsTab[data-settings-pane="metrics"] .settings-card[data-settings-pane="metrics"] {
display: flex;
width: 100%;
min-height: 0;
flex: 1 1 auto;
flex-direction: column;
padding-bottom: 0;
}
#debugLogOutput,
#runtimeMetricsOutput {
width: 100%;
min-height: 0;
max-height: none;
flex: 1 1 auto;
}
#settingsTab .form-row:has(#downloadPath) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
@@ -3908,7 +3956,7 @@ input[type="checkbox"].vod-select-checkbox:focus-visible {
white-space: nowrap;
text-overflow: ellipsis;
border: 0;
font-size: 12px;
font-size: 13px;
}
.topbar-navigation-cluster .top-nav-item[data-tab="vods"] {