├── .editorconfig ├── .gitignore ├── LICENSE.md ├── README.md ├── add-license.js ├── angular-cli.json ├── e2e ├── app.e2e-spec.ts ├── app.po.ts └── tsconfig.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src ├── app │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── model.ts │ ├── models.service.spec.ts │ └── models.service.ts ├── assets │ ├── .gitkeep │ ├── Alexanya.png │ ├── Brint.png │ ├── Derek.png │ ├── EvilDJ.png │ ├── Hansel.png │ ├── JPPrewit.png │ ├── Katinka.png │ ├── Meekus.png │ ├── Mugatu.png │ ├── Mugatu2.png │ ├── Rufus.png │ └── Valentina.png ├── custom-theme.scss ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.scss ├── test.ts └── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | /node_modules 9 | 10 | # IDEs and editors 11 | /.idea 12 | .project 13 | .classpath 14 | .c9/ 15 | *.launch 16 | .settings/ 17 | 18 | # IDE - VSCode 19 | .vscode/ 20 | !.vscode/settings.json 21 | !.vscode/tasks.json 22 | !.vscode/launch.json 23 | !.vscode/extensions.json 24 | 25 | # misc 26 | /.sass-cache 27 | /connect.lock 28 | /coverage/* 29 | /libpeerconnection.log 30 | npm-debug.log 31 | testem.log 32 | /typings 33 | 34 | # e2e 35 | /e2e/*.js 36 | /e2e/*.map 37 | 38 | #System Files 39 | .DS_Store 40 | Thumbs.db 41 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2014-2016 Google, Inc. http://angular.io 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TalkAngularMaterial 2 | 3 | This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.25.5. 4 | 5 | ## Development server 6 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. 7 | 8 | ## Code scaffolding 9 | 10 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`. 11 | 12 | ## Build 13 | 14 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build. 15 | 16 | ## Running unit tests 17 | 18 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 19 | 20 | ## Running end-to-end tests 21 | 22 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 23 | Before running the tests make sure you are serving the app via `ng serve`. 24 | 25 | ## Deploying to GitHub Pages 26 | 27 | Run `ng github-pages:deploy` to deploy to GitHub Pages. 28 | 29 | ## Further help 30 | 31 | To get more help on the `angular-cli` use `ng help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md). 32 | -------------------------------------------------------------------------------- /add-license.js: -------------------------------------------------------------------------------- 1 | /* 2 | Copyright 2016 Google Inc. All Rights Reserved. 3 | Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 4 | */ 5 | 6 | const fs = require('fs'); 7 | const path = require('path'); 8 | 9 | // paths to process 10 | let [, , ...paths] = process.argv; 11 | if (paths.length == 0) paths.push('./src'); 12 | 13 | // formatters for different types of files 14 | class Formatter { 15 | addLicense(path){ 16 | let fileContent = fs.readFileSync(path, 'utf8'); 17 | if (fileContent.includes(this.license)) return; 18 | 19 | if (this.license) { 20 | fileContent = ` 21 | ${this.license} 22 | 23 | ${fileContent} 24 | 25 | ${this.license} 26 | `; 27 | fs.writeFileSync(path, fileContent, 'utf8'); 28 | } 29 | } 30 | } 31 | 32 | class MarkdownFormatter extends Formatter{ 33 | get validExtension(){ 34 | return /\.md$/; 35 | } 36 | 37 | get license(){ 38 | return ` 39 | Copyright 2016 Google Inc. All Rights Reserved. 40 | Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 41 | `; 42 | } 43 | } 44 | 45 | class HtmlFormatter extends Formatter { 46 | get validExtension(){ 47 | return /\.html$/; 48 | } 49 | 50 | get license(){ 51 | return ` 52 | 56 | `; 57 | } 58 | } 59 | class JavaScriptFormatter extends Formatter { 60 | get validExtension(){ 61 | return /\.js$/; 62 | } 63 | get license(){ 64 | return ` 65 | // Copyright 2016 Google Inc. All Rights Reserved. 66 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 67 | `; 68 | } 69 | } 70 | class TypeScriptFormatter extends JavaScriptFormatter{ 71 | get validExtension(){ 72 | return /\.ts$/; 73 | } 74 | } 75 | class CssFormatter extends Formatter { 76 | get validExtension(){ 77 | return /\.css$/; 78 | } 79 | 80 | get license(){ 81 | return ` 82 | /* 83 | Copyright 2016 Google Inc. All Rights Reserved. 84 | Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 85 | */ 86 | `; 87 | } 88 | } 89 | 90 | class SassFormatter extends CssFormatter { 91 | get validExtension(){ 92 | return /\.scss$/; 93 | } 94 | } 95 | 96 | const formatters = [ 97 | new HtmlFormatter(), new JavaScriptFormatter(), new TypeScriptFormatter(), 98 | new CssFormatter(), new SassFormatter(), new MarkdownFormatter() 99 | ]; 100 | 101 | const whitelist = formatters.map(f => f.validExtension); 102 | const blacklist = [/node_modules/, // node modules 103 | /^\.git/ // git folder 104 | ]; 105 | console.log(`Valid files: ${whitelist}`); 106 | console.log(`Invalid paths: ${blacklist}`); 107 | 108 | function addLicenseToAllFiles(sourcePath) { 109 | console.log(`processing path: ${sourcePath}`); 110 | 111 | // blacklist 112 | if (blacklist.some(bl => bl.test(sourcePath))) { 113 | console.log(`won't process ${sourcePath} because it is blacklisted`); 114 | return; 115 | } 116 | 117 | const filesAndDirs = fs.readdirSync(sourcePath, 'utf8'); 118 | 119 | let blacklistedPaths = filesAndDirs 120 | .filter(file => blacklist.some(bl => bl.test(file))) 121 | if (blacklistedPaths.length > 0) { 122 | console.log(`won't process ${blacklistedPaths} because they are blacklisted`); 123 | } 124 | 125 | let filesAndStats = filesAndDirs 126 | .filter(file => !blacklist.some(bl => bl.test(file))) 127 | .map(file => ({path: file, stats: fs.statSync(path.join(sourcePath, file))})); 128 | 129 | let directories = filesAndStats.filter(f => f.stats.isDirectory()); 130 | let files = filesAndStats 131 | .filter(f => !f.stats.isDirectory()) 132 | .filter(f => whitelist.some(w => w.test(f.path))); 133 | 134 | console.log(`process dirs: ${directories.map(f => f.path)}`); 135 | console.log(`process files: ${files.map(f => f.path)}`); 136 | 137 | for (let file of files) processFile(path.join(sourcePath, file.path)); 138 | for (let dir of directories) addLicenseToAllFiles(path.join(sourcePath, dir.path)); 139 | // process 140 | } 141 | 142 | function processFile(path){ 143 | let fileFormatter = formatters.find(f => f.validExtension.test(path)); 144 | fileFormatter.addLicense(path); 145 | } 146 | 147 | 148 | // Action! 149 | for (let pathToProcess of paths) { 150 | addLicenseToAllFiles(pathToProcess); 151 | } 152 | 153 | /* 154 | Copyright 2016 Google Inc. All Rights Reserved. 155 | Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 156 | */ 157 | -------------------------------------------------------------------------------- /angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "project": { 3 | "version": "1.0.0-beta.25.5", 4 | "name": "talk-angular-material" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "test": "test.ts", 17 | "tsconfig": "tsconfig.json", 18 | "prefix": "app", 19 | "mobile": false, 20 | "styles": [ 21 | "styles.scss", 22 | "custom-theme.scss" 23 | ], 24 | "scripts": [ 25 | "../node_modules/hammerjs/hammer.min.js" 26 | ], 27 | "environmentSource": "environments/environment.ts", 28 | "environments": { 29 | "dev": "environments/environment.ts", 30 | "prod": "environments/environment.prod.ts" 31 | } 32 | } 33 | ], 34 | "addons": [], 35 | "packages": [], 36 | "e2e": { 37 | "protractor": { 38 | "config": "./protractor.conf.js" 39 | } 40 | }, 41 | "test": { 42 | "karma": { 43 | "config": "./karma.conf.js" 44 | } 45 | }, 46 | "defaults": { 47 | "styleExt": "scss", 48 | "prefixInterfaces": false, 49 | "inline": { 50 | "style": false, 51 | "template": false 52 | }, 53 | "spec": { 54 | "class": false, 55 | "component": true, 56 | "directive": true, 57 | "module": false, 58 | "pipe": true, 59 | "service": true 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { TalkAngularMaterialPage } from './app.po'; 2 | 3 | describe('talk-angular-material App', function() { 4 | let page: TalkAngularMaterialPage; 5 | 6 | beforeEach(() => { 7 | page = new TalkAngularMaterialPage(); 8 | }); 9 | 10 | it('should display message saying app works', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('app works!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, element, by } from 'protractor'; 2 | 3 | export class TalkAngularMaterialPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "module": "commonjs", 8 | "moduleResolution": "node", 9 | "outDir": "../dist/out-tsc-e2e", 10 | "sourceMap": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "../node_modules/@types" 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', 'angular-cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-remap-istanbul'), 12 | require('angular-cli/plugins/karma') 13 | ], 14 | files: [ 15 | { pattern: './src/test.ts', watched: false } 16 | ], 17 | preprocessors: { 18 | './src/test.ts': ['angular-cli'] 19 | }, 20 | mime: { 21 | 'text/x-typescript': ['ts','tsx'] 22 | }, 23 | remapIstanbulReporter: { 24 | reports: { 25 | html: 'coverage', 26 | lcovonly: './coverage/coverage.lcov' 27 | } 28 | }, 29 | angularCli: { 30 | config: './angular-cli.json', 31 | environment: 'dev' 32 | }, 33 | reporters: config.angularCli && config.angularCli.codeCoverage 34 | ? ['progress', 'karma-remap-istanbul'] 35 | : ['progress'], 36 | port: 9876, 37 | colors: true, 38 | logLevel: config.LOG_INFO, 39 | autoWatch: true, 40 | browsers: ['Chrome'], 41 | singleRun: false 42 | }); 43 | }; 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "talk-angular-material", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "angular-cli": {}, 6 | "scripts": { 7 | "ng": "ng", 8 | "start": "ng serve", 9 | "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check", 10 | "test": "ng test", 11 | "pree2e": "webdriver-manager update --standalone false --gecko false", 12 | "e2e": "protractor" 13 | }, 14 | "private": true, 15 | "dependencies": { 16 | "@angular/common": "^2.3.1", 17 | "@angular/compiler": "^2.3.1", 18 | "@angular/core": "^2.3.1", 19 | "@angular/flex-layout": "2.0.0-beta.4", 20 | "@angular/forms": "^2.3.1", 21 | "@angular/http": "^2.3.1", 22 | "@angular/material": "2.0.0-beta.2", 23 | "@angular/platform-browser": "^2.3.1", 24 | "@angular/platform-browser-dynamic": "^2.3.1", 25 | "@angular/router": "^3.3.1", 26 | "core-js": "^2.4.1", 27 | "hammerjs": "^2.0.8", 28 | "rxjs": "^5.0.1", 29 | "ts-helpers": "^1.1.1", 30 | "zone.js": "^0.7.2" 31 | }, 32 | "devDependencies": { 33 | "@angular/compiler-cli": "^2.3.1", 34 | "@types/hammerjs": "^2.0.34", 35 | "@types/jasmine": "2.5.38", 36 | "@types/node": "^6.0.42", 37 | "@angular/cli": "^1.0.0", 38 | "codelyzer": "~2.0.0-beta.1", 39 | "jasmine-core": "2.5.2", 40 | "jasmine-spec-reporter": "2.5.0", 41 | "karma": "1.2.0", 42 | "karma-chrome-launcher": "^2.0.0", 43 | "karma-cli": "^1.0.1", 44 | "karma-jasmine": "^1.0.2", 45 | "karma-remap-istanbul": "^0.2.1", 46 | "protractor": "~4.0.13", 47 | "ts-node": "1.2.1", 48 | "tslint": "^4.3.0", 49 | "typescript": "~2.0.3" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | /*global jasmine */ 5 | var SpecReporter = require('jasmine-spec-reporter'); 6 | 7 | exports.config = { 8 | allScriptsTimeout: 11000, 9 | specs: [ 10 | './e2e/**/*.e2e-spec.ts' 11 | ], 12 | capabilities: { 13 | 'browserName': 'chrome' 14 | }, 15 | directConnect: true, 16 | baseUrl: 'http://localhost:4200/', 17 | framework: 'jasmine', 18 | jasmineNodeOpts: { 19 | showColors: true, 20 | defaultTimeoutInterval: 30000, 21 | print: function() {} 22 | }, 23 | useAllAngular2AppRoots: true, 24 | beforeLaunch: function() { 25 | require('ts-node').register({ 26 | project: 'e2e' 27 | }); 28 | }, 29 | onPrepare: function() { 30 | jasmine.getEnv().addReporter(new SpecReporter()); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 5 | 6 |
8 | 9 | 10 | 11 | favorite 12 | Derek Zoolander Center For Models Who Can't Find Love 13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 | 34 | Name 35 | 36 |

