opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' of ssh://ognproject.evlt.uma.es:21987/opengnsys/oggui into develop
testing/ogGui-multibranch/pipeline/head This commit looks good Details

pull/19/head
Manuel Aranda Rosales 2025-04-03 06:55:55 +02:00
parent 4fed92505e 74f5f79206
commit 1c417e5f35
3 changed files with 73 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ogWebconsole/src/app/layout/header/header.component.css
View File

@ -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;
}
}

44
ogWebconsole/src/app/layout/header/header.component.html
View File

@ -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">
<button class="trace-button" routerLink="/commands-logs" mat-button><mat-icon>notifications</mat-icon></button>
<div class="navbar-actions-row" *ngIf="!isSmallScreen">
<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>
<!-- Menú desplegable para pantallas pequeñas -->
<div *ngIf="isSmallScreen" class="isSmallScreenButtons">
<button class="trace-button" routerLink="/commands-logs" mat-button>
<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 *ngIf="isSuperAdmin" [matMenuTriggerFor]="menu">
{{ 'Administration' | translate }}
</button>
<button mat-menu-item *ngIf="!isSuperAdmin" (click)="editUser()">
{{ 'changePassword' | 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">
<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">
<button mat-menu-item routerLink="/env-vars" matTooltip="Gestionar variables de entorno" matTooltipShowDelay="1000">
{{ 'labelEnvVars' | translate }}
</button>
</mat-menu>
</div>
</mat-toolbar>

7
ogWebconsole/src/app/layout/header/header.component.ts
View File

@ -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 {