From 8c41df80fe7ce33b39d0882ffec2d4046954db90 Mon Sep 17 00:00:00 2001 From: Manuel Aranda Date: Thu, 28 Aug 2025 10:37:34 +0200 Subject: [PATCH 1/4] refs #2709. Updated UX clients module in deploy image assistant --- .../deploy-image/deploy-image.component.css | 138 +++++++++++++++++- .../deploy-image/deploy-image.component.html | 15 +- .../deploy-image/deploy-image.component.ts | 56 +++---- 3 files changed, 170 insertions(+), 39 deletions(-) diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css index 9c60bbe..1d6cb4e 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css @@ -144,31 +144,102 @@ mat-form-field { .client-card { background: white; border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + border: 2px solid #e9ecef; overflow: hidden; position: relative; padding: 12px; text-align: center; cursor: pointer; transition: all 0.3s ease; - border: 2px solid transparent; + /* asegurar ancho consistente con bordes */ + width: 100%; + box-sizing: border-box; } .client-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); - border-color: #667eea; + border-color: #b3c2ff; } +/* Cliente seleccionado: vuelve el degradado del card */ .selected-client { - background: linear-gradient(135deg, #8fa1f0 0%, #9b7bc8 100%); - color: white; - border-color: #667eea; + background: linear-gradient(135deg, rgba(143, 161, 240, 0.6) 0%, rgba(155, 123, 200, 0.6) 100%); + color: #1f2937; + border-color: #e9ecef; } .selected-client .client-name, .selected-client .client-ip { - color: white; + color: #1f2937; +} + +/* Estilo del separador sobre fondo degradado */ +.selected-client mat-divider { + margin: 12px 0; + border-color: rgba(255, 255, 255, 0.35); +} + +/* Área del selector de modelo: siempre visible y clickeable */ +.model-selector { + background: #ffffff; + border: 2px solid #e9ecef; + display: flex; + width: 100%; + box-sizing: border-box; + align-items: center; + 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); +} + +/* Asegurar buen contraste del texto del radio */ +::ng-deep .model-selector .mat-radio-label, +::ng-deep .model-selector .mat-radio-label-content { + color: #2c3e50 !important; +} + +/* Color del radio para destacarlo sobre el fondo blanco o degradado */ +::ng-deep .model-selector .mat-radio-outer-circle { + border-color: #667eea !important; +} + +::ng-deep .model-selector .mat-radio-inner-circle { + background-color: #667eea !important; +} + +/* Limpieza: eliminar iconos anteriores si quedaron */ +.selected-client::after { content: none; } +.selected-client mat-radio-group.mat-radio-group-selected::after { content: none; } + +/* Dejar el grupo de radio sin estilos especiales acoplados al estado del card */ +.selected-client mat-radio-group { background: transparent; border: 0; padding: 0; margin-top: 0; box-shadow: none; position: static; } + +/* Estilos específicos para Angular Material usando ::ng-deep */ +::ng-deep .selected-client mat-radio-group .mat-radio-button { + color: #2c3e50 !important; +} + +::ng-deep .selected-client mat-radio-group .mat-radio-label { + color: #2c3e50 !important; +} + +::ng-deep .selected-client mat-radio-group .mat-radio-label-content { + color: #2c3e50 !important; + font-weight: 500; +} + +::ng-deep .selected-client mat-radio-group .mat-radio-outer-circle { + border-color: #667eea !important; +} + +::ng-deep .selected-client mat-radio-group .mat-radio-inner-circle { + background-color: #667eea !important; } .client-image { @@ -183,7 +254,7 @@ mat-form-field { .client-name { font-size: 12px; - font-weight: 600; + font-weight: 500; color: #2c3e50; margin-bottom: 2px; display: block; @@ -588,4 +659,55 @@ table { border: 1px dashed #dee2e6; } +/* Unir visualmente card y selector: bordes y radios */ +.client-card { + border-radius: 10px 10px 0 0; + border-bottom: none; +} + +/* Mantener en hover también sin borde inferior */ +.client-card:hover { + border-bottom: none; +} + +.model-selector { + border-radius: 0 0 10px 10px; + border-top: none; +} + +/* Cuando el card esté seleccionado, usar mismo borde en el selector para efecto de bloque único */ +.selected-client { + border-bottom: none; +} + +.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; +} + +/* Leyenda explicativa de la sección */ +.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; +} + diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html index 59bf1f5..4dbb9f9 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html @@ -46,6 +46,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. + +
+
@@ -31,6 +37,13 @@ +
+ info + + Puedes marcar o desmarcar un cliente haciendo clic en el área del ordenador. + +
+
- - +
+ +
+ 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'); -- 2.40.1 From 4bc7f7732ecfe8257228086e682ad28da18e3461 Mon Sep 17 00:00:00 2001 From: Manuel Aranda Date: Thu, 28 Aug 2025 10:40:42 +0200 Subject: [PATCH 4/4] updated changelog --- CHANGELOG.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index f29af71..41ab645 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,12 @@ # Changelog +## [0.20.1] - 2025-08-28 +### Improved +- Se ha mejorado la UX de los asistentes. + +### Fixed +- Se han corredigo errores en la seccion clientes de los asistentes. + +--- ## [0.20.0] - 2025-08-25 ### Added - Se ha añadido un nuevo boton en "Trazas" para marcar la misma como completada cuando se requiera. -- 2.40.1