olcxjas-softworks/LarpixClient
2
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 3

fix emoji picker styling & update packages
All checks were successful
Android Build / publish (push) Successful in 33s
Details
Linux Build / publish (push) Successful in 51s
Details

Browse source
This commit is contained in:
olcxja 2026-06-18 08:40:01 +02:00
commit d587aed92c
59 changed files with 46 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

15
webroot/main.js
View file

@ -2528,11 +2528,11 @@ async function loadEmotes() {
reactionPickerMenuHtml = `
<div style="display: flex; flex-direction: column; gap: 0.4rem; padding: 0.2rem; min-width: 14rem;">
<input type="text" id="reaction-picker-search" placeholder="Type text / emoji..." oninput="filterReactions(this.value)" onkeydown="if(event.key === 'Enter') { if(this.value.trim() !== '') reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(this.value)); }" style="width: 100%; box-sizing: border-box; padding: 0.5rem 0.6rem; border-radius: 0.65rem; border: var(--border-width) solid var(--light-border-color); background: transparent; color: var(--text-color); font-family: inherit;">
<input type="text" id="reaction-picker-search" placeholder="Type text / emoji..." oninput="filterReactions(this.value)" onkeydown="if(event.key === 'Enter') { if(this.value.trim() !== '') reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(this.value)); }" style="width: auto; align-self: stretch; margin: 0; box-sizing: border-box; padding: 0.5rem 0.6rem; border-radius: 0.65rem; border: var(--border-width) solid var(--light-border-color); background: transparent; color: var(--text-color); font-family: inherit;">
<div id="reaction-picker-grid" style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.2rem; max-height: 12rem; overflow-y: auto; overflow-x: hidden;">
${loadedEmotes.map(emoji => `<button onclick="reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent('${emoji.char}'))" data-name="${emoji.name}" style="min-width: unset; width: 100%; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; padding: 0; font-size: 1.2rem; border-radius: 0.65rem;" class="reaction-emoji-btn">${emoji.char}</button>`).join('')}
</div>
<button onclick="reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(document.getElementById('reaction-picker-search').value))" style="margin: 0; padding: 0.5rem; justify-content: center; border-radius: 0.65rem; width: 100%;">
<button class="reaction-text-btn" onclick="reactMessagePrompt(currentContextMenuMsgId, encodeURIComponent(document.getElementById('reaction-picker-search').value))" style="margin: 0; padding: 0.5rem; justify-content: center; border-radius: 0.65rem; width: 100%;">
<span class="blah">title.text.react</span>
</button>
</div>
@ -2566,7 +2566,16 @@ function openReactionPicker(e) {
let rect = fixedContextMenu.getBoundingClientRect();
showFixedContextMenu({top: rect.top, right: rect.left, bottom: rect.top, left: rect.left}, reactionPickerMenuHtml);
let searchInput = document.getElementById('reaction-picker-search');
if (searchInput) searchInput.focus();
if (searchInput) {
searchInput.addEventListener('focus', () => { //TODO: use code from resize event
setTimeout(() => {
let menuRect = fixedContextMenu.getBoundingClientRect();
if (menuRect.bottom > window.innerHeight) {
fixedContextMenu.style.top = `${Math.max(10, window.innerHeight - menuRect.height - 10)}px`;
}
}, 500);
});
}
}
async function reactMessagePrompt(msgId, quickReaction = null) {

10
webroot/style.css
View file

@ -749,4 +749,12 @@ sidebarelement:has(.icon-button:active) indicator:not(.active) {
border: 0.15rem solid var(--text-color);
border-radius: 0.8rem;
transform: translateY(calc( ( var(--icon-button-height) + (var(--button-margin) * 2) ) / 2 - 0.6rem));
}
}
.context-menu button.reaction-text-btn {
background-color: rgba(255, 255, 255, 0.03);
background: rgba(255, 255, 255, 0.05);
}
.context-menu button.reaction-text-btn:hover {
background-color: rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.08);
}