refs #2712. Updated UX clients module in partition assistant
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
testing/ogGui-multibranch/pipeline/head There was a failure building this commit
Details
parent
b9f25c1e5e
commit
0dc3fa6823
|
|
@ -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; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -42,6 +42,13 @@
|
|||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div class="section-hint" (click)="$event.stopPropagation()">
|
||||
<mat-icon>info</mat-icon>
|
||||
<span>
|
||||
Puedes marcar o desmarcar un cliente haciendo clic en el área del ordenador. Además, selecciona con "Modelo" el equipo que actuará como modelo.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="button-row">
|
||||
<button class="action-button" (click)="toggleSelectAll()">
|
||||
{{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
|
||||
|
|
@ -67,17 +74,18 @@
|
|||
<span class="client-ip">{{ client.ip }}</span>
|
||||
<span class="client-ip">{{ client.mac }}</span>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-radio-group [(ngModel)]="selectedModelClient" (change)="loadPartitions(selectedModelClient)">
|
||||
</div>
|
||||
|
||||
<div class="model-selector" (click)="$event.stopPropagation()">
|
||||
<mat-radio-group [(ngModel)]="selectedModelClient" (change)="onModelSelected(selectedModelClient)">
|
||||
<mat-radio-button [value]="client"
|
||||
color="primary"
|
||||
[disabled]="!client.selected"
|
||||
(click)="$event.stopPropagation()">
|
||||
Modelo
|
||||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
|
|
@ -85,7 +93,7 @@
|
|||
|
||||
|
||||
<mat-dialog-content>
|
||||
<div class="disk-selector-card">
|
||||
<div class="disk-selector-card" id="disk-selector">
|
||||
<div class="card-header">
|
||||
<mat-icon class="card-icon">storage</mat-icon>
|
||||
<div class="card-title">
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue