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

Added new UX. Sidebar, and main styles

pull/4/head
Manuel Aranda Rosales 2024-07-04 15:27:27 +02:00
parent 9e74ee0c63
commit af5e2b6a12
14 changed files with 166 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ogWebconsole/.gitignore vendored
View File

@ -40,3 +40,4 @@ testem.log
# System files
.DS_Store
Thumbs.db

4
ogWebconsole/angular.json
View File

@ -104,6 +104,10 @@
}
},
"cli": {
<<<<<<< Updated upstream
"analytics": "95fac95c-8936-41a8-8c9c-1fae82fe6912"
=======
"analytics": "ba7c0825-8034-43ff-9c60-83dac232db7e"
>>>>>>> Stashed changes
}
}

7
ogWebconsole/src/app/app.component.css
View File

@ -0,0 +1,7 @@
.sidenav-container {
height: 100%;
}
.content {
padding: 16px;
}

42
ogWebconsole/src/app/app.module.ts
View File

@ -43,7 +43,7 @@ import { DeleteModalComponent } from './components/groups/delete-modal/delete-mo
import { EditOrganizationalUnitComponent } from './components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component';
import { EditClientComponent } from './components/groups/clients/edit-client/edit-client.component';
import {MatProgressSpinner} from "@angular/material/progress-spinner";
import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
@NgModule({ declarations: [
AppComponent,
@ -70,26 +70,26 @@ import {MatProgressSpinner} from "@angular/material/progress-spinner";
EditClientComponent
],
bootstrap: [AppComponent],
imports: [BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
MatSidenavModule,
BrowserAnimationsModule,
MatCardModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatListModule,
MatTableModule,
MatDialogModule,
MatSelectModule,
MatDividerModule,
MatStepperModule,
MatSlideToggleModule, MatProgressSpinner],
imports: [BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
MatToolbarModule,
MatIconModule,
MatButtonModule,
MatSidenavModule,
BrowserAnimationsModule,
MatCardModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatListModule,
MatTableModule,
MatDialogModule,
MatSelectModule,
MatDividerModule,
MatStepperModule,
MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem],
providers: [
{
provide: HTTP_INTERCEPTORS,

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

@ -1,15 +1,13 @@
mat-toolbar {
display: flex;
justify-content: space-between;
padding: 10px;
height: 50px;
box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.5);
background-color: #3f51b5;
color: white;
}
.navbar-button-row {
display: flex;
justify-content: space-around;
justify-content: end;
flex-grow: 1;
}
@ -20,4 +18,4 @@ button[mat-flat-button] {
.navbar-tittle{
padding-left: 20px;
cursor: pointer;
}
}

24
ogWebconsole/src/app/components/layout/header/header.component.html
View File

@ -1,19 +1,11 @@
<mat-toolbar>
<button mat-mini-fab color="primary" aria-label="menu" (click)="onToggleSidebar()">
<mat-icon>person</mat-icon>
</button>
<span class="navbar-tittle" routerLink="/dashboard">Opengnsys webconsole</span>
<div class="navbar-button-row">
<button mat-flat-button color="primary" routerLink="/groups">Grupos</button>
<button mat-flat-button color="primary">Acciones</button>
<button mat-flat-button color="primary">Imágenes</button>
<button mat-flat-button color="primary">Componentes</button>
<button mat-flat-button color="primary">Repositiorios</button>
<button mat-flat-button color="primary">Menús</button>
<button mat-flat-button color="primary">Buscar</button>
<button mat-flat-button color="primary">Calendario</button>
<button mat-flat-button color="primary">Ayuda</button>
<button mat-flat-button color="warn" routerLink="/auth/login">Salir</button>
</div>
</mat-toolbar>
<button mat-button [matMenuTriggerFor]="menu">Administracion</button>
<mat-menu #menu="matMenu">
<button mat-menu-item routerLink="/users">Usuarios</button>
<button mat-menu-item routerLink="/user-groups">Roles</button>
</mat-menu>
<button mat-flat-button color="warn" routerLink="/auth/login">Salir</button>
</div>
</mat-toolbar>

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

@ -1,6 +1,11 @@
.content-wrapper{
display: block;
grid-area: content;
margin: 20px;
}
.container {
width: auto;
height: 100%;
}
.content {
margin: 10px;
padding: 10px;
}

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

@ -1,6 +1,11 @@
<app-header (toggleSidebar)="toggleSidebar()"></app-header>
<div class="content-wrapper">
<app-sidebar [isVisible]="isSidebarVisible"></app-sidebar>
<div class="content">
<mat-drawer-container class="container" >
<mat-drawer class="sidebar" mode="side" opened>
<app-sidebar [isVisible]="isSidebarVisible"></app-sidebar>
</mat-drawer>
<mat-drawer-content class="content">
<router-outlet />
</div>
</mat-drawer-content>
</mat-drawer-container>

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

@ -2,7 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-main-layout',
templateUrl: './main-layout.component.html',
styleUrl: './main-layout.component.css'
styleUrl: './main-layout.component.css',
})
export class MainLayoutComponent {
isSidebarVisible: boolean = false;

58
ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css
View File

@ -1,25 +1,37 @@
.sidebar {
width: 250px;
position: fixed;
top: 50px;
left: -260px;
height: 100%;
background-color: rgb(245, 245, 245);
transition: left 0.3s ease-in-out;
box-shadow: 10px 0 10px -5px rgba(0, 0, 0, 0.5);
z-index: 99999999999;
}
.sidebar.visible {
left: 0;
}
.sidebar-content{
margin: 20px;
}
button {
margin-bottom: 10px;
mat-nav-list {
width: 250px;
}
mat-list-item {
cursor: pointer;
display: flex;
align-items: center;
}
.entry{
display: flex;
align-items: center;
gap: 1rem;
padding:0.75rem;
}
mat-icon {
margin-right: 8px;
}
.user-logged{
align-items: center;
gap: 2rem;
padding:1.5rem;
font-size: x-large;
}
.sidebar-content {
display: flex;
flex-direction: column;
height: 100%;
}
.admin-link {
margin-top: auto;
}

66
ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html
View File

@ -1,8 +1,58 @@
<div class="sidebar" [class.visible]="isVisible">
<div class="sidebar-content">
<h4>Bienvenido {{username}}</h4>
<button mat-flat-button color="primary" (click)="editUser('username')">Editar usuario</button>
<button mat-flat-button color="accent" routerLink="/admin" *ngIf="isSuperAdmin">Admin</button>
</div>
</div>
<mat-nav-list>
<mat-list-item disabled>
<span class="user-logged">
<span> {{username}}</span>
</span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item routerLink="/groups">
<span class="entry">
<mat-icon class="icon">apartment</mat-icon>
<span>Grupos</span>
</span>
</mat-list-item>
<mat-list-item>
<span class="entry">
<mat-icon class="icon">chevron_right</mat-icon>
<span>Acciones</span>
</span>
</mat-list-item>
<mat-list-item>
<span class="entry">
<mat-icon class="icon">desktop_windows</mat-icon>
<span>Imágenes</span>
</span>
</mat-list-item>
<mat-list-item>
<span class="entry">
<mat-icon class="icon">settings_input_component</mat-icon>
<span>Componentes</span>
</span>
</mat-list-item>
<mat-list-item>
<span class="entry">
<mat-icon class="icon">warehouse</mat-icon>
<span>Repositorios</span>
</span>
</mat-list-item>
<mat-list-item>
<span class="entry">
<mat-icon class="icon">list</mat-icon>
<span>Menús</span>
</span>
</mat-list-item>
<mat-list-item>
<span class="entry">
<mat-icon class="icon">search</mat-icon>
<span>Buscar</span>
</span>
</mat-list-item>
<mat-list-item>
<span class="entry">
<mat-icon class="icon">calendar_month</mat-icon>
<span>Calendarios</span>
</span>
</mat-list-item>
</mat-nav-list>

2
ogWebconsole/src/app/components/layout/sidebar/sidebar.component.spec.ts
View File

@ -11,7 +11,7 @@ describe('SidebarComponent', () => {
imports: [SidebarComponent]
})
.compileComponents();
fixture = TestBed.createComponent(SidebarComponent);
component = fixture.componentInstance;
fixture.detectChanges();

2
ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts
View File

@ -38,4 +38,4 @@ export class SidebarComponent {
console.log("User edited successfully!")
}); */
}
}
}

6
package-lock.json generated 100644
View File

@ -0,0 +1,6 @@
{
"name": "oggui",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}