Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add material design to admin #1130

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

feat: add material design to admin #1130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions packages/admin-web-angular/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
73 changes: 73 additions & 0 deletions packages/admin-web-angular/src/app/@theme/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
),
);
25 changes: 25 additions & 0 deletions packages/admin-web-angular/src/app/@theme/styles/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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
Expand Down
16 changes: 16 additions & 0 deletions packages/admin-web-angular/src/app/@theme/styles/variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
7 changes: 6 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down