From f8fbdf33fd613fb281d78282ed2c63d481e40bba Mon Sep 17 00:00:00 2001 From: Alex Wilde Date: Mon, 4 Dec 2017 21:24:45 +0100 Subject: [PATCH 1/5] #68 updated Angular Material, ng-dynamic-forms. --- package.json | 7 +- src/app/_components.scss | 4 +- src/app/_layout.scss | 4 +- src/app/app.component.html | 4 +- src/app/app.component.scss | 2 +- src/app/app.component.spec.ts | 4 +- src/app/app.component.ts | 16 +-- src/app/app.imports.ts | 8 +- .../components/account/account.component.html | 18 +-- .../components/account/account.component.scss | 2 +- .../confirm-sign-up.component.html | 10 +- .../forgot-password.component.html | 18 +-- .../google-signin.component.html | 4 +- .../google-signin.component.scss | 2 +- .../google-signin/google-signin.component.ts | 6 +- .../loading-indicator.component.html | 2 +- .../loading-indicator.component.scss | 6 - .../components/login/login.component.html | 8 +- .../components/login/login.component.scss | 2 +- .../main-nav/main-nav.component.html | 4 +- .../main-nav/main-nav.component.scss | 2 +- .../components/render/render.component.html | 4 +- .../components/sign-in/sign-in.component.html | 20 +-- .../components/sign-up/sign-up.component.html | 62 ++++---- .../containers/error/error.component.html | 4 +- src/app/core/index.ts | 4 +- src/app/core/utils/mocks/index.ts | 2 +- .../{md-dialog.mock.ts => mat-dialog.mock.ts} | 4 +- src/app/core/utils/mocks/snackbar.mock.ts | 6 +- src/app/dkt-material.module.ts | 62 ++++++++ src/app/dkt-styles.scss | 20 ++- src/app/features/dashboard.component.html | 12 +- src/app/features/store-devtools.component.ts | 2 +- .../account-dialog.component.html | 54 +++---- .../account-dialog.component.scss | 10 +- .../account-dialog.component.ts | 4 +- .../delete-account-dialog.component.html | 16 +-- .../delete-account-dialog.component.scss | 2 +- .../delete-account-dialog.component.ts | 4 +- .../delete-flow-dialog.component.html | 14 +- .../delete-flow-dialog.component.scss | 2 +- .../delete-flow-dialog.component.ts | 4 +- .../flow-header/flow-header.component.html | 26 ++-- .../flow-header/flow-header.component.scss | 6 +- .../flow-step-config-nav.component.css | 2 +- .../flow-step-config-nav.component.html | 6 +- .../flow-step-config-nav.component.scss | 2 +- .../flow-step-config-nav.component.spec.ts | 4 +- .../flow-step-item.component.css | 2 +- .../flow-step-item.component.html | 16 +-- .../flow-step-item.component.scss | 14 +- .../flow-step-nav-buttons.component.css | 1 - .../flow-step-nav-buttons.component.html | 6 +- .../flow-step-nav-buttons.component.scss | 6 - .../new-flow-dialog.component.html | 28 ++-- .../new-flow-dialog.component.ts | 4 +- .../provider-detail.component.css | 2 +- .../provider-detail.component.html | 18 +-- .../provider-detail.component.scss | 2 +- .../provider-icon/provider-icon.component.css | 2 +- .../provider-icon.component.html | 2 +- .../provider-icon.component.scss | 2 +- .../status-message.component.html | 8 +- .../status-message.component.scss | 2 +- .../step-config-summary.component.scss | 2 +- .../trigger-flow-run-dialog.component.html | 18 +-- .../trigger-flow-run-dialog.component.ts | 4 +- .../accounts/accounts.component.html | 22 +-- .../accounts/accounts.component.scss | 12 +- .../containers/accounts/accounts.component.ts | 18 +-- .../configure-step.component.html | 10 +- .../configure-step.component.scss | 6 +- .../configure-step.component.spec.ts | 6 +- .../configure-step.component.ts | 12 +- .../flow-home/flow-home.component.html | 10 +- .../flow-logs/flow-logs.component.html | 30 ++-- .../flow-logs/flow-logs.component.scss | 24 ++-- .../flow-settings.component.html | 135 +++++++++--------- .../flow-settings.component.scss | 15 +- .../flow-settings/flow-settings.component.ts | 6 +- .../flows-app/flows-app.component.html | 12 +- .../flows-app/flows-app.component.scss | 8 +- .../flows-app/flows-app.component.spec.ts | 4 +- .../flows-app/flows-app.component.ts | 12 +- .../flows-list/flows-list.component.html | 68 ++++----- .../flows-list/flows-list.component.scss | 24 ++-- .../flows-list/flows-list.component.spec.ts | 6 +- .../flows-list/flows-list.component.ts | 12 +- .../containers/flows/flows.component.html | 4 +- .../containers/flows/flows.component.spec.ts | 6 +- .../flows/containers/flows/flows.component.ts | 14 +- .../providers/providers.component.ts | 8 +- .../test-step/test-step.component.html | 12 +- .../test-step/test-step.component.scss | 2 +- src/app/flows/index.ts | 8 +- .../services/form-builder.service.spec.ts | 2 +- .../flows/services/form-builder.service.ts | 2 +- src/app/material-fixes.scss | 8 ++ src/app/styles.scss | 2 +- .../task-controls-approve.component.html | 12 +- .../task-controls-review.component.html | 6 +- .../task-controls-transitional.component.html | 22 +-- .../task-controls.component.html | 12 +- .../task-controls.component.scss | 12 +- .../task-description.component.html | 2 +- .../tasks-filter/tasks-filter.component.html | 16 +-- .../tasks-filter/tasks-filter.component.scss | 6 +- .../task-comments.component.html | 10 +- .../task-comments.component.scss | 2 +- .../tasks-app/tasks-app.component.html | 8 +- .../tasks-app/tasks-app.component.scss | 10 +- src/app/tasks/index.ts | 4 +- yarn.lock | 26 ++-- 113 files changed, 681 insertions(+), 617 deletions(-) rename src/app/core/utils/mocks/{md-dialog.mock.ts => mat-dialog.mock.ts} (53%) create mode 100644 src/app/dkt-material.module.ts 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..3b3d153 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; diff --git a/src/app/_layout.scss b/src/app/_layout.scss index ba6f69b..3036824 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 > 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..e6818f3 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..707e410 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[aria-label="account_circle"] { 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..eba00bc --- /dev/null +++ b/src/app/dkt-material.module.ts @@ -0,0 +1,62 @@ +import { NgModule } from '@angular/core'; +import { + MatButtonModule, + MatCheckboxModule, + MatMenuModule, + MatTabsModule, + MatRadioModule, + MatSelectModule, + MatOptionModule, + MatIconModule, + MatAutocompleteModule, + MatTooltipModule, + MatSnackBarModule, + MatToolbarModule, + MatInputModule, + MatCardModule, + MatListModule, + MatDialogModule, + MatProgressSpinnerModule +} from '@angular/material'; + +@NgModule({ + imports: [ + MatButtonModule, + MatCheckboxModule, + MatMenuModule, + MatTabsModule, + MatRadioModule, + MatOptionModule, + MatIconModule, + MatAutocompleteModule, + MatTooltipModule, + MatSnackBarModule, + MatSelectModule, + MatToolbarModule, + MatInputModule, + MatCardModule, + MatListModule, + MatDialogModule, + MatProgressSpinnerModule + ], + exports: [ + MatButtonModule, + MatCheckboxModule, + MatMenuModule, + MatTabsModule, + MatRadioModule, + MatOptionModule, + MatIconModule, + MatAutocompleteModule, + MatTooltipModule, + MatSnackBarModule, + MatSelectModule, + MatToolbarModule, + MatInputModule, + MatCardModule, + MatListModule, + MatDialogModule, + MatProgressSpinnerModule + ] +}) +export class DktMaterialModule {} diff --git a/src/app/dkt-styles.scss b/src/app/dkt-styles.scss index 623d558..ce03af6 100644 --- a/src/app/dkt-styles.scss +++ b/src/app/dkt-styles.scss @@ -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}}