cory/tildefriends
4
5
Fork 1
Code Issues 33 Pull Requests 1 Actions 1 Releases 28 Wiki Activity

ssb: Make the emoji picker behave a little better, still.

Browse Source
This commit is contained in:
Cory McWilliams 2024-12-23 10:28:12 -05:00
parent cd03ede358
commit 5051cecb84
2 changed files with 9 additions and 6 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": "&bjAInmZa9aZQEuuYOQ19S+HP8P2o2gJO7T8Cd2bnAsM=.sha256" "previous": "&q/1uGp0jMvsYGW7Gj8E33kf6UFo/uNYDXg3zo1sVKQg=.sha256"
} }

13
apps/ssb/emojis.js
View File

@ -37,10 +37,12 @@ export async function picker(callback, anchor, author) {
div.style.color = '#000'; div.style.color = '#000';
div.style.background = '#fff'; div.style.background = '#fff';
div.style.border = '1px solid #000'; div.style.border = '1px solid #000';
div.style.display = 'block'; div.style.display = 'flex';
div.style.overflow = 'scroll'; div.style.overflow = 'scroll';
div.style.fontWeight = 'bold'; div.style.fontWeight = 'bold';
div.style.fontSize = 'xx-large'; div.style.fontSize = 'xx-large';
div.style.flex = '1 1';
div.style.flexDirection = 'column';
let input = document.createElement('input'); let input = document.createElement('input');
input.type = 'text'; input.type = 'text';
input.style.display = 'block'; input.style.display = 'block';
@ -50,6 +52,7 @@ export async function picker(callback, anchor, author) {
input.style.position = 'relative'; input.style.position = 'relative';
div.appendChild(input); div.appendChild(input);
let list = document.createElement('div'); let list = document.createElement('div');
list.style.overflow = 'scroll';
div.appendChild(list); div.appendChild(list);
div.addEventListener('mousedown', function (event) { div.addEventListener('mousedown', function (event) {
event.stopPropagation(); event.stopPropagation();
@ -153,16 +156,16 @@ export async function picker(callback, anchor, author) {
${styles} ${styles}
</style> </style>
<div class="w3-modal" style="display: block; box-sizing: border-box; z-index: 10"> <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-modal-content w3-card-4">
<div class="w3-content w3-theme-d1"> <div class="w3-content w3-theme-d1" style="display: flex; flex-direction: column; max-height: 50vh">
<header class="w3-container"> <header class="w3-container" style="flex: 0 0">
<h1>Choose a Reaction</h1> <h1>Choose a Reaction</h1>
<span class="w3-button w3-display-topright" @click=${cleanup} <span class="w3-button w3-display-topright" @click=${cleanup}
>&times;</span >&times;</span
> >
</header> </header>
${div} ${div}
<footer class="w3-container w3-padding"> <footer class="w3-container w3-padding" style="flex: 0 0">
<button class="w3-button" @click=${cleanup}>Close</button> <button class="w3-button" @click=${cleanup}>Close</button>
</footer> </footer>
</div> </div>