améliorations visuelles de l'arborescence

ajout du dossier racine et de la possibilité d'éditer son nom/sa description
This commit is contained in:
Esenjin 2024-12-30 22:36:47 +01:00
parent a4ccb0a553
commit d10d0fb776
2 changed files with 181 additions and 144 deletions

View File

@ -41,7 +41,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
break; break;
case 'delete_folder': case 'delete_folder':
if ($path && isSecurePath($path)) { if ($path && isSecurePath($path) && $path !== './liste_albums') { // Empêcher la suppression du dossier racine
function rrmdir($dir) { function rrmdir($dir) {
if (is_dir($dir)) { if (is_dir($dir)) {
$objects = scandir($dir); $objects = scandir($dir);
@ -79,6 +79,22 @@ function generateTree($path, $currentPath) {
if (!is_dir($path)) return ''; if (!is_dir($path)) return '';
$output = '<ul class="tree-list">'; $output = '<ul class="tree-list">';
// Si c'est le dossier racine, ajoutons-le à l'arborescence
if ($path === './liste_albums') {
$info = getAlbumInfo($path);
$output .= '<li class="tree-item root-folder' . ($path === $currentPath ? ' active' : '') . '">';
$output .= '<div class="tree-item-content">';
$output .= '<span class="tree-link">';
$output .= '<span class="folder-icon">📁</span> ' . htmlspecialchars($info['title']);
$output .= '</span>';
$output .= '<div class="tree-actions">';
$output .= '<button onclick="editFolder(\'' . htmlspecialchars($path) . '\', \'' . htmlspecialchars($info['title']) . '\', \'' . htmlspecialchars($info['description']) . '\')" class="tree-button">✏️</button>';
$output .= '<button onclick="createSubfolder(\'' . htmlspecialchars($path) . '\')" class="tree-button"></button>';
$output .= '</div></div>';
}
// Parcourir tous les sous-dossiers
foreach (new DirectoryIterator($path) as $item) { foreach (new DirectoryIterator($path) as $item) {
if ($item->isDot()) continue; if ($item->isDot()) continue;
if ($item->isDir()) { if ($item->isDir()) {
@ -89,9 +105,9 @@ function generateTree($path, $currentPath) {
$output .= '<li class="tree-item' . ($isCurrentPath ? ' active' : '') . '">'; $output .= '<li class="tree-item' . ($isCurrentPath ? ' active' : '') . '">';
$output .= '<div class="tree-item-content">'; $output .= '<div class="tree-item-content">';
$output .= '<a href="?path=' . urlencode($fullPath) . '" class="tree-link">'; $output .= '<span class="tree-link">';
$output .= '<span class="folder-icon">📁</span> ' . htmlspecialchars($info['title']); $output .= '<span class="folder-icon">📁</span> ' . htmlspecialchars($info['title']);
$output .= '</a>'; $output .= '</span>';
$output .= '<div class="tree-actions">'; $output .= '<div class="tree-actions">';
if (!$hasSubfolders) { if (!$hasSubfolders) {
$output .= '<a href="arbre-img.php?path=' . urlencode($fullPath) . '" class="tree-button" style="text-decoration: none">🖼️</a>'; $output .= '<a href="arbre-img.php?path=' . urlencode($fullPath) . '" class="tree-button" style="text-decoration: none">🖼️</a>';
@ -102,10 +118,12 @@ function generateTree($path, $currentPath) {
$output .= '<button onclick="deleteFolder(\'' . htmlspecialchars($fullPath) . '\')" class="tree-button tree-button-danger">🗑️</button>'; $output .= '<button onclick="deleteFolder(\'' . htmlspecialchars($fullPath) . '\')" class="tree-button tree-button-danger">🗑️</button>';
} }
$output .= '</div></div>'; $output .= '</div></div>';
$output .= generateTree($fullPath, $currentPath); $output .= generateTree($fullPath, $currentPath);
$output .= '</li>'; $output .= '</li>';
} }
} }
$output .= '</ul>'; $output .= '</ul>';
return $output; return $output;
} }

View File

@ -278,6 +278,7 @@ body {
} }
.tree-item-content { .tree-item-content {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -298,6 +299,24 @@ body {
gap: 0.5rem; gap: 0.5rem;
} }
/* Style spécifique pour le dossier racine */
.root-folder > .tree-item-content {
background: rgba(33, 150, 243, 0.2);
border-left: 4px solid #2196f3;
margin-bottom: 1rem;
padding: 1rem;
}
.root-folder > .tree-item-content .folder-icon {
font-size: 1.4rem;
}
.root-folder > .tree-item-content .tree-link {
font-size: 1.2rem;
font-weight: 500;
color: #ffffff;
}
.folder-icon { .folder-icon {
font-size: 1.2rem; font-size: 1.2rem;
} }