diff --git a/package.json b/package.json index 6f584a9..d0d5c40 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "@angular-redux/router": "^6.2.0", "@angular-redux/store": "^6.2.1", "@angular/animations": "^4.4.6", + "@angular/cdk": "2.0.0-beta.12", "@angular/common": "^4.4.6", "@angular/compiler": "^4.4.6", "@angular/compiler-cli": "^4.4.6", @@ -85,7 +86,7 @@ "@angular/flex-layout": "^2.0.0-beta.8", "@angular/forms": "^4.4.6", "@angular/http": "^4.4.6", - "@angular/material": "2.0.0-beta.3", + "@angular/material": "2.0.0-beta.12", "@angular/platform-browser": "^4.4.6", "@angular/platform-browser-dynamic": "^4.4.6", "@angular/platform-server": "^4.4.6", @@ -94,8 +95,8 @@ "@angularclass/hmr": "1.2.2", "@angularclass/hmr-loader": "3.0.2", "@angularclass/idle-preload": "^1.0.4", - "@ng2-dynamic-forms/core": "^1.4.9", - "@ng2-dynamic-forms/ui-material": "^1.4.9", + "@ng-dynamic-forms/core": "1.4.34", + "@ng-dynamic-forms/ui-material": "1.4.34", "@ngrx/core": "1.2.0", "@ngrx/effects": "2.0.3", "@ngrx/router-store": "1.2.6", diff --git a/src/app/_components.scss b/src/app/_components.scss index d5397f9..05017d1 100644 --- a/src/app/_components.scss +++ b/src/app/_components.scss @@ -68,11 +68,11 @@ span.label { text-align: center; } - md-icon { + mat-icon { color: white; } - md-icon.box-icon { + mat-icon.box-icon { border-radius: 50%; height: 50px; width: 50px; @@ -155,7 +155,7 @@ button.toggle-active { line-height: 12px; padding: 4px 8px; - &:not(.mat-icon-button) { + &:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) { border-radius: 10px!important; } diff --git a/src/app/_layout.scss b/src/app/_layout.scss index ba6f69b..fe1be84 100644 --- a/src/app/_layout.scss +++ b/src/app/_layout.scss @@ -23,7 +23,7 @@ div.layout { flex:1; } -.full-width, .full-width > md-input-container { +.full-width, .full-width:not(.select) > mat-form-field { width: 100%; } @@ -52,7 +52,7 @@ div.border-left { */ form.single-column { - .mat-input-container { + .mat-form-field { width:100%; } } \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 04a3389..7a2a5d9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,8 +1,8 @@
- + - +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 92c9ce1..d826e30 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -3,7 +3,7 @@ https://github.com/jtangelder/sass-loader/issues/211 */ @import './variables'; // using Modernizer CSS classes to detect if browser supports the W3C Touch Events API -:host-context(.mod-touchevents) [md-button]:hover::after, [md-icon-button]:hover::after { +:host-context(.mod-touchevents) [mat-button]:hover::after, [mat-icon-button]:hover::after { content: none; } diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 4d96bcf..8b9073d 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -3,7 +3,7 @@ import { TestBed, async } from '@angular/core/testing'; import { RouterTestingModule } from '@angular/router/testing'; import { ReactiveFormsModule } from '@angular/forms'; -import { MaterialModule } from '@angular/material'; +import { DktMaterialModule } from './dkt-material.module'; import { AppComponent } from './app.component'; import { DashboardComponent } from './features/dashboard.component'; @@ -17,7 +17,7 @@ describe('App Component', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [ - MaterialModule.forRoot(), + DktMaterialModule, ReactiveFormsModule, RouterTestingModule.withRoutes(routes), StoreDevToolsModule diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b438cfb..720ade8 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,7 +1,7 @@ import { Component, ViewEncapsulation, OnInit, OnDestroy, NgZone } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { UserLoginService, CognitoUtil } from './core/services'; -import { MdIconRegistry, MdSnackBar, MdSnackBarConfig } from '@angular/material'; +import { MatIconRegistry, MatSnackBar, MatSnackBarConfig } from '@angular/material'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ @@ -18,25 +18,25 @@ export class AppComponent implements OnInit, OnDestroy { constructor( public route: ActivatedRoute, public router: Router, - private mdIconRegistry: MdIconRegistry, + private matIconRegistry: MatIconRegistry, private sanitizer: DomSanitizer, private ngZone: NgZone, - public snackBar: MdSnackBar + public snackBar: MatSnackBar ) { // Register custom DKT icons - mdIconRegistry.addSvgIcon( + matIconRegistry.addSvgIcon( 'flow', sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/flow.svg') ); - mdIconRegistry.addSvgIcon( + matIconRegistry.addSvgIcon( 'sort_asc', sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/sort_asc.svg') ); - mdIconRegistry.addSvgIcon( + matIconRegistry.addSvgIcon( 'sort_desc', sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/sort_desc.svg') ); - mdIconRegistry.addSvgIcon( + matIconRegistry.addSvgIcon( 'aws', sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/aws.svg') ); @@ -51,7 +51,7 @@ export class AppComponent implements OnInit, OnDestroy { } showMessage(message: string, type: string = 'info') { - let config = new MdSnackBarConfig(); + let config = new MatSnackBarConfig(); config.duration = 2000; config.extraClasses = [type]; this.snackBar.open(message, 'OK', config); diff --git a/src/app/app.imports.ts b/src/app/app.imports.ts index cd86c3e..2339932 100644 --- a/src/app/app.imports.ts +++ b/src/app/app.imports.ts @@ -1,10 +1,10 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { DynamicFormsCoreModule } from '@ng2-dynamic-forms/core'; -import { DynamicFormsMaterialUIModule } from '@ng2-dynamic-forms/ui-material'; +import { DynamicFormsCoreModule } from '@ng-dynamic-forms/core'; +import { DynamicFormsMaterialUIModule } from '@ng-dynamic-forms/ui-material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule } from '@angular/router'; import { IdlePreload, IdlePreloadModule } from '@angularclass/idle-preload'; -import { MaterialModule } from '@angular/material'; +import { DktMaterialModule } from './dkt-material.module'; import { FlexLayoutModule } from '@angular/flex-layout'; import { EffectsModule } from '@ngrx/effects'; @@ -44,7 +44,7 @@ if (ENV === 'development' && !AOT && export const APP_IMPORTS = [ BrowserAnimationsModule, EffectsModule.run(UserEffects), - MaterialModule, + DktMaterialModule, FlexLayoutModule, FormsModule, BrowserAnimationsModule, diff --git a/src/app/core/components/account/account.component.html b/src/app/core/components/account/account.component.html index c80a60f..fbe0c60 100644 --- a/src/app/core/components/account/account.component.html +++ b/src/app/core/components/account/account.component.html @@ -1,20 +1,20 @@ - - - - + - \ No newline at end of file diff --git a/src/app/core/components/account/account.component.scss b/src/app/core/components/account/account.component.scss index 89df6ff..7da7b18 100644 --- a/src/app/core/components/account/account.component.scss +++ b/src/app/core/components/account/account.component.scss @@ -1,3 +1,3 @@ -md-icon[aria-label="account_circle"] { +mat-icon.account { margin-right: 0.3rem; } \ No newline at end of file diff --git a/src/app/core/components/confirm-sign-up/confirm-sign-up.component.html b/src/app/core/components/confirm-sign-up/confirm-sign-up.component.html index 0b95244..8e62d69 100644 --- a/src/app/core/components/confirm-sign-up/confirm-sign-up.component.html +++ b/src/app/core/components/confirm-sign-up/confirm-sign-up.component.html @@ -1,12 +1,12 @@

Please check your e-mail and enter your registration code.

- - - Registration code is required - + + + Registration code is required + -
diff --git a/src/app/core/components/forgot-password/forgot-password.component.html b/src/app/core/components/forgot-password/forgot-password.component.html index 5f6581d..074f805 100644 --- a/src/app/core/components/forgot-password/forgot-password.component.html +++ b/src/app/core/components/forgot-password/forgot-password.component.html @@ -1,17 +1,17 @@

Please enter the verification code below, along with the new password you would like to use.

- - - Verification code is required - + + + Verification code is required + - - - Password is required - + + + Password is required + -
diff --git a/src/app/core/components/google-signin/google-signin.component.html b/src/app/core/components/google-signin/google-signin.component.html index e821ec9..8f4996f 100644 --- a/src/app/core/components/google-signin/google-signin.component.html +++ b/src/app/core/components/google-signin/google-signin.component.html @@ -1,4 +1,4 @@ - diff --git a/src/app/core/components/google-signin/google-signin.component.scss b/src/app/core/components/google-signin/google-signin.component.scss index 68a65ff..4f4235e 100644 --- a/src/app/core/components/google-signin/google-signin.component.scss +++ b/src/app/core/components/google-signin/google-signin.component.scss @@ -1,5 +1,5 @@ #googleSignInBtn { - md-icon { + mat-icon { width: 20px; height: 20px; line-height: 20px; diff --git a/src/app/core/components/google-signin/google-signin.component.ts b/src/app/core/components/google-signin/google-signin.component.ts index 4f8cfe3..5afdfaf 100644 --- a/src/app/core/components/google-signin/google-signin.component.ts +++ b/src/app/core/components/google-signin/google-signin.component.ts @@ -1,6 +1,6 @@ import { Component, NgZone, Input, AfterViewInit } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; -import { MdIconRegistry } from '@angular/material'; +import { MatIconRegistry } from '@angular/material'; import { Router } from '@angular/router'; import { googleSignInConfig } from './../../config'; import { LoginUiState, UserLoginService } from './../../services'; @@ -18,12 +18,12 @@ export class GoogleSigninComponent implements AfterViewInit { constructor( public router: Router, public zone: NgZone, - private mdIconRegistry: MdIconRegistry, + private matIconRegistry: MatIconRegistry, private sanitizer: DomSanitizer, private loginUi: LoginUiState ) { // Register "google" icon - mdIconRegistry.addSvgIcon( + matIconRegistry.addSvgIcon( 'google', sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/google.svg') ); diff --git a/src/app/core/components/loading-indicator/loading-indicator.component.html b/src/app/core/components/loading-indicator/loading-indicator.component.html index 6590fef..8dcb2be 100644 --- a/src/app/core/components/loading-indicator/loading-indicator.component.html +++ b/src/app/core/components/loading-indicator/loading-indicator.component.html @@ -1,4 +1,4 @@
- + {{text}}
\ No newline at end of file diff --git a/src/app/core/components/loading-indicator/loading-indicator.component.scss b/src/app/core/components/loading-indicator/loading-indicator.component.scss index a2ded23..553da66 100644 --- a/src/app/core/components/loading-indicator/loading-indicator.component.scss +++ b/src/app/core/components/loading-indicator/loading-indicator.component.scss @@ -6,12 +6,6 @@ transform: translateX(-50%); } - md-spinner { - display: inline-block; - width: 20px!important; - height: 20px!important; - } - span { margin-left:0.5rem; color: #BDBDBD; diff --git a/src/app/core/components/login/login.component.html b/src/app/core/components/login/login.component.html index 5e23a8b..78434d6 100644 --- a/src/app/core/components/login/login.component.html +++ b/src/app/core/components/login/login.component.html @@ -1,6 +1,6 @@
- - + +

{{ui.title}}

@@ -17,6 +17,6 @@

{{ui.title}}

- - + +
diff --git a/src/app/core/components/login/login.component.scss b/src/app/core/components/login/login.component.scss index 29f0bc9..80f4152 100644 --- a/src/app/core/components/login/login.component.scss +++ b/src/app/core/components/login/login.component.scss @@ -12,7 +12,7 @@ $text-color: #666; height:100%; animation: FadeIn 0.3s; - md-card { + mat-card { max-width: $width; padding: $padding; } diff --git a/src/app/core/components/main-nav/main-nav.component.html b/src/app/core/components/main-nav/main-nav.component.html index d1bada7..2c8602f 100644 --- a/src/app/core/components/main-nav/main-nav.component.html +++ b/src/app/core/components/main-nav/main-nav.component.html @@ -1,10 +1,10 @@
- + flows - assignment + assignment tasks
diff --git a/src/app/core/components/main-nav/main-nav.component.scss b/src/app/core/components/main-nav/main-nav.component.scss index 0c39aef..c371177 100644 --- a/src/app/core/components/main-nav/main-nav.component.scss +++ b/src/app/core/components/main-nav/main-nav.component.scss @@ -35,7 +35,7 @@ https://github.com/jtangelder/sass-loader/issues/211 */ color:white; } - md-icon { + mat-icon { margin-right:5px; } } diff --git a/src/app/core/components/render/render.component.html b/src/app/core/components/render/render.component.html index 9deb519..e10a01d 100644 --- a/src/app/core/components/render/render.component.html +++ b/src/app/core/components/render/render.component.html @@ -1,8 +1,8 @@
-

Please make sure to allow popups.

diff --git a/src/app/core/components/sign-in/sign-in.component.html b/src/app/core/components/sign-in/sign-in.component.html index d4e8ec8..98b0d7f 100644 --- a/src/app/core/components/sign-in/sign-in.component.html +++ b/src/app/core/components/sign-in/sign-in.component.html @@ -3,21 +3,21 @@
- - - Username is required - + + + Username is required + - - - Password is required - + + + Password is required + - -
diff --git a/src/app/core/components/sign-up/sign-up.component.html b/src/app/core/components/sign-up/sign-up.component.html index cd0055a..e72873f 100644 --- a/src/app/core/components/sign-up/sign-up.component.html +++ b/src/app/core/components/sign-up/sign-up.component.html @@ -3,37 +3,37 @@
- - - Username is required - - - - - Password is required - - - - - Passwords don't match - - - - - Not a valid email address - - - - - First name is required - - - - - Last name is required - - -
diff --git a/src/app/core/containers/error/error.component.html b/src/app/core/containers/error/error.component.html index a54360e..1353262 100644 --- a/src/app/core/containers/error/error.component.html +++ b/src/app/core/containers/error/error.component.html @@ -1,7 +1,7 @@

{{message()}}

-
\ No newline at end of file diff --git a/src/app/core/index.ts b/src/app/core/index.ts index d326fa8..b700785 100644 --- a/src/app/core/index.ts +++ b/src/app/core/index.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MaterialModule } from '@angular/material'; +import { DktMaterialModule } from './../dkt-material.module'; import { Routes, RouterModule } from '@angular/router'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FlexLayoutModule } from '@angular/flex-layout'; @@ -67,7 +67,7 @@ const routes: Routes = [ imports: [ CommonModule, FlexLayoutModule, - MaterialModule.forRoot(), + DktMaterialModule, RouterModule.forChild(routes), FormsModule, ReactiveFormsModule, diff --git a/src/app/core/utils/mocks/index.ts b/src/app/core/utils/mocks/index.ts index 5812257..60ae98e 100644 --- a/src/app/core/utils/mocks/index.ts +++ b/src/app/core/utils/mocks/index.ts @@ -1,6 +1,6 @@ export * from './apollo-store.mock'; export * from './change-detector-ref.mock'; -export * from './md-dialog.mock'; +export * from './mat-dialog.mock'; export * from './route.mock'; export * from './router.mock'; export * from './snackbar.mock'; diff --git a/src/app/core/utils/mocks/md-dialog.mock.ts b/src/app/core/utils/mocks/mat-dialog.mock.ts similarity index 53% rename from src/app/core/utils/mocks/md-dialog.mock.ts rename to src/app/core/utils/mocks/mat-dialog.mock.ts index e534c6f..bd44f2a 100644 --- a/src/app/core/utils/mocks/md-dialog.mock.ts +++ b/src/app/core/utils/mocks/mat-dialog.mock.ts @@ -1,7 +1,7 @@ import { Subject } from 'rxjs/Subject'; -export class MockMdDialog { +export class MockMatDialog { open(component, config?) { - // TODO should return a mdDialogRef + // TODO should return a matDialogRef } } diff --git a/src/app/core/utils/mocks/snackbar.mock.ts b/src/app/core/utils/mocks/snackbar.mock.ts index f97c686..17ea09c 100644 --- a/src/app/core/utils/mocks/snackbar.mock.ts +++ b/src/app/core/utils/mocks/snackbar.mock.ts @@ -1,5 +1,5 @@ -import { MdSnackBar, MdSnackBarConfig } from '@angular/material'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material'; export const mockSnackBar = { - open: (message: string, action?: string, config?: MdSnackBarConfig) => {}, -} as MdSnackBar; + open: (message: string, action?: string, config?: MatSnackBarConfig) => {}, +} as MatSnackBar; diff --git a/src/app/dkt-material.module.ts b/src/app/dkt-material.module.ts new file mode 100644 index 0000000..9f1608d --- /dev/null +++ b/src/app/dkt-material.module.ts @@ -0,0 +1,65 @@ +import { NgModule } from '@angular/core'; +import { + MatButtonModule, + MatCheckboxModule, + MatMenuModule, + MatTabsModule, + MatRadioModule, + MatSelectModule, + MatOptionModule, + MatIconModule, + MatAutocompleteModule, + MatTooltipModule, + MatSnackBarModule, + MatToolbarModule, + MatInputModule, + MatCardModule, + MatListModule, + MatDialogModule, + MatProgressSpinnerModule, + MatExpansionModule +} from '@angular/material'; + +@NgModule({ + imports: [ + MatButtonModule, + MatCheckboxModule, + MatMenuModule, + MatTabsModule, + MatRadioModule, + MatOptionModule, + MatIconModule, + MatAutocompleteModule, + MatTooltipModule, + MatSnackBarModule, + MatSelectModule, + MatToolbarModule, + MatInputModule, + MatCardModule, + MatListModule, + MatDialogModule, + MatProgressSpinnerModule, + MatExpansionModule + ], + exports: [ + MatButtonModule, + MatCheckboxModule, + MatMenuModule, + MatTabsModule, + MatRadioModule, + MatOptionModule, + MatIconModule, + MatAutocompleteModule, + MatTooltipModule, + MatSnackBarModule, + MatSelectModule, + MatToolbarModule, + MatInputModule, + MatCardModule, + MatListModule, + MatDialogModule, + MatProgressSpinnerModule, + MatExpansionModule + ] +}) +export class DktMaterialModule {} diff --git a/src/app/dkt-styles.scss b/src/app/dkt-styles.scss index 623d558..2230d1c 100644 --- a/src/app/dkt-styles.scss +++ b/src/app/dkt-styles.scss @@ -51,7 +51,7 @@ h6 { button { font-size: 13px!important; font-weight: 600!important; - &:not(.mat-icon-button) { + &:not(.mat-icon-button):not(.mat-fab):not(.mat-mini-fab) { border-radius: 4px!important; } } @@ -62,7 +62,7 @@ button, div { height: 30px; line-height: 30px; - md-icon.mat-icon { + mat-icon.mat-icon { width: 22px; height: 22px; font-size: 22px; @@ -71,6 +71,22 @@ button, div { } } -md-icon.close { +mat-icon.close { cursor: pointer; } + +mat-spinner { + display: inline-block!important; + width: 24px!important; + height: 24px!important; + svg { + width: 24px!important; + height: 24px!important; + stroke-width: 2px; + } + + &.margin-right { + margin-right: 0.5rem; + } +} + diff --git a/src/app/features/dashboard.component.html b/src/app/features/dashboard.component.html index d156a2e..54da9bf 100644 --- a/src/app/features/dashboard.component.html +++ b/src/app/features/dashboard.component.html @@ -3,13 +3,13 @@

Welcome to the Dashboard {{user.name}}!

- - - + + +
- - + +


- +
\ No newline at end of file diff --git a/src/app/features/store-devtools.component.ts b/src/app/features/store-devtools.component.ts index a27c928..b019232 100644 --- a/src/app/features/store-devtools.component.ts +++ b/src/app/features/store-devtools.component.ts @@ -5,7 +5,7 @@ import { Component, ViewEncapsulation } from '@angular/core'; templateUrl: './store-devtools.component.html', encapsulation: ViewEncapsulation.None, styles: [` - md-sidenav-layout { + mat-sidenav-layout { width: 70% !important; } `] diff --git a/src/app/flows/components/account-dialog/account-dialog.component.html b/src/app/flows/components/account-dialog/account-dialog.component.html index 7f2856c..4c11aaf 100644 --- a/src/app/flows/components/account-dialog/account-dialog.component.html +++ b/src/app/flows/components/account-dialog/account-dialog.component.html @@ -1,24 +1,24 @@ -

- +

+ {{getTitle()}} - close + close

-
+

Loading accounts ...

- - - +
{{account.name}}
+ +
-
@@ -35,32 +35,32 @@
{{account.name}}