emotes roles V2

This commit is contained in:
Flatlogic Bot 2026-02-16 17:09:01 +00:00
parent cd2b57b27d
commit 171804c16a
6 changed files with 59 additions and 23 deletions

View File

@ -665,9 +665,19 @@ body {
border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #1a1b1e;
background: #4e5058;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.emoji-picker {
position: fixed;
background-color: #1e1f22;

View File

@ -98,7 +98,7 @@ document.addEventListener('DOMContentLoaded', () => {
grid.innerHTML = '';
if (emotes.length === 0) {
grid.innerHTML = '<div class="col-12 text-center text-muted p-4" style="grid-column: span 8;">Aucune emote personnalisée. Ajoutez-en une !</div>';
grid.innerHTML = '<div class="col-12 text-center text-muted p-4" style="grid-column: 1 / -1;">Aucune emote personnalisée. Ajoutez-en une !</div>';
} else {
emotes.forEach(emote => {
const div = document.createElement('div');
@ -245,26 +245,30 @@ document.addEventListener('DOMContentLoaded', () => {
this.hide();
const picker = document.createElement('div');
picker.className = 'emoji-picker p-0 overflow-hidden d-flex flex-column';
picker.style.width = options.width || '350px';
picker.style.height = options.height || '450px';
picker.className = 'universal-emoji-picker p-0 overflow-hidden d-flex flex-column';
picker.style.width = options.width || '900px';
picker.style.height = options.height || '500px';
picker.style.backgroundColor = '#313338';
picker.style.border = '1px solid #1e1f22';
picker.style.borderRadius = '8px';
picker.style.boxShadow = '0 8px 24px rgba(0,0,0,0.5)';
picker.style.zIndex = '4000';
picker.style.zIndex = '11000'; // Higher than most modals
picker.style.position = 'fixed';
picker.style.padding = '0'; // Explicitly override any CSS
// Tab Navigation
const tabs = document.createElement('div');
tabs.className = 'd-flex overflow-auto border-bottom border-secondary p-1 custom-scrollbar';
tabs.className = 'd-flex overflow-x-auto border-bottom border-secondary p-1 no-scrollbar';
tabs.style.gap = '2px';
tabs.style.backgroundColor = '#2b2d31';
tabs.style.flexShrink = '0';
tabs.style.minHeight = '42px';
// Search Container
const searchContainer = document.createElement('div');
searchContainer.className = 'p-2 border-bottom border-secondary';
searchContainer.style.backgroundColor = '#313338';
searchContainer.style.flexShrink = '0';
const searchInput = document.createElement('input');
searchInput.type = 'text';
@ -274,11 +278,12 @@ document.addEventListener('DOMContentLoaded', () => {
// Grid Container
const grid = document.createElement('div');
grid.className = 'flex-grow-1 overflow-auto p-2 custom-scrollbar';
grid.className = 'flex-grow-1 overflow-auto p-1 custom-scrollbar'; // Reduced padding
grid.style.display = 'grid';
grid.style.gridTemplateColumns = 'repeat(8, 1fr)';
grid.style.gap = '5px';
grid.style.gridTemplateColumns = 'repeat(15, 1fr)';
grid.style.gap = '2px';
grid.style.backgroundColor = '#313338';
grid.style.alignContent = 'start';
const renderGrid = async (cat = null, term = '') => {
grid.innerHTML = '';
@ -286,12 +291,14 @@ document.addEventListener('DOMContentLoaded', () => {
if (term) {
const customEmotes = window.CUSTOM_EMOTES_CACHE || [];
const filteredCustom = customEmotes.filter(e => e.name.toLowerCase().includes(term.toLowerCase()) || e.code.toLowerCase().includes(term.toLowerCase()));
const filteredStandard = ALL_EMOJIS.filter(e => e.includes(term));
filteredCustom.forEach(emote => {
const div = document.createElement('div');
div.className = 'role-emoji-item rounded d-flex align-items-center justify-content-center p-2';
div.className = 'role-emoji-item rounded d-flex align-items-center justify-content-center p-1';
div.style.cursor = 'pointer';
div.innerHTML = `<img src="${emote.path}" style="width: 24px; height: 24px; object-fit: contain;">`;
div.style.aspectRatio = '1/1';
div.innerHTML = `<img src="${emote.path}" style="width: 32px; height: 32px; object-fit: contain;">`;
div.title = emote.code;
div.onclick = (e) => {
e.stopPropagation();
@ -301,12 +308,12 @@ document.addEventListener('DOMContentLoaded', () => {
grid.appendChild(div);
});
const filteredStandard = ALL_EMOJIS.filter(e => e.includes(term));
filteredStandard.forEach(emoji => {
const div = document.createElement('div');
div.className = 'role-emoji-item rounded d-flex align-items-center justify-content-center p-2';
div.className = 'role-emoji-item rounded d-flex align-items-center justify-content-center p-1';
div.style.cursor = 'pointer';
div.style.fontSize = '24px';
div.style.aspectRatio = '1/1';
div.textContent = emoji;
div.onclick = (e) => {
e.stopPropagation();
@ -321,14 +328,15 @@ document.addEventListener('DOMContentLoaded', () => {
if (cat === 'Custom') {
const customEmotes = (window.CUSTOM_EMOTES_CACHE && window.CUSTOM_EMOTES_CACHE.length > 0) ? window.CUSTOM_EMOTES_CACHE : await window.loadCustomEmotes();
if (customEmotes.length === 0) {
grid.innerHTML = '<div class="col-12 text-center text-muted p-4" style="grid-column: span 8; font-size: 0.8em;">Aucune emote personnalisée.</div>';
grid.innerHTML = '<div class="col-12 text-center text-muted p-4" style="grid-column: span 15; font-size: 0.8em;">Aucune emote personnalisée.</div>';
return;
}
customEmotes.forEach(emote => {
const div = document.createElement('div');
div.className = 'role-emoji-item rounded d-flex align-items-center justify-content-center p-2';
div.className = 'role-emoji-item rounded d-flex align-items-center justify-content-center p-1';
div.style.cursor = 'pointer';
div.innerHTML = `<img src="${emote.path}" style="width: 24px; height: 24px; object-fit: contain;">`;
div.style.aspectRatio = '1/1';
div.innerHTML = `<img src="${emote.path}" style="width: 32px; height: 32px; object-fit: contain;">`;
div.title = emote.code;
div.onclick = (e) => {
e.stopPropagation();
@ -343,9 +351,10 @@ document.addEventListener('DOMContentLoaded', () => {
let list = EMOJI_CATEGORIES[cat];
(list || []).forEach(emoji => {
const div = document.createElement('div');
div.className = 'role-emoji-item rounded d-flex align-items-center justify-content-center p-2';
div.className = 'role-emoji-item rounded d-flex align-items-center justify-content-center p-1';
div.style.cursor = 'pointer';
div.style.fontSize = '24px';
div.style.aspectRatio = '1/1';
div.textContent = emoji;
div.onclick = (e) => {
e.stopPropagation();
@ -400,10 +409,18 @@ document.addEventListener('DOMContentLoaded', () => {
const rect = anchor.getBoundingClientRect();
let top = rect.top - picker.offsetHeight - 10;
if (top < 0) top = rect.bottom + 10;
let left = rect.left;
if (left + picker.offsetWidth > window.innerWidth) left = window.innerWidth - picker.offsetWidth - 20;
if (left < 10) left = 10;
// Ensure it doesn't go off screen at the bottom
if (top + picker.offsetHeight > window.innerHeight) {
top = window.innerHeight - picker.offsetHeight - 10;
}
// Ensure it doesn't go off screen at the top
if (top < 0) top = 10;
picker.style.top = `${top}px`;
picker.style.left = `${left}px`;
@ -428,7 +445,7 @@ document.addEventListener('DOMContentLoaded', () => {
};
// Replace old showEmojiPicker and role grid logic
window.showEmojiPicker = (anchor, callback) => UniversalEmojiPicker.show(anchor, callback, { width: '350px', height: '400px' });
window.showEmojiPicker = (anchor, callback) => UniversalEmojiPicker.show(anchor, callback, { width: '900px', height: '500px' });
window.renderEmojiToElement = (code, el) => {
if (!el) return;
@ -464,7 +481,7 @@ document.addEventListener('DOMContentLoaded', () => {
const preview = document.getElementById(config.preview);
if (input) input.value = emoji;
window.renderEmojiToElement(emoji, preview);
}, { width: "350px", height: "400px" });
}, { width: "900px", height: "500px" });
return;
}
@ -478,7 +495,7 @@ document.addEventListener('DOMContentLoaded', () => {
chatInput.value += emoji;
chatInput.focus();
}
}, { keepOpen: true, width: "350px", height: "400px" });
}, { keepOpen: true, width: "900px", height: "500px" });
return;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -1052,9 +1052,10 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
</div>
</div>
<!-- Server Settings Modal -->
<!-- Server Settings Modal -->
<div class="modal fade" id="serverSettingsModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Server Settings</h5>

View File

@ -234,3 +234,11 @@
2026-02-16 16:32:49 - GET /?fl_project=38443 - POST: []
2026-02-16 16:32:51 - GET /index.php?server_id=1&channel_id=17 - POST: []
2026-02-16 16:33:28 - GET /index.php?server_id=1&channel_id=17 - POST: []
2026-02-16 16:38:10 - GET / - POST: []
2026-02-16 16:38:17 - GET /?fl_project=38443 - POST: []
2026-02-16 16:58:08 - GET /index.php?server_id=1&channel_id=17 - POST: []
2026-02-16 16:58:15 - GET /index.php?server_id=1&channel_id=17 - POST: []
2026-02-16 17:01:50 - GET /?fl_project=38443 - POST: []
2026-02-16 17:03:56 - GET / - POST: []
2026-02-16 17:04:02 - GET /?fl_project=38443 - POST: []
2026-02-16 17:08:30 - GET /index.php?server_id=1&channel_id=17 - POST: []