diff --git a/src/static/css/style.css b/src/static/css/style.css index 0da61a4..2c99c00 100644 --- a/src/static/css/style.css +++ b/src/static/css/style.css @@ -477,29 +477,78 @@ a:hover { color: var(--text-secondary); font-weight: 500; } -/* --- Org & License Info in Header --- */ +/* --- User Dropdown in Header --- */ .header-user-info { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 2px; - line-height: 1.3; + position: relative; } -.header-user-top { +.header-user-btn { display: flex; align-items: center; - gap: var(--sp-md); + gap: 6px; + background: none; + border: 1px solid transparent; + border-radius: var(--radius); + padding: 4px 8px; + cursor: pointer; + transition: border-color 0.15s, background 0.15s; } -.header-org-name { - font-size: 11px; +.header-user-btn:hover, +.header-user-btn[aria-expanded="true"] { + border-color: var(--border); + background: var(--bg-secondary); +} + +.header-user-chevron { + font-size: 10px; + color: var(--text-tertiary); + transition: transform 0.15s; +} + +.header-user-btn[aria-expanded="true"] .header-user-chevron { + transform: rotate(180deg); +} + +.header-user-dropdown { + display: none; + position: absolute; + top: calc(100% + 6px); + right: 0; + min-width: 220px; + background: var(--bg-secondary); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 12px; + box-shadow: 0 8px 24px rgba(0,0,0,0.3); + z-index: 1000; +} + +.header-user-dropdown.open { + display: block; +} + +.header-dropdown-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 6px 0; +} + +.header-dropdown-row + .header-dropdown-row { + border-top: 1px solid var(--border); +} + +.header-dropdown-label { + font-size: 12px; color: var(--text-tertiary); font-weight: 400; - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +} + +.header-dropdown-value { + font-size: 12px; + color: var(--text-primary); + font-weight: 500; } .header-license-badge { diff --git a/src/static/dashboard.html b/src/static/dashboard.html index 41b3100..a2dd319 100644 --- a/src/static/dashboard.html +++ b/src/static/dashboard.html @@ -30,11 +30,20 @@
-
+ + -
diff --git a/src/static/js/app.js b/src/static/js/app.js index 83e21de..ec0a29c 100644 --- a/src/static/js/app.js +++ b/src/static/js/app.js @@ -433,33 +433,35 @@ const App = { this._currentUsername = user.email; document.getElementById('header-user').textContent = user.email; - // Org-Name anzeigen + // Dropdown-Daten befuellen const orgNameEl = document.getElementById('header-org-name'); - if (orgNameEl && user.org_name) { - orgNameEl.textContent = user.org_name; - orgNameEl.title = user.org_name; - } + if (orgNameEl) orgNameEl.textContent = user.org_name || '-'; - // Lizenz-Badge anzeigen - const badgeEl = document.getElementById('header-license-badge'); - if (badgeEl) { + const licInfoEl = document.getElementById('header-license-info'); + if (licInfoEl) { const licenseLabels = { trial: 'Trial', - annual: 'Annual', + annual: 'Jahreslizenz', permanent: 'Permanent', - expired: 'Abgelaufen', - unknown: 'Unbekannt' }; - const status = user.read_only ? 'expired' : (user.license_status || 'unknown'); - const cssClass = user.read_only ? 'license-expired' - : user.license_type === 'trial' ? 'license-trial' - : user.license_type === 'annual' ? 'license-annual' - : user.license_type === 'permanent' ? 'license-permanent' - : 'license-unknown'; const label = user.read_only ? 'Abgelaufen' - : licenseLabels[user.license_type] || licenseLabels[user.license_status] || 'Unbekannt'; - badgeEl.textContent = label; - badgeEl.className = 'header-license-badge ' + cssClass; + : licenseLabels[user.license_type] || user.license_status || '-'; + licInfoEl.textContent = label; + } + + // Dropdown Toggle + const userBtn = document.getElementById('header-user-btn'); + const userDropdown = document.getElementById('header-user-dropdown'); + if (userBtn && userDropdown) { + userBtn.addEventListener('click', (e) => { + e.stopPropagation(); + const isOpen = userDropdown.classList.toggle('open'); + userBtn.setAttribute('aria-expanded', isOpen); + }); + document.addEventListener('click', () => { + userDropdown.classList.remove('open'); + userBtn.setAttribute('aria-expanded', 'false'); + }); } // Warnung bei abgelaufener Lizenz