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

ssb: Work in progress trying to get the emoji picker in line with some of the other modal dialogs.

Browse Source
This commit is contained in:
Cory McWilliams 2024-12-22 14:45:16 -05:00
parent 6563f8c738
commit cd03ede358
3 changed files with 24 additions and 11 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": "&k7Wg0DJDUwCnJewRYVmuqF6hL7GEHJzVZic2KO4Z7BQ=.sha256" "previous": "&bjAInmZa9aZQEuuYOQ19S+HP8P2o2gJO7T8Cd2bnAsM=.sha256"
} }

31
apps/ssb/emojis.js
View File

@ -142,21 +142,34 @@ export async function picker(callback, anchor, author) {
} }
refresh(); refresh();
input.oninput = refresh; input.oninput = refresh;
let modal = html`
<style>
${styles}
</style>
<div class="w3-modal" style="display: block">
<div class="w3-modal-content w3-card-4">${div}</div>
</div>
`;
let parent = document.createElement('div'); let parent = document.createElement('div');
document.body.appendChild(parent);
function cleanup() { function cleanup() {
parent.parentElement.removeChild(parent); parent.parentElement.removeChild(parent);
window.removeEventListener('keydown', key_down); window.removeEventListener('keydown', key_down);
document.body.removeEventListener('mousedown', cleanup); document.body.removeEventListener('mousedown', cleanup);
} }
let modal = html`
<style>
${styles}
</style>
<div class="w3-modal" style="display: block; box-sizing: border-box; z-index: 10">
<div class="w3-modal-content w3-card-4" style="max-height: 50%">
<div class="w3-content w3-theme-d1">
<header class="w3-container">
<h1>Choose a Reaction</h1>
<span class="w3-button w3-display-topright" @click=${cleanup}
>&times;</span
>
</header>
${div}
<footer class="w3-container w3-padding">
<button class="w3-button" @click=${cleanup}>Close</button>
</footer>
</div>
</div>
</div>
`;
document.body.appendChild(parent);
render(modal, parent); render(modal, parent);
input.focus(); input.focus();
document.body.addEventListener('mousedown', cleanup); document.body.addEventListener('mousedown', cleanup);

2
apps/ssb/tf-reactions-modal.js
View File

@ -26,7 +26,7 @@ class TfReactionsModalElement extends LitElement {
return this.votes?.length return this.votes?.length
? html` <div ? html` <div
class="w3-modal w3-animate-opacity" class="w3-modal w3-animate-opacity"
style="display: block; box-sizing: border-box" style="display: block; box-sizing: border-box; z-index: 10"
@click=${this.clear} @click=${this.clear}
> >
<div <div