refs #1638. Refactor client details layout and improve sync status display

ogWebconsole/src/app/components/groups/groups.component.css

@@ -319,11 +319,26 @@ mat-tree mat-tree-node.disabled:hover {
   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }
 
-.client-image {
+.client-details {
-  width: 35px;
+  flex-grow: 1;
-  height: 35px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-top: 4px;
+}
+
+.action-icons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1px;
   margin-top: 10px;
-  margin-bottom: 8px;
+}
+
+.client-status-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
 }
 
 .client-ip {
@@ -338,11 +353,9 @@ mat-tree mat-tree-node.disabled:hover {
   gap: 4px;
 }
 
-.action-icons {
+.sync-spinner {
-  display: flex;
+  margin-left: 1em;
-  justify-content: center;
+  margin-right: 1em;
-  gap: 1px;
-  margin-top: 10px;
 }
 
 .mat-elevation-z8 {
@@ -360,10 +373,6 @@ mat-tree mat-tree-node.disabled:hover {
   position: relative;
 }
 
-.client-details {
-  margin-top: 4px;
-}
-
 @media (max-width: 1560px) {
   .clients-view-header {
     display: flex;

ogWebconsole/src/app/components/groups/groups.component.html

@@ -60,12 +60,14 @@
               </button>
             </mat-form-field>
             <mat-form-field class="form-field search-select" appearance="outline">
-              <mat-select placeholder="Buscar por estado..." #clientSearchStatusInput (selectionChange)="onClientFilterStatusInput($event.value)">
+              <mat-select placeholder="Buscar por estado..." #clientSearchStatusInput
+                (selectionChange)="onClientFilterStatusInput($event.value)">
                 <mat-option *ngFor="let option of status" [value]="option.value">
                   {{ option.name }}
                 </mat-option>
               </mat-select>
-              <button *ngIf="clientSearchStatusInput.value" mat-icon-button matSuffix aria-label="Clear tree search" (click)="clearStatusFilter($event, clientSearchStatusInput)">
+              <button *ngIf="clientSearchStatusInput.value" mat-icon-button matSuffix aria-label="Clear tree search"
+                (click)="clearStatusFilter($event, clientSearchStatusInput)">
                 <mat-icon>close</mat-icon>
               </button>
             </mat-form-field>
@@ -226,7 +228,7 @@
                       <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
                         [checked]="selection.isSelected(client)" [disabled]="client.status === 'busy'">
                       </mat-checkbox>
-                      <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
+                      <img style="margin-top: 0.5em;" [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
                         class="client-image" />
 
                       <div class="client-details">
@@ -234,14 +236,6 @@
                         <span class="client-ip">{{ client.ip }}</span>
                         <span class="client-ip">{{ client.mac }}</span>
                         <div class="action-icons">
-                          <button *ngIf="(!syncStatus || syncingClientId !== client.uuid)" mat-icon-button
-                            color="primary" (click)="getStatus(client, selectedNode)">
-                            <mat-icon>sync</mat-icon>
-                          </button>
-
-                          <button *ngIf="syncStatus && syncingClientId === client.uuid" mat-icon-button color="primary">
-                            <mat-spinner diameter="24"></mat-spinner>
-                          </button>
 
                           <app-execute-command [clientData]="[client]" [buttonType]="'icon'" [icon]="'terminal'"
                             [disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"></app-execute-command>
@@ -252,6 +246,10 @@
                             <mat-icon>more_vert</mat-icon>
                           </button>
 
+                          <span class="sync-spinner" *ngIf="syncStatus && syncingClientId === client.uuid">
+                            <mat-spinner diameter="24"></mat-spinner>
+                          </span>
+
                           <mat-menu #clientMenu="matMenu">
                             <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
                               <mat-icon>edit</mat-icon>
@@ -261,6 +259,11 @@
                               <mat-icon>visibility</mat-icon>
                               <span>{{ 'viewDetails' | translate }}</span>
                             </button>
+                            <button mat-menu-item *ngIf="(!syncStatus || syncingClientId !== client.uuid)"
+                              (click)="getStatus(client, selectedNode)">
+                              <mat-icon>sync</mat-icon>
+                              <span>{{ 'sync' | translate }}</span>
+                            </button>
                             <button mat-menu-item (click)="onDeleteClick($event, client)">
                               <mat-icon>delete</mat-icon>
                               <span>{{ 'delete' | translate }}</span>
@@ -300,8 +303,13 @@
                     <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'status' | translate }} </th>
                     <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
                       matTooltipPosition="left" matTooltipShowDelay="500">
-                      <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
+                      <div class="client-status-container">
-                        class="client-image" />
+                        <img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
+                          class="client-image" />
+                        <span *ngIf="syncStatus && syncingClientId === client.uuid">
+                          <mat-spinner diameter="24"></mat-spinner>
+                        </span>
+                      </div>
                     </td>
                   </ng-container>
 
@@ -372,7 +380,8 @@
                       </mat-menu>
                     </td>
                   </ng-container>
-                  <tr mat-header-row style="background-color: #f3f3f3;" *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                  <tr mat-header-row style="background-color: #f3f3f3;"
+                    *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                 </table>
               </section>