alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Comprehensive WebUI review: 41 UX/feature/CSS improvements

Browse Source 
Safety & Correctness:
- Add confirmation dialogs to Stop All, turnOffDevice
- i18n confirm dialog (title, yes, no buttons)
- Fix duplicate tutorial-overlay ID
- Define missing CSS variables (--radius, --text-primary, --hover-bg, --input-bg)
- Fix toast z-index conflict with confirm dialog (2500 → 3000)

UX Consistency:
- Add backdrop-close to test modals
- Add device clone feature (only entity without it)
- Add sync clocks to command palette
- Replace 20+ hardcoded accent colors with CSS vars/color-mix()
- Remove dead .badge duplicate from components.css
- Make calibration elements keyboard-accessible (div → button)
- Add aria-labels to color picker swatches
- Fix pattern canvas mobile horizontal scroll
- Fix graph editor mobile bottom clipping

Polish:
- Add empty-state messages to all CardSection instances
- Convert 21 px font-sizes to rem
- Add scroll-behavior: smooth with reduced-motion override
- Add @media print styles
- Add :focus-visible to 4 missing interactive elements
- Fix settings modal close label (Cancel → Close)
- Fix api-key submit button i18n

New Features:
- Command palette actions: start/stop targets, activate scenes, enable/disable
- Bulk start/stop API endpoints (POST /output-targets/bulk/start|stop)
- OS notification history viewer modal
- Scene "used by" automation reference count on cards
- Clock elapsed time display on Streams tab cards
- Device "last seen" relative timestamp on cards
- Audio device refresh button in edit modal
- Composite layer drag-to-reorder
- MQTT settings panel (broker config with JSON persistence)
- WebSocket log viewer with level filtering and ring buffer
- Runtime log-level adjustment (GET/PUT endpoints + settings UI)
- Animated value source waveform canvas preview
- Gradient custom preset save/delete (localStorage)
- API key read-only display in settings
- Backup metadata (file size, auto/manual badges)
- Server restart button with confirm + overlay
- Partial config export/import per entity type
- Progressive disclosure in target editor (Advanced section)

CSS Architecture:
- Define radius scale tokens (--radius-sm/md/lg/pill)
- Scope .cs-filter selectors to remove 7 !important overrides
- Consolidate duplicate toggle switch (filter-list → settings-toggle)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-16 18:46:38 +03:00
parent a4a0e39b9b
commit 304fa24389
47 changed files with 2594 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
server/src/wled_controller/static/css/streams.css
View File

