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

Improve Web UI with footer, icon buttons, and better modals
Some checks failed
Validate / validate (push) Failing after 7s
Details

Browse Source 
- Add footer with author info (name, email, git repository link)
- Replace device action buttons with icons to save space:
  - Start/Stop: ▶️/⏹️, Settings: ⚙️, Calibrate: 📐, Remove: 🗑️
  - Added hover tooltips with translated text
  - Added btn-icon CSS class for compact styling
- Replace native browser confirm() with custom modal dialog:
  - Matches app theme and supports translations
  - Used for logout and device removal confirmations
  - Added confirm.title, confirm.yes, confirm.no translations
- Disable background scrolling when modals are open:
  - Added modal-open class to body when any modal opens
  - Prevents page scroll behind modals for better UX
  - Applied to all modals: login, settings, calibration, confirmation

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-02-06 18:18:33 +03:00
parent 110b3ae4ea
commit eca81e11cf
5 changed files with 147 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,6 +86,16 @@
<button type="submit" class="btn btn-primary" data-i18n="device.button.add">Add Device</button>
</form>
</section>
<footer class="app-footer">
<div class="footer-content">
<p>
Created by <strong>Alexei Dolgolyov</strong>
• <a href="mailto:dolgolyov.alexei@gmail.com">dolgolyov.alexei@gmail.com</a>
• <a href="https://git.dolgolyov-family.by/alexei.dolgolyov/wled-screen-controller-mixed" target="_blank" rel="noopener">Source Code</a>
</p>
</div>
</footer>
</div>
<div id="toast" class="toast"></div>
@@ -285,6 +295,22 @@
</div>
</div>
<!-- Confirmation Modal -->
<div id="confirm-modal" class="modal">
<div class="modal-content" style="max-width: 450px;">
<div class="modal-header">
<h2 id="confirm-title">Confirm Action</h2>
</div>
<div class="modal-body">
<p id="confirm-message" class="modal-description"></p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="confirm-no-btn" onclick="closeConfirmModal(false)">No</button>
<button class="btn btn-danger" id="confirm-yes-btn" onclick="closeConfirmModal(true)">Yes</button>
</div>
</div>
</div>
<script src="/static/app.js"></script>
<script>
// Initialize theme
@@ -338,17 +364,20 @@
document.getElementById('modal-cancel-btn').style.display = 'inline-block';
}
function logout() {
if (confirm(t('auth.logout.confirm'))) {
localStorage.removeItem('wled_api_key');
apiKey = null;
updateAuthUI();
showToast(t('auth.logout.success'), 'info');
// Clear the UI
document.getElementById('devices-list').innerHTML = `<div class="loading">${t('auth.please_login')} devices</div>`;
document.getElementById('displays-list').innerHTML = `<div class="loading">${t('auth.please_login')} displays</div>`;
async function logout() {
const confirmed = await showConfirm(t('auth.logout.confirm'));
if (!confirmed) {
return;
}
localStorage.removeItem('wled_api_key');
apiKey = null;
updateAuthUI();
showToast(t('auth.logout.success'), 'info');
// Clear the UI
document.getElementById('devices-list').innerHTML = `<div class="loading">${t('auth.please_login')} devices</div>`;
document.getElementById('displays-list').innerHTML = `<div class="loading">${t('auth.please_login')} displays</div>`;
}
// Initialize on load
@@ -382,6 +411,7 @@
input.placeholder = 'Enter your API key...';
error.style.display = 'none';
modal.style.display = 'flex';
document.body.classList.add('modal-open');
// Hide cancel button if this is required login (no existing session)
cancelBtn.style.display = hideCancel ? 'none' : 'inline-block';
@@ -392,6 +422,7 @@
function closeApiKeyModal() {
const modal = document.getElementById('api-key-modal');
modal.style.display = 'none';
document.body.classList.remove('modal-open');
}
function submitApiKey() {