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

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

@ -41,35 +41,34 @@ templ LauncherPage(userName string, role string, apps []AppTile) {
</div>
</div>
<!-- Settings Modal -->
<div id="settings-overlay" class="overlay" style="display:none" onclick="closeSettings()">
<div class="modal" onclick="event.stopPropagation()">
<div class="modal-head">
<h2>Settings</h2>
<button class="close-btn" onclick="closeSettings()">&times;</button>
</div>
<div class="modal-body">
<div class="setting-group">
<label>Language</label>
<select id="setting-lang" class="form-select">
<option value="en">English</option>
<option value="de">Deutsch</option>
</select>
</div>
<div class="setting-group">
<label>Timezone</label>
<select id="setting-tz" class="form-select">
<option value="UTC">UTC</option>
<option value="Europe/London">London</option>
<option value="Europe/Berlin">Berlin</option>
<option value="Europe/Paris">Paris</option>
<option value="America/New_York">New York</option>
</select>
</div>
<button class="btn" onclick="saveSettings()">Save</button>
</div>
<!-- Slide-out Settings Drawer -->
<div class="drawer-overlay" id="settings-overlay" onclick="closeSettings()"></div>
<aside class="drawer" id="settings-drawer">
<div class="drawer-head">
<h2>Settings</h2>
<button class="close-btn" onclick="closeSettings()">&times;</button>
</div>
</div>
<div class="drawer-body">
<div class="setting-group">
<label>Language</label>
<select id="setting-lang" class="form-select">
<option value="en">English</option>
<option value="de">Deutsch</option>
</select>
</div>
<div class="setting-group">
<label>Timezone</label>
<select id="setting-tz" class="form-select">
<option value="UTC">UTC</option>
<option value="Europe/London">London</option>
<option value="Europe/Berlin">Berlin</option>
<option value="Europe/Paris">Paris</option>
<option value="America/New_York">New York</option>
</select>
</div>
<button class="btn" onclick="saveSettings()">Save</button>
</div>
</aside>
@launcherJS()
</body>
@ -219,6 +218,25 @@ templ workspaceCSS() {
border-radius:8px;color:var(--text);font-size:0.9rem;outline:none;appearance:none
}
.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>
}
@ -303,15 +321,15 @@ templ launcherJS() {
});
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');
// Load saved
document.getElementById('setting-lang').value = localStorage.getItem('lang')||'en';
document.getElementById('setting-tz').value = localStorage.getItem('tz')||'UTC';
};
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() {

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

File diff suppressed because one or more lines are too long