Mise à jour d'Angular
+ Correction sur lageur de colonnes
This commit is contained in:
@@ -11,7 +11,6 @@
|
|||||||
"build": {
|
"build": {
|
||||||
"builder": "@angular-devkit/build-angular:browser",
|
"builder": "@angular-devkit/build-angular:browser",
|
||||||
"options": {
|
"options": {
|
||||||
"aot": true,
|
|
||||||
"outputPath": "dist",
|
"outputPath": "dist",
|
||||||
"index": "src/index.html",
|
"index": "src/index.html",
|
||||||
"main": "src/main.ts",
|
"main": "src/main.ts",
|
||||||
@@ -27,7 +26,13 @@
|
|||||||
"src/assets/css/custom-theme-dark.scss",
|
"src/assets/css/custom-theme-dark.scss",
|
||||||
"src/assets/css/styles.css"
|
"src/assets/css/styles.css"
|
||||||
],
|
],
|
||||||
"scripts": []
|
"scripts": [],
|
||||||
|
"vendorChunk": true,
|
||||||
|
"extractLicenses": false,
|
||||||
|
"buildOptimizer": false,
|
||||||
|
"sourceMap": true,
|
||||||
|
"optimization": false,
|
||||||
|
"namedChunks": true
|
||||||
},
|
},
|
||||||
"configurations": {
|
"configurations": {
|
||||||
"production": {
|
"production": {
|
||||||
@@ -41,7 +46,6 @@
|
|||||||
"outputHashing": "all",
|
"outputHashing": "all",
|
||||||
"sourceMap": false,
|
"sourceMap": false,
|
||||||
"namedChunks": false,
|
"namedChunks": false,
|
||||||
"aot": true,
|
|
||||||
"extractLicenses": true,
|
"extractLicenses": true,
|
||||||
"vendorChunk": false,
|
"vendorChunk": false,
|
||||||
"buildOptimizer": true,
|
"buildOptimizer": true,
|
||||||
|
|||||||
8613
Front/skydivelogs-app/package-lock.json
generated
8613
Front/skydivelogs-app/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -12,48 +12,48 @@
|
|||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "^11.2.7",
|
"@angular/animations": "^12.0.2",
|
||||||
"@angular/cdk": "^11.2.6",
|
"@angular/cdk": "^12.0.2",
|
||||||
"@angular/common": "^11.2.7",
|
"@angular/common": "^12.0.2",
|
||||||
"@angular/compiler": "^11.2.7",
|
"@angular/compiler": "^12.0.2",
|
||||||
"@angular/core": "^11.2.7",
|
"@angular/core": "^12.0.2",
|
||||||
"@angular/forms": "^11.2.7",
|
"@angular/forms": "^12.0.2",
|
||||||
"@angular/material": "^11.2.6",
|
"@angular/material": "^12.0.2",
|
||||||
"@angular/platform-browser": "^11.2.7",
|
"@angular/platform-browser": "^12.0.2",
|
||||||
"@angular/platform-browser-dynamic": "^11.2.7",
|
"@angular/platform-browser-dynamic": "^12.0.2",
|
||||||
"@angular/router": "^11.2.7",
|
"@angular/router": "^12.0.2",
|
||||||
"@ngx-translate/core": "^13.0.0",
|
"@ngx-translate/core": "^13.0.0",
|
||||||
"@ngx-translate/http-loader": "^6.0.0",
|
"@ngx-translate/http-loader": "^6.0.0",
|
||||||
"bufferutil": "^4.0.3",
|
"bufferutil": "^4.0.3",
|
||||||
"core-js": "^2.6.12",
|
"core-js": "^2.6.12",
|
||||||
"fibers": "^5.0.0",
|
"fibers": "^5.0.0",
|
||||||
"html-webpack-plugin": "^4.5.1",
|
"html-webpack-plugin": "^4.5.2",
|
||||||
"node-sass": "^4.14.1",
|
|
||||||
"rxjs": "^6.6.7",
|
"rxjs": "^6.6.7",
|
||||||
"rxjs-compat": "^6.6.3",
|
"rxjs-compat": "^6.6.7",
|
||||||
"tslib": "^2.0.0",
|
"sass": "^1.34.0",
|
||||||
"utf-8-validate": "^5.0.4",
|
"tslib": "^2.2.0",
|
||||||
"zone.js": "^0.10.3"
|
"utf-8-validate": "^5.0.5",
|
||||||
|
"zone.js": "~0.11.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "^0.1102.6",
|
"@angular-devkit/build-angular": "^12.0.2",
|
||||||
"@angular/cli": "^11.2.6",
|
"@angular/cli": "^12.0.2",
|
||||||
"@angular/compiler-cli": "^11.2.7",
|
"@angular/compiler-cli": "^12.0.2",
|
||||||
"@angular/language-service": "^11.2.7",
|
"@angular/language-service": "^12.0.2",
|
||||||
"@types/jasmine": "~3.6.0",
|
"@types/jasmine": "^3.6.11",
|
||||||
"@types/jasminewd2": "^2.0.8",
|
"@types/jasminewd2": "^2.0.9",
|
||||||
"@types/node": "^12.19.12",
|
"@types/node": "^12.20.13",
|
||||||
"codelyzer": "^6.0.0",
|
"codelyzer": "^6.0.2",
|
||||||
"jasmine-core": "~3.6.0",
|
"jasmine-core": "~3.6.0",
|
||||||
"jasmine-spec-reporter": "~5.0.0",
|
"jasmine-spec-reporter": "~5.0.0",
|
||||||
"karma": "^6.3.2",
|
"karma": "^6.3.2",
|
||||||
"karma-chrome-launcher": "~3.1.0",
|
"karma-chrome-launcher": "~3.1.0",
|
||||||
"karma-coverage-istanbul-reporter": "^1.2.1",
|
"karma-coverage-istanbul-reporter": "^1.2.1",
|
||||||
"karma-jasmine": "~4.0.0",
|
"karma-jasmine": "~4.0.0",
|
||||||
"karma-jasmine-html-reporter": "^1.5.0",
|
"karma-jasmine-html-reporter": "^1.6.0",
|
||||||
"protractor": "^7.0.0",
|
"protractor": "^7.0.0",
|
||||||
"ts-node": "~4.1.0",
|
"ts-node": "~4.1.0",
|
||||||
"tslint": "~6.1.3",
|
"tslint": "~6.1.3",
|
||||||
"typescript": "~4.0.5"
|
"typescript": "~4.2.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<div *ngIf="dataSourceTable != null else loading">
|
<div *ngIf="dataSourceTable != null else loading">
|
||||||
<table mat-table [dataSource]="dataSourceTable">
|
<table mat-table [dataSource]="dataSourceTable">
|
||||||
<ng-container matColumnDef="infos">
|
<ng-container matColumnDef="infos">
|
||||||
<th mat-header-cell *matHeaderCellDef style="min-width: 90px;"></th>
|
<th mat-header-cell *matHeaderCellDef style="min-width: 80px;"></th>
|
||||||
<td mat-cell *matCellDef="let element" style="text-align: left;">
|
<td mat-cell *matCellDef="let element" style="text-align: left;">
|
||||||
<mat-icon aria-hidden="false" aria-label="Additional informations of the jump"
|
<mat-icon aria-hidden="false" aria-label="Additional informations of the jump"
|
||||||
style="cursor: pointer;" (click)='openDialog(element, false)'>info</mat-icon>
|
style="cursor: pointer;" (click)='openDialog(element, false)'>info</mat-icon>
|
||||||
@@ -15,7 +15,7 @@
|
|||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container matColumnDef="id">
|
<ng-container matColumnDef="id">
|
||||||
<th mat-header-cell *matHeaderCellDef style="min-width: 90px;">Num</th>
|
<th mat-header-cell *matHeaderCellDef style="min-width: 70px;">Num</th>
|
||||||
<td mat-cell *matCellDef="let element; let i = index">
|
<td mat-cell *matCellDef="let element; let i = index">
|
||||||
{{ resultsLength - ( (dataSourceTable.paginator.pageIndex * dataSourceTable.paginator.pageSize ) + i ) }}
|
{{ resultsLength - ( (dataSourceTable.paginator.pageIndex * dataSourceTable.paginator.pageSize ) + i ) }}
|
||||||
</td>
|
</td>
|
||||||
@@ -29,14 +29,14 @@
|
|||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container matColumnDef="jumpType">
|
<ng-container matColumnDef="jumpType">
|
||||||
<th mat-header-cell *matHeaderCellDef>Jump Type</th>
|
<th mat-header-cell *matHeaderCellDef style="min-width: 100px;">Jump Type</th>
|
||||||
<td mat-cell *matCellDef="let element">
|
<td mat-cell *matCellDef="let element">
|
||||||
<span class="smallSpanWithBreakWord" [innerHTML]="element.jumpType.name"></span>
|
<span class="smallSpanWithBreakWord" [innerHTML]="element.jumpType.name"></span>
|
||||||
</td>
|
</td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container matColumnDef="aircraft">
|
<ng-container matColumnDef="aircraft">
|
||||||
<th mat-header-cell *matHeaderCellDef>Aircraft</th>
|
<th mat-header-cell *matHeaderCellDef style="min-width: 110px;">Aircraft</th>
|
||||||
<td mat-cell *matCellDef="let element">
|
<td mat-cell *matCellDef="let element">
|
||||||
<span class="smallSpanWithBreakWord" [innerHTML]="element.aircraft.name"></span>
|
<span class="smallSpanWithBreakWord" [innerHTML]="element.aircraft.name"></span>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@@ -80,35 +80,35 @@ export class SummaryComponent implements OnInit {
|
|||||||
case 2:
|
case 2:
|
||||||
this.serviceApi.getStatsByDz()
|
this.serviceApi.getStatsByDz()
|
||||||
.subscribe(data => {
|
.subscribe(data => {
|
||||||
data.sort((a, b) => b.nb - a.nb );
|
data.sort((a, b) => b.nb - a.nb);
|
||||||
this.dsNbJumpByDz = new MatTableDataSource(data);
|
this.dsNbJumpByDz = new MatTableDataSource(data);
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 3:
|
case 3:
|
||||||
this.serviceApi.getStatsByAircraft()
|
this.serviceApi.getStatsByAircraft()
|
||||||
.subscribe(data => {
|
.subscribe(data => {
|
||||||
data.sort((a, b) => b.nb - a.nb );
|
data.sort((a, b) => b.nb - a.nb);
|
||||||
this.dsNbJumpByAircraft = new MatTableDataSource(data);
|
this.dsNbJumpByAircraft = new MatTableDataSource(data);
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 4:
|
case 4:
|
||||||
this.serviceApi.getStatsByGear()
|
this.serviceApi.getStatsByGear()
|
||||||
.subscribe(data => {
|
.subscribe(data => {
|
||||||
data.sort((a, b) => b.label.localeCompare(a.label) );
|
data.sort((a, b) => b.nb - a.nb);
|
||||||
this.dsNbJumpByGear = new MatTableDataSource(data);
|
this.dsNbJumpByGear = new MatTableDataSource(data);
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 5:
|
case 5:
|
||||||
this.serviceApi.getStatsByJumpType()
|
this.serviceApi.getStatsByJumpType()
|
||||||
.subscribe(data => {
|
.subscribe(data => {
|
||||||
data.sort((a, b) => b.nb - a.nb );
|
data.sort((a, b) => b.nb - a.nb);
|
||||||
this.dsNbJumpByType = new MatTableDataSource(data);
|
this.dsNbJumpByType = new MatTableDataSource(data);
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 6:
|
case 6:
|
||||||
this.serviceApi.getStatsByYear()
|
this.serviceApi.getStatsByYear()
|
||||||
.subscribe(data => {
|
.subscribe(data => {
|
||||||
data.sort((a, b) => b.nb - a.nb );
|
data.sort((a, b) => b.label.localeCompare(a.label));
|
||||||
this.dsNbJumpByYear = new MatTableDataSource(data);
|
this.dsNbJumpByYear = new MatTableDataSource(data);
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
* https://materialtheme.arcsine.dev
|
* https://materialtheme.arcsine.dev
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@use '~@angular/material' as mat;
|
||||||
@import '~@angular/material/theming';
|
@import '~@angular/material/theming';
|
||||||
// Include the common styles for Angular Material. We include this here so that you only
|
// 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.
|
// have to load a single css file for Angular Material in your app.
|
||||||
@@ -14,19 +15,19 @@
|
|||||||
// @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
|
// @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
|
||||||
|
|
||||||
$fontConfig: (
|
$fontConfig: (
|
||||||
display-4: mat-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
|
display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em),
|
||||||
display-3: mat-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
|
display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em),
|
||||||
display-2: mat-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
|
display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em),
|
||||||
display-1: mat-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
|
display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em),
|
||||||
headline: mat-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
|
headline: mat.define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em),
|
||||||
title: mat-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
|
title: mat.define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em),
|
||||||
subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
|
subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em),
|
||||||
subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
|
subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em),
|
||||||
body-2: mat-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
|
body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em),
|
||||||
body-1: mat-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
|
body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em),
|
||||||
button: mat-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
|
button: mat.define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em),
|
||||||
caption: mat-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
|
caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em),
|
||||||
input: mat-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
|
input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
|
||||||
);
|
);
|
||||||
|
|
||||||
// Foreground Elements
|
// Foreground Elements
|
||||||
@@ -39,7 +40,7 @@ $dark-disabled-text: rgba($dark-primary-text, 0.38);
|
|||||||
$dark-dividers: rgba($dark-primary-text, 0.12);
|
$dark-dividers: rgba($dark-primary-text, 0.12);
|
||||||
$dark-focused: rgba($dark-primary-text, 0.12);
|
$dark-focused: rgba($dark-primary-text, 0.12);
|
||||||
|
|
||||||
$mat-light-theme-foreground: (
|
mat.$light-theme-foreground-palette: (
|
||||||
base: black,
|
base: black,
|
||||||
divider: $dark-dividers,
|
divider: $dark-dividers,
|
||||||
dividers: $dark-dividers,
|
dividers: $dark-dividers,
|
||||||
@@ -66,7 +67,7 @@ $light-disabled-text: rgba($light-primary-text, 0.5);
|
|||||||
$light-dividers: rgba($light-primary-text, 0.12);
|
$light-dividers: rgba($light-primary-text, 0.12);
|
||||||
$light-focused: rgba($light-primary-text, 0.12);
|
$light-focused: rgba($light-primary-text, 0.12);
|
||||||
|
|
||||||
$mat-dark-theme-foreground: (
|
mat.$dark-theme-foreground-palette: (
|
||||||
base: $light-text,
|
base: $light-text,
|
||||||
divider: $light-dividers,
|
divider: $light-dividers,
|
||||||
dividers: $light-dividers,
|
dividers: $light-dividers,
|
||||||
@@ -97,7 +98,7 @@ $dark-bg-tooltip: lighten(#2c2c2c, 20%);
|
|||||||
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
|
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
|
||||||
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
|
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
|
||||||
|
|
||||||
$mat-light-theme-background: (
|
mat.$light-theme-background-palette: (
|
||||||
background: $light-background,
|
background: $light-background,
|
||||||
status-bar: $light-bg-darker-20,
|
status-bar: $light-bg-darker-20,
|
||||||
app-bar: $light-bg-darker-5,
|
app-bar: $light-bg-darker-5,
|
||||||
@@ -125,7 +126,7 @@ $light-bg-alpha-4: rgba(#fafafa, 0.04);
|
|||||||
$light-bg-alpha-12: rgba(#fafafa, 0.12);
|
$light-bg-alpha-12: rgba(#fafafa, 0.12);
|
||||||
|
|
||||||
// Background palette for dark themes.
|
// Background palette for dark themes.
|
||||||
$mat-dark-theme-background: (
|
mat.$dark-theme-background-palette: (
|
||||||
background: $dark-background,
|
background: $dark-background,
|
||||||
status-bar: $dark-bg-lighter-20,
|
status-bar: $dark-bg-lighter-20,
|
||||||
app-bar: $dark-bg-lighter-5,
|
app-bar: $dark-bg-lighter-5,
|
||||||
@@ -144,7 +145,7 @@ $mat-dark-theme-background: (
|
|||||||
);
|
);
|
||||||
|
|
||||||
// Compute font config
|
// Compute font config
|
||||||
@include mat-core($fontConfig);
|
@include mat.core($fontConfig);
|
||||||
|
|
||||||
// Theme Config
|
// Theme Config
|
||||||
|
|
||||||
@@ -168,7 +169,7 @@ $mat-primary: (
|
|||||||
darker: $light-primary-text,
|
darker: $light-primary-text,
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
$theme-primary: mat-palette($mat-primary, main, lighter, darker);
|
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
|
||||||
|
|
||||||
body {
|
body {
|
||||||
--accent-color: #797979;
|
--accent-color: #797979;
|
||||||
@@ -190,7 +191,7 @@ $mat-accent: (
|
|||||||
darker: $light-primary-text,
|
darker: $light-primary-text,
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
$theme-accent: mat-palette($mat-accent, main, lighter, darker);
|
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
|
||||||
|
|
||||||
body {
|
body {
|
||||||
--warn-color: #ff0000;
|
--warn-color: #ff0000;
|
||||||
@@ -212,16 +213,16 @@ $mat-warn: (
|
|||||||
darker: $light-primary-text,
|
darker: $light-primary-text,
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
$theme-warn: mat-palette($mat-warn, main, lighter, darker);;
|
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);;
|
||||||
|
|
||||||
$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
|
$theme: mat.define-dark-theme($theme-primary, $theme-accent, $theme-warn);
|
||||||
$altTheme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
|
$altTheme: mat.define-light-theme($theme-primary, $theme-accent, $theme-warn);
|
||||||
|
|
||||||
// Theme Init
|
// Theme Init
|
||||||
@include angular-material-theme($theme);
|
@include mat.all-component-themes($theme);
|
||||||
|
|
||||||
.theme-alternate {
|
.theme-alternate {
|
||||||
@include angular-material-theme($altTheme);
|
@include mat.all-component-themes($altTheme);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Specific component overrides, pieces that are not in line with the general theming
|
// Specific component overrides, pieces that are not in line with the general theming
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
* https://materialtheme.arcsine.dev
|
* https://materialtheme.arcsine.dev
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@use '~@angular/material' as mat;
|
||||||
@import '~@angular/material/theming';
|
@import '~@angular/material/theming';
|
||||||
// Include the common styles for Angular Material. We include this here so that you only
|
// 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.
|
// have to load a single css file for Angular Material in your app.
|
||||||
@@ -12,19 +13,19 @@
|
|||||||
@import "Roboto";
|
@import "Roboto";
|
||||||
// @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
|
// @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');
|
||||||
|
|
||||||
$fontConfig: (display-4: mat-typography-level(112px, 112px, 300, 'Roboto,Helvetica Neue,sans-serif', -0.0134em),
|
$fontConfig: (display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto,Helvetica Neue,sans-serif', -0.0134em),
|
||||||
display-3: mat-typography-level(56px, 56px, 400, 'Roboto,Helvetica Neue,sans-serif', -0.0089em),
|
display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto,Helvetica Neue,sans-serif', -0.0089em),
|
||||||
display-2: mat-typography-level(45px, 48px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
|
display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
|
||||||
display-1: mat-typography-level(34px, 40px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0074em),
|
display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0074em),
|
||||||
headline: mat-typography-level(24px, 32px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
|
headline: mat.define-typography-level(24px, 32px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0000em),
|
||||||
title: mat-typography-level(20px, 32px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0075em),
|
title: mat.define-typography-level(20px, 32px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0075em),
|
||||||
subheading-2: mat-typography-level(16px, 28px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0094em),
|
subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0094em),
|
||||||
subheading-1: mat-typography-level(15px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0067em),
|
subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0067em),
|
||||||
body-2: mat-typography-level(14px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
|
body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
|
||||||
body-1: mat-typography-level(14px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
|
body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0179em),
|
||||||
button: mat-typography-level(14px, 14px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0893em),
|
button: mat.define-typography-level(14px, 14px, 500, 'Roboto,Helvetica Neue,sans-serif', 0.0893em),
|
||||||
caption: mat-typography-level(12px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0333em),
|
caption: mat.define-typography-level(12px, 20px, 400, 'Roboto,Helvetica Neue,sans-serif', 0.0333em),
|
||||||
input: mat-typography-level(inherit, 1.125, 400, 'Roboto,Helvetica Neue,sans-serif', 1.5px));
|
input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto,Helvetica Neue,sans-serif', 1.5px));
|
||||||
|
|
||||||
// Foreground Elements
|
// Foreground Elements
|
||||||
|
|
||||||
@@ -36,7 +37,7 @@ $dark-disabled-text: rgba($dark-primary-text, 0.38);
|
|||||||
$dark-dividers: rgba($dark-primary-text, 0.12);
|
$dark-dividers: rgba($dark-primary-text, 0.12);
|
||||||
$dark-focused: rgba($dark-primary-text, 0.12);
|
$dark-focused: rgba($dark-primary-text, 0.12);
|
||||||
|
|
||||||
$mat-light-theme-foreground: (base: black,
|
mat.$light-theme-foreground-palette: (base: black,
|
||||||
divider: $dark-dividers,
|
divider: $dark-dividers,
|
||||||
dividers: $dark-dividers,
|
dividers: $dark-dividers,
|
||||||
disabled: $dark-disabled-text,
|
disabled: $dark-disabled-text,
|
||||||
@@ -62,7 +63,7 @@ $light-disabled-text: rgba($light-primary-text, 0.5);
|
|||||||
$light-dividers: rgba($light-primary-text, 0.12);
|
$light-dividers: rgba($light-primary-text, 0.12);
|
||||||
$light-focused: rgba($light-primary-text, 0.12);
|
$light-focused: rgba($light-primary-text, 0.12);
|
||||||
|
|
||||||
$mat-dark-theme-foreground: (base: $light-text,
|
mat.$dark-theme-foreground-palette: (base: $light-text,
|
||||||
divider: $light-dividers,
|
divider: $light-dividers,
|
||||||
dividers: $light-dividers,
|
dividers: $light-dividers,
|
||||||
disabled: $light-disabled-text,
|
disabled: $light-disabled-text,
|
||||||
@@ -92,7 +93,7 @@ $dark-bg-tooltip: lighten(#2c2c2c, 20%);
|
|||||||
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
|
$dark-bg-alpha-4: rgba(#2c2c2c, 0.04);
|
||||||
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
|
$dark-bg-alpha-12: rgba(#2c2c2c, 0.12);
|
||||||
|
|
||||||
$mat-light-theme-background: (background: $light-background,
|
mat.$light-theme-background-palette: (background: $light-background,
|
||||||
status-bar: $light-bg-darker-20,
|
status-bar: $light-bg-darker-20,
|
||||||
app-bar: $light-bg-darker-5,
|
app-bar: $light-bg-darker-5,
|
||||||
hover: $dark-bg-alpha-4,
|
hover: $dark-bg-alpha-4,
|
||||||
@@ -119,7 +120,7 @@ $light-bg-alpha-4: rgba(#fafafa, 0.04);
|
|||||||
$light-bg-alpha-12: rgba(#fafafa, 0.12);
|
$light-bg-alpha-12: rgba(#fafafa, 0.12);
|
||||||
|
|
||||||
// Background palette for dark themes.
|
// Background palette for dark themes.
|
||||||
$mat-dark-theme-background: (background: $dark-background,
|
mat.$dark-theme-background-palette: (background: $dark-background,
|
||||||
status-bar: $dark-bg-lighter-20,
|
status-bar: $dark-bg-lighter-20,
|
||||||
app-bar: $dark-bg-lighter-5,
|
app-bar: $dark-bg-lighter-5,
|
||||||
hover: $light-bg-alpha-4,
|
hover: $light-bg-alpha-4,
|
||||||
@@ -137,7 +138,7 @@ $mat-dark-theme-background: (background: $dark-background,
|
|||||||
);
|
);
|
||||||
|
|
||||||
// Compute font config
|
// Compute font config
|
||||||
@include mat-core($fontConfig);
|
@include mat.core($fontConfig);
|
||||||
|
|
||||||
// Theme Config
|
// Theme Config
|
||||||
|
|
||||||
@@ -158,7 +159,7 @@ $mat-primary: (main: #cc33ca,
|
|||||||
lighter: $dark-primary-text,
|
lighter: $dark-primary-text,
|
||||||
darker: $light-primary-text,
|
darker: $light-primary-text,
|
||||||
));
|
));
|
||||||
$theme-primary: mat-palette($mat-primary, main, lighter, darker);
|
$theme-primary: mat.define-palette($mat-primary, main, lighter, darker);
|
||||||
|
|
||||||
body {
|
body {
|
||||||
--accent-color: #797979;
|
--accent-color: #797979;
|
||||||
@@ -177,7 +178,7 @@ $mat-accent: (main: #797979,
|
|||||||
lighter: $dark-primary-text,
|
lighter: $dark-primary-text,
|
||||||
darker: $light-primary-text,
|
darker: $light-primary-text,
|
||||||
));
|
));
|
||||||
$theme-accent: mat-palette($mat-accent, main, lighter, darker);
|
$theme-accent: mat.define-palette($mat-accent, main, lighter, darker);
|
||||||
|
|
||||||
body {
|
body {
|
||||||
--warn-color: #ff0000;
|
--warn-color: #ff0000;
|
||||||
@@ -196,17 +197,17 @@ $mat-warn: (main: #ff0000,
|
|||||||
lighter: $dark-primary-text,
|
lighter: $dark-primary-text,
|
||||||
darker: $light-primary-text,
|
darker: $light-primary-text,
|
||||||
));
|
));
|
||||||
$theme-warn: mat-palette($mat-warn, main, lighter, darker);
|
$theme-warn: mat.define-palette($mat-warn, main, lighter, darker);
|
||||||
;
|
;
|
||||||
|
|
||||||
$theme: mat-light-theme($theme-primary, $theme-accent, $theme-warn);
|
$theme: mat.define-light-theme($theme-primary, $theme-accent, $theme-warn);
|
||||||
$altTheme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
|
$altTheme: mat.define-dark-theme($theme-primary, $theme-accent, $theme-warn);
|
||||||
|
|
||||||
// Theme Init
|
// Theme Init
|
||||||
@include angular-material-theme($theme);
|
@include mat.all-component-themes($theme);
|
||||||
|
|
||||||
.theme-alternate {
|
.theme-alternate {
|
||||||
@include angular-material-theme($altTheme);
|
@include mat.all-component-themes($altTheme);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Specific component overrides, pieces that are not in line with the general theming
|
// Specific component overrides, pieces that are not in line with the general theming
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
/***************************************************************************************************
|
/***************************************************************************************************
|
||||||
* Zone JS is required by default for Angular itself.
|
* Zone JS is required by default for Angular itself.
|
||||||
*/
|
*/
|
||||||
import 'zone.js/dist/zone'; // Included with Angular CLI.
|
import 'zone.js'; // Included with Angular CLI.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||||
|
|
||||||
import 'zone.js/dist/zone-testing';
|
import 'zone.js/testing';
|
||||||
import { getTestBed } from '@angular/core/testing';
|
import { getTestBed } from '@angular/core/testing';
|
||||||
import {
|
import {
|
||||||
BrowserDynamicTestingModule,
|
BrowserDynamicTestingModule,
|
||||||
|
|||||||
@@ -7,7 +7,6 @@
|
|||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"declaration": false,
|
"declaration": false,
|
||||||
"moduleResolution": "node",
|
"moduleResolution": "node",
|
||||||
"emitDecoratorMetadata": true,
|
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"target": "es2015",
|
"target": "es2015",
|
||||||
"typeRoots": [
|
"typeRoots": [
|
||||||
|
|||||||
Reference in New Issue
Block a user