@@ -11,7 +11,7 @@
.template-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
border-radius: var(--radius-md);
padding: 16px;
transition: box-shadow 0.2s ease, transform 0.2s ease;
display: flex;
@@ -92,20 +92,20 @@
.badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
}
.template-description {
color: var(--text-secondary);
font-size: 14px;
font-size: 0.875rem;
margin-bottom: 12px;
line-height: 1.4;
}
.template-config {
font-size: 14px;
font-size: 0.875rem;
color: var(--text-secondary);
margin-bottom: 8px;
}
@@ -166,7 +166,7 @@
.template-no-config {
margin: 12px 0;
font-size: 13px;
font-size: 0.8125rem;
color: var(--primary-text-color);
font-weight: 500;
padding: 4px 0;
@@ -176,7 +176,7 @@
width: 100%;
margin-top: 8px;
border-collapse: collapse;
font-size: 13px;
font-size: 0.8125rem;
}
.config-table td {
@@ -246,7 +246,7 @@
.text-muted {
color: var(--text-secondary);
font-style: italic;
font-size: 13px;
font-size: 0.8125rem;
}
/* PP Filter List in Template Modal */
@@ -259,7 +259,7 @@
.pp-filter-empty {
color: var(--text-secondary);
font-size: 13px;
font-size: 0.8125rem;
text-align: center;
padding: 16px;
border: 1px dashed var(--border-color);
@@ -294,13 +294,13 @@
.pp-filter-card-name {
font-weight: 600;
font-size: 14px;
font-size: 0.875rem;
color: var(--text-primary);
}
.pp-filter-card-summary {
color: var(--text-secondary);
font-size: 12px;
font-size: 0.75rem;
margin-right: 8px;
white-space: nowrap;
overflow: hidden;
@@ -360,7 +360,7 @@
.pp-filter-option label {
display: flex;
justify-content: space-between;
font-size: 12px;
font-size: 0.75rem;
color: var(--text-secondary);
}
@@ -375,55 +375,21 @@
border-radius: 4px;
background: var(--card-bg);
color: var(--text-primary);
font-size: 12px;
font-size: 0.75rem;
font-family: monospace;
}
.pp-filter-option-bool label {
justify-content: space-between;
gap: 8px;
/* Bool option row: label text on left, .settings-toggle on right */
.pp-filter-option-bool {
flex-direction: row;
align-items: center;
cursor: pointer;
justify-content: space-between;
padding: 4px 0;
}
.pp-filter-option-bool input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 34px;
min-width: 34px;
height: 18px;
background: var(--border-color);
border-radius: 9px;
position: relative;
cursor: pointer;
transition: background 0.2s;
order: 1;
margin: 0;
}
.pp-filter-option-bool input[type="checkbox"]::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
background: white;
border-radius: 50%;
transition: transform 0.2s;
}
.pp-filter-option-bool input[type="checkbox"]:checked {
background: var(--primary-color);
}
.pp-filter-option-bool input[type="checkbox"]:checked::after {
transform: translateX(16px);
}
.pp-filter-option-bool span {
order: 0;
.pp-filter-option-label {
font-size: 0.75rem;
color: var(--text-secondary);
}
/* ── PP filter drag-and-drop ── */
@@ -432,7 +398,7 @@
cursor: grab;
opacity: 0;
color: var(--text-secondary);
font-size: 12px;
font-size: 0.75rem;
line-height: 1;
padding: 2px 4px;
border-radius: 3px;
@@ -492,7 +458,7 @@ body.pp-filter-dragging .pp-filter-drag-handle {
border-radius: 6px;
background: var(--card-bg);
color: var(--text-primary);
font-size: 13px;
font-size: 0.8125rem;
}
.pp-add-filter-btn {
@@ -506,7 +472,7 @@ body.pp-filter-dragging .pp-filter-drag-handle {
border-radius: 6px;
background: var(--card-bg);
color: var(--text-primary);
font-size: 20px;
font-size: 1.25rem;
cursor: pointer;
padding: 0;
line-height: 1;
@@ -526,7 +492,7 @@ body.pp-filter-dragging .pp-filter-drag-handle {
.template-test-section h3 {
margin-top: 0;
margin-bottom: 12px;
font-size: 16px;
font-size: 1rem;
}
.test-results-container {
@@ -550,7 +516,7 @@ body.pp-filter-dragging .pp-filter-drag-handle {
.test-performance-section h4 {
margin-top: 0;
margin-bottom: 12px;
font-size: 14px;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
}
@@ -579,7 +545,7 @@ body.pp-filter-dragging .pp-filter-drag-handle {
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-color);
font-size: 14px;
font-size: 0.875rem;
}
.stat-item:last-child {
@@ -602,7 +568,7 @@ body.pp-filter-dragging .pp-filter-drag-handle {
text-align: center;
padding: 40px 20px;
color: var(--text-secondary);
font-size: 16px;
font-size: 1rem;
}
/* Stream type badges */
@@ -619,7 +585,7 @@ body.pp-filter-dragging .pp-filter-drag-handle {
/* Stream info panel in stream selector modal */
.stream-info-panel {
padding: 4px 0 0 0;
font-size: 14px;
font-size: 0.875rem;
line-height: 1.6;
}
@@ -792,23 +758,23 @@ body.pp-filter-dragging .pp-filter-drag-handle {
flex-shrink: 0;
}
.cs-filter {
.cs-filter-wrap .cs-filter {
width: 100%;
padding: 4px 26px 4px 10px !important;
font-size: 0.78rem !important;
border: 1px solid var(--border-color) !important;
border-radius: 14px !important;
background: var(--bg-secondary) !important;
color: var(--text-color) !important;
padding: 4px 26px 4px 10px;
font-size: 0.78rem;
border: 1px solid var(--border-color);
border-radius: 14px;
background: var(--bg-secondary);
color: var(--text-color);
outline: none;
box-shadow: none !important;
box-shadow: none;
box-sizing: border-box;
transition: border-color 0.2s, background 0.2s, width 0.2s;
}
.cs-filter:focus {
border-color: var(--primary-color) !important;
background: var(--bg-color) !important;
.cs-filter-wrap .cs-filter:focus {
border-color: var(--primary-color);
background: var(--bg-color);
}
.cs-filter::placeholder {
@@ -838,6 +804,22 @@ body.pp-filter-dragging .pp-filter-drag-handle {
background: var(--border-color);
}
/* Empty state for CardSection */
.cs-empty-state {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem 1rem;
text-align: center;
}
.cs-empty-text {
font-size: 0.9rem;
color: var(--text-muted);
font-style: italic;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.templates-grid {