Administrator/Multi-Hoster-Upload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 47 Wiki Activity

style: integrate queue filters into the command bar

Browse Source 
Move search, host, status, and reset controls into one framed filter group beside the upload actions, preserving responsive wrapping within the same toolbar.
This commit is contained in:
Sucukdeluxe
2026-08-21 00:59:23 +02:00
parent 503cb26615
commit e742a74f6d
3 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
renderer/index.html
+8 -9
View File
@@ -289,15 +289,14 @@
<button class="toolbar-btn" id="moveBottomBtn" title="Ganz nach unten" aria-label="Ganz nach unten">
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 7l-4-5h8z" fill="#4caf50"/><path d="M8 11l-4-5h8z" fill="#4caf50"/><rect x="4" y="13" width="8" height="2" rx="0.5" fill="#4caf50"/></svg>
</button>
</div>
<div class="queue-filter-bar" aria-label="Warteschlange filtern">
<input class="key-input" id="queueSearchInput" type="search" placeholder="Dateiname suchen" aria-label="Dateiname suchen" style="max-width:260px">
<select class="hs-input" id="queueHosterFilter" aria-label="Nach Hoster filtern" style="width:auto;min-width:150px"><option value="">Alle Hoster</option></select>
<select class="hs-input" id="queueStatusFilter" aria-label="Nach Status filtern" style="width:auto;min-width:150px">
<option value="">Alle Status</option><option value="error">Nur Fehler</option><option value="active">Aktiv</option><option value="waiting">Wartend</option><option value="done">Erfolgreich</option>
</select>
<button class="btn btn-xs btn-secondary queue-filter-reset" id="queueFilterResetBtn" hidden>Filter zurücksetzen</button>
<div class="queue-filter-bar" aria-label="Warteschlange filtern">
<input class="key-input" id="queueSearchInput" type="search" placeholder="Dateiname suchen" aria-label="Dateiname suchen" style="max-width:260px">
<select class="hs-input" id="queueHosterFilter" aria-label="Nach Hoster filtern" style="width:auto;min-width:150px"><option value="">Alle Hoster</option></select>
<select class="hs-input" id="queueStatusFilter" aria-label="Nach Status filtern" style="width:auto;min-width:150px">
<option value="">Alle Status</option><option value="error">Nur Fehler</option><option value="active">Aktiv</option><option value="waiting">Wartend</option><option value="done">Erfolgreich</option>
</select>
<button class="btn btn-xs btn-secondary queue-filter-reset" id="queueFilterResetBtn" hidden>Filter zurücksetzen</button>
</div>
</div>
<div class="queue-container" id="queueContainer">
renderer/styles.css
+17 -1
View File
@@ -402,12 +402,28 @@ body {
margin: 0 4px;
}
.queue-filter-reset {
margin-left: auto;
margin-left: 2px;
white-space: nowrap;
}
.queue-filter-reset[hidden] {
display: none;
}
.queue-filter-bar {
min-width: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
margin-left: auto;
padding: 3px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--bg-input);
}
.queue-filter-bar .key-input,
.queue-filter-bar .hs-input {
height: 30px;
}
.queue-container {
flex: 1 1 0;
min-height: 0;
tests/startup-renderer.test.js
+2
View File
@@ -178,6 +178,8 @@ test('header occupies its final geometry before asynchronous initialization', ()
assert.match(css, /\.update-release-notes\s*\{[^}]*height:\s*min\(264px,\s*48vh\);/su);
assert.match(html, /class="update-progress-footer"[\s\S]*id="updateProgressDetails"[\s\S]*id="updateProgressSize"[\s\S]*id="updateProgressSpeed"[\s\S]*id="updateProgressEta"[\s\S]*id="updateProgressText"/u);
assert.match(html, /id="queueFilterResetBtn"[^>]*hidden[^>]*>Filter zurücksetzen</u);
assert.doesNotMatch(html, /<\/div>\s*<div class="queue-filter-bar"/u);
assert.match(css, /\.queue-filter-bar\s*\{[^}]*display:\s*flex;[^}]*margin-left:\s*auto;[^}]*border:\s*1px solid var\(--border\);[^}]*border-radius:\s*7px;/su);
assert.match(css, /#updateProgressDetails\s*\{[^}]*display:\s*grid;[^}]*grid-template-columns:\s*19ch 2ch 11ch 2ch 10ch;[^}]*column-gap:\s*0;[^}]*font-variant-numeric:\s*tabular-nums;/su);
assert.match(css, /\.update-progress-separator\s*\{[^}]*display:\s*grid;[^}]*place-items:\s*center;/su);
assert.match(css, /#updateProgressSpeed\s*\{[^}]*text-align:\s*right;/su);