ssb: Make a message % context menu with some new options to begin to declutter the message view itself.
All checks were successful
Build Tilde Friends / Build-All (push) Successful in 29m42s

This commit is contained in:
Cory McWilliams 2025-04-05 17:53:47 -04:00
parent 40cf519492
commit e574758340
3 changed files with 29 additions and 60 deletions

View File

@ -1,5 +1,5 @@
{
"type": "tildefriends-app",
"emoji": "🦀",
"previous": "&BNj/9Tct9Iw03fAx0TSjCI5Cm1EizcmTj6JZm3bZpB4=.sha256"
"previous": "&R0bGxjJq3G2eJzuKfUrQP4ioSn75QlwvaS39Q9LzMto=.sha256"
}

View File

@ -371,62 +371,34 @@ class TfMessageElement extends LitElement {
return content;
}
render_raw_button() {
copy_id(event) {
navigator.clipboard.writeText(this.message?.id);
}
render_menu() {
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;
let formats = [
['message', 'Message'],
];
if (content?.type == 'post' || content?.type == 'blog') {
formats.push(['md', 'Markdown']);
}
return raw_button;
if (this.message?.decrypted) {
formats.push(['decrypted', 'Decrypted']);
}
formats.push(['raw', 'Raw']);
return html`
<div class="w3-bar-item w3-right w3-dropdown-hover">
<button class="w3-button w3-theme-d1">%</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-l1" style="right: 48px">
<a target="_top" class="w3-button w3-bar-item" href=${'#' + encodeURIComponent(this.message?.id)}>${this.message?.id}</a>
<button class="w3-button w3-bar-item w3-border-bottom" @click=${this.copy_id}>Copy ID</button>
${formats.map(([format, name]) => (html`
<button class="w3-button w3-bar-item" style=${format == this.format ? 'font-weight: bold' : ''} @click=${() => (this.format = format)}>${name}</button>
`))}
</div>
</div>
`;
}
render_header() {
@ -441,11 +413,8 @@ class TfMessageElement extends LitElement {
<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>
${this.render_menu()}
<span class="w3-bar-item w3-right" style="text-wrap: nowrap"
><a target="_top" href=${'#' + encodeURIComponent(this.message.id)}
>%</a
>
${new Date(this.message.timestamp).toLocaleString()}</span
>
</header>

View File

@ -285,7 +285,7 @@ class TfTabNewsElement extends LitElement {
return cache(html`
${this.render_sidebar()}
<div
style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: auto"
style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: auto; contain: layout"
id="main"
class="w3-main"
>