cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions Releases 27 Wiki Activity

Re-CSS'd the identity dropdown.

Browse Source
This commit is contained in:
Cory McWilliams 2024-04-14 17:47:47 -04:00
parent b5e966c9a1
commit 23b3c998bd
1 changed files with 30 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
core/client.js
View File

@ -139,8 +139,9 @@ class TfNavigationElement extends LitElement {
} }
} }
set_active_identity(event) { set_active_identity(id) {
send({action: 'setActiveIdentity', identity: event.srcElement.value}); send({action: 'setActiveIdentity', identity: id});
this.renderRoot.getElementById('id_dropdown').classList.remove('w3-show');
} }
create_identity(event) { create_identity(event) {
@ -149,20 +150,38 @@ class TfNavigationElement extends LitElement {
} }
} }
toggle_id_dropdown() {
this.renderRoot.getElementById('id_dropdown').classList.toggle('w3-show');
}
render_identity() { render_identity() {
let self = this; let self = this;
if (this.identities?.length) { if (this.identities?.length) {
return html` return html`
<link type="text/css" rel="stylesheet" href="/static/w3.css" /> <link type="text/css" rel="stylesheet" href="/static/w3.css" />
<select <div class="w3-dropdown-click w3-right" style="max-width: 100%">
@change=${this.set_active_identity} <button
class="w3-button w3-rest w3-cyan w3-bar-item w3-right" class="w3-button w3-rest w3-cyan"
style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%"
> @click=${self.toggle_id_dropdown}
${this.identities.map( >
(x) => html`<option ?selected=${x === this.identity} value=${x}>${self.names[x]}${self.names[x] === x ? '' : html` - ${x}`}</option>` ${self.names[this.identity]}${self.names[this.identity] === this.identity ? '' : html` - ${this.identity}`} ▾
)} </button>
</select> <div id="id_dropdown" class="w3-dropdown-content w3-bar-block w3-card-4" style="max-width: 100%">
<button class="w3-bar-item w3-button w3-border" @click=${() => window.location.href = "/~core/identity"}>Manage Identities...</button>
${this.identities.map(
(x) => html`
<button
class="w3-bar-item w3-button ${x === self.identity ? 'w3-cyan' : ''}"
@click=${() => self.set_active_identity(x)}
style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
>
${self.names[x]}${self.names[x] === x ? '' : html` - ${x}`}
</button>
`
)}
</div>
</div>
`; `;
} else { } else {
return html` return html`