ssb: Continuing to untangle message CSS.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 22m42s
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 22m42s
This commit is contained in:
parent
301b7a4911
commit
54df862998
@ -1,5 +1,5 @@
|
||||
{
|
||||
"type": "tildefriends-app",
|
||||
"emoji": "🦀",
|
||||
"previous": "&sPU6rF2WYaSdq1SBw5XyxOjiahAxtGUbeg0LOpkQ6Eg=.sha256"
|
||||
"previous": "&LZizSyrgaKYbjRKj2FfmnCTnkB39ndQ9AVWVC4o3AQk=.sha256"
|
||||
}
|
||||
|
||||
@ -368,21 +368,125 @@ class TfMessageElement extends LitElement {
|
||||
: 'w3-theme-d4';
|
||||
}
|
||||
|
||||
render_small_frame(inner) {
|
||||
let self = this;
|
||||
get_content() {
|
||||
let content = this.message?.content;
|
||||
if (this.message?.decrypted?.type == 'post') {
|
||||
content = this.message.decrypted;
|
||||
}
|
||||
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')}
|
||||
>
|
||||
Markdown
|
||||
</button>`;
|
||||
} 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`
|
||||
<div
|
||||
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%"
|
||||
>
|
||||
<tf-user id=${self.message.author} .users=${self.users}></tf-user>
|
||||
<span style="padding-right: 8px; text-wrap: nowrap"
|
||||
><a tfarget="_top" href=${'#' + encodeURIComponent(self.message.id)}
|
||||
<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
|
||||
>
|
||||
${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.message.child_messages || []).map(
|
||||
(x) => html`
|
||||
@ -397,11 +501,11 @@ class TfMessageElement extends LitElement {
|
||||
></tf-message>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
`;
|
||||
`);
|
||||
}
|
||||
|
||||
render_actions() {
|
||||
let content = this.get_content();
|
||||
let reply =
|
||||
this.drafts[this.message?.id] !== undefined
|
||||
? html`
|
||||
@ -421,7 +525,7 @@ class TfMessageElement extends LitElement {
|
||||
</button>
|
||||
`;
|
||||
return html`
|
||||
<div class="w3-section">
|
||||
<div class="w3-section w3-container">
|
||||
${reply}
|
||||
<button class="w3-button w3-theme-d1" @click=${this.react}>
|
||||
React
|
||||
@ -438,64 +542,8 @@ class TfMessageElement extends LitElement {
|
||||
}
|
||||
let class_background = this.class_background();
|
||||
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') {
|
||||
return html` <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%"
|
||||
>
|
||||
return this.render_frame(html`
|
||||
${this.message.messages.map(
|
||||
(x) =>
|
||||
html`<tf-message
|
||||
@ -507,13 +555,9 @@ class TfMessageElement extends LitElement {
|
||||
channel=${this.channel}
|
||||
channel_unread=${this.channel_unread}
|
||||
></tf-message>`
|
||||
)}
|
||||
</div>`;
|
||||
)}`);
|
||||
} else if (this.message.placeholder) {
|
||||
return html` <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%"
|
||||
>
|
||||
return this.render_frame(html`
|
||||
<a target="_top" href=${'#' + encodeURIComponent(this.message.id)}
|
||||
>${this.message.id}</a
|
||||
>
|
||||
@ -531,32 +575,31 @@ class TfMessageElement extends LitElement {
|
||||
channel_unread=${this.channel_unread}
|
||||
></tf-message>
|
||||
`
|
||||
)}
|
||||
</div>`;
|
||||
)}`);
|
||||
} else if (typeof (content?.type === 'string')) {
|
||||
if (content.type == 'about') {
|
||||
let name;
|
||||
let image;
|
||||
let description;
|
||||
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) {
|
||||
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) {
|
||||
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>
|
||||
`;
|
||||
}
|
||||
let update =
|
||||
content.about == this.message.author
|
||||
? html`<div style="font-weight: bold">Updated profile.</div>`
|
||||
: html`<div style="font-weight: bold">
|
||||
? html`<div class="w3-container" style="font-weight: bold">Updated profile.</div>`
|
||||
: html`<div class="w3-container" style="font-weight: bold">
|
||||
Updated profile for
|
||||
<tf-user id=${content.about} .users=${this.users}></tf-user>.
|
||||
</div>`;
|
||||
@ -565,7 +608,7 @@ class TfMessageElement extends LitElement {
|
||||
`);
|
||||
} else if (content.type == 'contact') {
|
||||
return html`
|
||||
<div>
|
||||
<div class="w3-padding">
|
||||
<tf-user id=${this.message.author} .users=${this.users}></tf-user>
|
||||
is
|
||||
${content.blocking === true
|
||||
@ -625,88 +668,26 @@ class TfMessageElement extends LitElement {
|
||||
let is_encrypted = this.message?.decrypted
|
||||
? html`<span style="align-self: center">🔓</span>`
|
||||
: undefined;
|
||||
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 ${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>
|
||||
${payload} ${this.render_votes()} ${this.render_actions()}
|
||||
</div>
|
||||
`;
|
||||
return this.render_frame(html`
|
||||
${this.render_header()}
|
||||
<div class="w3-container">${payload}</div>
|
||||
${this.render_votes()} ${this.render_actions()}
|
||||
</div>
|
||||
`);
|
||||
} else if (content.type === 'issue') {
|
||||
let is_encrypted = this.message?.decrypted
|
||||
? html`<span style="align-self: center">🔓</span>`
|
||||
: undefined;
|
||||
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 ${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()}
|
||||
<footer class="w3-container">
|
||||
<button class="w3-button w3-theme-d1" @click=${this.react}>
|
||||
React
|
||||
</button>
|
||||
${this.render_children()}
|
||||
</footer>
|
||||
</div>
|
||||
`;
|
||||
return this.render_frame(html`
|
||||
${this.render_header()}
|
||||
${content.text} ${this.render_votes()}
|
||||
<footer class="w3-container">
|
||||
<button class="w3-button w3-theme-d1" @click=${this.react}>
|
||||
React
|
||||
</button>
|
||||
${this.render_children()}
|
||||
</footer>
|
||||
`);
|
||||
} else if (content.type === 'blog') {
|
||||
let self = this;
|
||||
tfrpc.rpc.get_blob(content.blog).then(function (data) {
|
||||
@ -742,44 +723,12 @@ class TfMessageElement extends LitElement {
|
||||
`;
|
||||
break;
|
||||
}
|
||||
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 ${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>
|
||||
${this.render_mentions()} ${this.render_votes()}
|
||||
${this.render_actions()}
|
||||
</div>
|
||||
`;
|
||||
return this.render_frame(html`
|
||||
${this.render_header()}
|
||||
<div>${body}</div>
|
||||
${this.render_mentions()} ${this.render_votes()}
|
||||
${this.render_actions()}
|
||||
`);
|
||||
} else if (content.type === 'pub') {
|
||||
return this.render_small_frame(
|
||||
html` <style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user