forked from cory/tildefriends
Consolidate the acount/login navigation bar options to try to save some space on mobile.
This commit is contained in:
166
core/client.js
166
core/client.js
@ -118,28 +118,6 @@ class TfNavigationElement extends LitElement {
|
||||
return this.spark_lines[key];
|
||||
}
|
||||
|
||||
/**
|
||||
* TODOC
|
||||
* @returns
|
||||
*/
|
||||
render_login() {
|
||||
if (this?.credentials?.session?.name) {
|
||||
return html`<a
|
||||
class="w3-bar-item w3-right"
|
||||
id="login"
|
||||
href="/login/logout?return=${url() + hash()}"
|
||||
>logout ${this.credentials.session.name}</a
|
||||
>`;
|
||||
} else {
|
||||
return html`<a
|
||||
class="w3-bar-item w3-right"
|
||||
id="login"
|
||||
href="/login?return=${url() + hash()}"
|
||||
>login</a
|
||||
>`;
|
||||
}
|
||||
}
|
||||
|
||||
set_active_identity(id) {
|
||||
send({action: 'setActiveIdentity', identity: id});
|
||||
this.renderRoot.getElementById('id_dropdown').classList.remove('w3-show');
|
||||
@ -159,66 +137,102 @@ class TfNavigationElement extends LitElement {
|
||||
window.location.href = '/~core/ssb/#' + this.identity;
|
||||
}
|
||||
|
||||
logout() {
|
||||
window.location.href = `/login/logout?return=${encodeURIComponent(url() + hash())}`;
|
||||
}
|
||||
|
||||
render_identity() {
|
||||
let self = this;
|
||||
if (this.identities?.length) {
|
||||
return html`
|
||||
<link type="text/css" rel="stylesheet" href="/static/w3.css" />
|
||||
<div class="w3-dropdown-click w3-right" style="max-width: 100%">
|
||||
<button
|
||||
class="w3-button w3-rest w3-cyan"
|
||||
style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%"
|
||||
@click=${self.toggle_id_dropdown}
|
||||
>
|
||||
${self.names[this.identity]}▾
|
||||
</button>
|
||||
<div
|
||||
id="id_dropdown"
|
||||
class="w3-dropdown-content w3-bar-block w3-card-4"
|
||||
style="max-width: 100%; right: 0"
|
||||
>
|
||||
|
||||
if (this?.credentials?.session?.name) {
|
||||
if (this.identities?.length) {
|
||||
return html`
|
||||
<link type="text/css" rel="stylesheet" href="/static/w3.css" />
|
||||
<div class="w3-dropdown-click w3-right" style="max-width: 100%">
|
||||
<button
|
||||
class="w3-bar-item w3-button w3-border"
|
||||
@click=${() => (window.location.href = '/~core/identity')}
|
||||
class="w3-button w3-rest w3-cyan"
|
||||
style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 100%"
|
||||
id="identity"
|
||||
@click=${self.toggle_id_dropdown}
|
||||
>
|
||||
Manage Identities...
|
||||
${self.names[this.identity]}▾
|
||||
</button>
|
||||
<button
|
||||
class="w3-bar-item w3-button w3-border"
|
||||
@click=${self.edit_profile}
|
||||
<div
|
||||
id="id_dropdown"
|
||||
class="w3-dropdown-content w3-bar-block w3-card-4"
|
||||
style="max-width: 100%; right: 0"
|
||||
>
|
||||
Edit Profile...
|
||||
</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>
|
||||
`
|
||||
)}
|
||||
<button
|
||||
class="w3-bar-item w3-button w3-border"
|
||||
@click=${() => (window.location.href = '/~core/identity')}
|
||||
>
|
||||
Manage Identities...
|
||||
</button>
|
||||
<button
|
||||
class="w3-bar-item w3-button w3-border"
|
||||
@click=${self.edit_profile}
|
||||
>
|
||||
Edit Profile...
|
||||
</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>
|
||||
`
|
||||
)}
|
||||
<button
|
||||
class="w3-bar-item w3-button w3-border"
|
||||
id="logout"
|
||||
@click=${self.logout}
|
||||
>Logout ${this.credentials.session.name}</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (
|
||||
this.credentials?.session?.name &&
|
||||
this.credentials.session.name !== 'guest'
|
||||
) {
|
||||
return html`
|
||||
<link type="text/css" rel="stylesheet" href="/static/w3.css" />
|
||||
<button
|
||||
id="create_identity"
|
||||
@click=${this.create_identity}
|
||||
class="w3-button w3-mobile w3-blue w3-right"
|
||||
>
|
||||
Create an Identity
|
||||
</button>
|
||||
`;
|
||||
`;
|
||||
} else if (
|
||||
this.credentials?.session?.name &&
|
||||
this.credentials.session.name !== 'guest'
|
||||
) {
|
||||
return html`
|
||||
<link type="text/css" rel="stylesheet" href="/static/w3.css" />
|
||||
<button
|
||||
class="w3-bar-item w3-right w3-cyan"
|
||||
id="logout"
|
||||
@click=${self.logout}
|
||||
>Logout ${this.credentials.session.name}</button
|
||||
>
|
||||
<button
|
||||
id="create_identity"
|
||||
@click=${this.create_identity}
|
||||
class="w3-button w3-mobile w3-cyan w3-right"
|
||||
>
|
||||
Create an Identity
|
||||
</button>
|
||||
`;
|
||||
} else {
|
||||
return html`
|
||||
<button
|
||||
class="w3-bar-item w3-button w3-right w3-cyan"
|
||||
id="logout"
|
||||
@click=${self.logout}
|
||||
>Logout ${this.credentials.session.name}</button
|
||||
>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
return html`<a
|
||||
class="w3-bar-item w3-cyan w3-right"
|
||||
id="login"
|
||||
href="/login?return=${url() + hash()}"
|
||||
>login</a
|
||||
>`;
|
||||
}
|
||||
}
|
||||
|
||||
@ -358,7 +372,7 @@ class TfNavigationElement extends LitElement {
|
||||
${Object.keys(this.spark_lines)
|
||||
.sort()
|
||||
.map((x) => this.spark_lines[x])}
|
||||
${this.render_login()} ${this.render_identity()}
|
||||
${this.render_identity()}
|
||||
</div>
|
||||
${this.status?.is_error
|
||||
? html`
|
||||
|
||||
Reference in New Issue
Block a user