From cc69fc425dfb5e43632b4002a1b15333801d3a01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Romaszkin?= Date: Mon, 20 Apr 2020 18:47:03 +0200 Subject: [PATCH] Add Nebular framework --- frontend/package-lock.json | 39 + frontend/package.json | 7 +- frontend/src/app/app.component.html | 1071 ++++++++++++++------------- frontend/src/app/app.module.ts | 9 +- frontend/src/styles.scss | 7 + frontend/src/themes.scss | 18 + 6 files changed, 621 insertions(+), 530 deletions(-) create mode 100644 frontend/src/themes.scss diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ee82378..de2f028 100644 --- 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", diff --git a/frontend/package.json b/frontend/package.json index 5e3b9d8..190244d 100644 --- 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", diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 0c510c6..6440e33 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,534 +1,549 @@ - - - - - - - - - - - - - - -
- - -
- - - - - - - - - - - - {{ title }} app is running! - - - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - - Learn Angular - - - - - - - CLI Documentation - - - - - - - - Angular Blog - - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
-
- - - New Component + + + + + + + + + + + + + + + + + + + + + - -
- - - Angular Material -
- -
- - - Add PWA Support -
- -
- - - Add Dependency -
- -
- - - Run and Watch Tests -
- -
- - - Build for Production -
-
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build --prod
-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
+ + +
+ + + + + + + + + + + + {{ title }} app is running! + + + + + +
+ + +

Resources

+

Here are some links to help you get started:

+ +
+ + + + Learn Angular + + + + + + + CLI Documentation + + + + + + + + Angular Blog + + + + +
+ + +

Next Steps

+

What do you want to do next with your app?

+ + + +
+
+ + + New Component +
+ +
+ + + Angular Material +
+ +
+ + + Add PWA Support +
+ +
+ + + Add Dependency +
+ +
+ + + Run and Watch Tests +
+ +
+ + + Build for Production +
+
+ + +
+ 
ng generate component xyz
+ 
ng add @angular/material
+ 
ng add @angular/pwa
+ 
ng add _____
+ 
ng test
+ 
ng build --prod
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + +
+ + + + + + - + +
+ + + + + + + + + + + + + - - - - - - - - - + + + - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - -
- - - - - - - - - - - - \ No newline at end of file + diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 2c3ba29..adbb196 100644 --- 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] diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 90d4ee0..229f12f 100644 --- 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 */ diff --git a/frontend/src/themes.scss b/frontend/src/themes.scss new file mode 100644 index 0000000..3322fd6 --- /dev/null +++ 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);