cory/tildefriends
5
6
Fork 2
Code Issues 33 Pull Requests 1 Actions Releases 28 Wiki Activity

ssb: Continuing to untangle message CSS.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 22m42s
Details

Browse Source
This commit is contained in:
Cory McWilliams 2025-01-01 16:44:16 -05:00
parent 301b7a4911
commit 54df862998
2 changed files with 151 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🦀", "emoji": "🦀",
"previous": "&sPU6rF2WYaSdq1SBw5XyxOjiahAxtGUbeg0LOpkQ6Eg=.sha256" "previous": "&LZizSyrgaKYbjRKj2FfmnCTnkB39ndQ9AVWVC4o3AQk=.sha256"
} }

329
apps/ssb/tf-message.js
View File

@ -368,21 +368,125 @@ class TfMessageElement extends LitElement {
: 'w3-theme-d4'; : 'w3-theme-d4';
} }
render_small_frame(inner) { get_content() {
let self = this; let content = this.message?.content;
return html` if (this.message?.decrypted?.type == 'post') {
<div content = this.message.decrypted;
class="w3-card-4 ${this.class_background()} w3-border-theme" }
style="margin-top: 8px; padding: 16px; display: inline-block; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%" return content;
}
render_raw_button() {
let content = this.get_content();
let raw_button;
switch (this.format) {
case 'raw':
if (content?.type == 'post' || content?.type == 'blog') {
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (this.format = 'md')}
> >
<tf-user id=${self.message.author} .users=${self.users}></tf-user> Markdown
<span style="padding-right: 8px; text-wrap: nowrap" </button>`;
><a tfarget="_top" href=${'#' + encodeURIComponent(self.message.id)} } else {
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (this.format = 'message')}
>
Message
</button>`;
}
break;
case 'md':
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (this.format = 'message')}
>
Message
</button>`;
break;
case 'decrypted':
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (this.format = 'raw')}
>
Raw
</button>`;
break;
default:
if (this.message.decrypted) {
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (this.format = 'decrypted')}
>
Decrypted
</button>`;
} else {
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (this.format = 'raw')}
>
Raw
</button>`;
}
break;
}
return raw_button;
}
render_header() {
let is_encrypted = this.message?.decrypted
? html`<span class="w3-col" style="align-self: center">🔓</span>`
: undefined;
return html`
<header class="w3-bar">
<span class="w3-bar-item">
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
</span>
${is_encrypted}
<span class="w3-bar-item w3-right">${this.render_raw_button()}</span>
<span class="w3-bar-item w3-right" style="text-wrap: nowrap"
><a
target="_top"
href=${'#' + encodeURIComponent(this.message.id)}
>%</a >%</a
> >
${new Date(self.message.timestamp).toLocaleString()}</span ${new Date(this.message.timestamp).toLocaleString()}</span
> >
${raw_button} ${self.format == 'raw' ? self.render_raw() : inner} </header>
`;
}
render_frame(inner) {
return html`
<style>
code {
white-space: pre-wrap;
overflow-wrap: break-word;
}
div {
overflow-wrap: anywhere;
}
img {
max-width: 100%;
height: auto;
display: block;
}
</style>
<div
class="w3-card-4 ${this.class_background()} w3-border-theme w3-margin"
style="overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
>
${inner}
</div>
`;
}
render_small_frame(inner) {
let self = this;
return this.render_frame(html`
${self.render_header()}
${self.format == 'raw' ? self.render_raw() : inner}
${self.render_votes()} ${self.render_votes()}
${(self.message.child_messages || []).map( ${(self.message.child_messages || []).map(
(x) => html` (x) => html`
@ -397,11 +501,11 @@ class TfMessageElement extends LitElement {
></tf-message> ></tf-message>
` `
)} )}
</div> `);
`;
} }
render_actions() { render_actions() {
let content = this.get_content();
let reply = let reply =
this.drafts[this.message?.id] !== undefined this.drafts[this.message?.id] !== undefined
? html` ? html`
@ -421,7 +525,7 @@ class TfMessageElement extends LitElement {
</button> </button>
`; `;
return html` return html`
<div class="w3-section"> <div class="w3-section w3-container">
${reply} ${reply}
<button class="w3-button w3-theme-d1" @click=${this.react}> <button class="w3-button w3-theme-d1" @click=${this.react}>
React React
@ -438,64 +542,8 @@ class TfMessageElement extends LitElement {
} }
let class_background = this.class_background(); let class_background = this.class_background();
let self = this; let self = this;
let raw_button;
switch (this.format) {
case 'raw':
if (content?.type == 'post' || content?.type == 'blog') {
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'md')}
>
Markdown
</button>`;
} else {
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'message')}
>
Message
</button>`;
}
break;
case 'md':
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'message')}
>
Message
</button>`;
break;
case 'decrypted':
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'raw')}
>
Raw
</button>`;
break;
default:
if (this.message.decrypted) {
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'decrypted')}
>
Decrypted
</button>`;
} else {
raw_button = html`<button
class="w3-button w3-theme-d1"
@click=${() => (self.format = 'raw')}
>
Raw
</button>`;
}
break;
}
if (this.message?.type === 'contact_group') { if (this.message?.type === 'contact_group') {
return html` <div return this.render_frame(html`
class="w3-card-4 ${class_background} w3-border-theme"
style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
>
${this.message.messages.map( ${this.message.messages.map(
(x) => (x) =>
html`<tf-message html`<tf-message
@ -507,13 +555,9 @@ class TfMessageElement extends LitElement {
channel=${this.channel} channel=${this.channel}
channel_unread=${this.channel_unread} channel_unread=${this.channel_unread}
></tf-message>` ></tf-message>`
)} )}`);
</div>`;
} else if (this.message.placeholder) { } else if (this.message.placeholder) {
return html` <div return this.render_frame(html`
class="w3-card-4 ${class_background} w3-border-theme"
style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
>
<a target="_top" href=${'#' + encodeURIComponent(this.message.id)} <a target="_top" href=${'#' + encodeURIComponent(this.message.id)}
>${this.message.id}</a >${this.message.id}</a
> >
@ -531,32 +575,31 @@ class TfMessageElement extends LitElement {
channel_unread=${this.channel_unread} channel_unread=${this.channel_unread}
></tf-message> ></tf-message>
` `
)} )}`);
</div>`;
} else if (typeof (content?.type === 'string')) { } else if (typeof (content?.type === 'string')) {
if (content.type == 'about') { if (content.type == 'about') {
let name; let name;
let image; let image;
let description; let description;
if (content.name !== undefined) { if (content.name !== undefined) {
name = html`<div><b>Name:</b> ${content.name}</div>`; name = html`<div class="w3-container"><b>Name:</b> ${content.name}</div>`;
} }
if (content.image !== undefined) { if (content.image !== undefined) {
image = html` image = html`
<div><img src=${'/' + (typeof content.image?.link == 'string' ? content.image.link : content.image) + '/view'} style="width: 256px; height: auto"></img></div> <div class="w3-container"><img src=${'/' + (typeof content.image?.link == 'string' ? content.image.link : content.image) + '/view'} style="width: 256px; height: auto"></img></div>
`; `;
} }
if (content.description !== undefined) { if (content.description !== undefined) {
description = html` description = html`
<div style="flex: 1 0 50%; overflow-wrap: anywhere"> <div class="w3-container" style="flex: 1 0 50%; overflow-wrap: anywhere">
<div>${unsafeHTML(tfutils.markdown(content.description))}</div> <div>${unsafeHTML(tfutils.markdown(content.description))}</div>
</div> </div>
`; `;
} }
let update = let update =
content.about == this.message.author content.about == this.message.author
? html`<div style="font-weight: bold">Updated profile.</div>` ? html`<div class="w3-container" style="font-weight: bold">Updated profile.</div>`
: html`<div style="font-weight: bold"> : html`<div class="w3-container" style="font-weight: bold">
Updated profile for Updated profile for
<tf-user id=${content.about} .users=${this.users}></tf-user>. <tf-user id=${content.about} .users=${this.users}></tf-user>.
</div>`; </div>`;
@ -565,7 +608,7 @@ class TfMessageElement extends LitElement {
`); `);
} else if (content.type == 'contact') { } else if (content.type == 'contact') {
return html` return html`
<div> <div class="w3-padding">
<tf-user id=${this.message.author} .users=${this.users}></tf-user> <tf-user id=${this.message.author} .users=${this.users}></tf-user>
is is
${content.blocking === true ${content.blocking === true
@ -625,79 +668,18 @@ class TfMessageElement extends LitElement {
let is_encrypted = this.message?.decrypted let is_encrypted = this.message?.decrypted
? html`<span style="align-self: center">🔓</span>` ? html`<span style="align-self: center">🔓</span>`
: undefined; : undefined;
return html` return this.render_frame(html`
<style> ${this.render_header()}
code { <div class="w3-container">${payload}</div>
white-space: pre-wrap; ${this.render_votes()} ${this.render_actions()}
overflow-wrap: break-word;
}
div {
overflow-wrap: anywhere;
}
img {
max-width: 100%;
height: auto;
display: block;
}
</style>
<div
class="w3-card-4 ${class_background} w3-border-theme"
style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
>
<div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
${is_encrypted}
<span style="flex: 1"></span>
<span style="padding-right: 8px; text-wrap: nowrap"
><a
target="_top"
href=${'#' + encodeURIComponent(self.message.id)}
>%</a
>
${new Date(this.message.timestamp).toLocaleString()}</span
>
<span>${raw_button}</span>
</div> </div>
${payload} ${this.render_votes()} ${this.render_actions()} `);
</div>
`;
} else if (content.type === 'issue') { } else if (content.type === 'issue') {
let is_encrypted = this.message?.decrypted let is_encrypted = this.message?.decrypted
? html`<span style="align-self: center">🔓</span>` ? html`<span style="align-self: center">🔓</span>`
: undefined; : undefined;
return html` return this.render_frame(html`
<style> ${this.render_header()}
code {
white-space: pre-wrap;
overflow-wrap: break-word;
}
div {
overflow-wrap: anywhere;
}
img {
max-width: 100%;
height: auto;
display: block;
}
</style>
<div
class="w3-card-4 ${class_background} w3-border-theme"
style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
>
<div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
${is_encrypted}
<span style="flex: 1"></span>
<span style="padding-right: 8px; text-wrap: nowrap"
><a
target="_top"
href=${'#' + encodeURIComponent(self.message.id)}
>%</a
>
${new Date(this.message.timestamp).toLocaleString()}</span
>
<span>${raw_button}</span>
</div>
${content.text} ${this.render_votes()} ${content.text} ${this.render_votes()}
<footer class="w3-container"> <footer class="w3-container">
<button class="w3-button w3-theme-d1" @click=${this.react}> <button class="w3-button w3-theme-d1" @click=${this.react}>
@ -705,8 +687,7 @@ class TfMessageElement extends LitElement {
</button> </button>
${this.render_children()} ${this.render_children()}
</footer> </footer>
</div> `);
`;
} else if (content.type === 'blog') { } else if (content.type === 'blog') {
let self = this; let self = this;
tfrpc.rpc.get_blob(content.blog).then(function (data) { tfrpc.rpc.get_blob(content.blog).then(function (data) {
@ -742,44 +723,12 @@ class TfMessageElement extends LitElement {
`; `;
break; break;
} }
return html` return this.render_frame(html`
<style> ${this.render_header()}
code {
white-space: pre-wrap;
overflow-wrap: break-word;
}
div {
overflow-wrap: anywhere;
}
img {
max-width: 100%;
height: auto;
display: block;
}
</style>
<div
class="w3-card-4 ${class_background} w3-border-theme"
style="margin-top: 8px; padding: 16px; overflow: scroll; overflow-wrap: anywhere; display: block; max-width: 100%"
>
<div style="display: flex; flex-direction: row">
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
<span style="flex: 1"></span>
<span style="padding-right: 8px; text-wrap: nowrap"
><a
target="_top"
href=${'#' + encodeURIComponent(self.message.id)}
>%</a
>
${new Date(this.message.timestamp).toLocaleString()}</span
>
<span>${raw_button}</span>
</div>
<div>${body}</div> <div>${body}</div>
${this.render_mentions()} ${this.render_votes()} ${this.render_mentions()} ${this.render_votes()}
${this.render_actions()} ${this.render_actions()}
</div> `);
`;
} else if (content.type === 'pub') { } else if (content.type === 'pub') {
return this.render_small_frame( return this.render_small_frame(
html` <style> html` <style>