roles dans le popup des membres a droite

This commit is contained in:
Flatlogic Bot 2026-02-15 22:37:21 +00:00
parent c08cfebf52
commit a757fa13ed
2 changed files with 36 additions and 5 deletions

View File

@ -634,6 +634,7 @@ document.addEventListener('DOMContentLoaded', () => {
const userId = memberItem.dataset.userId;
const username = memberItem.dataset.username;
const avatar = memberItem.dataset.avatar;
const roleIds = (memberItem.dataset.roleIds || '').split(',').filter(id => id);
// Create or show member menu
document.querySelector('.member-context-menu')?.remove();
@ -642,17 +643,42 @@ document.addEventListener('DOMContentLoaded', () => {
menu.style.position = 'fixed';
menu.style.zIndex = '1000';
menu.style.boxShadow = '0 4px 12px rgba(0,0,0,0.5)';
menu.style.minWidth = '150px';
menu.style.minWidth = '180px';
const rect = memberItem.getBoundingClientRect();
menu.style.top = `${rect.top}px`;
menu.style.left = `${rect.left - 160}px`;
menu.style.left = `${rect.left - 190}px`;
let rolesHtml = '';
if (roleIds.length > 0) {
// Deduplicate and filter valid roles from serverRoles
const uniqueRoleIds = [...new Set(roleIds)];
const roles = uniqueRoleIds.map(id => serverRoles.find(r => r.id == id)).filter(r => r);
if (roles.length > 0) {
rolesHtml = `
<div class="mb-2 p-1">
<div class="small text-muted text-uppercase mb-1" style="font-size: 0.6em; font-weight: bold; opacity: 0.8;">Rôles</div>
<div class="d-flex flex-wrap gap-1">
${roles.map(r => `
<span class="badge rounded-pill d-flex align-items-center" style="background-color: rgba(0,0,0,0.3); border: 1px solid ${r.color}; font-size: 0.7em; color: ${r.color}; font-weight: 500; padding: 2px 8px;">
${r.icon_url ? `<img src="${r.icon_url}" style="width: 12px; height: 12px; margin-right: 4px; object-fit: contain;">` : ''}
${escapeHTML(r.name)}
</span>
`).join('')}
</div>
</div>
<div class="border-top border-secondary mb-2 mx-1"></div>
`;
}
}
menu.innerHTML = `
<div class="mb-2 p-1 border-bottom border-secondary d-flex align-items-center">
<div class="p-1 d-flex align-items-center mb-1">
<div class="message-avatar me-2" style="width: 24px; height: 24px; ${avatar ? `background-image: url('${avatar}');` : ''}"></div>
<span class="small fw-bold">${escapeHTML(username)}</span>
</div>
<div class="border-top border-secondary mb-2 mx-1"></div>
${rolesHtml}
<button class="btn btn-sm btn-dark w-100 text-start mb-1 member-menu-action" data-action="message">Message</button>
${(window.isServerOwner || window.canManageServer) ? `<button class="btn btn-sm btn-dark w-100 text-start member-menu-action" data-action="edit-roles">Éditer son rôle</button>` : ''}
`;
@ -1213,6 +1239,7 @@ document.addEventListener('DOMContentLoaded', () => {
item.dataset.userId = m.id;
item.dataset.username = m.username;
item.dataset.avatar = m.avatar_url || '';
item.dataset.roleIds = m.role_ids || '';
item.style.color = 'var(--text-primary)';
item.style.marginBottom = '8px';
item.style.cursor = 'pointer';
@ -2103,4 +2130,7 @@ document.addEventListener('DOMContentLoaded', () => {
el.addEventListener('load', () => scrollToBottom(isMe));
});
}
// Initial load of roles for the server
loadRoles();
});

View File

@ -190,13 +190,14 @@ if ($is_dm_view) {
// Fetch members
$stmt = db()->prepare("
SELECT u.id, u.username, u.avatar_url, u.status,
(SELECT GROUP_CONCAT(r.id) FROM roles r JOIN user_roles ur ON r.id = ur.role_id WHERE ur.user_id = u.id AND r.server_id = ?) as role_ids,
(SELECT r.color FROM roles r JOIN user_roles ur ON r.id = ur.role_id WHERE ur.user_id = u.id AND r.server_id = ? ORDER BY r.position DESC LIMIT 1) as role_color,
(SELECT r.icon_url FROM roles r JOIN user_roles ur ON r.id = ur.role_id WHERE ur.user_id = u.id AND r.server_id = ? ORDER BY r.position DESC LIMIT 1) as role_icon
FROM users u
JOIN server_members sm ON u.id = sm.user_id
WHERE sm.server_id = ?
");
$stmt->execute([$active_server_id, $active_server_id, $active_server_id]);
$stmt->execute([$active_server_id, $active_server_id, $active_server_id, $active_server_id]);
$members = $stmt->fetchAll();
}
@ -789,7 +790,7 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
Members <?php echo count($members); ?>
</div>
<?php foreach($members as $m): ?>
<div class="channel-item member-item" data-user-id="<?php echo $m['id']; ?>" data-username="<?php echo htmlspecialchars($m['username']); ?>" data-avatar="<?php echo htmlspecialchars($m['avatar_url'] ?? ''); ?>" style="color: var(--text-primary); margin-bottom: 8px; cursor: pointer;">
<div class="channel-item member-item" data-user-id="<?php echo $m['id']; ?>" data-username="<?php echo htmlspecialchars($m['username']); ?>" data-avatar="<?php echo htmlspecialchars($m['avatar_url'] ?? ''); ?>" data-role-ids="<?php echo $m['role_ids'] ?? ''; ?>" style="color: var(--text-primary); margin-bottom: 8px; cursor: pointer;">
<div class="message-avatar" style="width: 32px; height: 32px; background-color: <?php echo $m['status'] == 'online' ? '#23a559' : '#80848e'; ?>; position: relative; <?php echo $m['avatar_url'] ? "background-image: url('{$m['avatar_url']}');" : ""; ?>">
<?php if($m['status'] == 'online'): ?>
<div style="position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background-color: #23a559; border-radius: 50%; border: 2px solid var(--bg-members);"></div>