From 790278d6bb2ab92cd8d6e14c8abdb3e020e19378 Mon Sep 17 00:00:00 2001 From: Richa Vyas Date: Tue, 4 Oct 2016 01:36:37 +0530 Subject: [PATCH] upgraded angular & material modules to latest (#90) * upgraded angular & material modules to latest * router updated to latest * breaking change to include only @angular/material package in package.json * changed @angular2-material/* to @angular/material * fixed rollup.js file * added require-dir, merge2 and upgraded gulp-typescript * fixed rollup build for platform deployment using ts2.0, material new package and webpack changes * added example for snackbar * update(app scss): remove color overrides * update(theme): main & example themes * update(themes): docs for new themes * update(theme): docs text padding * update(material-components): grid-list headers & footers * abstracted scss from app.component.scss and moved to styles.scss (global file) * added dialog examples * update(styles): comments & moved divider to app.component.scss * update(app scss): Shadow DOM divider styles --- angular-cli.json | 6 +- build.conf.js | 9 +- package.json | 24 +-- scripts/compile-ts.js | 14 +- scripts/inline-resources.js | 1 + scripts/rollup.js | 28 +-- src/app/app.component.scss | 172 +----------------- .../docs/theme/theme.component.html | 97 ++++++---- .../material-components.component.html | 141 ++++++++++++++ .../material-components.component.ts | 91 ++++++++- .../style-guide/style-guide.module.ts | 6 +- src/platform/chips/chips.module.ts | 3 +- src/platform/core/index.ts | 93 +--------- .../layout-manage-list.component.ts | 2 +- .../layout-nav-list.component.ts | 2 +- src/platform/core/layout/layout.component.ts | 2 +- src/platform/core/package.json | 38 +--- .../file-upload/file-upload.module.ts | 26 +-- .../json-formatter/json-formatter.module.ts | 2 +- src/styles.css | 1 - src/styles.scss | 25 +++ src/theme.scss | 43 +++++ 22 files changed, 416 insertions(+), 410 deletions(-) delete mode 100644 src/styles.css create mode 100644 src/styles.scss create mode 100644 src/theme.scss diff --git a/angular-cli.json b/angular-cli.json index 1e79fe693d..aaf580face 100644 --- a/angular-cli.json +++ b/angular-cli.json @@ -15,10 +15,10 @@ "prefix": "app", "mobile": false, "styles": [ - "styles.css", + "styles.scss", + "theme.scss", "platform/core/styles/platform.scss", - "../node_modules/@angular2-material/core/style/core.css", - "../node_modules/@angular2-material/core/overlay/overlay.css" + "../node_modules/@angular/material/core/overlay/overlay.css" ], "scripts": [ "../node_modules/hammerjs/hammer.min.js", diff --git a/build.conf.js b/build.conf.js index a780177061..8d8e98eef3 100644 --- a/build.conf.js +++ b/build.conf.js @@ -9,12 +9,16 @@ module.exports = { tsfiles: [ 'src/typings.d.ts', '!src/main.ts', - '!src/system-config.ts', + '!src/polyfills.ts', + '!src/test.ts', 'src/**/**.ts', '!src/**/**/**spec.ts', - '!src/app/**/**.ts' + '!src/app/**/**.ts', + '!src/environments/**/**.ts' ], styles: [ + '!src/theme.scss', + '!src/styles.css', 'src/**/**.scss', '!src/app/**/**.scss', 'src/**/**.css', @@ -27,6 +31,7 @@ module.exports = { 'src/**/MaterialIcons-Regular.ttf', 'src/**/MaterialIcons-Regular.woff', 'src/**/MaterialIcons-Regular.woff2', + '!src/theme.scss', 'src/**/**.scss', '!src/app/**/**.scss', 'src/**/**.html', diff --git a/package.json b/package.json index 1db1370bde..a42d655546 100644 --- a/package.json +++ b/package.json @@ -57,25 +57,7 @@ "@angular/platform-browser-dynamic": "^2.0.0", "@angular/platform-server": "^2.0.0", "@angular/router": "^3.0.0", - "@angular2-material/button": "^2.0.0-alpha.8-2", - "@angular2-material/button-toggle": "^2.0.0-alpha.8-2", - "@angular2-material/card": "^2.0.0-alpha.8-2", - "@angular2-material/checkbox": "^2.0.0-alpha.8-2", - "@angular2-material/core": "^2.0.0-alpha.8-2", - "@angular2-material/grid-list": "^2.0.0-alpha.8-2", - "@angular2-material/icon": "^2.0.0-alpha.8-2", - "@angular2-material/input": "^2.0.0-alpha.8-2", - "@angular2-material/list": "^2.0.0-alpha.8-2", - "@angular2-material/menu": "^2.0.0-alpha.8-2", - "@angular2-material/progress-bar": "^2.0.0-alpha.8-2", - "@angular2-material/progress-circle": "^2.0.0-alpha.8-2", - "@angular2-material/radio": "^2.0.0-alpha.8-2", - "@angular2-material/sidenav": "^2.0.0-alpha.8-2", - "@angular2-material/slide-toggle": "^2.0.0-alpha.8-2", - "@angular2-material/slider": "^2.0.0-alpha.8-2", - "@angular2-material/tabs": "^2.0.0-alpha.8-2", - "@angular2-material/toolbar": "^2.0.0-alpha.8-2", - "@angular2-material/tooltip": "^2.0.0-alpha.8-2", + "@angular/material": "2.0.0-alpha.9-3", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "highlight.js": "9.6.0", @@ -100,7 +82,7 @@ "gulp-if": "2.0.1", "gulp-sass": "2.3.2", "gulp-sourcemaps": "1.6.0", - "gulp-typescript": "2.13.6", + "gulp-typescript": "3.0.1", "gulp-util": "3.0.7", "jasmine-core": "^2.4.1", "jasmine-spec-reporter": "2.5.0", @@ -111,9 +93,11 @@ "karma-remap-istanbul": "^0.2.1", "karma-firefox-launcher": "^1.0.0", "karma-phantomjs-launcher": "1.0.1", + "merge2": "1.0.2", "node-sass": "3.8.0", "phantomjs-prebuilt": "2.1.7", "protractor": "4.0.7", + "require-dir": "0.3.0", "rollup": "^0.35.9", "rollup-plugin-commonjs": "4.1.0", "rollup-plugin-node-resolve": "2.0.0", diff --git a/scripts/compile-ts.js b/scripts/compile-ts.js index bf76977380..d1b7439a7b 100644 --- a/scripts/compile-ts.js +++ b/scripts/compile-ts.js @@ -10,19 +10,27 @@ var tsProject = ts.createProject({ declaration: true, emitDecoratorMetadata: true, experimentalDecorators: true, - module: "commonjs", + mapRoot: "./", + lib: ["es6", "dom"], + module: "es6", moduleResolution: "node", noEmitOnError: true, noImplicitAny: false, target: "ES5", - typescript: require('typescript') + typescript: require('typescript'), + typeRoots: [ + "../node_modules/@types" + ], + types: [ + "hammerjs" + ] }); gulp.task('compile-ts', 'Build the UDA scripts', function() { var tsResult = gulp .src(config.paths.tsfiles) .pipe(sourcemaps.init()) - .pipe(ts(tsProject)); + .pipe(tsProject()); return merge(tsResult.dts .pipe(gulp.dest('deploy/')), diff --git a/scripts/inline-resources.js b/scripts/inline-resources.js index fa0f070235..3f98b73977 100644 --- a/scripts/inline-resources.js +++ b/scripts/inline-resources.js @@ -89,6 +89,7 @@ function inlineStyle(filePath, content) { const urls = eval(styleUrls); return 'styles: [' + urls.map(styleUrl => { + styleUrl = styleUrl.replace('scss', 'css'); //look for built css instead of scss const styleFile = path.join(path.dirname(filePath), styleUrl); const styleContent = fs.readFileSync(styleFile, 'utf-8'); const shortenedStyle = styleContent diff --git a/scripts/rollup.js b/scripts/rollup.js index 338be67516..febab11c2e 100644 --- a/scripts/rollup.js +++ b/scripts/rollup.js @@ -27,28 +27,7 @@ gulp.task('rollup-code', '', function() { '@angular/router': 'ng.router', '@angular/platform-browser': 'ng.platformBrowser', '@angular/platform-browser-dynamic': 'ng.platformBrowserDynamic', - - // Angular dependencies - - '@angular2-material/button': 'md.button', - '@angular2-material/button-toggle': 'md.buttonToggle', - '@angular2-material/card': 'md.card', - '@angular2-material/checkbox': 'md.checkbox', - '@angular2-material/core': 'md.core', - '@angular2-material/grid-list': 'md.gridList', - '@angular2-material/icon': 'md.icon', - '@angular2-material/input': 'md.input', - '@angular2-material/list': 'md.list', - '@angular2-material/menu': 'md.menu', - '@angular2-material/progress-bar': 'md.progressBar', - '@angular2-material/progress-circle': 'md.progressCircle', - '@angular2-material/radio': 'md.radio', - '@angular2-material/sidenav': 'md.sidenav', - '@angular2-material/slider': 'md.slider', - '@angular2-material/slide-toggle': 'md.slideToggle', - '@angular2-material/tabs': 'md.tabs', - '@angular2-material/toolbar': 'md.toolbar', - '@angular2-material/tooltip': 'md.tooltip', + '@angular/material': 'ng.material', // Rxjs dependencies 'rxjs/Subject': 'Rx', @@ -74,10 +53,7 @@ gulp.task('rollup-code', '', function() { return rollup({ entry: path.join(config.paths.deployed, name, 'index.js'), context: 'window', - external: Object.keys(globals).concat(components.map(name => `@covalent/${name}`)), - plugins: [ - commonjs({ jsnext: true, main: true }), - ] + external: Object.keys(globals).concat(components.map(name => `@covalent/${name}`)) }); }) .then((bundle) => { diff --git a/src/app/app.component.scss b/src/app/app.component.scss index cab7278adc..c3e100c3a0 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,172 +1,10 @@ -/* Variables */ -$md-primary: #F57C00; -$md-primary-opacity: rgba(245, 124, 0, 0.12); -$md-accent: #0288D1; -$md-accent-opacity: rgba(2, 136, 209, 0.12); -$md-warn: #C62828; +// Applies Shadow DOM styles to the root app component -/* :host /deep/ lets shadowdom style child elements */ +// :host /deep/ lets you travel down the Shadow DOM tree to change web component styles :host /deep/ { - md-toolbar, - [md-raised-button], - [md-fab], - [md-mini-fab] { - &.md-primary { - background-color: $md-primary; - } - &.md-accent { - background-color: $md-accent; - } - } - [md-fab], - [md-mini-fab], - .md-radio-checked .md-radio-inner-circle, - .md-checkbox-checked .md-checkbox-background { - background-color: $md-accent; - } - .md-radio-checked { - .md-radio-outer-circle { - border-color: $md-accent; - } - } - [md-button], - [md-icon-button] { - &.md-primary { - color: $md-primary; - } - &.md-accent { - color: $md-accent; - } - } - [md-button]:hover { - &.md-primary::after { - background-color: $md-primary-opacity; - } - &.md-accent::after{ - background-color: $md-accent-opacity; - } - } - .md-radio-focused, - .md-checkbox-focused { - .md-ink-ripple { - background-color: $md-accent-opacity; - } - } - .md-input-placeholder.md-focused { - color: $md-primary !important; - } - .md-progress-bar-fill::after { - background-color: $md-primary !important; - } - .md-input-underline .md-input-ripple { - background-color: $md-primary !important; - &.md-accent { - background-color: $md-accent !important; - } - &.md-warn { - background-color: $md-warn !important; - } - } - .md-progress-bar-buffer { - background-color: lighten($md-primary, 40%) !important; - } - md-progress-bar[color='accent'] { - .md-progress-bar-fill::after, - .md-input-underline .md-input-ripple { - background-color: $md-accent !important; - } - .md-progress-bar-buffer { - background-color: lighten($md-accent, 40%) !important; - } - } - md-progress-bar[color='warn'] { - .md-progress-bar-fill::after, - .md-input-underline .md-input-ripple { - background-color: $md-warn !important; - } - .md-progress-bar-buffer { - background-color: lighten($md-warn, 40%) !important; - } - } - md-progress-circle, - md-spinner { - path { - stroke: $md-primary !important; - } - &[color='accent'] { - path { - stroke: $md-accent !important; - } - } - &[color='warn'] { - path { - stroke: $md-warn !important; - } - } - } - md-ink-bar { - background-color: $md-primary !important; - } - .md-tab-label:focus { - background-color: $md-primary-opacity !important; - } - md-slide-toggle { - &.md-checked { - .md-slide-toggle-thumb { - background-color: $md-accent !important; - } - .md-slide-toggle-bar { - background-color: $md-accent-opacity !important; - } - } - &.md-slide-toggle-focused { - .md-ink-ripple { - background-color: $md-accent-opacity !important; - } - } - } - .md-slider-thumb::after { - background-color: $md-accent; - border-color: $md-accent; - } - .md-slider-track-fill { - background-color: $md-accent; - } - md-nav-list { - [md-list-item].active { - md-icon[md-list-avatar] { - background-color: $md-accent; - color: white; - } - md-icon[md-list-icon] { - color: $md-accent; - } - } - } - a[md-icon-button] { - line-height: 36px; - } - .md-tab-label { - flex-grow: 1; - } - /* md-hint styles were missing from material2 */ - md-hint { - position: absolute; - font-size: 75%; - bottom: -0.5em; - - &.md-right { - right: 0; - } - - [dir='rtl'] & { - right: 0; - left: auto; - &.md-right { - right: auto; - left: 0; - } - } + // md-divider has a bug in angular-material that doesn't apply color + md-divider { + border-top-color: rgba(black, 0.12); } } \ No newline at end of file diff --git a/src/app/components/docs/theme/theme.component.html b/src/app/components/docs/theme/theme.component.html index b065da8e61..52212ce27a 100644 --- a/src/app/components/docs/theme/theme.component.html +++ b/src/app/components/docs/theme/theme.component.html @@ -5,23 +5,38 @@ - IMPORTANT: This is a temporary workaround until a real theming solution is solved upstream in Angular-Material2. - Once they have that fixed, we'll remove this workaround. + IMPORTANT: As of Covalent 0.8 we now support the official Angular-Material SCSS Theming variables.

SCSS Variables

-

If you're using the Covalent Quickstart App, edit /src/app/app.component.scss

-

For the easiest route, just update these SCSS variables:

- - /* Variables */ - $md-primary: #0097A7; - $md-primary-opacity: rgba(0, 151, 167, 0.12); - $md-accent: #FF4081; - $md-accent-opacity: rgba(255, 64, 129, 0.12); - $md-warn: #FF9100; +

Simply edit the /theme.scss file and update these SCSS variables:

+ + @import '~@angular/material/core/theming/all-theme'; + // Plus imports for other components in your app. + + // Include the base styles for Angular Material core. We include this here so that you only + // have to load a single css file for Angular Material in your app. + @include md-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. + $primary: md-palette($md-orange, 800); + $accent: md-palette($md-light-blue, 600, A100, A400); + + // The warn palette is optional (defaults to red). + $warn: md-palette($md-red); + + // Create the theme object (a Sass map containing all of the palettes). + $theme: md-light-theme($primary, $accent, $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($theme);

- and we'll override the core material2 styles with your theme preferences. + Color palettes and hues follow the official Material Design Spec.

@@ -31,25 +46,32 @@

SCSS Variables

- Material Design Color Palette + Multiple color themes Choose a primary, accent and warn color from the official Material color palette. + + Add the custom CSS class with custom SCSS variables to your /theme.scss file + +

Light Blue Primary / Orange Accent

- - /* Variables */ - $md-primary: #0288D1; - $md-primary-opacity: rgba(2, 136, 209, 0.12); - $md-accent: #F57C00; - $md-accent-opacity: rgba(245, 124, 0, 0.12); - $md-warn: #D32F2F; + + .light-blue-orange {{ '{' }} + $primary2: md-palette($md-light-blue); + $accent2: md-palette($md-orange, 800); + $warn2: md-palette($md-red, 600); + + $light-blue-orange: md-light-theme($primary2, $accent2, $warn2); + + @include angular-material-theme($light-blue-orange); + {{ '}' }}
- - + + @@ -58,8 +80,8 @@

Light Blue Primary / -

View title

@@ -73,21 +95,24 @@

View title

-

Orange Primary / Light Blue Accent

+

Blue Grey Primary / Deep Orange Accent

- - /* Variables */ - $md-primary: #F57C00; - $md-primary-opacity: rgba(245, 124, 0, 0.12); - $md-accent: #0288D1; - $md-accent-opacity: rgba(2, 136, 209, 0.12); - $md-warn: #D32F2F; + + .blue-grey-deep-orange {{ '{' }} + $primary3: md-palette($md-blue-grey); + $accent3: md-palette($md-deep-orange); + $warn3: md-palette($md-red, 600); + + $blue-grey-deep-orange: md-light-theme($primary3, $accent3, $warn3); + + @include angular-material-theme($blue-grey-deep-orange); + {{ '}' }}
- - + + @@ -96,8 +121,8 @@

Orange Primary / -

View title

diff --git a/src/app/components/style-guide/material-components/material-components.component.html b/src/app/components/style-guide/material-components/material-components.component.html index 5ded7b83d9..4994ab59ff 100644 --- a/src/app/components/style-guide/material-components/material-components.component.html +++ b/src/app/components/style-guide/material-components/material-components.component.html @@ -986,6 +986,77 @@

Usage within Forms

 + + Grid list with images and headers or footers + + + + + + + + + + + + + + + Tooltips @@ -1143,4 +1214,74 @@

Usage within Forms

]]> + + + Snack Bar + + + + + + = this._snackBarService.open('Message', 'Action', this._snackBarConfig); + setTimeout(() => { + snackBarRef.dismiss(); + }, 3000); + } + ]]> + + + + + Dialog + + + + + + + = + this._dialogService.open(CustomAlertDialogComponent, this._dialogConfig); + } + + showConfirmDialog(): void { + let dialogRef: MdDialogRef = + this._dialogService.open(CustomConfirmDialogComponent, this._dialogConfig); + dialogRef.afterClosed().subscribe((data: boolean) => { + if (data) { + // clicked yes + } else { + // clicked no + } + }); + } + ]]> + + \ No newline at end of file diff --git a/src/app/components/style-guide/material-components/material-components.component.ts b/src/app/components/style-guide/material-components/material-components.component.ts index c48826d33e..081ee2a70a 100644 --- a/src/app/components/style-guide/material-components/material-components.component.ts +++ b/src/app/components/style-guide/material-components/material-components.component.ts @@ -1,4 +1,6 @@ -import { Component } from '@angular/core'; +import { Component, ViewContainerRef } from '@angular/core'; +import { MdSnackBar, MdSnackBarConfig, MdDialog, MdSnackBarRef, + MdDialogConfig, MdDialogRef } from '@angular/material'; @Component({ selector: 'design-patterns-material-components', @@ -88,7 +90,94 @@ export class MaterialComponentsComponent { }, ]; + dogs: Object[] = [ + { name: 'Porter', human: 'Kara' }, + { name: 'Mal', human: 'Jeremy' }, + { name: 'Koby', human: 'Igor' }, + { name: 'Razzle', human: 'Ward' }, + { name: 'Molly', human: 'Rob' }, + { name: 'Husi', human: 'Matias' }, + ]; + house: Object = { lockHouse: false, }; + + _snackBarConfig: MdSnackBarConfig; + _dialogConfig: MdDialogConfig; + + constructor(private _snackBarService: MdSnackBar, + private _dialogService: MdDialog, + viewContainerRef: ViewContainerRef) { + this._snackBarConfig = new MdSnackBarConfig(viewContainerRef); + this._dialogConfig = new MdDialogConfig(); + this._dialogConfig.viewContainerRef = viewContainerRef; + } + + showSnackBar(): void { + let snackBarRef: MdSnackBarRef = this._snackBarService.open('Message', 'Action', this._snackBarConfig); + setTimeout(() => { + snackBarRef.dismiss(); + }, 3000); + } + + showAlertDialog(): void { + let dialogRef: MdDialogRef = + this._dialogService.open(TdAlertDialogComponent, this._dialogConfig); + dialogRef.componentInstance.title = 'Alert Title'; + dialogRef.componentInstance.message = 'This is an alert dialog with a custom message.'; + } + + showConfirmDialog(): void { + let dialogRef: MdDialogRef = + this._dialogService.open(TdConfirmDialogComponent, this._dialogConfig); + dialogRef.componentInstance.title = 'Confirmation Title'; + dialogRef.componentInstance.message = 'This is a confirmation dialog. Like what you see in covalent?'; + dialogRef.afterClosed().subscribe((data: any) => { + let snackBarRef: MdSnackBarRef; + if (data) { + snackBarRef = this._snackBarService.open('You clicked Yes :D', 'Ok', this._snackBarConfig); + } else { + snackBarRef = this._snackBarService.open('You clicked No :(', 'Ok', this._snackBarConfig); + } + setTimeout(() => { + snackBarRef.dismiss(); + }, 3000); + }); + } +} + +@Component({ + selector: 'td-alert-dialog', + template: ` +

{{title}}

+

{{message}}

+
+ + +
`, +}) +export class TdAlertDialogComponent { + title: string = 'Alert'; + message: string = ''; + + constructor(public dialogRef: MdDialogRef) { } +} + +@Component({ + selector: 'td-confirm-dialog', + template: ` +

{{title}}

+

{{message}}

+
+ + + +
`, +}) +export class TdConfirmDialogComponent { + title: string = 'Confirmation'; + message: string = ''; + + constructor(public dialogRef: MdDialogRef) { } } diff --git a/src/app/components/style-guide/style-guide.module.ts b/src/app/components/style-guide/style-guide.module.ts index e07127ce03..20c8e2a0bf 100644 --- a/src/app/components/style-guide/style-guide.module.ts +++ b/src/app/components/style-guide/style-guide.module.ts @@ -8,7 +8,8 @@ import { ProductIconsComponent } from './product-icons/product-icons.component'; import { TypographyComponent } from './typography/typography.component'; import { IconographyComponent } from './iconography/iconography.component'; import { ColorsComponent } from './colors/colors.component'; -import { MaterialComponentsComponent } from './material-components/material-components.component'; +import { MaterialComponentsComponent, TdConfirmDialogComponent, + TdAlertDialogComponent } from './material-components/material-components.component'; import { CardsComponent } from './cards/cards.component'; import { UtilityStylesComponent } from './utility-styles/utility-styles.component'; import { ResourcesComponent } from './resources/resources.component'; @@ -28,11 +29,14 @@ import { CovalentHighlightModule } from '../../../platform/highlight'; CardsComponent, UtilityStylesComponent, ResourcesComponent, + TdAlertDialogComponent, + TdConfirmDialogComponent, ], imports: [ CovalentCoreModule.forRoot(), CovalentHighlightModule.forRoot(), styleGuideRoutes, ], + entryComponents: [ TdAlertDialogComponent, TdConfirmDialogComponent ], }) export class StyleGuideModule {} diff --git a/src/platform/chips/chips.module.ts b/src/platform/chips/chips.module.ts index 4bb8032224..3ac3c8789d 100644 --- a/src/platform/chips/chips.module.ts +++ b/src/platform/chips/chips.module.ts @@ -3,8 +3,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; -import { MdInputModule } from '@angular2-material/input'; -import { MdIconModule } from '@angular2-material/icon'; +import { MdInputModule, MdIconModule } from '@angular/material'; import { TdChipsComponent } from './chips.component'; import { TdChipComponent } from './chip.component'; diff --git a/src/platform/core/index.ts b/src/platform/core/index.ts index 5399b64faf..5d6ef344dc 100644 --- a/src/platform/core/index.ts +++ b/src/platform/core/index.ts @@ -5,98 +5,7 @@ import { CommonModule } from '@angular/common'; import { HttpModule, JsonpModule } from '@angular/http'; import { FormsModule } from '@angular/forms'; -/** - * ANGULAR2 MATERIAL MODULES - */ - -import { MdCoreModule, MdRippleModule, PortalModule, - OverlayModule, RtlModule, MdLiveAnnouncer } from '@angular2-material/core'; -import { MdButtonToggleModule } from '@angular2-material/button-toggle'; -import { MdButtonModule } from '@angular2-material/button'; -import { MdCheckboxModule } from '@angular2-material/checkbox'; -import { MdRadioModule } from '@angular2-material/radio'; -import { MdSlideToggleModule } from '@angular2-material/slide-toggle'; -import { MdSliderModule } from '@angular2-material/slider'; -import { MdSidenavModule } from '@angular2-material/sidenav'; -import { MdListModule } from '@angular2-material/list'; -import { MdGridListModule } from '@angular2-material/grid-list'; -import { MdCardModule } from '@angular2-material/card'; -import { MdIconModule } from '@angular2-material/icon'; -import { MdMenuModule } from '@angular2-material/menu'; -import { MdProgressCircleModule } from '@angular2-material/progress-circle'; -import { MdProgressBarModule } from '@angular2-material/progress-bar'; -import { MdInputModule } from '@angular2-material/input'; -import { MdTabsModule } from '@angular2-material/tabs'; -import { MdToolbarModule } from '@angular2-material/toolbar'; -import { MdTooltipModule } from '@angular2-material/tooltip'; - -const MATERIAL_MODULES: Type[] = [ - MdCoreModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdProgressBarModule, - MdProgressCircleModule, - MdRadioModule, - MdRippleModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, - OverlayModule, - PortalModule, - RtlModule, -]; - -@NgModule({ - imports: [ - MdButtonModule.forRoot(), - MdCardModule.forRoot(), - MdCheckboxModule.forRoot(), - MdGridListModule.forRoot(), - MdInputModule.forRoot(), - MdListModule.forRoot(), - MdProgressBarModule.forRoot(), - MdProgressCircleModule.forRoot(), - MdRippleModule.forRoot(), - MdSidenavModule.forRoot(), - MdTabsModule.forRoot(), - MdToolbarModule.forRoot(), - PortalModule.forRoot(), - RtlModule.forRoot(), - - // These modules include providers. - MdButtonToggleModule.forRoot(), - MdIconModule.forRoot(), - MdMenuModule.forRoot(), - MdRadioModule.forRoot(), - MdSliderModule.forRoot(), - MdSlideToggleModule.forRoot(), - MdTooltipModule.forRoot(), - OverlayModule.forRoot(), - ], - exports: MATERIAL_MODULES, - providers: [MdLiveAnnouncer], -}) -export class MaterialRootModule { } - -@NgModule({ - imports: MATERIAL_MODULES, - exports: MATERIAL_MODULES, -}) -export class MaterialModule { - static forRoot(): ModuleWithProviders { - return {ngModule: MaterialRootModule}; - } -} +import { MaterialModule } from '@angular/material'; /** * COMPONENTS diff --git a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts index 7d8abe5403..ad70f28e45 100644 --- a/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts +++ b/src/platform/core/layout/layout-manage-list/layout-manage-list.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; import { Output, EventEmitter } from '@angular/core'; import { ViewChild } from '@angular/core'; -import { MdSidenav } from '@angular2-material/sidenav'; +import { MdSidenav } from '@angular/material'; import { TdLayoutService } from '../services/layout.service'; diff --git a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts index 107c2f1c5a..67543c18ca 100644 --- a/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts +++ b/src/platform/core/layout/layout-nav-list/layout-nav-list.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; import { Input, Output, EventEmitter } from '@angular/core'; import { ViewChild } from '@angular/core'; -import { MdSidenav } from '@angular2-material/sidenav'; +import { MdSidenav } from '@angular/material'; import { TdLayoutService } from '../services/layout.service'; diff --git a/src/platform/core/layout/layout.component.ts b/src/platform/core/layout/layout.component.ts index ed0742d71a..02825fdfeb 100644 --- a/src/platform/core/layout/layout.component.ts +++ b/src/platform/core/layout/layout.component.ts @@ -3,7 +3,7 @@ import { Input, Output, EventEmitter } from '@angular/core'; import { ViewChild } from '@angular/core'; import { Subscription } from 'rxjs'; -import { MdSidenav } from '@angular2-material/sidenav'; +import { MdSidenav } from '@angular/material'; import { TdLayoutService } from './services/layout.service'; diff --git a/src/platform/core/package.json b/src/platform/core/package.json index 2dd690c319..cd95ffd7c4 100644 --- a/src/platform/core/package.json +++ b/src/platform/core/package.json @@ -30,34 +30,16 @@ "Jeremy Wilken " ], "dependencies": { - "@angular/common": "^2.0.0-rc.7", - "@angular/compiler": "^2.0.0-rc.7", - "@angular/core": "^2.0.0-rc.7", - "@angular/forms": "^2.0.0-rc.7", - "@angular/http": "^2.0.0-rc.7", - "@angular/platform-browser": "^2.0.0-rc.7", - "@angular/platform-browser-dynamic": "^2.0.0-rc.7", - "@angular/platform-server": "^2.0.0-rc.7", - "@angular/router": "^3.0.0-rc.3", - "@angular2-material/button": "^2.0.0-alpha.8-1", - "@angular2-material/button-toggle": "^2.0.0-alpha.8-1", - "@angular2-material/card": "^2.0.0-alpha.8-1", - "@angular2-material/checkbox": "^2.0.0-alpha.8-1", - "@angular2-material/core": "^2.0.0-alpha.8-1", - "@angular2-material/grid-list": "^2.0.0-alpha.8-1", - "@angular2-material/icon": "^2.0.0-alpha.8-1", - "@angular2-material/input": "^2.0.0-alpha.8-1", - "@angular2-material/list": "^2.0.0-alpha.8-1", - "@angular2-material/menu": "^2.0.0-alpha.8-1", - "@angular2-material/progress-bar": "^2.0.0-alpha.8-1", - "@angular2-material/progress-circle": "^2.0.0-alpha.8-1", - "@angular2-material/radio": "^2.0.0-alpha.8-1", - "@angular2-material/sidenav": "^2.0.0-alpha.8-1", - "@angular2-material/slider": "^2.0.0-alpha.8-1", - "@angular2-material/slide-toggle": "^2.0.0-alpha.8-1", - "@angular2-material/tabs": "^2.0.0-alpha.8-1", - "@angular2-material/toolbar": "^2.0.0-alpha.8-1", - "@angular2-material/tooltip": "^2.0.0-alpha.8-1", + "@angular/common": "^2.0.0", + "@angular/compiler": "^2.0.0", + "@angular/core": "^2.0.0", + "@angular/forms": "^2.0.0", + "@angular/http": "^2.0.0", + "@angular/platform-browser": "^2.0.0", + "@angular/platform-browser-dynamic": "^2.0.0", + "@angular/platform-server": "^2.0.0", + "@angular/router": "^3.0.0", + "@angular/material": "2.0.0-alpha.9-3", "core-js": "^2.4.1", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.31", diff --git a/src/platform/file-upload/file-upload.module.ts b/src/platform/file-upload/file-upload.module.ts index a58ce8d609..7ddca6b54a 100644 --- a/src/platform/file-upload/file-upload.module.ts +++ b/src/platform/file-upload/file-upload.module.ts @@ -5,29 +5,7 @@ import { CommonModule } from '@angular/common'; import { HttpModule, JsonpModule } from '@angular/http'; import { FormsModule } from '@angular/forms'; -import { MdCoreModule, MdRippleModule, PortalModule, - OverlayModule, RtlModule, MdLiveAnnouncer } from '@angular2-material/core'; -import { MdButtonModule } from '@angular2-material/button'; -import { MdIconModule } from '@angular2-material/icon'; -import { MdTooltipModule } from '@angular2-material/tooltip'; - -const MATERIAL_MODULES: Type[] = [ - MdCoreModule, - MdButtonModule, - MdIconModule, - MdRippleModule, - MdTooltipModule, - OverlayModule, - PortalModule, - RtlModule, -]; - -@NgModule({ - imports: MATERIAL_MODULES, - exports: MATERIAL_MODULES, - providers: [MdLiveAnnouncer], -}) -export class MaterialModule { } +import { MaterialModule } from '@angular/material'; import { TdFileSelectDirective } from './directives/file-select.directive'; import { TdFileDropDirective } from './directives/file-drop.directive'; @@ -46,7 +24,7 @@ export const TD_FILE_DIRECTIVES: Type[] = [ JsonpModule, FormsModule, CommonModule, - MaterialModule, + MaterialModule.forRoot(), ], declarations: [ TD_FILE_DIRECTIVES, diff --git a/src/platform/json-formatter/json-formatter.module.ts b/src/platform/json-formatter/json-formatter.module.ts index 834fd02b61..3f22cb228a 100644 --- a/src/platform/json-formatter/json-formatter.module.ts +++ b/src/platform/json-formatter/json-formatter.module.ts @@ -1,7 +1,7 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MdIconModule } from '@angular2-material/icon'; +import { MdIconModule } from '@angular/material'; import { TdJsonFormatterComponent } from './json-formatter.component'; diff --git a/src/styles.css b/src/styles.css deleted file mode 100644 index 90d4ee0072..0000000000 --- a/src/styles.css +++ /dev/null @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ diff --git a/src/styles.scss b/src/styles.scss new file mode 100644 index 0000000000..81b5a470ec --- /dev/null +++ b/src/styles.scss @@ -0,0 +1,25 @@ +@import "theme"; +// You can add global styles to this file that will cascade like normal CSS + +// Active icon color in list nav +md-nav-list { + [md-list-item].active { + md-icon[md-list-avatar] { + background-color: md-color($accent); + color: md-color($accent, default-contrast) + } + md-icon[md-list-icon] { + color: md-color($accent); + } + } +} + +// Href line height wasn't right for md-icon-button +a[md-icon-button] { + line-height: 36px; +} + +// Stretch tab labels until there is an attribute for it +.md-tab-label { + flex-grow: 1; +} \ No newline at end of file diff --git a/src/theme.scss b/src/theme.scss new file mode 100644 index 0000000000..b92b174aa1 --- /dev/null +++ b/src/theme.scss @@ -0,0 +1,43 @@ +@import '~@angular/material/core/theming/all-theme'; +// Plus imports for other components in your app. + +// Include the base styles for Angular Material core. We include this here so that you only +// have to load a single css file for Angular Material in your app. +@include md-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. +$primary: md-palette($md-orange, 800); +$accent: md-palette($md-light-blue, 600, A100, A400); + +// The warn palette is optional (defaults to red). +$warn: md-palette($md-red, 600); + +// Create the theme object (a Sass map containing all of the palettes). +$theme: md-light-theme($primary, $accent, $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($theme); + +.light-blue-orange { + $primary2: md-palette($md-light-blue); + $accent2: md-palette($md-orange, 800); + $warn2: md-palette($md-red, 600); + + $light-blue-orange: md-light-theme($primary2, $accent2, $warn2); + + @include angular-material-theme($light-blue-orange); +} + +.blue-grey-deep-orange { + $primary3: md-palette($md-blue-grey); + $accent3: md-palette($md-deep-orange); + $warn3: md-palette($md-red, 600); + + $blue-grey-deep-orange: md-light-theme($primary3, $accent3, $warn3); + + @include angular-material-theme($blue-grey-deep-orange); +} \ No newline at end of file