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

Use flat buttons and power icon for dashboard start/stop actions

Browse Source 
- Replace btn-icon with transparent flat dashboard-action-btn style
- Use Lucide power icon instead of square for stop/turn-off buttons
- Add accent-tinted hover backgrounds for start (green) and stop (amber)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-27 21:17:00 +03:00
parent 6a7ba3d0b7
commit efb05eba77
5 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
server/src/wled_controller/static/js/core/icon-paths.js
View File

@@ -69,3 +69,4 @@ export const rotateCw = '<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.
export const rotateCcw = '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>';
export const download = '<path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/>';
export const undo2 = '<path d="M9 14 4 9l5-5"/><path d="M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11"/>';
export const power = '<path d="M18.36 6.64a9 9 0 1 1-12.73 0"/><line x1="12" x2="12" y1="2" y2="12"/>';

4
server/src/wled_controller/static/js/core/icons.js
View File

@@ -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);

12
server/src/wled_controller/static/js/features/dashboard.js
View File

@@ -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) {
</div>
</div>
<div class="dashboard-target-actions">
<button class="btn btn-icon ${isRunning ? 'btn-warning' : 'btn-success'}" onclick="${isRunning ? `dashboardStopTarget('${target.id}')` : `dashboardStartTarget('${target.id}')`}" title="${isRunning ? t('device.stop') : t('device.start')}">
<button class="dashboard-action-btn ${isRunning ? 'stop' : 'start'}" onclick="${isRunning ? `dashboardStopTarget('${target.id}')` : `dashboardStartTarget('${target.id}')`}" title="${isRunning ? t('device.stop') : t('device.start')}">
${isRunning ? ICON_STOP_PLAIN : ICON_START}
</button>
</div>
@@ -629,7 +629,7 @@ function renderDashboardTarget(target, isRunning, devicesMap = {}, cssSourceMap
</div>
<div class="dashboard-target-actions">
<button class="dashboard-autostart-btn${target.auto_start ? ' active' : ''}" onclick="dashboardToggleAutoStart('${target.id}', ${!target.auto_start})" title="${target.auto_start ? t('autostart.toggle.enabled') : t('autostart.toggle.disabled')}">&#x2605;</button>
<button class="btn btn-icon btn-warning" onclick="dashboardStopTarget('${target.id}')" title="${t('device.button.stop')}">${ICON_STOP_PLAIN}</button>
<button class="dashboard-action-btn stop" onclick="dashboardStopTarget('${target.id}')" title="${t('device.button.stop')}">${ICON_STOP_PLAIN}</button>
</div>
</div>`;
} else {
@@ -644,7 +644,7 @@ function renderDashboardTarget(target, isRunning, devicesMap = {}, cssSourceMap
<div class="dashboard-target-metrics"></div>
<div class="dashboard-target-actions">
<button class="dashboard-autostart-btn${target.auto_start ? ' active' : ''}" onclick="dashboardToggleAutoStart('${target.id}', ${!target.auto_start})" title="${target.auto_start ? t('autostart.toggle.enabled') : t('autostart.toggle.disabled')}">&#x2605;</button>
<button class="btn btn-icon btn-success" onclick="dashboardStartTarget('${target.id}')" title="${t('device.button.start')}">${ICON_START}</button>
<button class="dashboard-action-btn start" onclick="dashboardStartTarget('${target.id}')" title="${t('device.button.start')}">${ICON_START}</button>
</div>
</div>`;
}
@@ -694,7 +694,7 @@ function renderDashboardProfile(profile) {
</div>
</div>
<div class="dashboard-target-actions">
<button class="btn btn-icon ${profile.enabled ? 'btn-warning' : 'btn-success'}" onclick="dashboardToggleProfile('${profile.id}', ${!profile.enabled})" title="${profile.enabled ? t('profiles.action.disable') : t('profiles.status.active')}">
<button class="dashboard-action-btn ${profile.enabled ? 'stop' : 'start'}" onclick="dashboardToggleProfile('${profile.id}', ${!profile.enabled})" title="${profile.enabled ? t('profiles.action.disable') : t('profiles.status.active')}">
${profile.enabled ? ICON_STOP_PLAIN : ICON_START}
</button>
</div>