Update v1.2.0-beta - Dynamic context menu & permissions
All checks were successful
continuous-integration/drone/push Build is passing
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:
457
public/css/admin.styles.css
Normal file
457
public/css/admin.styles.css
Normal file
@@ -0,0 +1,457 @@
|
||||
/**
|
||||
* Styles unifiés pour le centre d'administration
|
||||
* Design moderne et cohérent avec le profil utilisateur
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
/* Variables CSS identiques au profil */
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body.admin-page {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Backdrop avec blur */
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Container principal */
|
||||
.admin-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header de l'admin */
|
||||
.admin-header {
|
||||
background: hsl(var(--card));
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.admin-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
margin: 0 0 0.5rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.admin-header h1 i {
|
||||
color: hsl(var(--primary));
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.admin-header p {
|
||||
color: hsl(var(--muted-foreground));
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Grille de cartes */
|
||||
.admin-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Carte admin */
|
||||
.admin-card {
|
||||
background: hsl(var(--card));
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--border));
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)));
|
||||
transform: scaleX(0);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.admin-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.admin-card:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.admin-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.admin-card-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.admin-card-title i {
|
||||
font-size: 1.5rem;
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.admin-card-badge {
|
||||
background: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-card-body {
|
||||
color: hsl(var(--muted-foreground));
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.admin-card-footer {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
/* Boutons */
|
||||
.btn-admin {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-admin-primary {
|
||||
background: hsl(var(--primary));
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
.btn-admin-primary:hover {
|
||||
background: hsl(var(--primary) / 0.9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn-admin-secondary {
|
||||
background: hsl(var(--secondary));
|
||||
color: hsl(var(--secondary-foreground));
|
||||
}
|
||||
|
||||
.btn-admin-secondary:hover {
|
||||
background: hsl(var(--accent));
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-admin-danger {
|
||||
background: hsl(var(--destructive));
|
||||
color: hsl(var(--destructive-foreground));
|
||||
}
|
||||
|
||||
.btn-admin-danger:hover {
|
||||
background: hsl(var(--destructive) / 0.9);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
|
||||
/* Tableaux */
|
||||
.admin-table-container {
|
||||
background: hsl(var(--card));
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--border));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.admin-table thead tr {
|
||||
background: hsl(var(--muted) / 0.5);
|
||||
border-bottom: 2px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.admin-table th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
font-size: 0.875rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.admin-table td {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
.admin-table tbody tr {
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-table tbody tr:hover {
|
||||
background: hsl(var(--muted) / 0.3);
|
||||
}
|
||||
|
||||
/* Formulaires */
|
||||
.admin-form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.admin-form-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--foreground));
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.admin-form-input,
|
||||
.admin-form-select,
|
||||
.admin-form-textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 8px;
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-form-input:focus,
|
||||
.admin-form-select:focus,
|
||||
.admin-form-textarea:focus {
|
||||
outline: none;
|
||||
border-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
|
||||
}
|
||||
|
||||
/* Stats cards */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: hsl(var(--card));
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid hsl(var(--border));
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stat-card-icon.primary {
|
||||
background: hsl(var(--primary) / 0.1);
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
.stat-card-icon.success {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.stat-card-icon.warning {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.stat-card-icon.danger {
|
||||
background: hsl(var(--destructive) / 0.1);
|
||||
color: hsl(var(--destructive));
|
||||
}
|
||||
|
||||
.stat-card-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: hsl(var(--foreground));
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.stat-card-label {
|
||||
color: hsl(var(--muted-foreground));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Badges */
|
||||
.badge-admin {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge-admin.success {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.badge-admin.warning {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.badge-admin.danger {
|
||||
background: hsl(var(--destructive) / 0.1);
|
||||
color: hsl(var(--destructive));
|
||||
}
|
||||
|
||||
.badge-admin.info {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.admin-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.admin-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.admin-grid,
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.admin-card-footer {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode specific */
|
||||
.dark .admin-card,
|
||||
.dark .admin-table-container {
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dark .admin-table thead tr {
|
||||
background: hsl(var(--muted) / 0.3);
|
||||
}
|
||||
|
||||
.dark .stat-card {
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
12
public/css/dropdown-fixes.css
Normal file
12
public/css/dropdown-fixes.css
Normal file
@@ -0,0 +1,12 @@
|
||||
/* Dropdown fixes for dashboard and folder views */
|
||||
|
||||
/* Fix pour les dropdowns qui ne s'affichent pas correctement */
|
||||
.dropdown-menu {
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
/* Fix pour les menus contextuels */
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
}
|
||||
@@ -61,52 +61,141 @@ function initializeContextMenu() {
|
||||
|
||||
adjustMenuOptions(selectedItem);
|
||||
showContextMenu(e.pageX, e.pageY);
|
||||
});
|
||||
|
||||
// Fermer le menu au clic extérieur
|
||||
}); // Fermer le menu au clic extérieur
|
||||
document.addEventListener('click', function(e) {
|
||||
const contextMenu = document.getElementById('contextMenu');
|
||||
if (!contextMenu?.contains(e.target)) {
|
||||
hideContextMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Actions du menu
|
||||
document.querySelectorAll('.context-menu .menu-item').forEach(item => {
|
||||
item.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const action = this.dataset.action;
|
||||
if (selectedItem) {
|
||||
handleMenuAction(action, selectedItem);
|
||||
}
|
||||
hideContextMenu();
|
||||
});
|
||||
});
|
||||
|
||||
function adjustMenuOptions(item) {
|
||||
const menuItems = contextMenu.querySelectorAll('.menu-item');
|
||||
});// Actions du menu contextuel
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('#contextMenu')) return;
|
||||
|
||||
menuItems.forEach(menuItem => {
|
||||
const action = menuItem.dataset.action;
|
||||
|
||||
switch(action) {
|
||||
case 'open':
|
||||
menuItem.style.display = item.type.includes('folder') ? 'flex' : 'none';
|
||||
break;
|
||||
case 'collaborate':
|
||||
menuItem.style.display = item.type === 'folder' ? 'flex' : 'none';
|
||||
const collabBtn = item.element.querySelector('.toggle-collaboration-btn');
|
||||
const isCollaborative = collabBtn?.dataset.isCollaborative === 'true';
|
||||
menuItem.querySelector('span').textContent =
|
||||
isCollaborative ? 'Gérer la collaboration' : 'Activer la collaboration';
|
||||
break;
|
||||
case 'copy-link':
|
||||
menuItem.style.display = item.type === 'file' ? 'flex' : 'none';
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
e.preventDefault();
|
||||
const target = e.target.closest('button, a');
|
||||
if (!target || !selectedItem) return;
|
||||
|
||||
function showContextMenu(x, y) {
|
||||
let action = '';
|
||||
if (target.classList.contains('context-item-open')) action = 'open';
|
||||
else if (target.classList.contains('context-item-rename')) action = 'rename';
|
||||
else if (target.classList.contains('context-item-collaborate')) action = 'collaborate';
|
||||
else if (target.classList.contains('context-item-share')) action = 'copy-link';
|
||||
else if (target.classList.contains('context-item-move')) action = 'move';
|
||||
else if (target.classList.contains('context-item-leave')) action = 'leave';
|
||||
else if (target.classList.contains('context-item-delete')) action = 'delete';
|
||||
|
||||
if (action) {
|
||||
handleMenuAction(action, selectedItem);
|
||||
hideContextMenu();
|
||||
}
|
||||
}); function adjustMenuOptions(item) {
|
||||
const contextMenu = document.getElementById('contextMenu');
|
||||
if (!contextMenu) return;
|
||||
|
||||
const isFile = item.type === 'file';
|
||||
const isFolder = item.type === 'folder';
|
||||
const isSharedFolder = item.type === 'shared-folder';
|
||||
|
||||
// DEBUG
|
||||
console.log('🔍 Context Menu Debug:', {
|
||||
itemType: item.type,
|
||||
itemName: item.name,
|
||||
isFile,
|
||||
isFolder,
|
||||
isSharedFolder
|
||||
});
|
||||
|
||||
// Vérifier si l'utilisateur est propriétaire (pour dossiers partagés)
|
||||
let isOwner = false;
|
||||
if (isSharedFolder) {
|
||||
const ownerCell = item.element.querySelector('td:nth-child(3) .text-muted');
|
||||
isOwner = ownerCell && ownerCell.textContent.trim() === 'moi';
|
||||
console.log('🔍 Shared Folder - isOwner:', isOwner);
|
||||
}
|
||||
|
||||
// Récupérer tous les éléments du menu
|
||||
const openBtn = contextMenu.querySelector('.context-item-open');
|
||||
const renameBtn = contextMenu.querySelector('.context-item-rename');
|
||||
const collaborateBtn = contextMenu.querySelector('.context-item-collaborate');
|
||||
const shareBtn = contextMenu.querySelector('.context-item-share');
|
||||
const moveBtn = contextMenu.querySelector('.context-item-move');
|
||||
const leaveBtn = contextMenu.querySelector('.context-item-leave');
|
||||
const separator = contextMenu.querySelector('.menu-separator');
|
||||
const deleteBtn = contextMenu.querySelector('.context-item-delete');
|
||||
|
||||
// MASQUER TOUT PAR DÉFAUT
|
||||
if (openBtn) openBtn.style.display = 'none';
|
||||
if (renameBtn) renameBtn.style.display = 'none';
|
||||
if (collaborateBtn) collaborateBtn.style.display = 'none';
|
||||
if (shareBtn) shareBtn.style.display = 'none';
|
||||
if (moveBtn) moveBtn.style.display = 'none';
|
||||
if (leaveBtn) leaveBtn.style.display = 'none';
|
||||
if (separator) separator.style.display = 'none';
|
||||
if (deleteBtn) deleteBtn.style.display = 'none';
|
||||
|
||||
// AFFICHER SELON LE TYPE
|
||||
if (isFile) {
|
||||
// FICHIERS : Renommer, Copier le lien, Déplacer, Supprimer
|
||||
console.log('✅ Affichage menu FICHIER');
|
||||
if (renameBtn) renameBtn.style.display = 'flex';
|
||||
if (shareBtn) shareBtn.style.display = 'flex';
|
||||
if (moveBtn) moveBtn.style.display = 'flex';
|
||||
if (separator) separator.style.display = 'block';
|
||||
if (deleteBtn) deleteBtn.style.display = 'flex';
|
||||
} else if (isFolder) {
|
||||
// DOSSIERS PERSONNELS : Ouvrir, Renommer, Collaborer, Supprimer
|
||||
console.log('✅ Affichage menu DOSSIER');
|
||||
if (openBtn) openBtn.style.display = 'flex';
|
||||
if (renameBtn) renameBtn.style.display = 'flex';
|
||||
if (collaborateBtn) {
|
||||
collaborateBtn.style.display = 'flex';
|
||||
// Vérifier si déjà collaboratif
|
||||
const collabBadge = item.element.querySelector('.collaboration-badge');
|
||||
const isCollaborative = collabBadge !== null;
|
||||
const span = collaborateBtn.querySelector('span');
|
||||
if (span) {
|
||||
span.textContent = isCollaborative ? 'Gérer la collaboration' : 'Activer la collaboration';
|
||||
}
|
||||
}
|
||||
if (separator) separator.style.display = 'block';
|
||||
if (deleteBtn) deleteBtn.style.display = 'flex';
|
||||
} else if (isSharedFolder) {
|
||||
// DOSSIERS PARTAGÉS
|
||||
console.log('✅ Affichage menu DOSSIER PARTAGÉ (owner:', isOwner, ')');
|
||||
if (openBtn) openBtn.style.display = 'flex';
|
||||
|
||||
if (isOwner) {
|
||||
// PROPRIÉTAIRE : Renommer, Collaborer, Supprimer
|
||||
if (renameBtn) renameBtn.style.display = 'flex';
|
||||
if (collaborateBtn) {
|
||||
collaborateBtn.style.display = 'flex';
|
||||
const collabBadge = item.element.querySelector('.collaboration-badge');
|
||||
const isCollaborative = collabBadge !== null;
|
||||
const span = collaborateBtn.querySelector('span');
|
||||
if (span) {
|
||||
span.textContent = isCollaborative ? 'Gérer la collaboration' : 'Activer la collaboration';
|
||||
}
|
||||
}
|
||||
if (separator) separator.style.display = 'block';
|
||||
if (deleteBtn) deleteBtn.style.display = 'flex';
|
||||
} else {
|
||||
// INVITÉ : Quitter seulement
|
||||
if (leaveBtn) leaveBtn.style.display = 'flex';
|
||||
}
|
||||
}
|
||||
|
||||
// DEBUG FINAL : afficher l'état de tous les boutons
|
||||
console.log('📋 État final des boutons:', {
|
||||
open: openBtn?.style.display,
|
||||
rename: renameBtn?.style.display,
|
||||
collaborate: collaborateBtn?.style.display,
|
||||
share: shareBtn?.style.display,
|
||||
move: moveBtn?.style.display,
|
||||
leave: leaveBtn?.style.display,
|
||||
delete: deleteBtn?.style.display
|
||||
});
|
||||
} function showContextMenu(x, y) {
|
||||
const contextMenu = document.getElementById('contextMenu');
|
||||
if (!contextMenu) return;
|
||||
|
||||
contextMenu.style.display = 'block';
|
||||
@@ -128,6 +217,7 @@ function initializeContextMenu() {
|
||||
}
|
||||
|
||||
function hideContextMenu() {
|
||||
const contextMenu = document.getElementById('contextMenu');
|
||||
if (contextMenu) {
|
||||
contextMenu.style.display = 'none';
|
||||
}
|
||||
@@ -153,12 +243,15 @@ function initializeContextMenu() {
|
||||
break;
|
||||
|
||||
case 'collaborate':
|
||||
const collabBtn = item.element.querySelector('.toggle-collaboration-btn');
|
||||
const isCollaborative = collabBtn?.dataset.isCollaborative === 'true';
|
||||
|
||||
// Détecter si le dossier est déjà collaboratif en cherchant le badge
|
||||
const collabBadge = item.element.querySelector('.collaboration-badge');
|
||||
const isCollaborative = collabBadge !== null;
|
||||
|
||||
if (isCollaborative) {
|
||||
// Si déjà collaboratif, afficher les détails
|
||||
showCollaborationDetails(item.name, item.type);
|
||||
} else {
|
||||
// Sinon, activer la collaboration
|
||||
toggleCollaboration(item.name, item.type, true);
|
||||
}
|
||||
break;
|
||||
@@ -178,6 +271,12 @@ function initializeContextMenu() {
|
||||
}
|
||||
break;
|
||||
|
||||
case 'leave':
|
||||
if (item.type === 'shared-folder') {
|
||||
leaveSharedFolder(item.name, item.element);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'delete':
|
||||
if (item.type === 'folder') {
|
||||
confirmDeleteFolder(item.name);
|
||||
@@ -196,18 +295,61 @@ function initializeDropdowns() {
|
||||
toggle.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
|
||||
// Fermer les autres dropdowns
|
||||
document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
|
||||
if (menu !== this.nextElementSibling) {
|
||||
menu.classList.remove('show');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Toggle le dropdown actuel
|
||||
const dropdown = this.nextElementSibling;
|
||||
if (dropdown && dropdown.classList.contains('dropdown-menu')) {
|
||||
// Correction du positionnement pour éviter le débordement en bas
|
||||
dropdown.classList.toggle('show');
|
||||
if (dropdown.classList.contains('show')) {
|
||||
// Reset
|
||||
dropdown.style.top = '';
|
||||
dropdown.style.bottom = '';
|
||||
dropdown.style.transform = '';
|
||||
const rect = dropdown.getBoundingClientRect();
|
||||
const windowHeight = window.innerHeight;
|
||||
if (rect.bottom > windowHeight) {
|
||||
// Afficher au-dessus si déborde
|
||||
dropdown.style.top = 'auto';
|
||||
dropdown.style.bottom = '100%';
|
||||
dropdown.style.transform = 'translateY(-8px)';
|
||||
} else {
|
||||
dropdown.style.top = '';
|
||||
dropdown.style.bottom = '';
|
||||
dropdown.style.transform = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gestion dynamique des options selon le type/propriétaire
|
||||
const tr = this.closest('tr[data-type]');
|
||||
if (tr && dropdown) {
|
||||
const type = tr.getAttribute('data-type');
|
||||
const owner = tr.querySelector('td:nth-child(3) .text-muted')?.textContent?.trim();
|
||||
// Pour les dossiers partagés, vérifier si on est propriétaire
|
||||
const isOwner = owner === 'moi';
|
||||
dropdown.querySelectorAll('.dropdown-item').forEach(item => {
|
||||
const action = item.textContent.trim();
|
||||
// Déplacer : seulement pour les fichiers
|
||||
if (action.includes('Déplacer')) {
|
||||
item.style.display = (type === 'file') ? '' : 'none';
|
||||
}
|
||||
// Renommer/Supprimer : pas pour dossier partagé non propriétaire
|
||||
if ((action.includes('Renommer') || action.includes('Supprimer')) && type === 'shared-folder' && !isOwner) {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
// Quitter : seulement pour dossier partagé non propriétaire
|
||||
if (action.includes('Quitter ce dossier')) {
|
||||
item.style.display = (type === 'shared-folder' && !isOwner) ? '' : 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -227,6 +369,41 @@ function initializeDropdowns() {
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
// Action pour quitter un dossier partagé
|
||||
document.querySelectorAll('.leave-shared-folder-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const folderName = this.getAttribute('data-folder-name');
|
||||
const folderOwner = this.getAttribute('data-folder-owner');
|
||||
Swal.fire({
|
||||
title: 'Quitter ce dossier partagé ?',
|
||||
text: 'Vous ne verrez plus ce dossier dans votre dashboard.',
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Quitter',
|
||||
cancelButtonText: 'Annuler'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
fetch(`/api/dpanel/sharedfolders/leave`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ folderName, folderOwner })
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showToast('success', 'Dossier quitté');
|
||||
setTimeout(() => location.reload(), 800);
|
||||
} else {
|
||||
showToast('error', data.error || 'Erreur');
|
||||
}
|
||||
})
|
||||
.catch(() => showToast('error', 'Erreur réseau'));
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// =================== VUE GRILLE ===================
|
||||
@@ -945,9 +1122,9 @@ function createNewFolder(folderName) {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ folderName })
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success || response.ok) {
|
||||
.then(async response => {
|
||||
const result = await response.json();
|
||||
if (response.ok && (result.success || result.message === 'Folder created successfully.')) {
|
||||
showToast('success', 'Dossier créé avec succès');
|
||||
setTimeout(() => location.reload(), 1500);
|
||||
} else {
|
||||
@@ -956,7 +1133,7 @@ function createNewFolder(folderName) {
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showToast('error', 'Erreur lors de la création du dossier');
|
||||
showToast('error', error.message || 'Erreur lors de la création du dossier');
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1328,3 +1505,49 @@ window.displayMetadata = displayMetadata;
|
||||
window.addCollaborator = addCollaborator;
|
||||
window.removeCollaborator = removeCollaborator;
|
||||
window.toggleCollaboration = toggleCollaboration;
|
||||
|
||||
// =================== FONCTIONS COLLABORATIVES ===================
|
||||
function leaveSharedFolder(folderName, element) {
|
||||
Swal.fire({
|
||||
title: 'Quitter le dossier partagé',
|
||||
text: `Êtes-vous sûr de vouloir quitter le dossier "${folderName}" ? Vous perdrez l'accès à ce dossier et ses fichiers.`,
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#f59e0b',
|
||||
cancelButtonColor: '#6b7280',
|
||||
confirmButtonText: 'Oui, quitter',
|
||||
cancelButtonText: 'Annuler'
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Extraire le propriétaire depuis l'URL du dossier partagé
|
||||
const url = element.dataset.url;
|
||||
const urlParts = url.split('/');
|
||||
const owner = urlParts[urlParts.indexOf('shared') + 1];
|
||||
|
||||
fetch('/api/dpanel/sharedfolders/leave', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
folderName: folderName,
|
||||
folderOwner: owner
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showToast('success', 'Vous avez quitté le dossier partagé');
|
||||
// Supprimer la ligne du tableau
|
||||
element.remove();
|
||||
} else {
|
||||
showToast('error', data.error || 'Erreur lors de la sortie du dossier');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showToast('error', 'Erreur de connexion');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -14,22 +14,7 @@ function calculateFolderSize(contents) {
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const copyButtons = document.querySelectorAll('.copy-button');
|
||||
|
||||
copyButtons.forEach(copyButton => {
|
||||
copyButton.addEventListener("click", () => {
|
||||
const fileContainer = copyButton.closest('tr');
|
||||
const fileLink = fileContainer.querySelector('.file-link');
|
||||
fileLink.style.display = "block";
|
||||
fileLink.select();
|
||||
document.execCommand("copy");
|
||||
fileLink.style.display = "none";
|
||||
copyButton.textContent = "Lien copié !";
|
||||
setTimeout(() => {
|
||||
copyButton.textContent = "Copier le lien";
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
// La fonctionnalité de copie de lien est maintenant gérée dans folder.ejs
|
||||
|
||||
const filterForm = document.getElementById('filterForm');
|
||||
const extensionFilter = document.getElementById('extensionFilter');
|
||||
@@ -43,7 +28,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
function toggleDarkMode() {
|
||||
isDarkMode = !isDarkMode;
|
||||
document.body.classList.toggle('dark-mode', isDarkMode);
|
||||
|
||||
|
||||
if (!icon) return; // Vérifier que l'élément existe avant de l'utiliser
|
||||
|
||||
if (isDarkMode) {
|
||||
icon.classList.remove('bi-brightness-high-fill');
|
||||
icon.classList.add('bi-moon-fill');
|
||||
@@ -57,7 +44,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
function applyStyleMode() {
|
||||
document.body.classList.toggle('dark-mode', isDarkMode);
|
||||
|
||||
|
||||
if (!icon) return; // Vérifier que l'élément existe avant de l'utiliser
|
||||
|
||||
if (isDarkMode) {
|
||||
icon.classList.remove('bi-brightness-high-fill');
|
||||
icon.classList.add('bi-moon-fill');
|
||||
@@ -72,15 +61,18 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
darkModeMediaQuery.addListener(applyStyleMode);
|
||||
applyStyleMode();
|
||||
|
||||
styleSwitcherButton.addEventListener('click', toggleDarkMode);
|
||||
if (styleSwitcherButton) {
|
||||
styleSwitcherButton.addEventListener('click', toggleDarkMode);
|
||||
}
|
||||
|
||||
filterForm.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
if (filterForm) {
|
||||
filterForm.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const selectedExtension = extensionFilter.value.toLowerCase();
|
||||
const searchQuery = fileSearchInput.value.toLowerCase();
|
||||
const selectedExtension = extensionFilter ? extensionFilter.value.toLowerCase() : '';
|
||||
const searchQuery = fileSearchInput ? fileSearchInput.value.toLowerCase() : '';
|
||||
|
||||
const fileList = document.querySelectorAll('tr[data-extension]');
|
||||
const fileList = document.querySelectorAll('tr[data-extension]');
|
||||
|
||||
fileList.forEach(file => {
|
||||
const fileExtension = file.getAttribute('data-extension').toLowerCase();
|
||||
@@ -95,7 +87,8 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
file.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
async function confirmDeleteFile(folderName, filename) {
|
||||
|
||||
@@ -540,6 +540,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
initForm();
|
||||
});
|
||||
|
||||
// Initialisation du formulaire
|
||||
function initForm() {
|
||||
// Le formulaire est déjà initialisé dans le DOMContentLoaded à la ligne 375
|
||||
// Cette fonction est appelée pour des initialisations supplémentaires si nécessaire
|
||||
console.log('Formulaire initialisé');
|
||||
}
|
||||
|
||||
// Gestion du thème
|
||||
function initTheme() {
|
||||
const themeSwitcher = document.getElementById('themeSwitcher');
|
||||
|
||||
Reference in New Issue
Block a user