tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

Trying to make the navigation bar fit again with a new dropdown. Good grief, CSS.

Browse Source
This commit is contained in:
Cory McWilliams 2024-04-13 16:52:30 -04:00
parent 8a9f53102b
commit 64bbd383de
2 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
core/client.js
View File

@ -100,10 +100,10 @@ class TfNavigationElement extends LitElement {
get_spark_line(key, options) { get_spark_line(key, options) {
if (!this.spark_lines[key]) { if (!this.spark_lines[key]) {
let spark_line = document.createElement('tf-sparkline'); let spark_line = document.createElement('tf-sparkline');
spark_line.style.display = 'flex';
spark_line.style.flexDirection = 'row';
spark_line.style.flex = '0 50 5em';
spark_line.title = key; spark_line.title = key;
spark_line.classList.add('w3-bar-item');
spark_line.classList.add('w3-hide-small');
spark_line.style.paddingRight = '0';
if (options) { if (options) {
if (options.max) { if (options.max) {
spark_line.max = options.max; spark_line.max = options.max;
@ -121,11 +121,11 @@ class TfNavigationElement extends LitElement {
*/ */
render_login() { render_login() {
if (this?.credentials?.session?.name) { if (this?.credentials?.session?.name) {
return html`<a id="login" href="/login/logout?return=${url() + hash()}" return html`<a class="w3-bar-item w3-right" id="login" href="/login/logout?return=${url() + hash()}"
>logout ${this.credentials.session.name}</a >logout ${this.credentials.session.name}</a
>`; >`;
} else { } else {
return html`<a id="login" href="/login?return=${url() + hash()}" return html`<a class="w3-bar-item w3-right" id="login" href="/login?return=${url() + hash()}"
>login</a >login</a
>`; >`;
} }
@ -145,8 +145,8 @@ class TfNavigationElement extends LitElement {
<link type="text/css" rel="stylesheet" href="/static/w3.css" /> <link type="text/css" rel="stylesheet" href="/static/w3.css" />
<select <select
@change=${this.set_active_identity} @change=${this.set_active_identity}
class="w3-input w3-cyan" class="w3-button w3-cyan w3-bar-item w3-right"
style="flex: 0 1 auto; width: auto; display: inline-blocktext-overflow: ellipsis; overflow: hidden; white-space: nowrap"> style="max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap">
${this.identities.map(x => html`<option ?selected=${x === this.identity}>${x}</option>`)} ${this.identities.map(x => html`<option ?selected=${x === this.identity}>${x}</option>`)}
</select> </select>
`; `;
@ -155,7 +155,7 @@ class TfNavigationElement extends LitElement {
<link type="text/css" rel="stylesheet" href="/static/w3.css" /> <link type="text/css" rel="stylesheet" href="/static/w3.css" />
<button <button
@click=${this.create_identity} @click=${this.create_identity}
class="w3-button w3-blue"> class="w3-button w3-blue w3-right">
Create an Identity Create an Identity
</button> </button>
`; `;
@ -210,6 +210,7 @@ class TfNavigationElement extends LitElement {
render() { render() {
let self = this; let self = this;
return html` return html`
<link type="text/css" rel="stylesheet" href="/static/w3.css" />
<style> <style>
${k_global_style} .tooltip { ${k_global_style} .tooltip {
position: absolute; position: absolute;
@ -226,16 +227,17 @@ class TfNavigationElement extends LitElement {
} }
</style> </style>
<div <div
style="margin: 4px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; align-items: center" class="w3-black w3-bar"
> >
<span <span
class="w3-bar-item"
style="cursor: pointer" style="cursor: pointer"
@click=${() => (this.show_version = !this.show_version)} @click=${() => (this.show_version = !this.show_version)}
>😎</span >😎</span
> >
<span <span
?hidden=${!this.show_version} class="w3-bar-item"
style="flex: 0 0; white-space: nowrap" style=${'white-space: nowrap' + (this.show_version ? '' : '; display: none')}
title=${this.version?.name + title=${this.version?.name +
' ' + ' ' +
Object.entries(this.version || {}) Object.entries(this.version || {})
@ -244,6 +246,7 @@ class TfNavigationElement extends LitElement {
>${this.version?.number}</span >${this.version?.number}</span
> >
<a <a
class="w3-bar-item"
accesskey="h" accesskey="h"
@mouseover=${set_access_key_title} @mouseover=${set_access_key_title}
data-tip="Open home app." data-tip="Open home app."
@ -252,6 +255,7 @@ class TfNavigationElement extends LitElement {
>TF</a >TF</a
> >
<a <a
class="w3-bar-item"
accesskey="a" accesskey="a"
@mouseover=${set_access_key_title} @mouseover=${set_access_key_title}
data-tip="Open apps list." data-tip="Open apps list."
@ -259,6 +263,7 @@ class TfNavigationElement extends LitElement {
>apps</a >apps</a
> >
<a <a
class="w3-bar-item"
accesskey="e" accesskey="e"
@mouseover=${set_access_key_title} @mouseover=${set_access_key_title}
data-tip="Toggle the app editor." data-tip="Toggle the app editor."
@ -267,6 +272,7 @@ class TfNavigationElement extends LitElement {
>edit</a >edit</a
> >
<a <a
class="w3-bar-item"
accesskey="p" accesskey="p"
@mouseover=${set_access_key_title} @mouseover=${set_access_key_title}
data-tip="View and change permissions." data-tip="View and change permissions."
@ -274,27 +280,20 @@ class TfNavigationElement extends LitElement {
@click=${() => (self.show_permissions = !self.show_permissions)} @click=${() => (self.show_permissions = !self.show_permissions)}
>🎛️</a >🎛️</a
> >
${status.message ? html`
<span <span
style="display: inline-block; vertical-align: top; white-space: pre; color: ${this class="w3-bar-item"
style="vertical-align: top; white-space: pre; color: ${this
.status.color ?? kErrorColor}" .status.color ?? kErrorColor}"
>${this.status.message}</span >${this.status.message}</span
> >
<span id="requests"></span> ` : undefined}
${this.render_permissions()} ${this.render_permissions()}
<span ${Object.keys(this.spark_lines)
style="flex: 1 1; display: flex; flex-direction: row; white-space: nowrap; margin: 0; padding: 0"
>${Object.keys(this.spark_lines)
.sort() .sort()
.map((x) => this.spark_lines[x]) .map((x) => this.spark_lines[x])}
.map((x) => [ ${this.render_login()}
html`<span style="font-size: xx-small">${x.dataset.emoji}</span>`,
x,
])}</span
>
${this.render_identity()} ${this.render_identity()}
<span style="flex: 0 0; white-space: nowrap"
>${this.render_login()}</span
>
</div> </div>
`; `;
} }
@ -619,13 +618,13 @@ class TfSparkLineElement extends LitElement {
) / 10.0; ) / 10.0;
return html` return html`
<svg <svg
style="max-width: 7.5em; max-height: 1.5em; margin: 0; padding: 0; background: #000" style="max-width: 7.5em; margin: 0; padding: 0; background: #000; height: 1em"
viewBox="0 0 50 10" viewBox="0 0 50 10"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
${this.lines.map((x) => this.render_line(x))} ${this.lines.map((x) => this.render_line(x))}
<text x="0" y="1em" style="font: 8px sans-serif; fill: #fff"> <text x="0" y="1em" style="font: 8px sans-serif; fill: #fff">
${max} ${this.dataset.emoji}${max}
</text> </text>
</svg> </svg>
`; `;

4
src/httpd.js.c
View File

@ -328,8 +328,8 @@ static JSValue _httpd_websocket_upgrade(JSContext* context, JSValueConst this_va
const char* session = tf_http_get_cookie(tf_http_request_get_header(request, "cookie"), "session"); const char* session = tf_http_get_cookie(tf_http_request_get_header(request, "cookie"), "session");
JSValue jwt = _authenticate_jwt(context, session); JSValue jwt = _authenticate_jwt(context, session);
tf_free((void*)session); tf_free((void*)session);
JSValue name = JS_GetPropertyStr(context, jwt, "name"); JSValue name = !JS_IsUndefined(jwt) ? JS_GetPropertyStr(context, jwt, "name") : JS_UNDEFINED;
const char* name_string = JS_ToCString(context, name); const char* name_string = !JS_IsUndefined(name) ? JS_ToCString(context, name) : NULL;
const char* session_token = _make_session_jwt(ssb, name_string); const char* session_token = _make_session_jwt(ssb, name_string);
const char* cookie = _make_set_session_cookie_header(request, session_token); const char* cookie = _make_set_session_cookie_header(request, session_token);
tf_free((void*)session_token); tf_free((void*)session_token);