feat(ui): settings modal (lang/timezone), fix app navigation, user dropdown
This commit is contained in:
parent
889329c52e
commit
3e32968df8
4 changed files with 73 additions and 13 deletions
|
|
@ -95,10 +95,10 @@ templ appTile(a AppTile) {
|
|||
</div>
|
||||
} else {
|
||||
<div class="app-card"
|
||||
onclick="openApp('{ a.URL }')"
|
||||
onclick="window.location.href='{ a.URL }'"
|
||||
oncontextmenu="return false"
|
||||
ontouchstart="startLongPress(event, '{ a.URL }')" ontouchend="cancelLongPress()"
|
||||
onmousedown="startLongPress(event, '{ a.URL }')" onmouseup="cancelLongPress()">
|
||||
ontouchstart="startLongPress(event)" ontouchend="cancelLongPress()"
|
||||
onmousedown="startLongPress(event)" onmouseup="cancelLongPress()">
|
||||
<div class="app-icon" style={ "background:" + a.Color }>@templ.Raw(a.Icon)</div>
|
||||
<div class="app-name">{ a.Name }</div>
|
||||
<div class="app-badge">Available</div>
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@ func appTile(a AppTile) templ.Component {
|
|||
return templ_7745c5c3_Err
|
||||
}
|
||||
} else {
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"app-card\" onclick=\"openApp('{ a.URL }')\" oncontextmenu=\"return false\" ontouchstart=\"startLongPress(event, '{ a.URL }')\" ontouchend=\"cancelLongPress()\" onmousedown=\"startLongPress(event, '{ a.URL }')\" onmouseup=\"cancelLongPress()\"><div class=\"app-icon\" style=\"")
|
||||
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"app-card\" onclick=\"window.location.href='{ a.URL }'\" oncontextmenu=\"return false\" ontouchstart=\"startLongPress(event)\" ontouchend=\"cancelLongPress()\" onmousedown=\"startLongPress(event)\" onmouseup=\"cancelLongPress()\"><div class=\"app-icon\" style=\"")
|
||||
if templ_7745c5c3_Err != nil {
|
||||
return templ_7745c5c3_Err
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,6 +41,36 @@ 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()">×</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@launcherJS()
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -70,6 +100,10 @@ templ topBar(userName string, role string) {
|
|||
<div class="avatar sm">{ initials(userName) }</div>
|
||||
<div class="dropdown" id="userDropdown">
|
||||
<div class="dropdown-header">{ userName }</div>
|
||||
<div class="dropdown-item" onclick="window.showSettings()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l-.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
|
||||
Settings
|
||||
</div>
|
||||
<div class="dropdown-item" onclick="window.location.href='/auth/logout'">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
||||
Logout
|
||||
|
|
@ -177,6 +211,14 @@ templ workspaceCSS() {
|
|||
text-align:center;padding:16px;color:var(--text3);font-size:0.7rem;
|
||||
border-top:1px solid var(--border);margin-top:auto
|
||||
}
|
||||
/* Settings */
|
||||
.setting-group{margin-bottom:14px}
|
||||
.setting-group label{display:block;font-size:0.8rem;color:var(--text2);margin-bottom:4px;font-weight:500}
|
||||
.form-select{
|
||||
width:100%;padding:10px 12px;background:var(--surface2);border:1px solid var(--border);
|
||||
border-radius:8px;color:var(--text);font-size:0.9rem;outline:none;appearance:none
|
||||
}
|
||||
.form-select:focus{border-color:var(--blue)}
|
||||
</style>
|
||||
}
|
||||
|
||||
|
|
@ -260,6 +302,24 @@ templ launcherJS() {
|
|||
if (d) d.classList.remove('show');
|
||||
});
|
||||
|
||||
window.showSettings = function() {
|
||||
document.getElementById('settings-overlay').style.display = 'flex';
|
||||
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';
|
||||
}
|
||||
|
||||
function saveSettings() {
|
||||
localStorage.setItem('lang', document.getElementById('setting-lang').value);
|
||||
localStorage.setItem('tz', document.getElementById('setting-tz').value);
|
||||
closeSettings();
|
||||
}
|
||||
|
||||
// PWA install handler
|
||||
let deferredPrompt = null;
|
||||
window.addEventListener('beforeinstallprompt', function(e) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue