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

refs #1791 Refactor layout components for improved sidebar behavior and responsiveness
testing/ogGui-multibranch/pipeline/head There was a failure building this commit Details

pull/19/head
Lucas Lara García 2025-04-02 14:06:03 +02:00
parent 5baf4d8e3d
commit b5a6bb0559
9 changed files with 83 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ogWebconsole/src/app/components/groups/groups.component.css
View File

@ -457,3 +457,4 @@ mat-button-toggle-group {
width: 100%;
box-sizing: border-box;
}

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

@ -45,3 +45,13 @@ mat-toolbar {
background-color: #ced0df;
cursor: not-allowed;
}
.hide-on-small {
display: none;
}
@media (min-width: 1328px) {
.hide-on-small {
display: inline;
}
}

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

@ -1,5 +1,5 @@
<mat-toolbar>
<span class="navbar-title" 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>

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

@ -52,8 +52,6 @@ export class HeaderComponent implements OnInit {
this.dialog.open(GlobalStatusComponent, {
width: '45vw',
height: '80vh',
// maxWidth: '60vw',
// maxHeight: '60vh'
})
}
}

1
ogWebconsole/src/app/layout/main-layout/main-layout.component.css
View File

@ -6,5 +6,4 @@
.sidebar {
width: 15vw;
min-width: 250px;
z-index: auto !important;
}

5
ogWebconsole/src/app/layout/main-layout/main-layout.component.html
View File

@ -1,8 +1,9 @@
<app-header (toggleSidebar)="toggleSidebar()"></app-header>
<mat-drawer-container class="container" autosize>
<mat-drawer class="sidebar" mode="side" [opened]="isSidebarVisible">
<app-sidebar></app-sidebar>
<mat-drawer class="sidebar" [mode]="sidebarMode" [opened]="isSidebarVisible" (close)="isSidebarVisible = false">
<app-sidebar [isVisible]="isSidebarVisible" [sidebarMode]="sidebarMode" (closeSidebar)="isSidebarVisible = false">
</app-sidebar>
</mat-drawer>
<mat-drawer-content class="content">

20
ogWebconsole/src/app/layout/main-layout/main-layout.component.ts
View File

