refs #2714. Updated UX clients module in run script assistant
parent
8c41df80fe
commit
b9f25c1e5e
|
|
@ -293,66 +293,55 @@ table {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* === Estética unificada (igual a deploy-image) === */
|
||||
/* Leyenda explicativa */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Tarjeta base */
|
||||
.client-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e9ecef;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.client-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.client-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.client-details {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.client-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 2px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.client-ip {
|
||||
font-size: 10px;
|
||||
color: #6c757d;
|
||||
display: block;
|
||||
margin-bottom: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-color: #b3c2ff;
|
||||
}
|
||||
|
||||
/* Selección del cliente */
|
||||
.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;
|
||||
}
|
||||
.selected-client .client-ip { color: #1f2937; }
|
||||
|
||||
::ng-deep .mat-expansion-panel {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
|
||||
|
|
@ -512,4 +501,36 @@ mat-spinner {
|
|||
::ng-deep .update-chip.mat-mdc-chip-selected {
|
||||
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Elementos internos de la tarjeta */
|
||||
.client-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.client-details {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.client-name {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 2px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.client-ip {
|
||||
font-size: 10px;
|
||||
color: #6c757d;
|
||||
display: block;
|
||||
margin-bottom: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -5,9 +5,15 @@
|
|||
<h2>
|
||||
{{ 'runScript' | translate }}
|
||||
</h2>
|
||||
<h4>
|
||||
{{ runScriptTitle }}
|
||||
</h4>
|
||||
<div class="destination-info">
|
||||
<div class="destination-badge">
|
||||
<mat-icon class="destination-icon">cloud_download</mat-icon>
|
||||
<div class="destination-content">
|
||||
<span class="destination-label">Destino</span>
|
||||
<span class="destination-value">{{ runScriptTitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button class="action-button" [disabled]="selectedClients.length < 1 || (commandType === 'existing' && !selectedScript) || (commandType === 'new' && !newScript.trim()) || loading" (click)="save()">Ejecutar</button>
|
||||
|
|
@ -31,6 +37,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.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="button-row">
|
||||
<button class="action-button" (click)="toggleSelectAll()">
|
||||
{{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue