Merge branch 'develop' of ssh://ognproject.evlt.uma.es:21987/opengnsys/oggui into develop

ogWebconsole/src/app/layout/header/header.component.css

@@ -1,6 +1,7 @@
 mat-toolbar {
   /*height: 7vh;*/
-  min-height: 60px;
+  min-height: 65px;
+  min-width: 375px;
   background-color: #3f51b5;
   color: white;
 }
@@ -55,3 +56,28 @@ mat-toolbar {
     display: inline;
   }
 }
+
+@media (max-width: 576px) {
+  .navbar-actions-row {
+    display: none;
+  }
+
+  mat-toolbar {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .isSmallScreenButtons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .trace-button .mat-icon {
+    margin-right: 0px !important;
+  }
+
+  .smallScreenMenubutton {
+    margin-right: 2vh;
+  }
+}

ogWebconsole/src/app/layout/header/header.component.html

@@ -1,5 +1,6 @@
 <mat-toolbar>
-  <span class="navbar-title hide-on-small" matTooltip="Consola web de administración de Opengnsys" matTooltipShowDelay="1000">
+  <span class="navbar-title hide-on-small" matTooltip="Consola web de administración de Opengnsys"
+    matTooltipShowDelay="1000">
     Opengnsys webconsole
   </span>
 
@@ -8,12 +9,14 @@
     <mat-icon class="navbar-icon">menu</mat-icon>
   </button>
 
-  <div class="navbar-actions-row">
+  <div class="navbar-actions-row" *ngIf="!isSmallScreen">
-    <button class="trace-button" routerLink="/commands-logs" mat-button><mat-icon>notifications</mat-icon></button>
+    <button class="trace-button" routerLink="/commands-logs" mat-button>
+      <mat-icon>notifications</mat-icon>
+    </button>
 
     <div class="navbar-buttons-row">
       <button class="ordinary-button" (click)="showGlobalStatus()">
-        {{'GlobalStatus' | translate}}
+        {{ 'GlobalStatus' | translate }}
       </button>
 
       <button class="ordinary-button" *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu"
@@ -31,20 +34,43 @@
         {{ 'logout' | translate }}
       </button>
     </div>
+  </div>
 
-    <mat-menu #menu="matMenu">
+  <!-- Menú desplegable para pantallas pequeñas -->
-      <button mat-menu-item routerLink="/users" matTooltip="Ver y gestionar todos los usuarios"
+  <div *ngIf="isSmallScreen" class="isSmallScreenButtons">
-        matTooltipShowDelay="1000">
+    <button class="trace-button" routerLink="/commands-logs" mat-button>
-        {{ 'labelUsers' | translate }}
+      <mat-icon>notifications</mat-icon>
+    </button>
+    <button class="smallScreenMenubutton" mat-icon-button [matMenuTriggerFor]="smallScreenMenu" matTooltip="Opciones" matTooltipShowDelay="1000">
+      <mat-icon>menu</mat-icon>
+    </button>
+    <mat-menu #smallScreenMenu="matMenu">
+      <button mat-menu-item (click)="showGlobalStatus()">
+        {{ 'GlobalStatus' | translate }}
       </button>
-      <button mat-menu-item routerLink="/user-groups" matTooltip="Gestionar roles de usuario"
+      <button mat-menu-item *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu">
-        matTooltipShowDelay="1000">
+        {{ 'Administration' | translate }}
-        {{ 'labelRoles' | translate }}
       </button>
-      <button mat-menu-item routerLink="/env-vars" matTooltip="Gestionar variables de entorno"
+      <button mat-menu-item *ngIf="!isSuperAdmin" (click)="editUser()">
-        matTooltipShowDelay="1000">
+        {{ 'changePassword' | translate }}
-        {{ 'labelEnvVars' | translate }}
       </button>
     </mat-menu>
+    <button class="logout-button" routerLink="/auth/login" matTooltip="Cerrar sesión y salir de la aplicación"
+      matTooltipShowDelay="1000">
+      {{ 'logout' | translate }}
+    </button>
   </div>
+
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item routerLink="/users" matTooltip="Ver y gestionar todos los usuarios"
+      matTooltipShowDelay="1000">
+      {{ 'labelUsers' | translate }}
+    </button>
+    <button mat-menu-item routerLink="/user-groups" matTooltip="Gestionar roles de usuario" matTooltipShowDelay="1000">
+      {{ 'labelRoles' | translate }}
+    </button>
+    <button mat-menu-item routerLink="/env-vars" matTooltip="Gestionar variables de entorno" matTooltipShowDelay="1000">
+      {{ 'labelEnvVars' | translate }}
+    </button>
+  </mat-menu>
 </mat-toolbar>

ogWebconsole/src/app/layout/header/header.component.ts

@@ -3,6 +3,7 @@ import { jwtDecode } from 'jwt-decode';
 import { ChangePasswordModalComponent } from '../../components/admin/users/users/change-password-modal/change-password-modal.component';
 import { MatDialog } from "@angular/material/dialog";
 import { GlobalStatusComponent } from 'src/app/components/global-status/global-status.component';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 @Component({
   selector: 'app-header',
@@ -12,6 +13,7 @@ import { GlobalStatusComponent } from 'src/app/components/global-status/global-s
 
 export class HeaderComponent implements OnInit {
   isSuperAdmin: boolean = false;
+  isSmallScreen: boolean = false;
 
   @Output() toggleSidebar = new EventEmitter<void>();
   private decodedToken: any;
@@ -21,7 +23,7 @@ export class HeaderComponent implements OnInit {
     this.toggleSidebar.emit();
   }
 
-  constructor(public dialog: MatDialog) { }
+  constructor(public dialog: MatDialog, private breakpointObserver: BreakpointObserver) { }
 
   ngOnInit(): void {
     const token = localStorage.getItem('loginToken');
@@ -35,6 +37,9 @@ export class HeaderComponent implements OnInit {
         console.error('Error decoding JWT:', error);
       }
     }
+    this.breakpointObserver.observe(['(max-width: 576px)']).subscribe((result) => {
+      this.isSmallScreen = result.matches;
+    })
   }
 
   ngDoCheck(): void {