{{selectedModel?.name}}

37 | 38 | 39 | 40 | Status 41 | 42 |

{{selectedModel?.status}}

43 | 44 | 45 | 46 | About 47 | 48 |

{{selectedModel?.about}}

49 | 50 | 51 |
52 |
53 | 56 |
57 | 58 | 59 |
60 | 61 | {{message.who}} says: 62 | {{message.message}} 63 | 64 |
65 | 66 |
67 |
68 | 71 | 74 |
75 |
76 | 77 | 78 | some photos here... 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | photo of the super model {{model.name}} 87 | 88 |

{{model.name}}

89 | {{model.status}} 90 | 93 | 94 | 95 | 96 | 97 | 98 |
99 | 100 | 101 | 102 | 106 | 107 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | /* 4 | Copyright 2016 Google Inc. All Rights Reserved. 5 | Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 6 | */ 7 | 8 | 9 | 10 | 11 | 12 | /* 13 | Copyright 2016 Google Inc. All Rights Reserved. 14 | Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 15 | */ 16 | 17 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | /* tslint:disable:no-unused-variable */ 8 | 9 | import { TestBed, async } from '@angular/core/testing'; 10 | import { AppComponent } from './app.component'; 11 | 12 | describe('AppComponent', () => { 13 | beforeEach(() => { 14 | TestBed.configureTestingModule({ 15 | declarations: [ 16 | AppComponent 17 | ], 18 | }); 19 | TestBed.compileComponents(); 20 | }); 21 | 22 | it('should create the app', async(() => { 23 | const fixture = TestBed.createComponent(AppComponent); 24 | const app = fixture.debugElement.componentInstance; 25 | expect(app).toBeTruthy(); 26 | })); 27 | 28 | it(`should have as title 'app works!'`, async(() => { 29 | const fixture = TestBed.createComponent(AppComponent); 30 | const app = fixture.debugElement.componentInstance; 31 | expect(app.title).toEqual('app works!'); 32 | })); 33 | 34 | it('should render title in a h1 tag', async(() => { 35 | const fixture = TestBed.createComponent(AppComponent); 36 | fixture.detectChanges(); 37 | const compiled = fixture.debugElement.nativeElement; 38 | expect(compiled.querySelector('h1').textContent).toContain('app works!'); 39 | })); 40 | }); 41 | 42 | 43 | 44 | // Copyright 2016 Google Inc. All Rights Reserved. 45 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 46 | 47 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | import { Component, ViewChild, ViewContainerRef, OnInit} from '@angular/core'; 8 | import { MdSidenav, MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material'; 9 | import { Model, Message } from './model'; 10 | import { ModelsService } from './models.service'; 11 | 12 | @Component({ 13 | selector: 'app-root', 14 | templateUrl: './app.component.html', 15 | styleUrls: ['./app.component.scss'] 16 | }) 17 | export class AppComponent implements OnInit { 18 | @ViewChild('sidenav') sidenav: MdSidenav; 19 | models: Model[]; 20 | selectedModel: Model; 21 | isDarkTheme: boolean = false; 22 | 23 | constructor(private dialog: MdDialog, 24 | private vcr: ViewContainerRef, 25 | private modelsService: ModelsService) { } 26 | 27 | ngOnInit() { 28 | this.models = this.modelsService.getModels(); 29 | } 30 | 31 | openDialog() { 32 | // dialog config 33 | const config = new MdDialogConfig(); 34 | config.viewContainerRef = this.vcr; 35 | // open dialog 36 | const dialog = this.dialog.open(SettingsDialogComponent, config); 37 | } 38 | 39 | addMessage() { 40 | // dialog config 41 | const config = new MdDialogConfig(); 42 | config.viewContainerRef = this.vcr; 43 | // open dialog 44 | const dialog:any = this.dialog.open(AddMessageComponent, config); 45 | // pass data to dialog 46 | dialog.selectedModel = this.selectedModel; 47 | console.log(dialog); 48 | } 49 | 50 | showModelDetails(model:Model) { 51 | this.selectedModel = model; 52 | this.sidenav.open(); 53 | } 54 | } 55 | 56 | 57 | 58 | @Component({ 59 | selector: 'app-settings', 60 | template: ` 61 | 62 | 63 | ` 64 | }) 65 | export class SettingsDialogComponent{ 66 | 67 | } 68 | 69 | @Component({ 70 | selector: 'add-message', 71 | template:` 72 |
73 | 74 | 75 | 76 | 77 |
78 | ` 79 | }) 80 | export class AddMessageComponent { 81 | content = ""; 82 | 83 | constructor(private dialogRef: MdDialogRef) { 84 | } 85 | 86 | addMessage() { 87 | const selectedModel = ( & ISelectedModel> this.dialogRef).selectedModel; 88 | selectedModel.messages.push({ 89 | who: 'Jaime', 90 | message: this.content 91 | }); 92 | this.dialogRef.close(); 93 | } 94 | } 95 | 96 | interface ISelectedModel { 97 | selectedModel: Model; 98 | } 99 | 100 | 101 | // Copyright 2016 Google Inc. All Rights Reserved. 102 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 103 | 104 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | import { BrowserModule } from '@angular/platform-browser'; 8 | import { NgModule } from '@angular/core'; 9 | import { FormsModule } from '@angular/forms'; 10 | import { HttpModule } from '@angular/http'; 11 | 12 | import { AppComponent, SettingsDialogComponent, AddMessageComponent } from './app.component'; 13 | import { ModelsService } from './models.service'; 14 | 15 | import { MaterialModule} from '@angular/material'; 16 | import { FlexLayoutModule } from '@angular/flex-layout'; 17 | 18 | @NgModule({ 19 | declarations: [ 20 | AppComponent, 21 | SettingsDialogComponent, 22 | AddMessageComponent 23 | ], 24 | entryComponents: [ 25 | AppComponent, 26 | SettingsDialogComponent, 27 | AddMessageComponent 28 | ], 29 | imports: [ 30 | BrowserModule, 31 | FormsModule, 32 | HttpModule, 33 | MaterialModule, 34 | FlexLayoutModule.forRoot() 35 | ], 36 | providers: [ 37 | ModelsService 38 | ], 39 | bootstrap: [AppComponent] 40 | }) 41 | export class AppModule { } 42 | 43 | 44 | 45 | // Copyright 2016 Google Inc. All Rights Reserved. 46 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 47 | 48 | -------------------------------------------------------------------------------- /src/app/model.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | export class Model { 8 | name: string; 9 | status: string; 10 | about: string; 11 | messages: Message[]; 12 | 13 | rows: number; 14 | cols: number; 15 | } 16 | 17 | export class Message { 18 | who: string; 19 | message: string; 20 | } 21 | 22 | 23 | // Copyright 2016 Google Inc. All Rights Reserved. 24 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 25 | 26 | -------------------------------------------------------------------------------- /src/app/models.service.spec.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | /* tslint:disable:no-unused-variable */ 8 | 9 | import { TestBed, async, inject } from '@angular/core/testing'; 10 | import { ModelsService } from './models.service'; 11 | 12 | describe('ModelsService', () => { 13 | beforeEach(() => { 14 | TestBed.configureTestingModule({ 15 | providers: [ModelsService] 16 | }); 17 | }); 18 | 19 | it('should ...', inject([ModelsService], (service: ModelsService) => { 20 | expect(service).toBeTruthy(); 21 | })); 22 | }); 23 | 24 | 25 | 26 | // Copyright 2016 Google Inc. All Rights Reserved. 27 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 28 | 29 | -------------------------------------------------------------------------------- /src/app/models.service.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | import { Injectable } from '@angular/core'; 8 | import { Model } from './model'; 9 | 10 | @Injectable() 11 | export class ModelsService { 12 | 13 | models: Model[] = [ 14 | { name: "Derek", status: "Teaching children to read", about: "I'm a model", messages: [], rows: 1, cols:1}, 15 | { name: "Hansel", status: "Kitesurfing", about: "I'm a model", messages: [], rows: 1, cols:1 }, 16 | { name: "Valentina", status: "Kitesurfing", about: "I'm a model", messages: [], rows: 1 , cols:1}, 17 | { name: "Mugatu", status: "Designing the masterplan", about: "I'm a tirant", messages: [], rows: 3, cols:1}, 18 | { name: "Katinka", status: "Teaching children to read", about: "I'm a model", messages: [], rows: 1, cols:1}, 19 | { name: "Rufus", status: "Kitesurfing", about: "I'm a model", messages: [], rows: 1 , cols:1}, 20 | { name: "Brint", status: "Teaching children to read", about: "I'm a model", messages: [], rows: 1, cols:1}, 21 | { name: "Meekus", status: "Teaching children to read", about: "I'm a model", messages: [], rows: 1, cols:1}, 22 | { name: "EvilDJ", status: "Teaching children to read", about: "I'm a model", messages: [], rows: 1, cols:1}, 23 | { name: "JPPrewit", status: "Teaching children to read", about: "I'm a model", messages: [], rows: 1, cols:1}, 24 | ]; 25 | 26 | constructor() { } 27 | 28 | getModels(){ 29 | return this.models; 30 | } 31 | 32 | } 33 | 34 | 35 | 36 | // Copyright 2016 Google Inc. All Rights Reserved. 37 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 38 | 39 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/Alexanya.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/Alexanya.png -------------------------------------------------------------------------------- /src/assets/Brint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/Brint.png -------------------------------------------------------------------------------- /src/assets/Derek.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/Derek.png -------------------------------------------------------------------------------- /src/assets/EvilDJ.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/EvilDJ.png -------------------------------------------------------------------------------- /src/assets/Hansel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/Hansel.png -------------------------------------------------------------------------------- /src/assets/JPPrewit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/JPPrewit.png -------------------------------------------------------------------------------- /src/assets/Katinka.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/Katinka.png -------------------------------------------------------------------------------- /src/assets/Meekus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/Meekus.png -------------------------------------------------------------------------------- /src/assets/Mugatu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/Mugatu.png -------------------------------------------------------------------------------- /src/assets/Mugatu2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/Mugatu2.png -------------------------------------------------------------------------------- /src/assets/Rufus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/Rufus.png -------------------------------------------------------------------------------- /src/assets/Valentina.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/assets/Valentina.png -------------------------------------------------------------------------------- /src/custom-theme.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | /* 4 | Copyright 2016 Google Inc. All Rights Reserved. 5 | Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 6 | */ 7 | 8 | 9 | // custom theme 10 | @import "~@angular/material/core/theming/all-theme"; 11 | 12 | // core 13 | @include mat-core(); 14 | 15 | // theme colors 16 | $primary: mat-palette($mat-cyan); 17 | $accent: mat-palette($mat-pink); 18 | $warn: mat-palette($mat-amber); 19 | 20 | $theme: mat-light-theme($primary, $accent, $warn); 21 | // create theme from palettes 22 | @include angular-material-theme($theme); 23 | 24 | // gated themes 25 | // anything under these css class will have the dark theme 26 | .dark-theme{ 27 | // theme colors 28 | $primary-dark: mat-palette($mat-pink, 700); 29 | $accent-dark: mat-palette($mat-green); 30 | $warn-dark: mat-palette($mat-red); 31 | 32 | $theme-dark: mat-dark-theme($primary-dark, $accent-dark, $warn-dark); 33 | 34 | // create theme from palettes 35 | @include angular-material-theme($theme-dark); 36 | } 37 | 38 | 39 | 40 | /* 41 | Copyright 2016 Google Inc. All Rights Reserved. 42 | Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 43 | */ 44 | 45 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | export const environment = { 8 | production: true 9 | }; 10 | 11 | 12 | 13 | // Copyright 2016 Google Inc. All Rights Reserved. 14 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 15 | 16 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | // The file contents for the current environment will overwrite these during build. 8 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 9 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 10 | // The list of which env maps to which file can be found in `angular-cli.json`. 11 | 12 | export const environment = { 13 | production: false 14 | }; 15 | 16 | 17 | 18 | // Copyright 2016 Google Inc. All Rights Reserved. 19 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 20 | 21 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vintharas/talk-angular-material/7d810a586772a0398b4aead67ba884d2f8ad2e39/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | TalkAngularMaterial 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | Loading... 22 | 23 | 24 | 25 | 26 | 27 | 31 | 32 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | import './polyfills.ts'; 8 | 9 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 10 | import { enableProdMode } from '@angular/core'; 11 | import { environment } from './environments/environment'; 12 | import { AppModule } from './app/app.module'; 13 | 14 | if (environment.production) { 15 | enableProdMode(); 16 | } 17 | 18 | platformBrowserDynamic().bootstrapModule(AppModule); 19 | 20 | 21 | 22 | // Copyright 2016 Google Inc. All Rights Reserved. 23 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 24 | 25 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | // This file includes polyfills needed by Angular and is loaded before 8 | // the app. You can add your own extra polyfills to this file. 9 | import 'core-js/es6/symbol'; 10 | import 'core-js/es6/object'; 11 | import 'core-js/es6/function'; 12 | import 'core-js/es6/parse-int'; 13 | import 'core-js/es6/parse-float'; 14 | import 'core-js/es6/number'; 15 | import 'core-js/es6/math'; 16 | import 'core-js/es6/string'; 17 | import 'core-js/es6/date'; 18 | import 'core-js/es6/array'; 19 | import 'core-js/es6/regexp'; 20 | import 'core-js/es6/map'; 21 | import 'core-js/es6/set'; 22 | import 'core-js/es6/reflect'; 23 | 24 | import 'core-js/es7/reflect'; 25 | import 'zone.js/dist/zone'; 26 | 27 | 28 | 29 | // Copyright 2016 Google Inc. All Rights Reserved. 30 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 31 | 32 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | /* 4 | Copyright 2016 Google Inc. All Rights Reserved. 5 | Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 6 | */ 7 | 8 | 9 | /* You can add global styles to this file, and also import other style files */ 10 | 11 | // Material Design Theme 12 | @import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css'; 13 | 14 | // Resets 15 | html, body{ 16 | margin: 0; 17 | padding: 0; 18 | font-family: Roboto, sans-serif; 19 | } 20 | 21 | // app shell 22 | .app { 23 | height: 100vh; // view port height units 24 | } 25 | 26 | /* Icons */ 27 | .mat-icon-20 { 28 | font-size: 20px; 29 | } 30 | 31 | .tab-action{ 32 | display: inline-block; 33 | position: fixed; 34 | bottom: 20px; 35 | right: 20px; 36 | 37 | button{ 38 | margin-bottom: 12px; 39 | } 40 | } 41 | 42 | /* Cards */ 43 | md-card { 44 | margin: 20px; 45 | } 46 | 47 | /* Tooblar */ 48 | md-toolbar{ 49 | z-index: 10; 50 | } 51 | md-toolbar-row { 52 | justify-content: space-between; // this is based on flex 53 | } 54 | 55 | /* Sidenav */ 56 | md-sidenav { 57 | width: 40vw; 58 | } 59 | 60 | /* Tabs */ 61 | .mat-tab-body-content { 62 | height: calc(100vh - 64px - 48px); 63 | } 64 | 65 | 66 | 67 | /* 68 | Copyright 2016 Google Inc. All Rights Reserved. 69 | Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 70 | */ 71 | 72 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | // Copyright 2016 Google Inc. All Rights Reserved. 4 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 5 | 6 | 7 | import './polyfills.ts'; 8 | 9 | import 'zone.js/dist/long-stack-trace-zone'; 10 | import 'zone.js/dist/proxy.js'; 11 | import 'zone.js/dist/sync-test'; 12 | import 'zone.js/dist/jasmine-patch'; 13 | import 'zone.js/dist/async-test'; 14 | import 'zone.js/dist/fake-async-test'; 15 | import { getTestBed } from '@angular/core/testing'; 16 | import { 17 | BrowserDynamicTestingModule, 18 | platformBrowserDynamicTesting 19 | } from '@angular/platform-browser-dynamic/testing'; 20 | 21 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 22 | declare var __karma__: any; 23 | declare var require: any; 24 | 25 | // Prevent Karma from running prematurely. 26 | __karma__.loaded = function () {}; 27 | 28 | // First, initialize the Angular testing environment. 29 | getTestBed().initTestEnvironment( 30 | BrowserDynamicTestingModule, 31 | platformBrowserDynamicTesting() 32 | ); 33 | // Then we find all the tests. 34 | const context = require.context('./', true, /\.spec\.ts$/); 35 | // And load the modules. 36 | context.keys().map(context); 37 | // Finally, start Karma to run the tests. 38 | __karma__.start(); 39 | 40 | 41 | 42 | // Copyright 2016 Google Inc. All Rights Reserved. 43 | // Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at https://angular.io/license 44 | 45 | -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "", 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "lib": ["es6", "dom"], 8 | "mapRoot": "./", 9 | "module": "es6", 10 | "moduleResolution": "node", 11 | "outDir": "../dist/out-tsc", 12 | "sourceMap": true, 13 | "target": "es5", 14 | "typeRoots": [ 15 | "../node_modules/@types" 16 | ] 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "callable-types": true, 7 | "class-name": true, 8 | "comment-format": [ 9 | true, 10 | "check-space" 11 | ], 12 | "curly": true, 13 | "eofline": true, 14 | "forin": true, 15 | "import-blacklist": [true, "rxjs"], 16 | "import-spacing": true, 17 | "indent": [ 18 | true, 19 | "spaces" 20 | ], 21 | "interface-over-type-literal": true, 22 | "label-position": true, 23 | "max-line-length": [ 24 | true, 25 | 140 26 | ], 27 | "member-access": false, 28 | "member-ordering": [ 29 | true, 30 | "static-before-instance", 31 | "variables-before-functions" 32 | ], 33 | "no-arg": true, 34 | "no-bitwise": true, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-construct": true, 44 | "no-debugger": true, 45 | "no-duplicate-variable": true, 46 | "no-empty": false, 47 | "no-empty-interface": true, 48 | "no-eval": true, 49 | "no-inferrable-types": true, 50 | "no-shadowed-variable": true, 51 | "no-string-literal": false, 52 | "no-string-throw": true, 53 | "no-switch-case-fall-through": true, 54 | "no-trailing-whitespace": true, 55 | "no-unused-expression": true, 56 | "no-use-before-declare": true, 57 | "no-var-keyword": true, 58 | "object-literal-sort-keys": false, 59 | "one-line": [ 60 | true, 61 | "check-open-brace", 62 | "check-catch", 63 | "check-else", 64 | "check-whitespace" 65 | ], 66 | "prefer-const": true, 67 | "quotemark": [ 68 | true, 69 | "single" 70 | ], 71 | "radix": true, 72 | "semicolon": [ 73 | "always" 74 | ], 75 | "triple-equals": [ 76 | true, 77 | "allow-null-check" 78 | ], 79 | "typedef-whitespace": [ 80 | true, 81 | { 82 | "call-signature": "nospace", 83 | "index-signature": "nospace", 84 | "parameter": "nospace", 85 | "property-declaration": "nospace", 86 | "variable-declaration": "nospace" 87 | } 88 | ], 89 | "typeof-compare": true, 90 | "unified-signatures": true, 91 | "variable-name": false, 92 | "whitespace": [ 93 | true, 94 | "check-branch", 95 | "check-decl", 96 | "check-operator", 97 | "check-separator", 98 | "check-type" 99 | ], 100 | 101 | "directive-selector": [true, "attribute", "app", "camelCase"], 102 | "component-selector": [true, "element", "app", "kebab-case"], 103 | "use-input-property-decorator": true, 104 | "use-output-property-decorator": true, 105 | "use-host-property-decorator": true, 106 | "no-input-rename": true, 107 | "no-output-rename": true, 108 | "use-life-cycle-interface": true, 109 | "use-pipe-transform-interface": true, 110 | "component-class-suffix": true, 111 | "directive-class-suffix": true, 112 | "no-access-missing-member": true, 113 | "templates-use-public": true, 114 | "invoke-injectable": true 115 | } 116 | } 117 | --------------------------------------------------------------------------------