Update v1.2.0-beta - Dynamic context menu & permissions
All checks were successful
continuous-integration/drone/push Build is passing

 New Features:
- Dynamic permission-based context menus for files and folders
- Support for collaborative folder access control
- Upload to specific folders including shared folders
- Changelog modal for version updates
- Improved dark mode synchronization

🐛 Bug Fixes:
- Fixed context menu displaying incorrect options
- Fixed CSS !important override preventing dynamic menu behavior
- Fixed folder collaboration permission checks
- Fixed breadcrumb navigation with empty segments
- Fixed "Premature close" error loop in attachments
- Fixed missing user variable in admin routes
- Fixed avatar loading COEP policy issues

🔒 Security:
- Added security middleware (CSRF, rate limiting, input validation)
- Fixed collaboration folder access validation
- Improved shared folder permission handling

🎨 UI/UX Improvements:
- Removed Actions column from folder view
- Context menu now properly hides/shows based on permissions
- Better visual feedback for collaborative folders
- Improved upload flow with inline modals

🧹 Code Quality:
- Added collaboration data to folder routes
- Refactored context menu logic for better maintainability
- Added debug logging for troubleshooting
- Improved file upload handling with chunking support
This commit is contained in:
2025-10-25 23:55:51 +02:00
parent 58b57fbb84
commit 2df1b28962
33 changed files with 6275 additions and 1462 deletions

View File

