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

Polish calibration UI: close buttons, icon footers, span/toggle sync, input toggle
Some checks failed
Validate / validate (push) Failing after 8s
Details

Browse Source 
- Add close X button to all modal headers (acts as Cancel)
- Replace Cancel/Save labels with icon buttons (✕/✓)
- Remove header/footer separator lines, reduce spacing
- Fix canvas re-render on resize via ResizeObserver
- Move calibration hint to top as section-tip
- Increase toggle zones to 16px, make borders more visible
- Differentiate min/max ticks (long) from intermediate (short)
- Sync toggle zones and ticks with span position
- Fix span handle z-index to stay above LED input
- Add total LED label click to toggle edge input visibility
- Remove corner icon scale on hover
- Direction arrows fixed at full-edge midpoint (unaffected by span)
- Span bars fill full edge area with 2px border radius

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-09 03:13:47 +03:00
parent 9fc15e3213
commit cf019318a6
3 changed files with 132 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
server/src/wled_controller/static/index.html
View File

@@ -80,15 +80,17 @@
<div class="modal-content" style="max-width: 700px;">
<div class="modal-header">
<h2 data-i18n="calibration.title">📐 LED Calibration</h2>
<button class="modal-close-btn" onclick="closeCalibrationModal()" title="Close">&#x2715;</button>
</div>
<div class="modal-body">
<input type="hidden" id="calibration-device-id">
<p class="section-tip" data-i18n="calibration.preview.click_hint">Click an edge to toggle test LEDs on/off</p>
<!-- Interactive Preview with integrated LED inputs and test toggles -->
<div style="margin-bottom: 12px; padding: 0 24px;">
<div class="calibration-preview">
<!-- Screen with direction toggle, total LEDs, and offset -->
<div class="preview-screen">
<div class="preview-screen-total"><span id="cal-total-leds-inline">0</span> / <span id="cal-device-led-count-inline">0</span></div>
<div class="preview-screen-total" onclick="toggleEdgeInputs()" title="Toggle edge LED inputs"><span id="cal-total-leds-inline">0</span> / <span id="cal-device-led-count-inline">0</span></div>
<div class="preview-screen-controls">
<button type="button" class="direction-toggle" onclick="toggleDirection()" title="Toggle direction">
<span id="direction-icon">↻</span> <span id="direction-label">CW</span>
@@ -149,7 +151,6 @@
<!-- Canvas overlay for ticks, arrows, start label -->
<canvas id="calibration-preview-canvas"></canvas>
</div>
<p class="preview-hint" data-i18n="calibration.preview.click_hint">Click an edge to toggle test LEDs on/off</p>
</div>
<!-- Hidden selects (used by saveCalibration) -->
@@ -170,8 +171,8 @@
<div id="calibration-error" class="error-message" style="display: none;"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeCalibrationModal()" data-i18n="calibration.button.cancel">Cancel</button>
<button class="btn btn-primary" onclick="saveCalibration()" data-i18n="calibration.button.save">Save</button>
<button class="btn btn-icon btn-secondary" onclick="closeCalibrationModal()" title="Cancel">&#x2715;</button>
<button class="btn btn-icon btn-primary" onclick="saveCalibration()" title="Save">&#x2713;</button>
</div>
</div>
</div>
@@ -181,6 +182,7 @@
<div class="modal-content">
<div class="modal-header">
<h2 data-i18n="settings.title">⚙️ Device Settings</h2>
<button class="modal-close-btn" onclick="closeDeviceSettingsModal()" title="Close">&#x2715;</button>
</div>
<div class="modal-body">
<form id="device-settings-form">
@@ -213,8 +215,8 @@
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeDeviceSettingsModal()" data-i18n="settings.button.cancel">Cancel</button>
<button class="btn btn-primary" onclick="saveDeviceSettings()" data-i18n="settings.button.save">Save Changes</button>
<button class="btn btn-icon btn-secondary" onclick="closeDeviceSettingsModal()" title="Cancel">&#x2715;</button>
<button class="btn btn-icon btn-primary" onclick="saveDeviceSettings()" title="Save">&#x2713;</button>
</div>
</div>
</div>
@@ -224,6 +226,7 @@
<div class="modal-content">
<div class="modal-header">
<h2 data-i18n="auth.title">🔑 Login to WLED Controller</h2>
<button class="modal-close-btn" id="modal-close-x-btn" onclick="closeApiKeyModal()" title="Close">&#x2715;</button>
</div>
<form id="api-key-form" onsubmit="submitApiKey(event)">
<div class="modal-body">
@@ -249,8 +252,8 @@
<div id="api-key-error" class="error-message" style="display: none;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="closeApiKeyModal()" id="modal-cancel-btn" data-i18n="auth.button.cancel">Cancel</button>
<button type="submit" class="btn btn-primary" data-i18n="auth.button.login">Login</button>
<button type="button" class="btn btn-icon btn-secondary" onclick="closeApiKeyModal()" id="modal-cancel-btn" title="Cancel">&#x2715;</button>
<button type="submit" class="btn btn-icon btn-primary" title="Login">&#x2713;</button>
</div>
</form>
</div>
@@ -261,6 +264,7 @@
<div class="modal-content" style="max-width: 450px;">
<div class="modal-header">
<h2 id="confirm-title">Confirm Action</h2>
<button class="modal-close-btn" onclick="closeConfirmModal(false)" title="Close">&#x2715;</button>
</div>
<div class="modal-body">
<p id="confirm-message" class="modal-description"></p>
@@ -277,6 +281,7 @@
<div class="modal-content">
<div class="modal-header">
<h2 data-i18n="devices.add">Add New Device</h2>
<button class="modal-close-btn" onclick="closeAddDeviceModal()" title="Close">&#x2715;</button>
</div>
<div class="modal-body">
<form id="add-device-form">
@@ -292,8 +297,8 @@
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" onclick="closeAddDeviceModal()" data-i18n="calibration.button.cancel">Cancel</button>
<button class="btn btn-primary" onclick="document.getElementById('add-device-form').requestSubmit()" data-i18n="device.button.add">Add Device</button>
<button class="btn btn-icon btn-secondary" onclick="closeAddDeviceModal()" title="Cancel">&#x2715;</button>
<button class="btn btn-icon btn-primary" onclick="document.getElementById('add-device-form').requestSubmit()" title="Add Device">&#x2713;</button>
</div>
</div>
</div>
@@ -390,8 +395,10 @@
modal.style.display = 'flex';
lockBody();
// Hide cancel button if this is required login (no existing session)
// Hide cancel button and close X if this is required login (no existing session)
cancelBtn.style.display = hideCancel ? 'none' : 'inline-block';
const closeXBtn = document.getElementById('modal-close-x-btn');
if (closeXBtn) closeXBtn.style.display = hideCancel ? 'none' : '';
setTimeout(() => input.focus(), 100);
}