@ -1,12 +1,28 @@
import { Component } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({
selector: 'app-main-layout',
templateUrl: './main-layout.component.html',
styleUrls: ['./main-layout.component.css'],
})
export class MainLayoutComponent {
export class MainLayoutComponent implements OnInit {
isSidebarVisible: boolean = true;
sidebarMode: 'side' | 'over' = 'side';
constructor(private breakpointObserver: BreakpointObserver) { }
ngOnInit(): void {
this.breakpointObserver.observe(['(max-width: 1328px)']).subscribe((result) => {
if (result.matches) {
this.sidebarMode = 'over';
this.isSidebarVisible = false;
} else {
this.sidebarMode = 'side';
this.isSidebarVisible = true;
}
});
}
toggleSidebar() {
this.isSidebarVisible = !this.isSidebarVisible;

51
ogWebconsole/src/app/layout/sidebar/sidebar.component.html
View File

@ -7,14 +7,16 @@
<mat-divider></mat-divider>
<mat-list-item routerLink="/groups" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/groups" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_GROUPS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">apartment</mat-icon>
<span>{{ 'groups' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item (click)="toggleCommandSub()" matTooltip="{{ 'TOOLTIP_ACTIONS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">playlist_play</mat-icon>
<span>{{ 'actions' | translate }}</span>
@ -23,19 +25,22 @@
<!-- Submenu items for commands -->
<mat-nav-list *ngIf="showCommandSub" style="padding-left: 20px;">
<mat-list-item routerLink="/commands" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/commands" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_COMMANDS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">chevron_right</mat-icon>
<span>{{ 'commands' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/commands-groups" matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/commands-groups" (click)="onItemClick()"
matTooltip="{{ 'TOOLTIP_COMMAND_GROUPS' | translate }}" matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">chevron_right</mat-icon>
<span>{{ 'commandGroups' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/commands-task" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/commands-task" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_TASKS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">chevron_right</mat-icon>
<span>{{ 'tasks' | translate }}</span>
@ -43,14 +48,16 @@
</mat-list-item>
</mat-nav-list>
<mat-list-item routerLink="/subnets" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/subnets" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SUBNETS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">lan</mat-icon>
<span> {{ 'subnets' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}" matTooltipShowDelay="1000">
<mat-list-item (click)="toggleOgBootSub()" matTooltip="{{ 'TOOLTIP_BOOT' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">desktop_windows</mat-icon>
<span>{{ 'boot' | translate }}</span>
@ -59,19 +66,22 @@
<!-- Submenu items for Boot -->
<mat-nav-list *ngIf="showOgBootSub" style="padding-left: 20px;">
<mat-list-item routerLink="/pxe-images" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/pxe-images" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_IMAGES' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">album</mat-icon>
<span>{{ 'ogLive' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/pxe" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/pxe" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_PXE_TEMPLATES' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">assignment</mat-icon>
<span>{{ 'pxeTemplates' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/pxe-boot-file" matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/pxe-boot-file" (click)="onItemClick()"
matTooltip="{{ 'TOOLTIP_PXE_BOOT_FILES' | translate }}" matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">save</mat-icon>
<span>{{ 'pxeBootFiles' | translate }}</span>
@ -79,14 +89,16 @@
</mat-list-item>
</mat-nav-list>
<mat-list-item routerLink="/calendars" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/calendars" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_CALENDARS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">calendar_month</mat-icon>
<span>{{ 'calendars' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}" matTooltipShowDelay="1000">
<mat-list-item (click)="toggleSoftwareSub()" matTooltip="{{ 'TOOLTIP_SOFTWARE' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">terminal</mat-icon>
<span>{{ 'software' | translate }}</span>
@ -95,19 +107,22 @@
<!-- Submenu items for Software -->
<mat-nav-list *ngIf="showSoftwareSub" style="padding-left: 20px;">
<mat-list-item routerLink="/software" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/software" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_SOFTWARE_LIST' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">list</mat-icon>
<span>{{ 'softwareList' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/software-profiles" matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/software-profiles" (click)="onItemClick()"
matTooltip="{{ 'TOOLTIP_SOFTWARE_PROFILES' | translate }}" matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">folder_shared</mat-icon>
<span>{{ 'softwareProfiles' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/operative-systems" matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/operative-systems" (click)="onItemClick()"
matTooltip="{{ 'TOOLTIP_OPERATIVE_SYSTEMS' | translate }}" matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">terminal</mat-icon>
<span>{{ 'operativeSystems' | translate }}</span>
@ -115,14 +130,16 @@
</mat-list-item>
</mat-nav-list>
<mat-list-item routerLink="/repositories" matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/repositories" (click)="onItemClick()"
matTooltip="{{ 'TOOLTIP_REPOSITORIES' | translate }}" matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">warehouse</mat-icon>
<span>{{ 'repositories' | translate }}</span>
</span>
</mat-list-item>
<mat-list-item routerLink="/menus" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}" matTooltipShowDelay="1000">
<mat-list-item routerLink="/menus" (click)="onItemClick()" matTooltip="{{ 'TOOLTIP_MENUS' | translate }}"
matTooltipShowDelay="1000">
<span class="entry">
<mat-icon class="icon">list</mat-icon>
<span>{{ 'menus' | translate }}</span>

12
ogWebconsole/src/app/layout/sidebar/sidebar.component.ts
View File

@ -1,6 +1,7 @@
import { Component, Input } from '@angular/core';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { jwtDecode } from 'jwt-decode';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'app-sidebar',
templateUrl: './sidebar.component.html',
@ -8,6 +9,9 @@ import { MatDialog } from '@angular/material/dialog';
})
export class SidebarComponent {
@Input() isVisible: boolean = false;
@Input() sidebarMode: 'side' | 'over' = 'side';
@Output() closeSidebar: EventEmitter<void> = new EventEmitter<void>();
isSuperAdmin: boolean = false;
username: string = "";
decodedToken: any = "";
@ -29,6 +33,12 @@ export class SidebarComponent {
this.showSoftwareSub = !this.showSoftwareSub;
}
onItemClick() {
if (this.isVisible && this.sidebarMode === 'over') {
this.closeSidebar.emit();
}
}
constructor(public dialog: MatDialog) {}
ngOnInit(): void {