Skip to content
This repository was archived by the owner on Nov 19, 2021. It is now read-only.

Commit 39541d7

Browse files
emoralesb05emoralesb05
authored
upgrade(covalent): upgrade to @covalent@1.0.0-beta.1 (#34)
* update package.json to point to upgraded dependencies * update `tslint` rules with new rules and update `tsconfig` with new properties * bugfix to remove `theme` duplication on `build` * breaking change with td-layout and usage of td-navigation-drawer as main sidenav * leverage `default` loading mask instead of creating one * remove deprecated `toolbar-content` in favor of `td-toolbar-content` * remove `nav-toolbar-content` in favor of `td-toolbar-content` * remove `list-items` in favor of `td-sidenav-content` * replace `toolbar-buttons` in favor of `td-toolbar-content` * leverage `td-layout-nav-list` inputs to make it responsive with the `media.service` * leverage `td-layout-manage-list` inputs to make it responsive with the `media.service` * use `md-icon-button` component instead of a class
1 parent bc82ac7 commit 39541d7

27 files changed

+211
-170
lines changed

‎angular-cli.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"project": {
3-
"version": "1.0.0-beta.24",
3+
"version": "1.0.0-beta.26",
44
"name": "covalent-quickstart"
55
},
66
"apps": [

‎package.json

+26-25
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "covalent-quickstart",
3-
"version": "0.9.1",
3+
"version": "1.0.0-beta.1",
44
"private": true,
55
"description": "Quickstart App with @covalent packages",
66
"keywords": [
@@ -11,7 +11,8 @@
1111
"scripts": {
1212
"e2e": "protractor",
1313
"e2e-test": "protractor ./protractor.conf.js",
14-
"tslint": "tslint -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\" -e \"./src/environments/**\"",
14+
"lint": "tslint -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\" -e \"./src/environments/**\"",
15+
"reinstall": "rm -rf node_modules tmp deploy dist && npm i",
1516
"postinstall": "webdriver-manager update",
1617
"start-api": "cd mock-api && covalent-data &",
1718
"stop-api": "pkill covalent-data",
@@ -38,40 +39,40 @@
3839
"Ilsun Park <[email protected]>"
3940
],
4041
"dependencies": {
41-
"@angular/common": "2.4.1",
42-
"@angular/compiler": "2.4.1",
43-
"@angular/core": "2.4.1",
44-
"@angular/forms": "2.4.1",
45-
"@angular/http": "2.4.1",
42+
"@angular/common": "2.4.5",
43+
"@angular/compiler": "2.4.5",
44+
"@angular/core": "2.4.5",
45+
"@angular/forms": "2.4.5",
46+
"@angular/http": "2.4.5",
4647
"@angular/material": "2.0.0-beta.1",
47-
"@angular/platform-browser": "2.4.1",
48-
"@angular/platform-browser-dynamic": "2.4.1",
49-
"@angular/platform-server": "2.4.1",
50-
"@angular/router": "3.4.1",
51-
"@covalent/core": "0.10.2",
52-
"@covalent/charts": "0.10.2",
53-
"@covalent/dynamic-forms": "0.10.2",
54-
"@covalent/highlight": "0.10.2",
55-
"@covalent/http": "0.10.2",
56-
"@covalent/markdown": "0.10.2",
48+
"@angular/platform-browser": "2.4.5",
49+
"@angular/platform-browser-dynamic": "2.4.5",
50+
"@angular/platform-server": "2.4.5",
51+
"@angular/router": "3.4.5",
52+
"@covalent/core": "1.0.0-beta.1",
53+
"@covalent/charts": "1.0.0-beta.1",
54+
"@covalent/dynamic-forms": "1.0.0-beta.1",
55+
"@covalent/highlight": "1.0.0-beta.1",
56+
"@covalent/http": "1.0.0-beta.1",
57+
"@covalent/markdown": "1.0.0-beta.1",
58+
"@swimlane/ngx-charts": "^3.1.2",
5759
"core-js": "^2.4.1",
5860
"hammerjs": "^2.0.8",
59-
"highlight.js": "9.6.0",
61+
"highlight.js": "9.9.0",
6062
"rxjs": "^5.0.1",
61-
"showdown": "1.4.2",
63+
"showdown": "1.6.0",
6264
"zone.js": "^0.7.2",
63-
"@swimlane/ngx-charts": "^3.1.2",
6465
"moment": "^2.17.1",
6566
"d3": "^4.4.0"
6667
},
6768
"devDependencies": {
68-
"@angular/compiler-cli": "2.4.1",
69+
"@angular/compiler-cli": "2.4.5",
6970
"@types/hammerjs": "2.0.30",
7071
"@types/jasmine": "2.2.31",
7172
"@types/node": "6.0.34",
7273
"@types/selenium-webdriver": "2.53.36",
73-
"angular-cli": "1.0.0-beta.24",
74-
"codelyzer": "0.0.26",
74+
"angular-cli": "1.0.0-beta.26",
75+
"codelyzer": "2.0.0-beta.4",
7576
"ember-cli-inject-live-reload": "1.4.0",
7677
"jasmine-core": "2.4.1",
7778
"jasmine-spec-reporter": "2.5.0",
@@ -87,8 +88,8 @@
8788
"protractor": "4.0.5",
8889
"sass-loader": "^4.0.2",
8990
"ts-node": "1.2.1",
90-
"tslint": "3.14.0",
91-
"typescript": "2.0.10"
91+
"tslint": "^4.3.1",
92+
"typescript": "2.1.5"
9293
},
9394
"optionalDependencies": {
9495
"@covalent/data": "0.4.0"

‎src/app/app.component.ts

+3-12
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,16 @@
1-
import { Component, ViewContainerRef } from '@angular/core';
1+
import { Component } from '@angular/core';
22
import { DomSanitizer } from '@angular/platform-browser';
33
import { MdIconRegistry } from '@angular/material';
44

5-
import { TdLoadingService, LoadingType, ILoadingOptions } from '@covalent/core';
6-
75
@Component({
86
selector: 'qs-app',
97
templateUrl: './app.component.html',
108
styleUrls: ['./app.component.scss'],
119
})
1210
export class AppComponent {
1311

14-
constructor(private _loadingService: TdLoadingService,
15-
private _iconRegistry: MdIconRegistry,
16-
private _domSanitizer: DomSanitizer,
17-
viewContainerRef: ViewContainerRef) {
18-
let options: ILoadingOptions = {
19-
name: 'main',
20-
type: LoadingType.Circular,
21-
};
22-
this._loadingService.createOverlayComponent(options, viewContainerRef);
12+
constructor(private _iconRegistry: MdIconRegistry,
13+
private _domSanitizer: DomSanitizer) {
2314
this._iconRegistry.addSvgIconInNamespace('assets', 'teradata',
2415
this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/teradata.svg'));
2516
this._iconRegistry.addSvgIconInNamespace('assets', 'github',

‎src/app/app.module.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import { RequestInterceptor } from '../config/interceptors/request.interceptor';
3333

3434
import { NgxChartsModule } from '@swimlane/ngx-charts';
3535

36-
const httpInterceptorProviders: Type<IHttpInterceptor>[] = [
36+
const httpInterceptorProviders: Type<any>[] = [
3737
RequestInterceptor,
3838
];
3939

‎src/app/dashboard-product/dashboard-product.component.html

+18-15
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
<td-layout-nav logo="assets:covalent">
2-
<div toolbar-content layout="row" layout-align="center center" flex>
2+
<div td-toolbar-content layout="row" layout-align="center center" flex>
33
<span>Quickstart</span>
44
<span flex></span>
55
<a md-icon-button mdTooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank"><md-icon>chrome_reader_mode</md-icon></a>
66
<a md-icon-button mdTooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><md-icon svgIcon="assets:github"></md-icon></a>
77
</div>
8-
<td-layout-manage-list #list>
9-
<md-toolbar list-items>
8+
<td-layout-manage-list #manageList
9+
[opened]="media.registerQuery('gt-sm') | async"
10+
[mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'push'"
11+
[sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '257px' : '100%'">
12+
<md-toolbar td-sidenav-content>
1013
<span>Product Name</span>
1114
</md-toolbar>
12-
<md-nav-list list-items>
15+
<md-nav-list td-sidenav-content>
1316
<a md-list-item
1417
md-ripple class="block relative"
15-
(click)="list.toggle()"
18+
(click)="!media.query('gt-sm') && manageList.close()"
1619
[routerLinkActive]="['active']"
1720
[routerLinkActiveOptions]="{exact:true}"
1821
[routerLink]="['/product']">
@@ -21,7 +24,7 @@
2124
</a>
2225
<a md-list-item
2326
md-ripple class="block relative"
24-
(click)="list.toggle()"
27+
(click)="!media.query('gt-sm') && manageList.close()"
2528
[routerLinkActive]="['active']"
2629
[routerLinkActiveOptions]="{exact:true}"
2730
[routerLink]="['stats']">
@@ -30,34 +33,34 @@
3033
</a>
3134
<a md-list-item
3235
md-ripple class="block relative"
33-
(click)="list.toggle()"
36+
(click)="!media.query('gt-sm') && manageList.close()"
3437
[routerLinkActive]="['active']"
3538
[routerLinkActiveOptions]="{exact:true}"
3639
[routerLink]="['features']">
3740
<md-icon md-list-icon>star</md-icon>
3841
Features
3942
</a>
40-
<a md-list-item (click)="list.toggle()" md-ripple class="block relative">
43+
<a md-list-item (click)="!media.query('gt-sm') && manageList.close()" md-ripple class="block relative">
4144
<md-icon md-list-icon>people</md-icon>
4245
Customers
4346
</a>
4447
<h3 md-subheader>Admin Menu</h3>
45-
<a md-list-item (click)="list.toggle()" md-ripple class="block relative">
48+
<a md-list-item (click)="!media.query('gt-sm') && manageList.close()" md-ripple class="block relative">
4649
<md-icon md-list-icon>receipt</md-icon>
4750
Log
4851
</a>
49-
<a md-list-item (click)="list.toggle()" md-ripple class="block relative">
52+
<a md-list-item (click)="!media.query('gt-sm') && manageList.close()" md-ripple class="block relative">
5053
<md-icon md-list-icon>settings</md-icon>
5154
Settings
5255
</a>
5356
</md-nav-list>
54-
<div toolbar-buttons layout="row" layout-align="start center" flex>
57+
<div td-toolbar-content layout="row" layout-align="start center" flex>
5558
<span>{{title}}</span>
5659
<span flex></span>
57-
<button md-button class="md-icon-button"><md-icon class="md-24">view_module</md-icon></button>
58-
<button md-button class="md-icon-button"><md-icon class="md-24">sort</md-icon></button>
59-
<button md-button class="md-icon-button"><md-icon class="md-24">settings</md-icon></button>
60-
<button md-button class="md-icon-button"><md-icon class="md-24">more_vert</md-icon></button>
60+
<button md-icon-button><md-icon class="md-24">view_module</md-icon></button>
61+
<button md-icon-button><md-icon class="md-24">sort</md-icon></button>
62+
<button md-icon-button><md-icon class="md-24">settings</md-icon></button>
63+
<button md-icon-button><md-icon class="md-24">more_vert</md-icon></button>
6164
</div>
6265
<router-outlet></router-outlet>
6366
</td-layout-manage-list>

‎src/app/dashboard-product/dashboard-product.component.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { Component, AfterViewInit } from '@angular/core';
22

3-
import { Title } from '@angular/platform-browser';
3+
import { Title } from '@angular/platform-browser';
4+
5+
import { TdMediaService } from '@covalent/core';
46

57
@Component({
68
selector: 'dashboard-product',
@@ -10,9 +12,13 @@ import { Title } from '@angular/platform-browser';
1012
export class DashboardProductComponent implements AfterViewInit {
1113

1214
title: string;
13-
constructor(private _titleService: Title) { }
15+
constructor(private _titleService: Title,
16+
public media: TdMediaService) { }
1417

1518
ngAfterViewInit(): void {
19+
// broadcast to all listener observables when loading the page
20+
this.media.broadcast();
21+
1622
this._titleService.setTitle( 'Product Dashboard' );
1723
this.title = this._titleService.getTitle();
1824
}

‎src/app/dashboard-product/features/features.component.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.md-fab-position-bottom-right {
2-
bottom: 80px;
2+
bottom: 20px;
33
position: fixed;
44
}

‎src/app/dashboard/dashboard.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<td-layout-nav logo="assets:covalent">
2-
<div toolbar-content layout="row" layout-align="center center" flex>
2+
<div td-toolbar-content layout="row" layout-align="center center" flex>
33
<span>Quickstart</span>
44
<span flex></span>
55
<a md-icon-button mdTooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank"><md-icon>chrome_reader_mode</md-icon></a>

‎src/app/detail/detail.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<td-layout-nav>
2-
<div toolbar-content layout="row" layout-align="center center" flex>
2+
<div td-toolbar-content layout="row" layout-align="center center" flex>
33
<span *ngIf="item">Activity > {{item.name}}</span>
44
<span flex></span>
55
</div>

‎src/app/form/form.component.html

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,33 @@
11
<td-layout-nav class="white" logo="assets:covalent">
2-
<div toolbar-content layout="row" layout-align="center center" flex>
2+
<div td-toolbar-content layout="row" layout-align="center center" flex>
33
<span>Product Name</span>
44
<span flex></span>
55
<a md-icon-button mdTooltip="Docs" href="https://teradata.github.io/covalent/" target="_blank"><md-icon>chrome_reader_mode</md-icon></a>
66
<a md-icon-button mdTooltip="Github" href="https://github.com/teradata/covalent" target="_blank"><md-icon svgIcon="assets:github"></md-icon></a>
77
</div>
8-
<td-layout-manage-list #list>
9-
<md-nav-list list-items>
10-
<a md-list-item (click)="list.toggle()">
8+
<td-layout-manage-list #manageList
9+
[opened]="media.registerQuery('gt-sm') | async"
10+
[mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'push'"
11+
[sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '257px' : '100%'">
12+
<md-nav-list td-sidenav-content (click)="!media.query('gt-sm') && manageList.close()">
13+
<a md-list-item>
1114
<md-icon>dashboard</md-icon>
1215
Dashboard
1316
</a>
14-
<a md-list-item (click)="list.toggle()">
17+
<a md-list-item>
1518
<md-icon>people</md-icon>
1619
Customers
1720
</a>
18-
<a md-list-item (click)="list.toggle()">
21+
<a md-list-item>
1922
<md-icon>receipt</md-icon>
2023
Log
2124
</a>
22-
<a md-list-item (click)="list.toggle()">
25+
<a md-list-item>
2326
<md-icon>settings</md-icon>
2427
Settings
2528
</a>
2629
</md-nav-list>
27-
<div toolbar-buttons layout="row" layout-align="start center" flex>
30+
<div td-toolbar-content layout="row" layout-align="start center" flex>
2831
<a md-icon-button [routerLink]="['/dashboard-product']"><md-icon>arrow_back</md-icon></a>
2932
<span>New Item</span>
3033
<span flex></span>

‎src/app/form/form.component.ts

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
1-
import { Component } from '@angular/core';
1+
import { Component, AfterViewInit } from '@angular/core';
22

3-
import { StepState } from '@covalent/core';
3+
import { StepState, TdMediaService } from '@covalent/core';
44

55
@Component({
66
selector: 'product-form',
77
templateUrl: './form.component.html',
88
styleUrls: ['./form.component.scss'],
99
})
10-
export class FormComponent {
10+
export class FormComponent implements AfterViewInit {
1111

1212
activeDeactiveStep1Msg: string = 'No select/deselect detected yet';
1313
stateStep2: StepState = StepState.Required;
1414
stateStep3: StepState = StepState.Complete;
1515
disabled: boolean = false;
1616

17+
constructor(public media: TdMediaService) { }
18+
19+
ngAfterViewInit(): void {
20+
// broadcast to all listener observables when loading the page
21+
this.media.broadcast();
22+
}
23+
1724
toggleRequiredStep2(): void {
1825
this.stateStep2 = (this.stateStep2 === StepState.Required ? StepState.None : StepState.Required);
1926
}

‎src/app/login/login.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ export class LoginComponent {
1717
private _loadingService: TdLoadingService) {}
1818

1919
login(): void {
20-
this._loadingService.register('main');
20+
this._loadingService.register();
2121
alert('Mock log in as ' + this.username);
2222
setTimeout(() => {
2323
this._router.navigate(['/']);
24-
this._loadingService.resolve('main');
24+
this._loadingService.resolve();
2525
}, 2000);
2626
}
2727
}

‎src/app/logs/logs.component.html

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
<td-layout-nav-list logo="assets:covalent" toolbarTitle="Logs">
2-
<md-nav-list list-items>
1+
<td-layout-nav-list #navList
2+
logo="assets:covalent"
3+
toolbarTitle="Logs"
4+
[opened]="media.registerQuery('gt-sm') | async"
5+
[mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'push'"
6+
[sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'">
7+
<md-nav-list td-sidenav-content (click)="!media.query('gt-sm') && navList.close()">
38
<template let-item let-last="last" ngFor [ngForOf]="products">
49
<a md-list-item [routerLink]="['/logs']">
510
<md-icon md-list-avatar>{{item.icon}}</md-icon>
@@ -9,7 +14,7 @@ <h3 md-line> {{item.name}} </h3>
914
<md-divider *ngIf="!last" md-inset></md-divider>
1015
</template>
1116
</md-nav-list>
12-
<div nav-toolbar-content layout="row" layout-align="center center" flex>
17+
<div td-toolbar-content layout="row" layout-align="center center" flex>
1318
<span>All Product Logs</span>
1419
<span flex></span>
1520
</div>

‎src/app/logs/logs.component.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, AfterViewInit } from '@angular/core';
22
import { Title } from '@angular/platform-browser';
33

4-
import { TdLoadingService } from '@covalent/core';
4+
import { TdLoadingService, TdMediaService } from '@covalent/core';
55

66
import { ItemsService, UsersService, ProductsService } from '../../services';
77

@@ -21,11 +21,15 @@ export class LogsComponent implements AfterViewInit {
2121
private _itemsService: ItemsService,
2222
private _usersService: UsersService,
2323
private _productsService: ProductsService,
24-
private _loadingService: TdLoadingService) {
24+
private _loadingService: TdLoadingService,
25+
public media: TdMediaService) {
2526

2627
}
2728

2829
ngAfterViewInit(): void {
30+
// broadcast to all listener observables when loading the page
31+
this.media.broadcast();
32+
2933
this._titleService.setTitle( 'Covalent Logs' );
3034

3135
this._loadingService.register('items.load');

0 commit comments

Comments
 (0)