From 55604936ef0b2feac99539ecf5236f123eadefc4 Mon Sep 17 00:00:00 2001 From: Rachit Magon Date: Mon, 22 Jun 2020 22:05:53 +0530 Subject: [PATCH] feat: add material design to admin --- packages/admin-web-angular/package.json | 27 +++---- .../src/app/@theme/styles/_variables.scss | 73 +++++++++++++++++++ .../src/app/@theme/styles/styles.scss | 25 +++++++ .../src/app/@theme/styles/variables.ts | 16 ++++ yarn.lock | 7 +- 5 files changed, 134 insertions(+), 14 deletions(-) create mode 100644 packages/admin-web-angular/src/app/@theme/styles/_variables.scss create mode 100644 packages/admin-web-angular/src/app/@theme/styles/variables.ts diff --git a/packages/admin-web-angular/package.json b/packages/admin-web-angular/package.json index 7a2787d33..ac348450c 100644 --- a/packages/admin-web-angular/package.json +++ b/packages/admin-web-angular/package.json @@ -62,25 +62,28 @@ }, "dependencies": { "@agm/core": "^1.1.0", + "@akveo/ng2-completer": "9.0.1", "@angular/animations": "^9.1.1", + "@angular/cdk": "^9.1.3", "@angular/common": "^9.1.1", + "@angular/compiler": "^9.1.1", "@angular/core": "^9.1.1", "@angular/forms": "^9.1.1", + "@angular/language-service": "^9.1.1", + "@angular/material": "^9.2.4", "@angular/platform-browser": "^9.1.1", "@angular/platform-browser-dynamic": "^9.1.1", "@angular/router": "^9.1.1", - "@angular/language-service": "^9.1.1", - "@angular/compiler": "^9.1.1", - "@angular/cdk": "^9.1.3", + "@asymmetrik/ngx-leaflet": "^6.0.1", + "@ever-co/angular2-wizard": "^0.3.1", + "@ever-platform/common": "file:../common", + "@ever-platform/common-angular": "file:../common-angular", + "@fortawesome/fontawesome-free": "^5.10.0", "@nebular/auth": "^5.0.0", "@nebular/bootstrap": "^5.0.0", "@nebular/eva-icons": "^5.0.0", "@nebular/security": "^5.0.0", "@nebular/theme": "^5.0.0", - "@asymmetrik/ngx-leaflet": "^6.0.1", - "@ever-platform/common": "file:../common", - "@ever-platform/common-angular": "file:../common-angular", - "@fortawesome/fontawesome-free": "^5.10.0", "@ng-bootstrap/ng-bootstrap": "^5.1.0", "@ng-select/ng-select": "^3.0.4", "@ngx-translate/core": "^12.1.2", @@ -90,7 +93,6 @@ "angular-tree-component": "^8.3.0", "angular2-chartjs": "^0.5.1", "angular2-toaster": "^8.0.0", - "@ever-co/angular2-wizard": "^0.3.1", "apollo-angular": "^1.6.0", "apollo-angular-link-http": "^1.7.0", "apollo-cache-inmemory": "^1.6.2", @@ -125,7 +127,6 @@ "moment": "^2.24.0", "ng-simple-slideshow": "^1.2.9", "ng2-ckeditor": "^1.2.2", - "@akveo/ng2-completer": "9.0.1", "ng2-file-upload": "^1.3.0", "ng2-simple-timer": "^6.0.0", "ng2-smart-table": "^1.6.0", @@ -159,22 +160,22 @@ "devDependencies": { "@angular-builders/custom-webpack": "^9.1.0", "@angular-devkit/architect": "^0.901.1", + "@angular-devkit/build-angular": "~0.900.7", "@angular-devkit/build-optimizer": "^0.901.1", "@angular-devkit/build-webpack": "^0.901.1", "@angular-devkit/core": "^9.1.1", "@angular-devkit/schematics": "^9.1.1", - "@angular-devkit/build-angular": "~0.900.7", "@angular/cli": "~9.0.4", "@angular/compiler-cli": "~9.0.3", - "@types/node": "^12.11.1", - "@types/jasmine": "~3.5.0", - "@types/jasminewd2": "~2.0.3", "@storybook/addon-actions": "^5.3.17", "@storybook/addon-knobs": "^5.3.17", "@storybook/addon-links": "^5.3.17", "@storybook/addon-notes": "^5.3.17", "@storybook/addons": "^5.3.17", "@storybook/angular": "^5.3.17", + "@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/packages/admin-web-angular/src/app/@theme/styles/_variables.scss b/packages/admin-web-angular/src/app/@theme/styles/_variables.scss new file mode 100644 index 000000000..a74afb032 --- /dev/null +++ b/packages/admin-web-angular/src/app/@theme/styles/_variables.scss @@ -0,0 +1,73 @@ +$brand: #2a2c39; +$brand-lighted: #353748; +$brand-darken: darken($brand, 5%); // #1f212a + +$assertive: #bd4742; +$assertive-lighted: #ce4843; +$assertive-darken: darken($assertive, 5%); // #aa403b + +$ever-md-primary: ( + 50: #e5e6e7, + 100: #bfc0c4, + 200: #95969c, + 300: #6a6b74, + 400: #4a4c57, + 500: #2a2c39, + 600: #252733, + 700: #1f212c, + 800: #191b24, + 900: #0f1017, + A100: #5c77ff, + A200: #294cff, + A400: #0029f5, + A700: #0025db, + contrast: ( + 50: #000000, + 100: #000000, + 200: #000000, + 300: #ffffff, + 400: #ffffff, + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: #ffffff, + A200: #ffffff, + A400: #ffffff, + A700: #ffffff, + ), +); + +$ever-md-accent: ( + 50: #f7e9e8, + 100: #ebc8c6, + 200: #dea3a1, + 300: #d17e7b, + 400: #c7635e, + 500: #bd4742, + 600: #b7403c, + 700: #ae3733, + 800: #a62f2b, + 900: #98201d, + A100: #ffd3d2, + A200: #ffa09f, + A400: #ff6e6c, + A700: #ff5552, + contrast: ( + 50: #000000, + 100: #000000, + 200: #000000, + 300: #000000, + 400: #000000, + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: #000000, + A200: #000000, + A400: #000000, + A700: #000000, + ), +); diff --git a/packages/admin-web-angular/src/app/@theme/styles/styles.scss b/packages/admin-web-angular/src/app/@theme/styles/styles.scss index 05e20565a..9b4dd8297 100644 --- a/packages/admin-web-angular/src/app/@theme/styles/styles.scss +++ b/packages/admin-web-angular/src/app/@theme/styles/styles.scss @@ -3,6 +3,8 @@ // framework component themes (styles tied to theme variables) @import '~@nebular/theme/styles/globals'; @import '~@nebular/auth/styles/all'; +@import '~@angular/material/theming'; +@import 'variables'; @import '~@nebular/bootstrap/styles/globals'; @@ -25,6 +27,29 @@ @import '~@ng-select/ng-select/themes/default.theme.css'; +// Include the common styles for Angular Material. We include this here so that you only +// have to load a single css file for Angular Material in your app. +// Be sure that you only ever include this mixin once! +@include mat-core(); + +// Define the palettes for your theme using the Material Design palettes available in palette.scss +// (imported above). For each palette, you can optionally specify a default, lighter, and darker +// hue. +$app-primary: mat-palette($ever-md-primary); +$app-accent: mat-palette($ever-md-accent); + +// The warn palette is optional (defaults to red). +$app-warn: mat-palette($ever-md-accent); + +// Create the theme object (a Sass map containing all of the palettes). +$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn); + +// Include theme styles for core and each component used in your app. +// Alternatively, you can import and @include the theme mixins for each component +// that you are using. +@include angular-material-theme($app-theme); +// @import '~material-components-web/material-components-web'; + // In the future versions of ngx-highlight we need to import theme globally // @import 'node_modules/highlight.js/styles/github'; // install the framework and custom global styles diff --git a/packages/admin-web-angular/src/app/@theme/styles/variables.ts b/packages/admin-web-angular/src/app/@theme/styles/variables.ts new file mode 100644 index 000000000..c8aa398a6 --- /dev/null +++ b/packages/admin-web-angular/src/app/@theme/styles/variables.ts @@ -0,0 +1,16 @@ +// import variablesScss from 'sass-extract-loader!./_variables.scss'; + +export function styleVariable(name: string) { + const variablesScss = require('sass-extract-loader!./_variables.scss'); + return variablesScss.global[`$${name}`].value; +} + +export namespace styleVariables { + export const brand = styleVariable('brand').hex; + export const brandLighted = styleVariable('brand-lighted').hex; + export const brandDarken = styleVariable('brand-darken').hex; + + export const assertive = styleVariable('assertive').hex; + export const assertiveLighted = styleVariable('assertive-lighted').hex; + export const assertiveDarken = styleVariable('assertive-darken').hex; +} diff --git a/yarn.lock b/yarn.lock index 20d84c013..e6eaee8bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -429,6 +429,11 @@ resolved "https://registry.yarnpkg.com/@angular/material/-/material-9.2.2.tgz#53b2d8a62fe48b79127cdf43b3b8b082e4c3df27" integrity sha512-gdQiMJ6PtW/5fd+0mglHFyzxULDCBGjn9RTET3sUq2rkc9+jBXr4OvnsUyBWSnqqv97XqotVDIx5JgE4/YX/Rw== +"@angular/material@^9.2.4": + version "9.2.4" + resolved "https://packages.services.inno-charge.de/@angular%2fmaterial/-/material-9.2.4.tgz#2666ef606fbb88d60f8e2f18c5e4f94a3dd572d8" + integrity sha512-LkoTXE6B0slvMhvfZDdPWaz4yaYLkaAp5VSPunI9pxGsPxzqEV9e210wC1/sjG/76Nk8Ep7/2z9XKac8Q9bMwA== + "@angular/platform-browser-dynamic@^9.1.0", "@angular/platform-browser-dynamic@^9.1.1": version "9.1.4" resolved "https://registry.yarnpkg.com/@angular/platform-browser-dynamic/-/platform-browser-dynamic-9.1.4.tgz#bf1cde9156bd29eeeef932b683b0c993614f75d5" @@ -2046,7 +2051,7 @@ "@angular/platform-browser-dynamic" "^9.1.0" "@angular/router" "^9.1.0" "@angular/service-worker" "^9.1.0" - "@ever-platform/common" "file:C:/Users/Alish/AppData/Local/Yarn/Cache/v4/npm-@ever-platform-common-angular-0.3.0-908281c7-a6e3-4151-85b0-a93d821f77e5-1589281352293/node_modules/@ever-platform/common" + "@ever-platform/common" "file:../../Library/Caches/Yarn/v4/npm-@ever-platform-common-angular-0.3.0-8d9d670b-1cc3-4851-beb0-a19e2801fc24-1592842867890/node_modules/@ever-platform/common" "@ngx-translate/core" "^12.1.2" "@ngx-translate/http-loader" "^4.0.0" tslib "^1.10.0"