emotes roles V2
This commit is contained in:
parent
cd2b57b27d
commit
171804c16a
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
BIN
assets/pasted-20260216-163622-0013f90f.png
Normal file
BIN
assets/pasted-20260216-163622-0013f90f.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
assets/pasted-20260216-170004-77ff069d.png
Normal file
BIN
assets/pasted-20260216-170004-77ff069d.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@ -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>
|
||||
|
||||
@ -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: []
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user