From 0dc3fa6823718888e2ab14eb95bcef88e75ed7ba Mon Sep 17 00:00:00 2001 From: Manuel Aranda Date: Thu, 28 Aug 2025 10:39:05 +0200 Subject: [PATCH] refs #2712. Updated UX clients module in partition assistant --- .../partition-assistant.component.css | 110 ++++++++++++------ .../partition-assistant.component.html | 18 ++- .../partition-assistant.component.ts | 17 +++ 3 files changed, 107 insertions(+), 38 deletions(-) diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css index 23a405a..d1071c1 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css @@ -1,4 +1,3 @@ -/* ===== ESTILOS PRINCIPALES ===== */ .partition-assistant { padding: 32px; margin: 20px; @@ -8,7 +7,6 @@ border: 1px solid #bbdefb; } -/* ===== HEADER ===== */ .header-container { display: flex; justify-content: space-between; @@ -37,7 +35,6 @@ font-weight: 400; } -/* ===== DESTINATION BADGE ===== */ .destination-info { margin-top: 12px; } @@ -88,7 +85,6 @@ color: #0d47a1; } -/* ===== BOTONES ===== */ .button-row { display: flex; gap: 12px; @@ -124,7 +120,6 @@ gap: 30px; } -/* ===== SELECTOR DE DISCO ===== */ .disk-selector-card { padding: 32px; margin: 20px; @@ -240,7 +235,6 @@ font-weight: 500; } -/* Información de selección */ .selection-info { display: flex; align-items: center; @@ -278,7 +272,6 @@ color: #388e3c; } -/* Mensaje cuando no hay discos */ .no-disks-message { display: flex; align-items: center; @@ -314,7 +307,6 @@ color: #f57c00; } -/* ===== INFO BADGES ===== */ .info-badge { display: inline-flex; align-items: center; @@ -359,7 +351,6 @@ color: #1b5e20; } -/* Badge específico para firmware */ .info-badge:first-of-type { background: #e3f2fd; border-color: #bbdefb; @@ -377,7 +368,6 @@ color: #0d47a1; } -/* Badge específico para tabla de particiones */ .info-badge:last-of-type { background: #fff3e0; border-color: #ffcc02; @@ -395,7 +385,6 @@ color: #e65100; } -/* ===== SELECTOR DE CLIENTES ===== */ .select-container { margin-top: 20px; align-items: center; @@ -432,7 +421,6 @@ align-items: center; } -/* Grid de clientes */ .clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); @@ -446,7 +434,6 @@ .client-card { background: #ffffff; border-radius: 6px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; padding: 8px; @@ -483,7 +470,7 @@ .client-name { font-size: 0.9em; - font-weight: 600; + font-weight: 500; color: #333; margin-bottom: 5px; white-space: nowrap; @@ -509,7 +496,6 @@ border-radius: 4px; } -/* ===== LAYOUT PRINCIPAL ===== */ .row { display: flex; flex-wrap: wrap; @@ -526,7 +512,6 @@ border: none; } -/* ===== INFORMACIÓN DEL DISCO ===== */ .disk-space-info-container { margin: 24px 0; background: none; @@ -591,7 +576,6 @@ color: #212529; } -/* Barra de uso del disco */ .disk-usage-bar { margin-top: 16px; } @@ -620,7 +604,6 @@ text-align: center; } -/* ===== TABLA DE PARTICIONES ===== */ .partition-table { width: 100%; border-collapse: collapse; @@ -672,7 +655,6 @@ background-color: #c82333; } -/* ===== GRÁFICA ===== */ .chart-container { flex: 0 0 35%; max-width: 35%; @@ -727,7 +709,6 @@ margin: 5px 0 !important; } -/* ===== LAYOUT PRINCIPAL ===== */ .partition-layout { display: flex; flex-direction: column; @@ -735,7 +716,6 @@ margin-top: 20px; } -/* ===== BARRA DE PROGRESO DE PARTICIONES ===== */ .partition-progress-container { background: white; border-radius: 12px; @@ -869,7 +849,6 @@ opacity: 0.9; } -/* ===== LEYENDA DE PARTICIONES ===== */ .partition-legend { display: flex; flex-wrap: wrap; @@ -938,7 +917,6 @@ border: 1px solid #e9ecef; } -/* ===== TABLA MAT-TABLE ===== */ .table-container { background: white; border-radius: 12px; @@ -984,7 +962,6 @@ background: #f8f9fa; } -/* Campos compactos para la tabla */ .compact-form-field { width: 100%; margin: 0; @@ -1014,7 +991,6 @@ border-width: 1px; } -/* Estilos para inputs y selects compactos */ .compact-form-field input, .compact-form-field .mat-select { line-height: 1.2; @@ -1024,7 +1000,6 @@ color: #333; } -/* Reducir el padding de las celdas de la tabla */ .partition-mat-table .mat-cell { padding: 6px 6px; vertical-align: middle; @@ -1034,30 +1009,25 @@ padding: 10px 6px; } -/* Hacer los inputs más pequeños */ .compact-form-field .mat-form-field-infix { padding: 2px 0; min-height: 20px; } -/* Ajustar el tamaño de los selects */ .compact-form-field .mat-select-trigger { height: 20px; } -/* Ajustar el tamaño de los inputs numéricos */ .compact-form-field input[type="number"] { padding: 2px 6px; } -/* Reducir el espacio del wrapper del form field */ .compact-form-field .mat-form-field-wrapper { padding-bottom: 0; margin: 0; line-height: 1.2; } -/* Ajustar el espacio del outline */ .compact-form-field .mat-form-field-outline { top: 0; bottom: 0; @@ -1069,12 +1039,10 @@ border-width: 1px; } -/* Checkbox en la tabla */ .partition-mat-table .mat-checkbox { margin: 0; } -/* Botón de eliminar */ .partition-mat-table .mat-icon-button { width: 32px; height: 32px; @@ -1371,6 +1339,82 @@ to { transform: rotate(360deg); } } +.section-hint { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 12px; + margin: 8px 0 12px 0; + background: #f7faff; + border: 1px solid #e2e8ff; + border-radius: 8px; + color: #334155; + font-size: 13px; +} +.section-hint mat-icon { + color: #667eea; + font-size: 18px; + width: 18px; + height: 18px; +} + +.client-card { + background: white; + border-radius: 10px 10px 0 0; + border: 2px solid #e9ecef; + border-bottom: none; + padding: 12px; + text-align: center; + cursor: pointer; + transition: all 0.3s ease; + width: 100%; + box-sizing: border-box; +} + +.selected-client { + background: linear-gradient(135deg, rgba(143, 161, 240, 0.6) 0%, rgba(155, 123, 200, 0.6) 100%); + color: #1f2937; + border-color: #e9ecef; + border-bottom: none; +} +.selected-client .client-name, +.selected-client .client-ip { + color: #1f2937; +} + +.model-selector { + background: #ffffff; + border: 2px solid #e9ecef; + border-radius: 0 0 10px 10px; + border-top: none; + display: flex; + align-items: center; + width: 100%; + box-sizing: border-box; + cursor: pointer; + transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; +} +.model-selector:hover { + background: #f3f6ff; + border-color: #b3c2ff; + box-shadow: 0 1px 8px rgba(102, 126, 234, 0.2); +} + +.selected-client + .model-selector { + border-left: 2px solid #e9ecef; + border-right: 2px solid #e9ecef; + border-bottom: 2px solid #e9ecef; + border-top: none; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} + +/* Radios y labels del radio button */ +::ng-deep .model-selector .mat-radio-label, +::ng-deep .model-selector .mat-radio-label-content { color: #2c3e50 !important; } +::ng-deep .model-selector .mat-radio-outer-circle { border-color: #667eea !important; } +::ng-deep .model-selector .mat-radio-inner-circle { background-color: #667eea !important; } + diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html index 74e023b..34b7fde 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html @@ -42,6 +42,13 @@ +
+ info + + Puedes marcar o desmarcar un cliente haciendo clic en el área del ordenador. Además, selecciona con "Modelo" el equipo que actuará como modelo. + +
+
- - + + +
+ Modelo -
+ @@ -85,7 +93,7 @@ -
+
storage
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts index 795b3d1..ad5ae8c 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts @@ -198,6 +198,13 @@ export class PartitionAssistantComponent implements OnInit, AfterViewInit, OnDes ); } + onModelSelected(client: any) { + this.loadPartitions(client); + setTimeout(() => { + this.scrollToDiskSelector(); + }, 200); + } + get runScriptTitle(): string { const ctx = this.runScriptContext; if (!ctx) { @@ -697,6 +704,16 @@ export class PartitionAssistantComponent implements OnInit, AfterViewInit, OnDes }, 100); } + scrollToDiskSelector() { + const diskSelector = document.getElementById('disk-selector'); + if (diskSelector) { + diskSelector.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); + } + } + scrollToExecuteButton() { console.log('scrollToExecuteButton llamado');