diff --git a/server/src/wled_controller/static/css/components.css b/server/src/wled_controller/static/css/components.css index f48e852..52df1c3 100644 --- a/server/src/wled_controller/static/css/components.css +++ b/server/src/wled_controller/static/css/components.css @@ -398,6 +398,7 @@ input:-webkit-autofill:focus { .header-btn:focus-visible, .tutorial-trigger-btn:focus-visible, .tutorial-close-btn:focus-visible, +.dashboard-action-btn:focus-visible, .btn-expand-collapse:focus-visible, .btn-filter-action:focus-visible, .settings-toggle:focus-visible { diff --git a/server/src/wled_controller/static/css/dashboard.css b/server/src/wled_controller/static/css/dashboard.css index e2b95fd..2d6085f 100644 --- a/server/src/wled_controller/static/css/dashboard.css +++ b/server/src/wled_controller/static/css/dashboard.css @@ -202,6 +202,36 @@ gap: 4px; } +.dashboard-action-btn { + background: none; + border: none; + width: 28px; + height: 28px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border-radius: 4px; + transition: color 0.2s, background 0.2s; +} + +.dashboard-action-btn.start { + color: var(--primary-color); +} + +.dashboard-action-btn.start:hover { + background: color-mix(in srgb, var(--primary-color) 12%, transparent); +} + +.dashboard-action-btn.stop { + color: var(--warning-color, #ffc107); +} + +.dashboard-action-btn.stop:hover { + background: rgba(255, 193, 7, 0.12); +} + .dashboard-autostart-btn { background: none; border: none; diff --git a/server/src/wled_controller/static/js/core/icon-paths.js b/server/src/wled_controller/static/js/core/icon-paths.js index 92dff65..4f9c879 100644 --- a/server/src/wled_controller/static/js/core/icon-paths.js +++ b/server/src/wled_controller/static/js/core/icon-paths.js @@ -69,3 +69,4 @@ export const rotateCw = ''; export const download = ''; export const undo2 = ''; +export const power = ''; diff --git a/server/src/wled_controller/static/js/core/icons.js b/server/src/wled_controller/static/js/core/icons.js index 3e664f8..1531029 100644 --- a/server/src/wled_controller/static/js/core/icons.js +++ b/server/src/wled_controller/static/js/core/icons.js @@ -83,8 +83,8 @@ export const ICON_CLONE = _svg(P.copy); export const ICON_EDIT = _svg(P.pencil); export const ICON_TEST = _svg(P.flaskConical); export const ICON_START = _svg(P.play); -export const ICON_STOP = _svg(P.square); -export const ICON_STOP_PLAIN = _svg(P.square); +export const ICON_STOP = _svg(P.power); +export const ICON_STOP_PLAIN = _svg(P.power); export const ICON_PAUSE = _svg(P.pause); export const ICON_SETTINGS = _svg(P.settings); export const ICON_CALIBRATION = _svg(P.ruler); diff --git a/server/src/wled_controller/static/js/features/dashboard.js b/server/src/wled_controller/static/js/features/dashboard.js index d8854e6..d721bcc 100644 --- a/server/src/wled_controller/static/js/features/dashboard.js +++ b/server/src/wled_controller/static/js/features/dashboard.js @@ -268,9 +268,9 @@ function _updateProfilesInPlace(profiles) { const active = (p.active_target_ids || []).length; metricVal.textContent = p.is_active ? `${active}/${cnt}` : `${cnt}`; } - const btn = card.querySelector('.dashboard-target-actions .btn'); + const btn = card.querySelector('.dashboard-target-actions .dashboard-action-btn'); if (btn) { - btn.className = `btn btn-icon ${p.enabled ? 'btn-warning' : 'btn-success'}`; + btn.className = `dashboard-action-btn ${p.enabled ? 'stop' : 'start'}`; btn.setAttribute('onclick', `dashboardToggleProfile('${p.id}', ${!p.enabled})`); btn.innerHTML = p.enabled ? ICON_STOP_PLAIN : ICON_START; } @@ -464,7 +464,7 @@ export async function loadDashboard(forceFullRender = false) {
-
@@ -629,7 +629,7 @@ function renderDashboardTarget(target, isRunning, devicesMap = {}, cssSourceMap
- +
`; } else { @@ -644,7 +644,7 @@ function renderDashboardTarget(target, isRunning, devicesMap = {}, cssSourceMap
- +
`; } @@ -694,7 +694,7 @@ function renderDashboardProfile(profile) {
-