ssb: Message % menu tweaks. Show on click. Hide when clicking off. Bury the message ID further.
Some checks failed
Build Tilde Friends / Build-All (push) Has been cancelled

This commit is contained in:
Cory McWilliams 2025-04-07 21:39:14 -04:00
parent 657f25e22b
commit dd3b2656ad
2 changed files with 28 additions and 4 deletions

View File

@ -1,5 +1,5 @@
{ {
"type": "tildefriends-app", "type": "tildefriends-app",
"emoji": "🦀", "emoji": "🦀",
"previous": "&ErfmEIt3WboZp6PR3cC/i7XU/ZTI/2X5I9XvUN0GGMU=.sha256" "previous": "&n4BDWGMwfagmlsWupwzKvYGLu6X6oYbtgdFvHP6JmZU=.sha256"
} }

View File

@ -33,6 +33,26 @@ class TfMessageElement extends LitElement {
this.channel_unread = -1; this.channel_unread = -1;
} }
connectedCallback() {
super.connectedCallback();
this._click_callback = this.document_click.bind(this);
document.body.addEventListener('mousedown', this._click_callback);
}
disconnectedCallback() {
super.disconnectedCallback();
document.body.removeEventListener('mousedown', this._click_callback);
}
document_click(event) {
let content = this.renderRoot.querySelector('.w3-dropdown-content');
let target = event.originalTarget;
if (content && !content.contains(target))
{
content.classList.remove('w3-show');
}
}
show_reply() { show_reply() {
let event = new CustomEvent('tf-draft', { let event = new CustomEvent('tf-draft', {
bubbles: true, bubbles: true,
@ -375,6 +395,10 @@ class TfMessageElement extends LitElement {
navigator.clipboard.writeText(this.message?.id); navigator.clipboard.writeText(this.message?.id);
} }
toggle_menu(event) {
event.srcElement.parentNode.querySelector('.w3-dropdown-content').classList.toggle('w3-show');
}
render_menu() { render_menu() {
let content = this.get_content(); let content = this.get_content();
let formats = [['message', 'Message']]; let formats = [['message', 'Message']];
@ -386,8 +410,8 @@ class TfMessageElement extends LitElement {
} }
formats.push(['raw', 'Raw']); formats.push(['raw', 'Raw']);
return html` return html`
<div class="w3-bar-item w3-right w3-dropdown-hover"> <div class="w3-bar-item w3-right">
<button class="w3-button w3-theme-d1">%</button> <button class="w3-button w3-theme-d1" @click=${this.toggle_menu}>%</button>
<div <div
class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-l1" class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-l1"
style="right: 48px" style="right: 48px"
@ -396,7 +420,7 @@ class TfMessageElement extends LitElement {
target="_top" target="_top"
class="w3-button w3-bar-item" class="w3-button w3-bar-item"
href=${'#' + encodeURIComponent(this.message?.id)} href=${'#' + encodeURIComponent(this.message?.id)}
>${this.message?.id}</a >View Message</a
> >
<button <button
class="w3-button w3-bar-item w3-border-bottom" class="w3-button w3-bar-item w3-border-bottom"