Redetzke/GHOSTWIRE
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Sign out from an icon in the account row

Browse Source
This commit is contained in:
Daniel Redetzke
2026-10-04 20:21:00 +03:00
parent fe71b0b6c2
commit ac2ce23613
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.css
+6 -1
View File
@@ -56,7 +56,12 @@ a.brand, a.brand:hover { color: #fff; text-decoration: none; }
.side a.nav.on { background: #2a2b31; color: #fff; }
.side .count { margin-left: auto; font-size: 12px; color: #8d8e93; }
.side .foot { margin-top: auto; padding-top: 16px; border-top: 1px solid #2c2d32; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #8d8e93; }
.side .foot button { background: none; border: 0; padding: 0; font: inherit; color: #c9c9c3; text-decoration: underline; cursor: pointer; }
.side .acctrow { display: flex; align-items: center; gap: 4px; }
.side .acctrow .acct { flex: 1; min-width: 0; }
.side .signout { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: #8d8e93; cursor: pointer; }
.side .signout:hover { background: #222328; color: #fff; }
.side .signout .tip { position: absolute; bottom: calc(100% + 6px); right: 0; padding: 3px 8px; border-radius: 5px; background: #000; color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.side .signout:hover .tip, .side .signout:focus-visible .tip { opacity: 1; }
.side .acct { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: 8px; color: #c9c9c3; text-decoration: none; }
.side .acct:hover { background: #222328; color: #fff; }
.side .acct.on { background: #2a2b31; color: #fff; }
app.js
+6 -4
View File
@@ -48,6 +48,7 @@
server: '<rect x="3" y="4" width="18" height="7" rx="1.5"/><rect x="3" y="13" width="18" height="7" rx="1.5"/><path d="M7 7.5h.01M7 16.5h.01"/>',
settings: '<path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12"/><circle cx="16" cy="6" r="2"/><circle cx="10" cy="12" r="2"/><circle cx="18" cy="18" r="2"/>',
plus: '<path d="M12 5v14M5 12h14"/>',
logout: '<path d="M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4"/><path d="M10 16l-4-4 4-4M6 12h10"/>',
};
// The Hannya mark: the horned demon mask of Noh. Same drawing as favicon.svg.
@@ -513,11 +514,12 @@
srvBox,
NAV.map(([href, ic, label]) => (navLinks[href] = h('a', { class: 'nav', href }, icon(ic), label, ic === 'peers' ? peerCount : null))),
h('div', { class: 'foot' },
(navLinks['#/account'] = h('a', { class: 'acct', href: '#/account' },
h('span', { class: 'avatar', 'aria-hidden': 'true' }, me.name.slice(0, 1).toUpperCase()),
h('span', null, h('strong', null, me.name), h('span', null, 'My account')))),
h('div', { class: 'acctrow' },
(navLinks['#/account'] = h('a', { class: 'acct', href: '#/account' },
h('span', { class: 'avatar', 'aria-hidden': 'true' }, me.name.slice(0, 1).toUpperCase()),
h('span', null, h('strong', null, me.name), h('span', null, 'My account')))),
h('button', { type: 'button', class: 'signout', 'aria-label': 'Sign out', onClick: logout }, icon('logout'), h('span', { class: 'tip', 'aria-hidden': 'true' }, 'Sign out'))),
h('div', { class: 'footrow' },
h('button', { type: 'button', onClick: logout }, 'Sign out'),
h('span', null, 'v' + me.version.replace(/^v/, '')))));
main = h('main', { class: 'main', id: 'main' });
app.replaceChildren(h('div', { class: 'shell' }, nav, main));