diff --git a/angular.json b/angular.json
index a750f75..d7425fa 100644
--- a/angular.json
+++ b/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": {
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 6920c8c..d830d21 100644
--- a/src/app/app.component.css
+++ b/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%;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 460cc78..7de60ed 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,32 @@
-add
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f7b3ba7..a98b573 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,9 @@
-import { Component } from '@angular/core';
-import { ElectronService } from './core/services';
-import { APP_CONFIG } from '../environments/environment';
+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;
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2d75f4f..38a12cc 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/game-model/ModelComponentType.ts b/src/app/game-model/ModelComponentType.ts
index a3ceab2..5218558 100644
--- a/src/app/game-model/ModelComponentType.ts
+++ b/src/app/game-model/ModelComponentType.ts
@@ -1,3 +1,5 @@
export enum ModelComponentType {
SCRIPTACCOUNT
+
+
}
diff --git a/src/app/game-model/ModelComponentTypeUtillities.ts b/src/app/game-model/ModelComponentTypeUtillities.ts
new file mode 100644
index 0000000..772ab30
--- /dev/null
+++ b/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";
+ }
+ }
+}
diff --git a/src/styles.scss b/src/styles.scss
deleted file mode 100644
index 4c1c4b2..0000000
--- a/src/styles.scss
+++ /dev/null
@@ -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;
- }
- }
-}
-