118 lines
5.6 KiB
PHP
Executable File
118 lines
5.6 KiB
PHP
Executable File
<div id="div_menu_profil" class="animate__animated animate__fadeIn">
|
|
<div class="row g-4">
|
|
|
|
<div id="div_utilisateur_profil_1" class="col-md-6">
|
|
<div class="card h-100 shadow-sm border-0 bg-white">
|
|
<div class="card-header bg-light border-bottom-0 py-3 d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0 fw-bold text-secondary">
|
|
<i class="fas fa-eye-slash me-2"></i><?= _("Sous-menus non accessibles") ?>
|
|
</h6>
|
|
<span class="badge bg-secondary rounded-pill"><?= format_N(count($menus_non_accessibles)) ?></span>
|
|
</div>
|
|
|
|
<div class="px-3 pb-2">
|
|
<button type="button" class="btn btn-sm btn-info text-white w-100 fw-bold shadow-xs transition-btn"
|
|
onclick="javascript:ajouter_tous_menu_vue_profil();">
|
|
<?= _("Tout ajouter") ?> <i class="fas fa-chevron-right ms-1"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-responsive" style="max-height: 450px;">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<tbody class="border-top-0">
|
|
<?php foreach ($menus_non_accessibles as $m):
|
|
$codeMenu = $m['codeMenu'];
|
|
$libeleMenu = est_anglophone() ? $m['libelleEng'] : $m['libeleMenu'];
|
|
?>
|
|
<tr>
|
|
<td class="ps-3 text-muted"><?= $libeleMenu ?></td>
|
|
<td class="text-end pe-3" width="60">
|
|
<button class="btn btn-sm btn-outline-info rounded-circle btn-action"
|
|
title="<?= _("Ajouter") ?>"
|
|
onClick="javascript:ajouter_un_menu_vue_profil('<?=$codeMenu?>');">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="div_utilisateur_profil_2" class="col-md-6">
|
|
<div class="card h-100 shadow-sm border-0 bg-white">
|
|
<div class="card-header bg-info bg-opacity-10 border-bottom-0 py-3 d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0 fw-bold text-info">
|
|
<i class="fas fa-eye me-2"></i><?= _("Sous-menus accessibles") ?>
|
|
</h6>
|
|
<span class="badge bg-info rounded-pill"><?= format_N(count($menus_accessibles)) ?></span>
|
|
</div>
|
|
|
|
<div class="px-3 pb-2">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary w-100 fw-bold shadow-xs transition-btn"
|
|
onclick="javascript:retirer_tous_menu_vue_profil();">
|
|
<i class="fas fa-chevron-left me-1"></i> <?= _("Tout retirer") ?>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-responsive" style="max-height: 450px;">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<tbody class="border-top-0">
|
|
<?php foreach ($menus_accessibles as $m):
|
|
$codeMenu = $m['codeMenu'];
|
|
$libeleMenu = est_anglophone() ? $m['libelleEng'] : $m['libeleMenu'];
|
|
?>
|
|
<tr>
|
|
<td class="ps-3" width="60">
|
|
<button class="btn btn-sm btn-outline-secondary rounded-circle btn-action"
|
|
title="<?= _("Retirer") ?>"
|
|
onClick="javascript:retirer_un_menu_vue_profil('<?=$codeMenu?>');">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
</td>
|
|
<td class="text-start fw-bold text-dark"><?= $libeleMenu ?></td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Design des boutons d'action circulaires */
|
|
.btn-action {
|
|
width: 32px;
|
|
height: 32px;
|
|
padding: 0;
|
|
line-height: 32px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.btn-action:hover {
|
|
transform: scale(1.15);
|
|
background-color: var(--bs-info);
|
|
color: white;
|
|
border-color: var(--bs-info);
|
|
}
|
|
|
|
/* Animation au survol des lignes */
|
|
.table-hover tbody tr:hover td {
|
|
background-color: rgba(13, 202, 240, 0.03);
|
|
}
|
|
|
|
/* Utilitaires */
|
|
.shadow-xs { box-shadow: 0 1px 2px rgba(0,0,0,0.075); }
|
|
.transition-btn:active { transform: translateY(1px); }
|
|
|
|
/* Scrollbar discrète */
|
|
.table-responsive::-webkit-scrollbar { width: 5px; }
|
|
.table-responsive::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 10px; }
|
|
</style>
|