From 111826c867b4e7025ae6e256a3d87c50a4a9f383 Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 6 May 2018 12:08:20 -0500 Subject: [PATCH 01/11] fix: nav schematic fixes --- .../__name@dasherize__.component.__styleext__ | 6 +++++- .../__name@dasherize__.component.html | 3 ++- .../__name@dasherize__.component.ts | 9 +++++++-- src/lib/schematics/shell/index.ts | 6 +++--- src/lib/schematics/utils/lib-versions.ts | 1 - 5 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ index acf02cabde02..0b3a9a97bab0 100644 --- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ +++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.__styleext__ @@ -4,5 +4,9 @@ .sidenav { width: 200px; - box-shadow: 3px 0 6px rgba(0,0,0,.24); +} + +.mat-toolbar.mat-primary { + position: sticky; + top: 0; } diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html index f71b7e702e9b..82a92d9ccc43 100644 --- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html @@ -23,7 +23,8 @@ *ngIf="(isHandset | async)!.matches"> menu - Application Title + <%= project %> + diff --git a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts index a39f2aa3af0f..29ff37c1741f 100644 --- a/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +++ b/src/lib/schematics/nav/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts @@ -30,8 +30,9 @@ import { Observable } from 'rxjs'; *ngIf="(isHandset | async)!.matches"> menu - Application Title + <%= project %> + `,<% } else { %> @@ -44,7 +45,11 @@ import { Observable } from 'rxjs'; .sidenav { width: 200px; - box-shadow: 3px 0 6px rgba(0,0,0,.24); + } + + .mat-toolbar.mat-primary { + position: sticky; + top: 0; } ` ]<% } else { %> diff --git a/src/lib/schematics/shell/index.ts b/src/lib/schematics/shell/index.ts index 4ddf2769a553..c8b53f807c2a 100644 --- a/src/lib/schematics/shell/index.ts +++ b/src/lib/schematics/shell/index.ts @@ -3,7 +3,7 @@ import {addModuleImportToRootModule, getStylesPath} from '../utils/ast'; import {InsertChange} from '../utils/devkit-utils/change'; import {getProjectFromWorkspace, getWorkspace} from '../utils/devkit-utils/config'; import {addHeadLink} from '../utils/html'; -import {angularVersion, cdkVersion, materialVersion} from '../utils/lib-versions'; +import {angularVersion, materialVersion} from '../utils/lib-versions'; import {addPackageToPackageJson} from '../utils/package'; import {Schema} from './schema'; import {addThemeToAppStyles} from './theming'; @@ -28,7 +28,7 @@ export default function(options: Schema): Rule { /** Add material, cdk, annimations to package.json if not already present. */ function addMaterialToPackageJson() { return (host: Tree) => { - addPackageToPackageJson(host, 'dependencies', '@angular/cdk', cdkVersion); + addPackageToPackageJson(host, 'dependencies', '@angular/cdk', materialVersion); addPackageToPackageJson(host, 'dependencies', '@angular/material', materialVersion); addPackageToPackageJson(host, 'dependencies', '@angular/animations', angularVersion); return host; @@ -78,7 +78,7 @@ function addBodyMarginToStyles(options: Schema) { const buffer = host.read(stylesPath); if (buffer) { const src = buffer.toString(); - const insertion = new InsertChange(stylesPath, src.length, `\nbody { margin: 0; }\n`); + const insertion = new InsertChange(stylesPath, src.length, `\nbody { margin: 0; font-family: 'Roboto', sans-serif; }\n`); const recorder = host.beginUpdate(stylesPath); recorder.insertLeft(insertion.pos, insertion.toAdd); host.commitUpdate(recorder); diff --git a/src/lib/schematics/utils/lib-versions.ts b/src/lib/schematics/utils/lib-versions.ts index f894d878fcb0..50454d8b9c5a 100644 --- a/src/lib/schematics/utils/lib-versions.ts +++ b/src/lib/schematics/utils/lib-versions.ts @@ -1,3 +1,2 @@ export const materialVersion = '^6.0.0'; -export const cdkVersion = '^6.0.0'; export const angularVersion = '^6.0.0'; From e35554b7961869d66be84d544660b3a11864143b Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 6 May 2018 12:32:59 -0500 Subject: [PATCH 02/11] feat(schematics): add responsive dashboard --- .../__name@dasherize__.component.ts | 30 +++++++++++++++---- src/lib/schematics/dashboard/index.ts | 3 +- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/lib/schematics/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts b/src/lib/schematics/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts index d72b1f1ae417..1dad7feba050 100644 --- a/src/lib/schematics/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +++ b/src/lib/schematics/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts @@ -1,4 +1,6 @@ import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core'; +import { map } from 'rxjs/operators'; +import { Breakpoints, BreakpointState, BreakpointObserver } from '@angular/cdk/layout'; @Component({ selector: '<%= selector %>',<% if(inlineTemplate) { %> @@ -59,10 +61,26 @@ import { Component<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if( changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %> }) export class <%= classify(name) %>Component { - cards = [ - { title: 'Card 1', cols: 2, rows: 1 }, - { title: 'Card 2', cols: 1, rows: 1 }, - { title: 'Card 3', cols: 1, rows: 2 }, - { title: 'Card 4', cols: 1, rows: 1 } - ]; + /** Based on the screen size, switch from standard to one column per row */ + cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe( + map(({ matches }) => { + if (matches) { + return [ + { title: 'Card 1', cols: 2, rows: 1 }, + { title: 'Card 2', cols: 2, rows: 1 }, + { title: 'Card 3', cols: 2, rows: 1 }, + { title: 'Card 4', cols: 2, rows: 1 } + ]; + } else { + return [ + { title: 'Card 1', cols: 2, rows: 1 }, + { title: 'Card 2', cols: 1, rows: 1 }, + { title: 'Card 3', cols: 1, rows: 2 }, + { title: 'Card 4', cols: 1, rows: 1 } + ]; + } + }) + ); + + constructor(private breakpointObserver: BreakpointObserver) {} } diff --git a/src/lib/schematics/dashboard/index.ts b/src/lib/schematics/dashboard/index.ts index e00eeb04d9b6..e2dc442c3161 100644 --- a/src/lib/schematics/dashboard/index.ts +++ b/src/lib/schematics/dashboard/index.ts @@ -4,7 +4,7 @@ import {addModuleImportToModule, findModuleFromOptions} from '../utils/ast'; import {buildComponent} from '../utils/devkit-utils/component'; /** - * Scaffolds a new navigation component. + * Scaffolds a new dashboard component. * Internally it bootstraps the base component schematic */ export default function(options: Schema): Rule { @@ -25,6 +25,7 @@ function addNavModulesToModule(options: Schema) { addModuleImportToModule(host, modulePath, 'MatMenuModule', '@angular/material'); addModuleImportToModule(host, modulePath, 'MatIconModule', '@angular/material'); addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material'); + addModuleImportToModule(host, modulePath, 'LayoutModule', '@angular/cdk/layout'); return host; }; } From 08174db2c3bc73398f82c792cdad6ce2c07a9143 Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 6 May 2018 12:55:53 -0500 Subject: [PATCH 03/11] fix(schematics): move table to table elm --- .../__name@dasherize__.component.html | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/lib/schematics/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html b/src/lib/schematics/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html index 1105442ae76a..df408a327348 100644 --- a/src/lib/schematics/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html +++ b/src/lib/schematics/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html @@ -1,21 +1,20 @@
- - + - Id - {{row.id}} + + - Name - {{row.name}} + + - - - + + +
Id{{row.id}} Name{{row.name}}
Date: Sun, 6 May 2018 13:00:02 -0500 Subject: [PATCH 04/11] chore: add docs --- src/lib/schematics/README.md | 3 +++ src/lib/schematics/dashboard/README.md | 5 +++++ src/lib/schematics/nav/README.md | 5 +++++ src/lib/schematics/shell/README.md | 3 ++- src/lib/schematics/table/README.md | 7 +++---- 5 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 src/lib/schematics/dashboard/README.md create mode 100644 src/lib/schematics/nav/README.md diff --git a/src/lib/schematics/README.md b/src/lib/schematics/README.md index aa82c497fbdc..06b0b627c4c3 100644 --- a/src/lib/schematics/README.md +++ b/src/lib/schematics/README.md @@ -3,3 +3,6 @@ A collection of Schematics for Angular Material. ## Collection - [Shell](shell/README.md) +- [Dashboard](dashboard/README.md) +- [Table](table/README.md) +- [Nav](nav/README.md) diff --git a/src/lib/schematics/dashboard/README.md b/src/lib/schematics/dashboard/README.md new file mode 100644 index 000000000000..b0a72f9c07a5 --- /dev/null +++ b/src/lib/schematics/dashboard/README.md @@ -0,0 +1,5 @@ + # Dashboard + Creates a responive card grid list component . + + Command: `ng g @angular/material:materialDashboard --name dashboard` + \ No newline at end of file diff --git a/src/lib/schematics/nav/README.md b/src/lib/schematics/nav/README.md new file mode 100644 index 000000000000..c00bb01af03a --- /dev/null +++ b/src/lib/schematics/nav/README.md @@ -0,0 +1,5 @@ + # Nav + Creates a navigation component with responsive sidenav. + + Command: `ng g @angular/material:materialNav --name nav` + \ No newline at end of file diff --git a/src/lib/schematics/shell/README.md b/src/lib/schematics/shell/README.md index 4b3942fc113f..7a611f022fa6 100644 --- a/src/lib/schematics/shell/README.md +++ b/src/lib/schematics/shell/README.md @@ -7,4 +7,5 @@ Adds Angular Material and its depedencies and pre-configures the application. - Ensure `BrowserAnimationsModule` is installed and included in root module - Adds pre-configured theme to `.angular-cli.json` file OR adds custom theme scaffolding to `styles.scss` -Command: `ng generate material-shell --collection=material-schematics` + Command: `ng add @angular/material` + \ No newline at end of file diff --git a/src/lib/schematics/table/README.md b/src/lib/schematics/table/README.md index 178750c08951..52f2a74dc7fa 100644 --- a/src/lib/schematics/table/README.md +++ b/src/lib/schematics/table/README.md @@ -1,5 +1,4 @@ - # Table - Creates a table component with sorting and paginator. +# Table +Creates a table component with sorting and paginator. - Command: `ng generate material-table --collection=material-schematics` - \ No newline at end of file +Command: `ng g @angular/material:materialTable --name table` From 46bddb4d44682c57870e80b5099167b8d61e3939 Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 6 May 2018 13:03:45 -0500 Subject: [PATCH 05/11] chore(schematics): add better naming --- src/lib/schematics/collection.json | 13 ++++++------- src/lib/schematics/dashboard/index_spec.ts | 2 +- src/lib/schematics/nav/index_spec.ts | 4 ++-- src/lib/schematics/shell/index_spec.ts | 8 ++++---- src/lib/schematics/table/index_spec.ts | 4 ++-- 5 files changed, 15 insertions(+), 16 deletions(-) diff --git a/src/lib/schematics/collection.json b/src/lib/schematics/collection.json index c9a590c4193b..0bfbbf92c963 100644 --- a/src/lib/schematics/collection.json +++ b/src/lib/schematics/collection.json @@ -9,27 +9,26 @@ "schema": "./shell/schema.json", "aliases": ["material-shell"] }, - // Create a dashboard component - "materialDashboard": { + "dashboard": { "description": "Create a card-based dashboard component", "factory": "./dashboard/index", "schema": "./dashboard/schema.json", - "aliases": [ "material-dashboard" ] + "aliases": [ "material-dashboard", "materialDashboard" ] }, // Creates a table component - "materialTable": { + "table": { "description": "Create a component that displays data with a data-table", "factory": "./table/index", "schema": "./table/schema.json", - "aliases": [ "material-table" ] + "aliases": [ "material-table", "materialTable" ] }, // Creates toolbar and navigation components - "materialNav": { + "nav": { "description": "Create a component with a responsive sidenav for navigation", "factory": "./nav/index", "schema": "./nav/schema.json", - "aliases": [ "material-nav" ] + "aliases": [ "material-nav", "materialNav" ] } } } diff --git a/src/lib/schematics/dashboard/index_spec.ts b/src/lib/schematics/dashboard/index_spec.ts index 218d0ee9ed5c..6731d0a50c5e 100644 --- a/src/lib/schematics/dashboard/index_spec.ts +++ b/src/lib/schematics/dashboard/index_spec.ts @@ -28,7 +28,7 @@ describe('material-dashboard-schematic', () => { }); it('should create dashboard files and add them to module', () => { - const tree = runner.runSchematic('materialDashboard', { ...options }, createTestApp()); + const tree = runner.runSchematic('dashboard', { ...options }, createTestApp()); const files = tree.files; expect(files).toContain('/src/app/foo/foo.component.css'); diff --git a/src/lib/schematics/nav/index_spec.ts b/src/lib/schematics/nav/index_spec.ts index 9e11631b4bd7..f0e765d6c7da 100644 --- a/src/lib/schematics/nav/index_spec.ts +++ b/src/lib/schematics/nav/index_spec.ts @@ -28,7 +28,7 @@ describe('material-nav-schematic', () => { }); it('should create nav files and add them to module', () => { - const tree = runner.runSchematic('materialNav', { ...options }, createTestApp()); + const tree = runner.runSchematic('nav', { ...options }, createTestApp()); const files = tree.files; expect(files).toContain('/src/app/foo/foo.component.css'); @@ -42,7 +42,7 @@ describe('material-nav-schematic', () => { }); it('should add nav imports to module', () => { - const tree = runner.runSchematic('materialNav', { ...options }, createTestApp()); + const tree = runner.runSchematic('nav', { ...options }, createTestApp()); const moduleContent = getFileContent(tree, '/src/app/app.module.ts'); expect(moduleContent).toContain('LayoutModule'); diff --git a/src/lib/schematics/shell/index_spec.ts b/src/lib/schematics/shell/index_spec.ts index ed9d21dbbad2..3692c7ae2937 100644 --- a/src/lib/schematics/shell/index_spec.ts +++ b/src/lib/schematics/shell/index_spec.ts @@ -20,7 +20,7 @@ describe('material-shell-schematic', () => { }); it('should update package.json', () => { - const tree = runner.runSchematic('materialShell', {}, appTree); + const tree = runner.runSchematic('shell', {}, appTree); const packageJson = JSON.parse(getFileContent(tree, '/package.json')); expect(packageJson.dependencies['@angular/material']).toBeDefined(); @@ -28,7 +28,7 @@ describe('material-shell-schematic', () => { }); it('should add default theme', () => { - const tree = runner.runSchematic('materialShell', {}, appTree); + const tree = runner.runSchematic('shell', {}, appTree); const config: any = getConfig(tree); config.apps.forEach(app => { expect(app.styles).toContain( @@ -37,7 +37,7 @@ describe('material-shell-schematic', () => { }); it('should add custom theme', () => { - const tree = runner.runSchematic('materialShell', { + const tree = runner.runSchematic('shell', { theme: 'custom' }, appTree); @@ -53,7 +53,7 @@ describe('material-shell-schematic', () => { }); it('should add font links', () => { - const tree = runner.runSchematic('materialShell', {}, appTree); + const tree = runner.runSchematic('shell', {}, appTree); const config: any = getConfig(tree); const workspace = getWorkspace(tree); const project = getProjectFromWorkspace(workspace, config.project.name); diff --git a/src/lib/schematics/table/index_spec.ts b/src/lib/schematics/table/index_spec.ts index b498fa1a0f1e..ed2784c36dd3 100644 --- a/src/lib/schematics/table/index_spec.ts +++ b/src/lib/schematics/table/index_spec.ts @@ -28,7 +28,7 @@ describe('material-table-schematic', () => { }); it('should create table files and add them to module', () => { - const tree = runner.runSchematic('materialTable', { ...options }, createTestApp()); + const tree = runner.runSchematic('table', { ...options }, createTestApp()); const files = tree.files; expect(files).toContain('/src/app/foo/foo.component.css'); @@ -50,7 +50,7 @@ describe('material-table-schematic', () => { }); it('should add table imports to module', () => { - const tree = runner.runSchematic('materialTable', { ...options }, createTestApp()); + const tree = runner.runSchematic('table', { ...options }, createTestApp()); const moduleContent = getFileContent(tree, '/src/app/app.module.ts'); expect(moduleContent).toContain('MatTableModule'); From 320c2ec3887f020a9b4a875df35d58f0b8ee3158 Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 6 May 2018 13:09:55 -0500 Subject: [PATCH 06/11] feat(schematics): update to use first arg as name --- src/lib/schematics/dashboard/schema.json | 9 +++++---- src/lib/schematics/nav/schema.json | 9 +++++---- src/lib/schematics/table/schema.json | 9 +++++---- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/lib/schematics/dashboard/schema.json b/src/lib/schematics/dashboard/schema.json index d147d0583ac4..babda250d911 100644 --- a/src/lib/schematics/dashboard/schema.json +++ b/src/lib/schematics/dashboard/schema.json @@ -13,7 +13,10 @@ "project": { "type": "string", "description": "The name of the project.", - "visible": false + "visible": false, + "$default": { + "$source": "projectName" + } }, "name": { "type": "string", @@ -90,7 +93,5 @@ "description": "Specifies if declaring module exports the component." } }, - "required": [ - "name" - ] + "required": [] } diff --git a/src/lib/schematics/nav/schema.json b/src/lib/schematics/nav/schema.json index b126d4fa0902..1c728872fd46 100644 --- a/src/lib/schematics/nav/schema.json +++ b/src/lib/schematics/nav/schema.json @@ -13,7 +13,10 @@ "project": { "type": "string", "description": "The name of the project.", - "visible": false + "visible": false, + "$default": { + "$source": "projectName" + } }, "name": { "type": "string", @@ -90,7 +93,5 @@ "description": "Specifies if declaring module exports the component." } }, - "required": [ - "name" - ] + "required": [] } diff --git a/src/lib/schematics/table/schema.json b/src/lib/schematics/table/schema.json index ab070ee323db..af8921b296bf 100644 --- a/src/lib/schematics/table/schema.json +++ b/src/lib/schematics/table/schema.json @@ -13,7 +13,10 @@ "project": { "type": "string", "description": "The name of the project.", - "visible": false + "visible": false, + "$default": { + "$source": "projectName" + } }, "name": { "type": "string", @@ -90,7 +93,5 @@ "description": "Specifies if declaring module exports the component." } }, - "required": [ - "name" - ] + "required": [] } From eace06d9d04a1d6cd018ed44696476b50473cf3b Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 6 May 2018 13:43:45 -0500 Subject: [PATCH 07/11] chore(schematics): remove old aliases --- src/lib/schematics/collection.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/schematics/collection.json b/src/lib/schematics/collection.json index 0bfbbf92c963..f0c0e73c85b4 100644 --- a/src/lib/schematics/collection.json +++ b/src/lib/schematics/collection.json @@ -14,21 +14,21 @@ "description": "Create a card-based dashboard component", "factory": "./dashboard/index", "schema": "./dashboard/schema.json", - "aliases": [ "material-dashboard", "materialDashboard" ] + "aliases": [] }, // Creates a table component "table": { "description": "Create a component that displays data with a data-table", "factory": "./table/index", "schema": "./table/schema.json", - "aliases": [ "material-table", "materialTable" ] + "aliases": [] }, // Creates toolbar and navigation components "nav": { "description": "Create a component with a responsive sidenav for navigation", "factory": "./nav/index", "schema": "./nav/schema.json", - "aliases": [ "material-nav", "materialNav" ] + "aliases": [] } } } From 1eca79bdea42322e07d78c5058b98d39cfbdd728 Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 20 May 2018 09:58:58 -0500 Subject: [PATCH 08/11] chore: pr feedback --- src/lib/schematics/README.md | 30 ++++++++++++++++--- src/lib/schematics/collection.json | 12 ++++---- src/lib/schematics/dashboard/README.md | 5 ---- .../__name@dasherize__.component.ts | 18 +++++------ .../{shell => install}/custom-theme.ts | 0 .../schematics/{shell => install}/index.ts | 0 .../{shell => install}/index_spec.ts | 6 ++-- .../schematics/{shell => install}/schema.json | 4 +-- .../schematics/{shell => install}/schema.ts | 0 .../schematics/{shell => install}/theming.ts | 0 src/lib/schematics/nav/README.md | 5 ---- src/lib/schematics/shell/README.md | 11 ------- src/lib/schematics/table/README.md | 4 --- 13 files changed, 46 insertions(+), 49 deletions(-) delete mode 100644 src/lib/schematics/dashboard/README.md rename src/lib/schematics/{shell => install}/custom-theme.ts (100%) rename src/lib/schematics/{shell => install}/index.ts (100%) rename src/lib/schematics/{shell => install}/index_spec.ts (92%) rename src/lib/schematics/{shell => install}/schema.json (85%) rename src/lib/schematics/{shell => install}/schema.ts (100%) rename src/lib/schematics/{shell => install}/theming.ts (100%) delete mode 100644 src/lib/schematics/nav/README.md delete mode 100644 src/lib/schematics/shell/README.md delete mode 100644 src/lib/schematics/table/README.md diff --git a/src/lib/schematics/README.md b/src/lib/schematics/README.md index 06b0b627c4c3..92b789491b42 100644 --- a/src/lib/schematics/README.md +++ b/src/lib/schematics/README.md @@ -2,7 +2,29 @@ A collection of Schematics for Angular Material. ## Collection -- [Shell](shell/README.md) -- [Dashboard](dashboard/README.md) -- [Table](table/README.md) -- [Nav](nav/README.md) + +### Install +Adds Angular Material and its depedencies and pre-configures the application. + +- Adds Material and CDK to `package.json` +- Adds Material Icons Stylesheet to `index.html` +- Adds Roboto Font to `index.html` +- Ensure `BrowserAnimationsModule` is installed and included in root module +- Adds pre-configured theme to `.angular.json` file OR adds custom theme scaffolding to `styles.scss` + +Command: `ng add @angular/material` + +### Dashboard +Creates a responive card grid list component. + +Command: `ng g @angular/material:nav my-dashboard` + +### Nav +Creates a navigation component with a responsive sidenav. + +Command: `ng g @angular/material:nav my-nav` + +### Table +Creates a table component with sorting and paginator. + +Command: `ng g @angular/material:table my-table` diff --git a/src/lib/schematics/collection.json b/src/lib/schematics/collection.json index f0c0e73c85b4..d3ca687c794a 100644 --- a/src/lib/schematics/collection.json +++ b/src/lib/schematics/collection.json @@ -5,30 +5,30 @@ // Adds Angular Material to an application without changing any templates "ng-add": { "description": "Adds Angular Material to the application without affecting any templates", - "factory": "./shell", - "schema": "./shell/schema.json", - "aliases": ["material-shell"] + "factory": "./install", + "schema": "./install/schema.json", + "aliases": ["material-shell", "materialShell"] }, // Create a dashboard component "dashboard": { "description": "Create a card-based dashboard component", "factory": "./dashboard/index", "schema": "./dashboard/schema.json", - "aliases": [] + "aliases": ["material-dashboard", "materialDashboard"] }, // Creates a table component "table": { "description": "Create a component that displays data with a data-table", "factory": "./table/index", "schema": "./table/schema.json", - "aliases": [] + "aliases": ["material-table", "materialTable"] }, // Creates toolbar and navigation components "nav": { "description": "Create a component with a responsive sidenav for navigation", "factory": "./nav/index", "schema": "./nav/schema.json", - "aliases": [] + "aliases": ["material-nav", "materialNav"] } } } diff --git a/src/lib/schematics/dashboard/README.md b/src/lib/schematics/dashboard/README.md deleted file mode 100644 index b0a72f9c07a5..000000000000 --- a/src/lib/schematics/dashboard/README.md +++ /dev/null @@ -1,5 +0,0 @@ - # Dashboard - Creates a responive card grid list component . - - Command: `ng g @angular/material:materialDashboard --name dashboard` - \ No newline at end of file diff --git a/src/lib/schematics/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts b/src/lib/schematics/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts index 1dad7feba050..065a802f35a7 100644 --- a/src/lib/schematics/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts +++ b/src/lib/schematics/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts @@ -66,19 +66,19 @@ export class <%= classify(name) %>Component { map(({ matches }) => { if (matches) { return [ - { title: 'Card 1', cols: 2, rows: 1 }, - { title: 'Card 2', cols: 2, rows: 1 }, - { title: 'Card 3', cols: 2, rows: 1 }, - { title: 'Card 4', cols: 2, rows: 1 } - ]; - } else { - return [ - { title: 'Card 1', cols: 2, rows: 1 }, + { title: 'Card 1', cols: 1, rows: 1 }, { title: 'Card 2', cols: 1, rows: 1 }, - { title: 'Card 3', cols: 1, rows: 2 }, + { title: 'Card 3', cols: 1, rows: 1 }, { title: 'Card 4', cols: 1, rows: 1 } ]; } + + return [ + { title: 'Card 1', cols: 2, rows: 1 }, + { title: 'Card 2', cols: 1, rows: 1 }, + { title: 'Card 3', cols: 1, rows: 2 }, + { title: 'Card 4', cols: 1, rows: 1 } + ]; }) ); diff --git a/src/lib/schematics/shell/custom-theme.ts b/src/lib/schematics/install/custom-theme.ts similarity index 100% rename from src/lib/schematics/shell/custom-theme.ts rename to src/lib/schematics/install/custom-theme.ts diff --git a/src/lib/schematics/shell/index.ts b/src/lib/schematics/install/index.ts similarity index 100% rename from src/lib/schematics/shell/index.ts rename to src/lib/schematics/install/index.ts diff --git a/src/lib/schematics/shell/index_spec.ts b/src/lib/schematics/install/index_spec.ts similarity index 92% rename from src/lib/schematics/shell/index_spec.ts rename to src/lib/schematics/install/index_spec.ts index 3692c7ae2937..604dad9a5de4 100644 --- a/src/lib/schematics/shell/index_spec.ts +++ b/src/lib/schematics/install/index_spec.ts @@ -20,7 +20,7 @@ describe('material-shell-schematic', () => { }); it('should update package.json', () => { - const tree = runner.runSchematic('shell', {}, appTree); + const tree = runner.runSchematic('install', {}, appTree); const packageJson = JSON.parse(getFileContent(tree, '/package.json')); expect(packageJson.dependencies['@angular/material']).toBeDefined(); @@ -37,7 +37,7 @@ describe('material-shell-schematic', () => { }); it('should add custom theme', () => { - const tree = runner.runSchematic('shell', { + const tree = runner.runSchematic('install', { theme: 'custom' }, appTree); @@ -53,7 +53,7 @@ describe('material-shell-schematic', () => { }); it('should add font links', () => { - const tree = runner.runSchematic('shell', {}, appTree); + const tree = runner.runSchematic('install', {}, appTree); const config: any = getConfig(tree); const workspace = getWorkspace(tree); const project = getProjectFromWorkspace(workspace, config.project.name); diff --git a/src/lib/schematics/shell/schema.json b/src/lib/schematics/install/schema.json similarity index 85% rename from src/lib/schematics/shell/schema.json rename to src/lib/schematics/install/schema.json index a6503eba7e93..340db20a3e0b 100644 --- a/src/lib/schematics/shell/schema.json +++ b/src/lib/schematics/install/schema.json @@ -1,7 +1,7 @@ { "$schema": "http://json-schema.org/schema", - "id": "SchematicsMaterialShell", - "title": "Material Shell Options Schema", + "id": "SchematicsMaterialInstall", + "title": "Material Install Options Schema", "type": "object", "properties": { "skipPackageJson": { diff --git a/src/lib/schematics/shell/schema.ts b/src/lib/schematics/install/schema.ts similarity index 100% rename from src/lib/schematics/shell/schema.ts rename to src/lib/schematics/install/schema.ts diff --git a/src/lib/schematics/shell/theming.ts b/src/lib/schematics/install/theming.ts similarity index 100% rename from src/lib/schematics/shell/theming.ts rename to src/lib/schematics/install/theming.ts diff --git a/src/lib/schematics/nav/README.md b/src/lib/schematics/nav/README.md deleted file mode 100644 index c00bb01af03a..000000000000 --- a/src/lib/schematics/nav/README.md +++ /dev/null @@ -1,5 +0,0 @@ - # Nav - Creates a navigation component with responsive sidenav. - - Command: `ng g @angular/material:materialNav --name nav` - \ No newline at end of file diff --git a/src/lib/schematics/shell/README.md b/src/lib/schematics/shell/README.md deleted file mode 100644 index 7a611f022fa6..000000000000 --- a/src/lib/schematics/shell/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# Material Shell -Adds Angular Material and its depedencies and pre-configures the application. - -- Adds Material and CDK to `package.json` -- Adds Material Icons Stylesheet to `index.html` -- Adds Roboto Font to `index.html` -- Ensure `BrowserAnimationsModule` is installed and included in root module -- Adds pre-configured theme to `.angular-cli.json` file OR adds custom theme scaffolding to `styles.scss` - - Command: `ng add @angular/material` - \ No newline at end of file diff --git a/src/lib/schematics/table/README.md b/src/lib/schematics/table/README.md deleted file mode 100644 index 52f2a74dc7fa..000000000000 --- a/src/lib/schematics/table/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# Table -Creates a table component with sorting and paginator. - -Command: `ng g @angular/material:materialTable --name table` From 2f7c1aada9614a4c685d78a068f67acaaecfbd4c Mon Sep 17 00:00:00 2001 From: Austin Date: Mon, 4 Jun 2018 10:30:13 -0500 Subject: [PATCH 09/11] chore: fix typo --- src/lib/schematics/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/schematics/README.md b/src/lib/schematics/README.md index 92b789491b42..0719e52a9840 100644 --- a/src/lib/schematics/README.md +++ b/src/lib/schematics/README.md @@ -17,7 +17,7 @@ Command: `ng add @angular/material` ### Dashboard Creates a responive card grid list component. -Command: `ng g @angular/material:nav my-dashboard` +Command: `ng g @angular/material:dashboard my-dashboard` ### Nav Creates a navigation component with a responsive sidenav. From 523798732b9754c954336dd23c2ab235dfb2cc8c Mon Sep 17 00:00:00 2001 From: Austin Date: Mon, 4 Jun 2018 10:37:53 -0500 Subject: [PATCH 10/11] fix(schematics): fix #11521 --- src/lib/schematics/install/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/schematics/install/index.ts b/src/lib/schematics/install/index.ts index bb32651a2b93..649047033629 100644 --- a/src/lib/schematics/install/index.ts +++ b/src/lib/schematics/install/index.ts @@ -80,7 +80,8 @@ function addBodyMarginToStyles(options: Schema) { const buffer = host.read(stylesPath); if (buffer) { const src = buffer.toString(); - const insertion = new InsertChange(stylesPath, src.length, `\nbody { margin: 0; font-family: 'Roboto', sans-serif; }\n`); + const insertion = new InsertChange(stylesPath, src.length, + `\nhtml, body { height: 100%; }\nbody { margin: 0; font-family: 'Roboto', sans-serif; }\n`); const recorder = host.beginUpdate(stylesPath); recorder.insertLeft(insertion.pos, insertion.toAdd); host.commitUpdate(recorder); From c9296c7e11a23767d1ab7d6bb40af44e16019743 Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 10 Jun 2018 11:18:04 -0500 Subject: [PATCH 11/11] chore: fix build --- src/lib/schematics/utils/lib-versions.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/schematics/utils/lib-versions.ts b/src/lib/schematics/utils/lib-versions.ts index 31888519735b..c5418df111f0 100644 --- a/src/lib/schematics/utils/lib-versions.ts +++ b/src/lib/schematics/utils/lib-versions.ts @@ -1 +1,2 @@ export const materialVersion = '^6.2.0'; +export const angularVersion = '^6.0.0';