feat(global): add Angular Material (#42)

Co-authored-by: Daniel Liverant <daniel.liverant@hibob.com>
e-square-io · Feb 19, 2023 · dcb5443 · dcb5443
1 parent 79cad0b
commit dcb5443
Show file tree

Hide file tree

Showing 9 changed files with 809 additions and 6 deletions.
diff --git a/apps/cli-gui/src/app/app.component.html b/apps/cli-gui/src/app/app.component.html
@@ -1,11 +1,14 @@
 <ng-container *ngIf="core.coreState$ | async as coreState">
   <header class="main-header">
     <div class="project-selector">
-      <select name="project-selector" id="project-selector">
-        <option *ngFor="let project of coreState.projectNames" value="project">
+      <mat-select name="project-selector" id="project-selector">
+        <mat-option
+          *ngFor="let project of coreState.projectNames"
+          [value]="project"
+        >
           {{ project }}
-        </option>
-      </select>
+        </mat-option>
+      </mat-select>
     </div>
   </header>
   <main>

diff --git a/apps/cli-gui/src/app/app.component.ts b/apps/cli-gui/src/app/app.component.ts
@@ -1,12 +1,13 @@
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
+import { MatSelectModule } from '@angular/material/select';
 import { RouterOutlet } from '@angular/router';
 
 import { CoreService } from './core/core.service';
 
 @Component({
   standalone: true,
-  imports: [NgFor, NgIf, AsyncPipe, RouterOutlet],
+  imports: [NgFor, NgIf, AsyncPipe, RouterOutlet, MatSelectModule],
   selector: 'cli-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],

diff --git a/apps/cli-gui/src/assets/material/core.scss b/apps/cli-gui/src/assets/material/core.scss
@@ -0,0 +1,19 @@
+@use '@angular/material' as mat;
+
+@include mat.core();
+
+$my-primary: mat.define-palette(mat.$indigo-palette, 500);
+$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+
+$my-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $my-primary,
+      accent: $my-accent,
+    ),
+    typography: mat.define-typography-config(),
+    density: 0,
+  )
+);
+
+@include mat.all-component-themes($my-theme);
diff --git a/apps/cli-gui/src/assets/material/index.scss b/apps/cli-gui/src/assets/material/index.scss
@@ -0,0 +1 @@
+@import './core';
diff --git a/apps/cli-gui/src/index.html b/apps/cli-gui/src/index.html
@@ -6,8 +6,17 @@
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
   </head>
-  <body>
+  <body class="mat-typography">
     <cli-root></cli-root>
   </body>
 </html>
diff --git a/apps/cli-gui/src/main.ts b/apps/cli-gui/src/main.ts
@@ -1,6 +1,7 @@
 import { HttpClient, provideHttpClient } from '@angular/common/http';
 import { APP_INITIALIZER } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
 import {
   provideRouter,
   withEnabledBlockingInitialNavigation,
@@ -15,6 +16,7 @@ bootstrapApplication(AppComponent, {
   providers: [
     provideRouter(appRoutes, withEnabledBlockingInitialNavigation()),
     provideHttpClient(),
+    provideAnimations(),
     {
       provide: APP_INITIALIZER,
       useFactory: (http: HttpClient, core: CoreService) => () =>

diff --git a/apps/cli-gui/src/styles.scss b/apps/cli-gui/src/styles.scss
@@ -1 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
+@import './assets/material';
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}
diff --git a/package.json b/package.json
@@ -17,10 +17,12 @@
   "dependencies": {
     "@angular-devkit/core": "~15.1.0",
     "@angular/animations": "~15.1.0",
+    "@angular/cdk": "~15.1.5",
     "@angular/common": "~15.1.0",
     "@angular/compiler": "~15.1.0",
     "@angular/core": "~15.1.0",
     "@angular/forms": "~15.1.0",
+    "@angular/material": "~15.1.5",
     "@angular/platform-browser": "~15.1.0",
     "@angular/platform-browser-dynamic": "~15.1.0",
     "@angular/router": "~15.1.0",