diff --git a/src/lib/schematics/README.md b/src/lib/schematics/README.md index aa82c497fbdc..0719e52a9840 100644 --- a/src/lib/schematics/README.md +++ b/src/lib/schematics/README.md @@ -2,4 +2,29 @@ A collection of Schematics for Angular Material. ## Collection -- [Shell](shell/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:dashboard 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 c9a590c4193b..d3ca687c794a 100644 --- a/src/lib/schematics/collection.json +++ b/src/lib/schematics/collection.json @@ -5,31 +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 - "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/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..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 @@ -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: 1, rows: 1 }, + { title: 'Card 2', cols: 1, rows: 1 }, + { 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 } + ]; + }) + ); + + 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; }; } 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/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/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 94% rename from src/lib/schematics/shell/index.ts rename to src/lib/schematics/install/index.ts index 2bc96947273f..649047033629 100644 --- a/src/lib/schematics/shell/index.ts +++ b/src/lib/schematics/install/index.ts @@ -4,7 +4,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'; @@ -29,7 +29,7 @@ export default function(options: Schema): Rule { /** Add material, cdk, annimations to package.json if not already present. */ function addMaterialToPackageJson() { return (host: Tree, context: SchematicContext) => { - addPackageToPackageJson(host, 'dependencies', '@angular/cdk', cdkVersion); + addPackageToPackageJson(host, 'dependencies', '@angular/cdk', materialVersion); addPackageToPackageJson(host, 'dependencies', '@angular/material', materialVersion); addPackageToPackageJson(host, 'dependencies', '@angular/animations', angularVersion); context.addTask(new NodePackageInstallTask()); @@ -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; }\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); diff --git a/src/lib/schematics/shell/index_spec.ts b/src/lib/schematics/install/index_spec.ts similarity index 89% rename from src/lib/schematics/shell/index_spec.ts rename to src/lib/schematics/install/index_spec.ts index ed9d21dbbad2..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('materialShell', {}, appTree); + const tree = runner.runSchematic('install', {}, 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('install', { 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('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/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 b5680ef9beaa..a706115c1179 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"> 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 55c5db409ac5..637c52ec0b38 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 @@ -31,8 +31,9 @@ import { map } from 'rxjs/operators'; *ngIf="isHandset$ | async"> menu - Application Title + <%= project %> + `,<% } else { %> @@ -45,7 +46,11 @@ import { map } from 'rxjs/operators'; .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/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/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/shell/README.md b/src/lib/schematics/shell/README.md deleted file mode 100644 index 4b3942fc113f..000000000000 --- a/src/lib/schematics/shell/README.md +++ /dev/null @@ -1,10 +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 generate material-shell --collection=material-schematics` diff --git a/src/lib/schematics/table/README.md b/src/lib/schematics/table/README.md deleted file mode 100644 index 178750c08951..000000000000 --- a/src/lib/schematics/table/README.md +++ /dev/null @@ -1,5 +0,0 @@ - # Table - Creates a table component with sorting and paginator. - - Command: `ng generate material-table --collection=material-schematics` - \ No newline at end of file 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}}
{ }); 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'); 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": [] } diff --git a/src/lib/schematics/utils/lib-versions.ts b/src/lib/schematics/utils/lib-versions.ts index 0f4d3404e8d6..c5418df111f0 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.2.0'; -export const cdkVersion = '^6.2.0'; export const angularVersion = '^6.0.0';