charles/fuzip
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactoring interface web : optimisation layout colonnes et zone upload

Browse Source 
- Fusion upload + tree en colonnes unifiées avec header unique
  - Déplacement bannière conflits en haut pour séparer les colonnes
  - Infos fichier condensées sur 1 ligne avec bouton icône à droite
  - Drop zone remplacée par tree après upload (gain d'espace ~60%)
  - Support drag & drop sur toute la colonne même avec fichier chargé
  - Styles optimisés : champ recherche intégré, bouton circulaire compact
This commit is contained in:
Charles
2026-01-12 05:29:20 +01:00
parent bd6d321ed7
commit afac7042a8
6 changed files with 350 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/css/file-tree.css
View File

@@ -6,22 +6,18 @@
/* ===== Tree Panel ===== */
.tree-panel {
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 400px;
min-height: 0;
}
.tree-header {
padding: var(--spacing-md) var(--spacing-lg);
border-bottom: 1px solid var(--color-border);
background-color: var(--color-bg-secondary);
display: flex;
gap: var(--spacing-md);
align-items: center;
flex-shrink: 0;
}
.search-input-wrapper {
@@ -35,18 +31,18 @@
flex: 1;
width: 100%;
padding: var(--spacing-sm) 2.5rem var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
border: none;
border-bottom: 1px solid var(--color-border);
border-radius: 0;
font-size: var(--font-size-sm);
background-color: var(--color-bg);
background-color: transparent;
color: var(--color-text);
transition: all var(--transition-fast);
}
.search-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-light);
border-bottom-color: var(--color-primary);
}
.search-input::placeholder {

17
assets/css/main.css
View File

@@ -200,14 +200,6 @@ body {
gap: var(--spacing-lg);
}
/* ===== Upload Section ===== */
.upload-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
flex-shrink: 0;
}
/* ===== Conflicts Banner ===== */
.conflicts-banner {
display: flex;
@@ -231,15 +223,6 @@ body {
font-size: var(--font-size-sm);
}
/* ===== Trees Section ===== */
.trees-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
flex: 1;
min-height: 0; /* Important pour scroll */
}
/* ===== Footer ===== */
.footer {
background-color: var(--color-bg);

262
assets/css/upload-panel.css
View File

@@ -1,33 +1,101 @@
/**
* FuZip - Styles zones d'upload
* Drop zones, boutons browse, progress bars
* FuZip - Styles colonnes et upload
* Colonnes unifiées (upload + tree), drop zones, progress bars
*/
/* ===== Panel d'upload ===== */
.upload-panel {
/* ===== Colonnes Section ===== */
.columns-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
flex: 1;
min-height: 0;
}
/* ===== Colonne ===== */
.column {
display: flex;
flex-direction: column;
background-color: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
box-shadow: var(--shadow-sm);
min-height: 0;
overflow: hidden;
transition: all var(--transition-base);
}
.panel-title {
.column.drag-over {
border-color: var(--color-primary);
background-color: var(--color-primary-light);
box-shadow: 0 0 0 3px var(--color-primary-light);
}
/* ===== Header de colonne ===== */
.column-header {
padding: var(--spacing-md) var(--spacing-lg);
border-bottom: 1px solid var(--color-border);
background-color: var(--color-bg-secondary);
display: flex;
align-items: center;
gap: var(--spacing-md);
flex-wrap: wrap;
flex-shrink: 0;
}
.column-title {
font-size: var(--font-size-lg);
font-weight: 600;
color: var(--color-text);
margin: 0;
flex-shrink: 0;
}
/* Info de colonne (fichier chargé) */
.column-info {
display: flex;
align-items: center;
gap: var(--spacing-md);
flex: 1;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.info-file-name {
font-weight: 600;
color: var(--color-text);
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info-separator {
color: var(--color-text-muted);
}
.info-stat {
font-weight: 500;
color: var(--color-text);
}
/* ===== Body de colonne ===== */
.column-body {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
min-height: 0;
overflow: hidden;
}
/* ===== Drop Zone ===== */
.drop-zone {
flex: 1;
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
padding: var(--spacing-2xl) var(--spacing-lg);
margin: var(--spacing-lg);
text-align: center;
background-color: var(--color-bg-secondary);
transition: all var(--transition-base);
@@ -35,7 +103,9 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
min-height: 250px;
}
.drop-zone:hover {
@@ -95,54 +165,19 @@
display: none;
}
/* ===== Upload Info ===== */
.upload-info {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
padding: var(--spacing-md);
background-color: var(--color-bg-secondary);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
}
.file-name {
font-weight: 600;
color: var(--color-text);
font-size: var(--font-size-base);
word-break: break-all;
}
.file-stats {
display: flex;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.stat-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.stat-icon {
width: 1rem;
height: 1rem;
color: var(--color-text-muted);
}
.stat-value {
font-weight: 600;
color: var(--color-text);
}
/* ===== Progress Bar ===== */
.upload-progress {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background-color: var(--color-bg-secondary);
border-radius: var(--radius-md);
margin: 0 var(--spacing-lg) var(--spacing-lg);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.progress-bar {
@@ -192,64 +227,85 @@
text-align: right;
}
/* ===== Bouton changer ===== */
.btn-change-file {
padding: var(--spacing-xs);
background-color: transparent;
color: var(--color-text-secondary);
border: none;
border-radius: 50%;
cursor: pointer;
transition: all var(--transition-fast);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2rem;
height: 2rem;
margin-left: auto;
}
.btn-change-file:hover {
background-color: var(--color-bg-secondary);
color: var(--color-primary);
}
.btn-change-file svg {
width: 1.125rem;
height: 1.125rem;
}
/* ===== État compact (fichier chargé) ===== */
.column-header.compact .column-title {
display: none;
}
.column-header.compact .column-info {
display: flex;
}
/* Quand pas compact, cache les infos */
.column-header:not(.compact) .column-info {
display: none;
}
/* Cache la drop zone quand compact */
.column-header.compact ~ .column-body .drop-zone {
display: none;
}
/* Affiche le tree-panel quand compact */
.column-header.compact ~ .column-body .tree-panel {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
/* ===== États spéciaux ===== */
.upload-panel.uploading {
.column-header.uploading {
pointer-events: none;
opacity: 0.7;
}
.upload-panel.success {
border-color: var(--color-success);
background-color: rgba(16, 185, 129, 0.05);
}
.upload-panel.error {
.column-header.error {
border-color: var(--color-error);
background-color: rgba(239, 68, 68, 0.05);
}
/* Message d'erreur */
.error-message {
padding: var(--spacing-sm) var(--spacing-md);
background-color: #fee2e2;
border: 1px solid var(--color-error);
border-radius: var(--radius-md);
color: #991b1b;
font-size: var(--font-size-sm);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.error-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
/* Message de succès */
.success-message {
padding: var(--spacing-sm) var(--spacing-md);
background-color: #d1fae5;
border: 1px solid var(--color-success);
border-radius: var(--radius-md);
color: #065f46;
font-size: var(--font-size-sm);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.success-icon {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
.column.error {
background-color: rgba(239, 68, 68, 0.02);
}
/* ===== Responsive ===== */
@media (max-width: 768px) {
.columns-section {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.drop-zone {
padding: var(--spacing-xl) var(--spacing-md);
min-height: 200px;
}
.drop-icon {
@@ -261,8 +317,18 @@
font-size: var(--font-size-base);
}
.file-stats {
.column-header {
flex-direction: column;
gap: var(--spacing-sm);
align-items: flex-start;
}
.column-info {
width: 100%;
flex-wrap: wrap;
}
.info-file-name {
max-width: 100%;
}
}