tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

ssb: Consolidate the buttons around the compose UI. #122

Browse Source
This commit is contained in:
Cory McWilliams 2025-06-02 21:47:35 -04:00
parent 8ae10dc80b
commit 3bbc8c4d35
2 changed files with 69 additions and 20 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": "&QGHSmapZNOzNQYbH9qUA5RPoqLhHZ1zFDMkOlKixrbQ=.sha256" "previous": "&ePqnCcU373yUI01WtrFFKt+W/doAuMiN4g8qBt5p+rk=.sha256"
} }

87
apps/ssb/tf-compose.js
View File

@ -446,12 +446,15 @@ class TfComposeElement extends LitElement {
self.apps = await tfrpc.rpc.apps(); self.apps = await tfrpc.rpc.apps();
} }
if (!this.apps) { if (!this.apps) {
return html`<button class="w3-button w3-theme-d1" @click=${attach_app}> return html`<button
class="w3-button w3-bar-item w3-theme-d1"
@click=${attach_app}
>
Attach App Attach App
</button>`; </button>`;
} else { } else {
return html`<button return html`<button
class="w3-button w3-theme-d1" class="w3-button w3-bar-item w3-theme-d1"
@click=${() => (this.apps = null)} @click=${() => (this.apps = null)}
> >
Discard App Discard App
@ -472,18 +475,9 @@ class TfComposeElement extends LitElement {
if (draft.content_warning !== undefined) { if (draft.content_warning !== undefined) {
return html` return html`
<div class="w3-container w3-padding"> <div class="w3-container w3-padding">
<p>
<input type="checkbox" class="w3-check w3-theme-d1" id="cw" @change=${() => self.set_content_warning(undefined)} checked="checked"></input>
<label for="cw">CW</label>
</p>
<input type="text" class="w3-input w3-border w3-theme-d1" id="content_warning" placeholder="Enter a content warning here." @input=${self.input} value=${draft.content_warning}></input> <input type="text" class="w3-input w3-border w3-theme-d1" id="content_warning" placeholder="Enter a content warning here." @input=${self.input} value=${draft.content_warning}></input>
</div> </div>
`; `;
} else {
return html`
<input type="checkbox" class="w3-check w3-theme-d1" id="cw" @change=${() => self.set_content_warning('')}></input>
<label for="cw">CW</label>
`;
} }
} }
@ -546,6 +540,31 @@ class TfComposeElement extends LitElement {
this.requestUpdate(); this.requestUpdate();
} }
toggle_menu(event) {
event.srcElement.parentNode
.querySelector('.w3-dropdown-content')
.classList.toggle('w3-show');
}
connectedCallback() {
super.connectedCallback();
this._click_callback = this.document_click.bind(this);
document.body.addEventListener('mouseup', this._click_callback);
}
disconnectedCallback() {
super.disconnectedCallback();
document.body.removeEventListener('mouseup', this._click_callback);
}
document_click(event) {
let content = this.renderRoot.querySelector('.w3-dropdown-content');
let target = event.target;
if (content && !content.contains(target)) {
content.classList.remove('w3-show');
}
}
render() { render() {
let self = this; let self = this;
let draft = self.get_draft(); let draft = self.get_draft();
@ -559,7 +578,7 @@ class TfComposeElement extends LitElement {
draft.encrypt_to !== undefined draft.encrypt_to !== undefined
? undefined ? undefined
: html`<button : html`<button
class="w3-button w3-theme-d1" class="w3-button w3-bar-item w3-theme-d1"
@click=${() => this.set_encrypt([])} @click=${() => this.set_encrypt([])}
> >
🔐 🔐
@ -614,13 +633,43 @@ class TfComposeElement extends LitElement {
> >
Submit Submit
</button> </button>
<button class="w3-button w3-theme-d1" @click=${this.attach}> <div class="w3-dropdown-click">
Attach <button class="w3-button w3-theme-d1" @click=${this.toggle_menu}>
</button> ⚙️
${this.render_attach_app_button()} ${encrypt} </button>
<button class="w3-button w3-theme-d1" @click=${this.discard}> <div class="w3-dropdown-content w3-bar-block">
Discard ${this.get_draft().content_warning === undefined
</button> ? html`
<button
class="w3-button w3-bar-item w3-theme-d1"
@click=${() => self.set_content_warning('')}
>
Add Content Warning
</button>
`
: html`
<button
class="w3-button w3-bar-item w3-theme-d1"
@click=${() => self.set_content_warning(undefined)}
>
Remove Content Warning
</button>
`}
<button
class="w3-button w3-bar-item w3-theme-d1"
@click=${this.attach}
>
Attach
</button>
${this.render_attach_app_button()} ${encrypt}
<button
class="w3-button w3-bar-item w3-theme-d1"
@click=${this.discard}
>
Discard
</button>
</div>
</div>
</footer> </footer>
</div> </div>
`; `;