lexton-it/NextWks
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): slide-out settings drawer instead of modal

Browse source
This commit is contained in:
Claus Lohmar 2026-06-14 18:15:13 +00:00
parent 936c3e6146
commit 16b933bb07
2 changed files with 58 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/core/ui/launcher.templ
View file

@ -41,14 +41,14 @@ templ LauncherPage(userName string, role string, apps []AppTile) {
</div> </div>
</div> </div>
<!-- Settings Modal --> <!-- Slide-out Settings Drawer -->
<div id="settings-overlay" class="overlay" style="display:none" onclick="closeSettings()"> <div class="drawer-overlay" id="settings-overlay" onclick="closeSettings()"></div>
<div class="modal" onclick="event.stopPropagation()"> <aside class="drawer" id="settings-drawer">
<div class="modal-head"> <div class="drawer-head">
<h2>Settings</h2> <h2>Settings</h2>
<button class="close-btn" onclick="closeSettings()">&times;</button> <button class="close-btn" onclick="closeSettings()">&times;</button>
</div> </div>
<div class="modal-body"> <div class="drawer-body">
<div class="setting-group"> <div class="setting-group">
<label>Language</label> <label>Language</label>
<select id="setting-lang" class="form-select"> <select id="setting-lang" class="form-select">
@ -68,8 +68,7 @@ templ LauncherPage(userName string, role string, apps []AppTile) {
</div> </div>
<button class="btn" onclick="saveSettings()">Save</button> <button class="btn" onclick="saveSettings()">Save</button>
</div> </div>
</div> </aside>
</div>
@launcherJS() @launcherJS()
</body> </body>
@ -219,6 +218,25 @@ templ workspaceCSS() {
border-radius:8px;color:var(--text);font-size:0.9rem;outline:none;appearance:none border-radius:8px;color:var(--text);font-size:0.9rem;outline:none;appearance:none
} }
.form-select:focus{border-color:var(--blue)} .form-select:focus{border-color:var(--blue)}
/* Drawer */
.drawer-overlay{
position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:500;
opacity:0;pointer-events:none;transition:opacity 0.25s
}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{
position:fixed;top:0;right:0;bottom:0;width:280px;max-width:85vw;
background:var(--surface);z-index:501;transform:translateX(100%);
transition:transform 0.25s ease;display:flex;flex-direction:column
}
.drawer.open{transform:translateX(0)}
.drawer-head{
display:flex;justify-content:space-between;align-items:center;
padding:18px 20px 12px;border-bottom:1px solid var(--border)
}
.drawer-head h2{font-size:1.1rem;font-weight:600}
.drawer-body{padding:20px;flex:1;overflow-y:auto}
</style> </style>
} }
@ -303,15 +321,15 @@ templ launcherJS() {
}); });
window.showSettings = function() { window.showSettings = function() {
document.getElementById('settings-overlay').style.display = 'flex'; document.getElementById('settings-overlay').classList.add('open');
document.getElementById('settings-drawer').classList.add('open');
document.getElementById('userDropdown').classList.remove('show'); document.getElementById('userDropdown').classList.remove('show');
// Load saved
document.getElementById('setting-lang').value = localStorage.getItem('lang')||'en'; document.getElementById('setting-lang').value = localStorage.getItem('lang')||'en';
document.getElementById('setting-tz').value = localStorage.getItem('tz')||'UTC'; document.getElementById('setting-tz').value = localStorage.getItem('tz')||'UTC';
}; };
function closeSettings() { function closeSettings() {
document.getElementById('settings-overlay').style.display = 'none'; document.getElementById('settings-overlay').classList.remove('open');
document.getElementById('settings-drawer').classList.remove('open');
} }
function saveSettings() { function saveSettings() {

16
src/core/ui/launcher_templ.go
View file

File diff suppressed because one or more lines are too long