Add Nebular framework

2020-04-20 18:47:03 +02:00 · 2020-04-20 18:47:03 +02:00 · cc69fc425d
commit cc69fc425d
parent ebc039b1da
6 changed files with 621 additions and 530 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -199,6 +199,22 @@
      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-9.1.2.tgz",
      "integrity": "sha512-5UJ8SzCtFj4vZChVsni4K9oa4qE9tQ67bwnP6DKxkLEJKQWWyasYp+2siAi/7zD2ro2XA0qRMYhgQz5Vj6eBoQ=="
    },
+    "@angular/cdk": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-9.2.1.tgz",
+      "integrity": "sha512-aSG1UNPszkSnpNuDCNd7ZgT29oQ8vqHPmoqjvJI0JkEv3i6uEs5tRuhWl3TK39wDNuwdlq0AY47XTa/0Ppb5RQ==",
+      "requires": {
+        "parse5": "^5.0.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
    "@angular/cli": {
      "version": "9.1.1",
      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.1.tgz",
@ -1496,6 +1512,19 @@
        }
      }
    },
+    "@nebular/eva-icons": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@nebular/eva-icons/-/eva-icons-5.0.0.tgz",
+      "integrity": "sha512-1kCsQlfEJiNAfd3VxmhZUdk86FHSiNTkKtIvpyA72KKbyiBb4YTqOj3QDsTY9GLScyCxTJZcYF5Dp7KG2DSTUg=="
+    },
+    "@nebular/theme": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-5.0.0.tgz",
+      "integrity": "sha512-xSYyRyuvgT/UPQePB4br6lZtqjTupC2M+QUdLzuezwjeYwWvQw8q+04DQJK+JT+YI2s+LRkkwPsk8b716Ubhfg==",
+      "requires": {
+        "intersection-observer": "0.7.0"
+      }
+    },
    "@ngtools/webpack": {
      "version": "9.1.1",
      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-9.1.1.tgz",
@ -4485,6 +4514,11 @@
      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
      "dev": true
    },
+    "eva-icons": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/eva-icons/-/eva-icons-1.1.3.tgz",
+      "integrity": "sha512-QBSEWNbEx1H0numXP1qgxKVCZHonRaky5ft4pGzQBcO4cy7mEja6TuJ8rc7BqX2pmkvetVQWKDH+DK/8y7GTag=="
+    },
    "eventemitter3": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
@ -5818,6 +5852,11 @@
        "ipaddr.js": "^1.9.0"
      }
    },
+    "intersection-observer": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.7.0.tgz",
+      "integrity": "sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg=="
+    },
    "invariant": {
      "version": "2.2.4",
      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -9,6 +9,7 @@
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.0",
+    "@angular/cdk": "^9.0.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
@ -16,6 +17,9 @@
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
+    "@nebular/eva-icons": "5.0.0",
+    "@nebular/theme": "^5.0.0",
+    "eva-icons": "^1.1.2",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
@ -25,9 +29,10 @@
    "@angular/cli": "~9.1.0",
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
-    "@types/node": "^12.11.1",
+    "@schematics/angular": "~9.1.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@ -1,13 +1,21 @@
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
-<!-- * * * * * * * to get started with your project! * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<nb-layout>

-<style>
+  <nb-layout-header fixed>
+  <!-- Insert header here -->
+  </nb-layout-header>
+
+  <nb-layout-column>
+
+    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+    <!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
+    <!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+    <!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+    <!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
+    <!-- * * * * * * * to get started with your project! * * * * * * * * -->
+    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+    
+    <style>
      :host {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 14px;
@ -296,10 +304,10 @@
          visibility: hidden;
        }
      }
-</style>
+    </style>
    
-<!-- Toolbar -->
-<div class="toolbar" role="banner">
+    <!-- Toolbar -->
+    <div class="toolbar" role="banner">
      <img
        width="40"
        alt="Angular Logo"
@ -313,9 +321,9 @@
            <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
          </svg>
        </a>
-</div>
+    </div>
    
-<div class="content" role="main">
+    <div class="content" role="main">
    
      <!-- Highlight Card -->
      <div class="card highlight-card card-small">
@ -519,16 +527,23 @@
        <path id="Path_39" data-name="Path 39" d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z" transform="translate(142.69 -634.312)" fill="#eee"/>
      </svg>
    
-</div>
+    </div>
    
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+    <!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
+    <!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+    <!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+    <!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
+    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
    
    
    
-<router-outlet></router-outlet>
+    <router-outlet></router-outlet>
+  </nb-layout-column>
+
+  <nb-layout-footer fixed>
+  <!-- Insert footer here -->
+  </nb-layout-footer>
+
+</nb-layout>
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@ -3,6 +3,9 @@ import { NgModule } from '@angular/core';

 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
+import { NbEvaIconsModule } from '@nebular/eva-icons';

@NgModule({
  declarations: [
@ -10,7 +13,11 @@ import { AppComponent } from './app.component';
  ],
  imports: [
    BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    NbThemeModule.forRoot({ name: 'default' }),
+    NbLayoutModule,
+    NbEvaIconsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@ -1 +1,8 @@
+@import 'themes';
+
+@import '~@nebular/theme/styles/globals';
+
+@include nb-install() {
+  @include nb-theme-global();
+};
 /* You can add global styles to this file, and also import other style files */
--- a/frontend/src/themes.scss
+++ b/frontend/src/themes.scss
@ -0,0 +1,18 @@
+@import '~@nebular/theme/styles/theming';
+@import '~@nebular/theme/styles/themes/default';
+
+$nb-themes: nb-register-theme((
+
+  // add your variables here like:
+
+  // color-primary-100: #f2f6ff,
+  // color-primary-200: #d9e4ff,
+  // color-primary-300: #a6c1ff,
+  // color-primary-400: #598bff,
+  // color-primary-500: #3366ff,
+  // color-primary-600: #274bdb,
+  // color-primary-700: #1a34b8,
+  // color-primary-800: #102694,
+  // color-primary-900: #091c7a,
+
+), default, default);