Implement menu container and mat-drawer for visualizing scriptaccount overview

angular.json

@@ -30,13 +30,13 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
-            "inlineStyleLanguage": "scss",
+            "inlineStyleLanguage": "css",
             "assets": [
               "src/favicon.ico",
               "src/assets"
             ],
             "styles": [
-              "src/styles.scss"
+              "src/styles.css"
             ],
             "scripts": [],
             "customWebpackConfig": {

src/app/app.component.css

@@ -1,3 +1,103 @@
-.background {
+.full-height-container {
+  height: 99vh;
+  background-color: #2b2d30;
+  width: 40px;
+
+  border-right: #b9b9b9;
+  border-right-style: solid;
+  border-right-width: 1px;
+}
+
+.small-icon-button {
+  width: 28px !important;
+  height: 28px !important;
+  padding: 0px !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  margin-left: 5px;
+  margin-bottom: 10px;
+
+  & > *[role=img] {
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .mat-mdc-button-touch-target {
+    width: 24px !important;
+    height: 24px !important;
+  }
+}
+
+.small-icon-button mat-icon {
+  color: whitesmoke;
+}
+
+.selected {
+  background-color: #4e5157;
+}
+
+.example-container {
+  width: 100%;
+  height: 100vh;
+}
+
+.example-sidenav-content {
+  display: flex;
+  height: 100%;
+}
+
+.example-sidenav {
+
+}
+
+.container {
+  padding: 0;
+  display: flex;
+}
+
+/* Adjust the vertical alignment of the icon within the button */
+.mat-button-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: none;
+  border-radius: 5px;
+  padding-right: 12px;
+}
+
+.sidenav-header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.close-sidenav-btn {
+  margin-top: 5px;
+  display: none;
+}
+
+.sidenav-header:hover + .close-sidenav-btn {
+  display: block;
   color: red;
 }
+
+app-editor {
+  width: 100%;
+}
+
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/app/app.component.html

@@ -1 +1,32 @@
-<mat-icon>add</mat-icon>
+<div class="container">
+  <div class="full-height-container">
+    <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.SCRIPTACCOUNT ? 'selected':''"
+            (click)="openScriptAccountsOverview()"><mat-icon>inventory_2</mat-icon></button>
+  </div>
+
+
+  <mat-drawer-container class="example-container" autosize>
+    <mat-drawer #drawer class="example-sidenav" mode="side">
+      <div class="sidenav-header">
+        <button mat-button [matMenuTriggerFor]="contentMenu">
+          <span class="mat-button-wrapper">{{ModelComponentTypeUtillities.toString(openContent)}}
+            <mat-icon class="mat-icon">expand_more</mat-icon>
+          </span>
+        </button>
+
+        <button mat-icon-button class="small-icon-button close-sidenav-btn" (click)="closeContentOverview()"><mat-icon>close</mat-icon></button>
+        <mat-menu #contentMenu="matMenu">
+          <button mat-menu-item (click)="openScriptAccountsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.SCRIPTACCOUNT)}}</button>
+        </mat-menu>
+
+
+      </div>
+    </mat-drawer>
+
+    <div class="example-sidenav-content">
+
+    </div>
+
+  </mat-drawer-container>
+
+</div>

src/app/app.component.ts

@@ -1,6 +1,9 @@
-import { Component } from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {ElectronService} from './core/services';
 import {APP_CONFIG} from '../environments/environment';
+import {ModelComponentType} from "./game-model/ModelComponentType";
+import {MatDrawerContainer} from "@angular/material/sidenav";
+import {ModelComponentTypeUtillities} from "./game-model/ModelComponentTypeUtillities";
 
 @Component({
   selector: 'app-root',
@@ -8,6 +11,10 @@ import { APP_CONFIG } from '../environments/environment';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
+
+  openContent : ModelComponentType | undefined = undefined;
+  @ViewChild('drawer') drawer: MatDrawerContainer|undefined
+
   constructor(
     private electronService: ElectronService,
   ) {
@@ -22,4 +29,18 @@ export class AppComponent {
       console.log('Run in browser');
     }
   }
+
+  openScriptAccountsOverview() {
+    this.openContent = ModelComponentType.SCRIPTACCOUNT
+    this.drawer!.open();
+  }
+
+  protected readonly ModelComponentType = ModelComponentType;
+
+  closeContentOverview() {
+    this.drawer!.close();
+    this.openContent = undefined;
+  }
+
+  protected readonly ModelComponentTypeUtillities = ModelComponentTypeUtillities;
 }

src/app/app.module.ts

@@ -12,6 +12,12 @@ import {CoreModule} from "./core/core.module";
 import {SharedModule} from "./shared/shared.module";
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatIcon} from "@angular/material/icon";
+import {MatToolbar} from "@angular/material/toolbar";
+import {MatButton, MatIconButton} from "@angular/material/button";
+import {MatFormField} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {MatDrawer, MatDrawerContainer} from "@angular/material/sidenav";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -32,7 +38,17 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
       }
     }),
     BrowserAnimationsModule,
-    MatIcon
+    MatIcon,
+    MatToolbar,
+    MatButton,
+    MatFormField,
+    MatInput,
+    MatDrawerContainer,
+    MatDrawer,
+    MatIconButton,
+    MatMenuTrigger,
+    MatMenu,
+    MatMenuItem
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/game-model/ModelComponentType.ts

@@ -1,3 +1,5 @@
 export enum ModelComponentType {
   SCRIPTACCOUNT
+
+
 }

src/app/game-model/ModelComponentTypeUtillities.ts

@@ -0,0 +1,10 @@
+import {ModelComponentType} from "./ModelComponentType";
+
+export class ModelComponentTypeUtillities {
+  static toString(modelComponentType: ModelComponentType | undefined): string {
+    switch (modelComponentType) {
+      case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccounts";
+      default: return "Undefined";
+    }
+  }
+}

src/styles.scss

@@ -1,50 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
-html, body {
-  margin: 0;
-  padding: 0;
-
-  height: 100%;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-/* CAN (MUST) BE REMOVED ! Sample Global style */
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  background: url(./assets/background.jpg) no-repeat center fixed;
-  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
-  background-size: cover; /* version standardisée */
-
-  .title {
-    color: white;
-    margin: 0;
-    padding: 50px 20px;
-  }
-
-  a {
-    color: #fff !important;
-    text-transform: uppercase;
-    text-decoration: none;
-    background: #ed3330;
-    padding: 20px;
-    border-radius: 5px;
-    display: inline-block;
-    border: none;
-    transition: all 0.4s ease 0s;
-
-    &:hover {
-      background: #fff;
-      color: #ed3330 !important;
-      letter-spacing: 1px;
-      -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-      -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-      box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
-      transition: all 0.4s ease 0s;
-    }
-  }
-}
-