@@ -151,38 +151,60 @@
border-bottom: 1px solid hsl(var(--border));
}
.dropdown-menu {
display: none;
.dropdown-menu, .dropdown-menu.show {
background-color: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-radius: 16px !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
min-width: 180px;
padding: 0.5rem 0;
overflow: hidden;
z-index: 1000;
min-width: 150px;
}
.dropdown-menu.show {
display: block;
animation: menuFadeIn 0.12s ease-out;
}
.dropdown-item {
color: hsl(var(--foreground));
border-radius: 12px;
margin: 0 0.5rem;
padding: 0.5rem 1rem;
text-decoration: none;
display: block;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.75rem;
color: hsl(var(--foreground));
background: none;
transition: background 0.12s, color 0.12s;
}
.dropdown-item:hover {
background-color: hsl(var(--muted));
color: hsl(var(--foreground));
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
}
.dropdown-item.text-danger {
color: hsl(var(--destructive));
}
.dropdown-item.text-danger:hover {
background-color: hsl(var(--destructive));
color: hsl(var(--destructive-foreground));
}
.dropdown-item.text-warning {
color: #f59e0b;
}
.dropdown-item.text-warning:hover {
background-color: #f59e0b22;
color: #fff;
}
.dropdown-divider {
border-top: 1px solid hsl(var(--border));
margin: 0.25rem 0;
}
/* Correction du positionnement dynamique (haut/bas) */
.dropdown-menu[style*="bottom: 100%"] {
border-radius: 16px 16px 16px 16px !important;
box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
}
.footer {
@@ -192,70 +214,128 @@
padding: 1rem 0;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
z-index: 1000;
.modal,
.modal.fade {
display: none !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(8px) !important;
justify-content: center !important;
align-items: center !important;
z-index: 1050 !important;
animation: fadeIn 0.2s ease !important;
}
.modal.show {
display: flex;
.modal.show,
.modal.fade.show {
display: flex !important;
}
.modal-dialog {
position: relative !important;
margin: 0 auto !important;
max-width: 90% !important;
width: 600px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.modal-dialog-centered {
display: flex !important;
align-items: center !important;
min-height: calc(100% - 1rem) !important;
}
.modal-content {
background-color: hsl(var(--card));
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
padding: 20px;
max-width: 90%;
width: 600px;
}
.modal-header, .modal-body, .modal-footer {
padding: 20px;
background-color: hsl(var(--card)) !important;
border-radius: 16px !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
border: 1px solid hsl(var(--border)) !important;
animation: modalSlideIn 0.3s ease !important;
}
.modal-header {
border-bottom: none;
padding: 1.5rem 2rem !important;
border-bottom: 1px solid hsl(var(--border)) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.modal-body {
padding: 2rem !important;
max-height: 70vh !important;
overflow-y: auto !important;
}
.modal-footer {
border-top: none;
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem 2rem !important;
border-top: 1px solid hsl(var(--border)) !important;
display: flex !important;
justify-content: flex-end !important;
gap: 0.75rem !important;
}
.modal .modal-title {
font-size: 1.25rem !important;
font-weight: 600 !important;
color: hsl(var(--foreground)) !important;
margin: 0 !important;
}
.modal .close {
font-size: 28px;
opacity: 0.6;
transition: opacity 0.3s ease;
font-size: 1.5rem !important;
opacity: 0.6 !important;
transition: all 0.2s ease !important;
background: none !important;
border: none !important;
color: hsl(var(--foreground)) !important;
cursor: pointer !important;
padding: 0.5rem !important;
border-radius: 0.5rem !important;
}
.modal .close:hover {
opacity: 1;
opacity: 1 !important;
background: hsl(var(--accent)) !important;
}
.navbar {
padding: 0.5rem 1rem;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Alignement des boutons à droite */
.navbar {
padding: 0.5rem 1rem !important;
min-height: 70px !important;
max-height: 70px !important;
position: relative !important;
}
.container-fluid {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
height: 100% !important;
}
/* Alignement des boutons à droite */
@@ -263,18 +343,21 @@ align-items: center !important;
display: flex !important;
align-items: center !important;
margin-left: auto !important;
gap: 0.5rem !important;
position: relative !important;
}
.navbar-nav .nav-item {
margin-left: 10px !important;
position: relative !important;
}
/* Style pour les boutons de la navbar */
.nav-btn {
padding: 0.375rem 0.75rem !important;
font-size: 1rem !important;
padding: 0.5rem 1rem !important;
font-size: 0.95rem !important;
line-height: 1.5 !important;
border-radius: 0.25rem !important;
border-radius: 0.5rem !important;
transition: all 0.2s ease !important;
}
/* Style pour l'avatar de l'utilisateur */
@@ -283,6 +366,13 @@ width: 40px !important;
height: 40px !important;
object-fit: cover !important;
border-radius: 50% !important;
border: 2px solid hsl(var(--border)) !important;
transition: all 0.2s ease !important;
}
.user-avatar:hover {
transform: scale(1.05) !important;
border-color: hsl(var(--primary)) !important;
}
/* Style pour le bouton du dropdown */
@@ -290,17 +380,23 @@ border-radius: 50% !important;
padding: 0 !important;
border: none !important;
background: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Style pour le menu dropdown */
.dropdown-menu {
/* Style pour le menu dropdown - IMPORTANT: position absolue */
.navbar .dropdown {
position: relative !important;
}
.navbar .dropdown-menu {
position: absolute !important;
top: calc(100% + 0.5rem) !important;
right: 0 !important;
left: auto !important;
}
/* Assurez-vous que le dropdown est positionné correctement */
.dropdown {
position: relative !important;
margin: 0 !important;
z-index: 1050 !important;
}
/* Ajustement pour les écrans plus petits */
@@ -694,51 +790,66 @@ position: relative !important;
/* Styles pour le menu contextuel */
.context-menu {
position: fixed;
z-index: 1000;
background-color: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: var(--radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
min-width: 180px;
overflow: hidden; /* Pour que les hovers aillent jusqu'au bout */
z-index: 1000 !important;
background-color: hsl(var(--card)) !important;
border: 1px solid hsl(var(--border)) !important;
border-radius: 12px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
min-width: 200px;
overflow: hidden;
padding: 0.5rem;
}
/* Style pour les items du menu */
.menu-item,
.dropdown-item {
.menu-item,
.dropdown-item,
.context-menu button,
.context-menu a {
display: flex;
align-items: center;
width: 100%;
padding: 0.5rem 1rem;
border: none;
background: none;
color: hsl(var(--foreground));
font-size: 0.875rem;
text-align: left;
cursor: pointer;
transition: background-color 0.1s ease;
text-decoration: none; /* Pour les liens */
white-space: nowrap;
width: 100% !important;
padding: 0.75rem 1rem !important;
border: none !important;
background: none !important;
color: hsl(var(--foreground)) !important;
font-size: 0.9rem !important;
text-align: left !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
text-decoration: none !important;
white-space: nowrap !important;
border-radius: 8px !important;
margin: 0.15rem 0 !important;
}
/* Hover pour mode clair et sombre */
.menu-item:hover,
.dropdown-item:hover {
background-color: hsl(var(--accent));
.dropdown-item:hover,
.context-menu button:hover,
.context-menu a:hover {
background-color: hsl(var(--accent)) !important;
color: hsl(var(--accent-foreground)) !important;
transform: translateX(2px);
}
.dark .menu-item:hover,
.dark .dropdown-item:hover {
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
.dark .dropdown-item:hover,
.dark .context-menu button:hover,
.dark .context-menu a:hover {
background-color: hsl(var(--accent)) !important;
color: hsl(var(--accent-foreground)) !important;
transform: translateX(2px);
}
/* Alignement des icônes */
.menu-item i,
.dropdown-item i {
width: 20px;
margin-right: 0.75rem;
text-align: center;
.dropdown-item i,
.context-menu button i,
.context-menu a i {
width: 20px !important;
margin-right: 0.75rem !important;
text-align: center !important;
font-size: 0.95rem !important;
}
/* Style pour les items destructifs (suppression) */
@@ -756,9 +867,10 @@ position: relative !important;
/* Style pour le séparateur */
.menu-separator,
.dropdown-divider {
height: 1px;
background-color: hsl(var(--border));
margin: 0;
height: 1px !important;
background-color: hsl(var(--border)) !important;
margin: 0.5rem 0 !important;
border: none !important;
}
/* Menu déroulant */
@@ -816,126 +928,146 @@ tr[data-type="folder"]:active, tr[data-type="shared-folder"]:active {
background-color: hsl(var(--accent));
}
/* === VUE GRILLE REDESIGNÉE === */
/* === VUE GRILLE ULTRAMODERNE === */
.grid-view {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 1.25rem;
padding: 1.5rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
animation: gridFadeIn 0.3s ease-out;
justify-content: start;
align-content: start;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
gap: 1.25rem !important;
padding: 1.5rem !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
animation: gridFadeIn 0.4s ease-out !important;
}
.grid-view > tr {
display: block;
position: relative;
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: 12px;
padding: 0;
text-align: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: auto;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
max-width: 250px;
min-width: 180px;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
position: relative !important;
background: hsl(var(--card)) !important;
border: 1px solid hsl(var(--border)) !important;
border-radius: 16px !important;
padding: 1.5rem 1rem !important;
text-align: center !important;
cursor: pointer !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
min-height: 160px !important;
overflow: visible !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
.grid-view tr:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
border-color: hsl(var(--primary) / 0.3);
transform: translateY(-6px) scale(1.02) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18) !important;
border-color: hsl(var(--primary) / 0.5) !important;
}
.grid-view td {
display: block;
display: block !important;
padding: 0 !important;
border: none !important;
}
.grid-view td:not(:first-child) {
display: none;
display: none !important;
}
.grid-view .icon-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 1.5rem 1rem 1rem;
position: relative;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 1rem !important;
padding: 0 !important;
position: relative !important;
width: 100% !important;
}
.grid-view .icon {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, hsl(var(--primary) / 0.1), hsl(var(--primary) / 0.05));
border-radius: 12px;
margin-bottom: 0.5rem;
transition: transform 0.2s ease;
width: 72px !important;
height: 72px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(135deg, hsl(var(--primary) / 0.12), hsl(var(--accent) / 0.08)) !important;
border-radius: 16px !important;
margin-bottom: 0 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
.grid-view tr:hover .icon {
transform: scale(1.1);
transform: scale(1.15) rotate(-5deg) !important;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}
.grid-view .icon i {
font-size: 1.75rem;
color: hsl(var(--primary));
font-size: 2.25rem !important;
color: hsl(var(--primary)) !important;
transition: all 0.2s ease !important;
}
.grid-view .icon i.fa-folder {
color: #f59e0b;
.grid-view .icon i.fa-folder,
.grid-view .icon i.fa-folder-open {
color: #f59e0b !important;
}
.grid-view .icon i.fa-file {
color: #3b82f6;
color: #3b82f6 !important;
}
.grid-view .icon i.fa-image {
color: #10b981;
color: #10b981 !important;
}
.grid-view .icon i.fa-film {
color: #ef4444;
color: #ef4444 !important;
}
.grid-view .icon i.fa-file-pdf {
color: #dc2626;
color: #dc2626 !important;
}
.grid-view .icon i.fa-file-archive {
color: #8b5cf6 !important;
}
.grid-view .icon i.fa-file-code {
color: #06b6d4 !important;
}
.grid-view .label {
font-size: 0.9rem;
font-weight: 600;
color: hsl(var(--foreground));
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
max-width: 100%;
line-height: 1.3;
min-height: 2.6rem;
font-size: 0.875rem !important;
font-weight: 600 !important;
color: hsl(var(--foreground)) !important;
margin: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
max-width: 100% !important;
line-height: 1.4 !important;
min-height: 2.4rem !important;
text-align: center !important;
word-break: break-word !important;
padding: 0 0.5rem !important;
}
.grid-view .details {
font-size: 0.75rem;
color: hsl(var(--muted-foreground));
margin-top: 0.25rem;
padding: 0.5rem 0;
border-top: 1px solid hsl(var(--border) / 0.5);
width: 100%;
font-size: 0.7rem !important;
color: hsl(var(--muted-foreground)) !important;
margin: 0 !important;
padding: 0.4rem 0.75rem !important;
background: hsl(var(--muted) / 0.4) !important;
border-radius: 12px !important;
width: auto !important;
text-align: center !important;
font-weight: 500 !important;
border: 1px solid hsl(var(--border) / 0.5) !important;
}
/* Actions pour la vue grille */
@@ -1191,17 +1323,13 @@ tr[data-type="folder"]:active, tr[data-type="shared-folder"]:active {
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
max-width: 600px;
width: 90%;
max-height: 90vh;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
padding: 24px;
max-width: 90%;
width: 600px;
position: relative;
overflow: hidden;
transform: scale(0.9) translateY(20px);
transition: transform 0.3s ease;
}
.collaboration-modal.show .modal-content {
transform: scale(1) translateY(0);
animation: contentShow 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.collaboration-modal .modal-header {