Actualización del menú de módulos

sistema-mantenimiento-front/src/app/components/system-admin/system-admin.component.html

@@ -20,11 +20,12 @@
         <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
     </div>
     <div class="menu-items" *ngIf="!isLoading && !hasError">
-        <div class="menu-item-border" *ngFor="let submodule of submodules" (click)="openSubmodule(submodule.IDSUBMODULO)">
+        <!--<div class="menu-item-border" *ngFor="let submodule of submodules" (click)="openSubmodule(submodule.IDSUBMODULO)">
             <div class="menu-item">
                 <mat-icon>{{ submodule.ICONOSUBMODULO }}</mat-icon>
                 <p>{{ submodule.NOMBRESUBMODULO }}</p>
             </div>
-        </div>
+        </div>-->
+        <mat-card></mat-card>
     </div>
 </div>

sistema-mantenimiento-front/src/app/components/template/template.component.css

@@ -16,11 +16,49 @@
 }
 
 /*Menú módulos*/
+.toolbar-row{
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+.toolbar-row .menu-items{
+  width: 100%;
+  padding: 8px;
+  height: 64px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
 .dropdown{
   position: relative;
   display: inline-block;
 }
 
+.icon-modules-container{
+  background-color: #f9f9f9;
+  width: 100vw;
+  position: relative;
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.animate_hide{
+  animation: fadeIn 0.1s linear;
+}
+
+@keyframes fadeIn{
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .dropbtn{
   color: #e0e0e0;
   margin: 14px 0;

sistema-mantenimiento-front/src/app/components/template/template.component.html

@@ -1,32 +1,37 @@
-<!--<mat-toolbar style="height: 6vh; box-shadow: .5px .5px .5px .5px rgba(0, 0, 0, 0.2); z-index: 100;"
-    (window:resize)="onResize($event)">
-    <mat-toolbar-row>
-        <button type="button" mat-icon-button (click)="drawer.toggle()">
-            <mat-icon style="color: white">menu</mat-icon>
-        </button>
-        <span style="color: #808080"> <span *ngIf="screen_small" style="color: #808080;">Sistema de Ayuda al
-                Mantenimiento - </span>SAM</span>
-        <span class="example-spacer"></span>
-        <span style="color: #808080; font-size: 14px;">Bienvenido<span *ngIf="screen_small" style="color: #808080;"> {{ userName }}</span></span>
-        <button mat-button style="color: #808080;" (click)="logout()">
-            <mat-icon style="color: white;">logout</mat-icon> Cerra Sesión
-        </button>
-    </mat-toolbar-row>
-</mat-toolbar>-->
 <mat-toolbar class="toolbar" (window:resize)="onResize()">
-    <mat-toolbar-row>
-        <h1 style="color: #e0e0e0; margin: 0;">{{ title }}</h1>
-        <div class="example-spacer">
-            <div *ngIf="maintenanceActivated" class="time-counter">
-                {{ timeLeft }}
+    <mat-toolbar-row class="p-0">
+        <div class="toolbar-row">
+            <div class="menu-items">
+                <h1 style="color: #e0e0e0; margin: 0;">{{ title }}</h1>
+                <div class="example-spacer">
+                    <div *ngIf="maintenanceActivated" class="time-counter">
+                        {{ timeLeft }}
+                    </div>
+                </div>
+                <button mat-button class="white_font" *ngIf="!isLoading && !maintenanceMode" (click)="modulesActivated = !modulesActivated">
+                    <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> MÓDULOS
+                </button>
+                <button mat-button [matMenuTriggerFor]="menuA" class="white_font" *ngIf="!isLoading && !maintenanceMode">
+                    <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> {{ userName }}
+                </button>
+                <mat-menu #menuA="matMenu">
+                    <button mat-menu-item><mat-icon>person</mat-icon> Mi perfil</button>
+                    <button mat-menu-item><mat-icon>help</mat-icon> Ayuda</button>
+                    <button mat-menu-item><mat-icon>key</mat-icon> Cambiar contraseña</button>
+                    <button mat-menu-item (click)="logoutTemp()"><mat-icon>logout</mat-icon> Cerrar sesión</button>
+                </mat-menu>
+                <span class="m-8"></span>
+                <div class="search-mat-form-field" *ngIf="!isLoading && !maintenanceMode">
+                    <mat-icon class="prefix">search</mat-icon>
+                    <input type="text" class="input" placeholder="Buscar ubicaciones, archivos, etc..." #input>
+                    <button mat-icon-button [disabled]="input.value === ''">
+                        <mat-icon class="suffix">close</mat-icon>
+                    </button>
+                </div>
             </div>
-        </div>
-        <div class="dropdown " *ngIf="!isLoading && !maintenanceMode">
-            <button mat-button class="dropbtn white_font">
-                MÓDULOS <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon>
-            </button>
-            <span class="h-16"></span>
-            <div class="dropdown-content">
+            <div class="icon-modules-container" [ngClass]="{
+                hidden: !modulesActivated, animate_hide: modulesActivated
+            }">
                 <div class="row-container">
                     <div class="row-item" *ngFor="let item of menuItems" (click)="navigate(item.IDMODULO)">
                         <mat-icon>{{ item.ICONOMODULO }}</mat-icon>
@@ -35,23 +40,19 @@
                 </div>
             </div>
         </div>
-        <button mat-button [matMenuTriggerFor]="menuA" class="white_font" *ngIf="!isLoading && !maintenanceMode">
-            {{ userName }} <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon>
-        </button>
-        <mat-menu #menuA="matMenu">
-            <button mat-menu-item><mat-icon>person</mat-icon> Mi perfil</button>
-            <button mat-menu-item><mat-icon>help</mat-icon> Ayuda</button>
-            <button mat-menu-item><mat-icon>key</mat-icon> Cambiar contraseña</button>
-            <button mat-menu-item (click)="logoutTemp()"><mat-icon>logout</mat-icon> Cerrar sesión</button>
-        </mat-menu>
-        <span class="m-8"></span>
-        <div class="search-mat-form-field" *ngIf="!isLoading && !maintenanceMode">
-            <mat-icon class="prefix">search</mat-icon>
-            <input type="text" class="input" placeholder="Buscar ubicaciones, archivos, etc..." #input>
-            <button mat-icon-button [disabled]="input.value === ''">
-                <mat-icon class="suffix">close</mat-icon>
+        <!--
+        <div class="dropdown" *ngIf="!isLoading && !maintenanceMode">
+            <button mat-button class="white_font" *ngIf="!isLoading && !maintenanceMode">
+                <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> MÓDULOS
+            </button>
+            <button mat-button class="dropbtn white_font">
+                <mat-icon style="margin-bottom: 4px;">arrow_drop_down</mat-icon> MÓDULOS
             </button>
+            <span class="h-16"></span>
+            <div class="dropdown-content">
+            </div>
         </div>
+        -->
     </mat-toolbar-row>
 </mat-toolbar>
 

sistema-mantenimiento-front/src/app/components/template/template.component.ts

@@ -45,6 +45,8 @@ export class TemplateComponent implements OnInit {
 
   public title:string = 'Sistema de Ayuda al Manteniemiento L1';
 
+  modulesActivated = false;
+
   constructor(
     private router: Router,
     private _loginDataService: LoginDataService,
@@ -262,6 +264,8 @@ export class TemplateComponent implements OnInit {
         info: infoEnc
       }
     });
+
+    this.modulesActivated = false;
   }
 
   openDialog(msg: string){

sistema-mantenimiento-front/src/styles.css

@@ -407,6 +407,7 @@ body {
 .ph-64 {padding: 64px 0 !important;}
 
 /* TODO */
+.p-0 {padding: 0 !important;}
 .p-2 {padding: 2px !important;}
 .p-4 {padding: 4px !important;}
 .p-8 {padding: 8px !important;}
@@ -1219,10 +1220,14 @@ mat-toolbar-row,
   -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.75);
   box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.75);
   position: relative;
-  padding: 8px;
+  /*padding: 8px;*/
   /*overflow: hidden;*/
 }
 
+.mat-toolbar-row, .mat-toolbar-single-row{
+  align-items: flex-start !important;
+}
+
 /*Estilos para la ruta de navegación*/
 .items-container {
   width: 75%;