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",
"emoji": "🦀",
"previous": "&ErfmEIt3WboZp6PR3cC/i7XU/ZTI/2X5I9XvUN0GGMU=.sha256"
"previous": "&n4BDWGMwfagmlsWupwzKvYGLu6X6oYbtgdFvHP6JmZU=.sha256"
}

View File

@ -33,6 +33,26 @@ class TfMessageElement extends LitElement {
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() {
let event = new CustomEvent('tf-draft', {
bubbles: true,
@ -375,6 +395,10 @@ class TfMessageElement extends LitElement {
navigator.clipboard.writeText(this.message?.id);
}
toggle_menu(event) {
event.srcElement.parentNode.querySelector('.w3-dropdown-content').classList.toggle('w3-show');
}
render_menu() {
let content = this.get_content();
let formats = [['message', 'Message']];
@ -386,8 +410,8 @@ class TfMessageElement extends LitElement {
}
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-bar-item w3-right">
<button class="w3-button w3-theme-d1" @click=${this.toggle_menu}>%</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4 w3-theme-l1"
style="right: 48px"
@ -396,7 +420,7 @@ class TfMessageElement extends LitElement {
target="_top"
class="w3-button w3-bar-item"
href=${'#' + encodeURIComponent(this.message?.id)}
>${this.message?.id}</a
>View Message</a
>
<button
class="w3-button w3-bar-item w3-border-bottom"