diff --git a/web/angular-cli.json b/web/angular-cli.json index 9062958..57cda7f 100644 --- a/web/angular-cli.json +++ b/web/angular-cli.json @@ -18,9 +18,12 @@ "prefix": "app", "mobile": false, "styles": [ - "styles.css" + "../node_modules/codemirror/lib/codemirror.css", + "styles.scss", + "theme.scss" + ], + "scripts": [ ], - "scripts": [], "environments": { "source": "environments/environment.ts", "dev": "environments/environment.ts", @@ -28,8 +31,10 @@ } } ], - "addons": [], - "packages": [], + "addons": [ + ], + "packages": [ + ], "e2e": { "protractor": { "config": "./protractor.conf.js" @@ -41,7 +46,7 @@ } }, "defaults": { - "styleExt": "css", + "styleExt": "scss", "prefixInterfaces": false, "inline": { "style": false, diff --git a/web/package.json b/web/package.json index 4f0bc7e..2280a90 100644 --- a/web/package.json +++ b/web/package.json @@ -18,16 +18,21 @@ "@angular/core": "^2.3.1", "@angular/forms": "^2.3.1", "@angular/http": "^2.3.1", + "@angular/material": "^2.0.0-beta.1", "@angular/platform-browser": "^2.3.1", "@angular/platform-browser-dynamic": "^2.3.1", "@angular/router": "^3.3.1", + "codemirror": "^5.22.0", "core-js": "^2.4.1", + "hammerjs": "^2.0.8", + "ng2-codemirror": "^1.0.1", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", "zone.js": "^0.7.2" }, "devDependencies": { "@angular/compiler-cli": "^2.3.1", + "@types/hammerjs": "^2.0.33", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.24", diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html index b6931b5..58cbdaa 100644 --- a/web/src/app/app.component.html +++ b/web/src/app/app.component.html @@ -1,3 +1 @@ -

- {{title}} -

+ diff --git a/web/src/app/app.component.css b/web/src/app/app.component.scss similarity index 100% rename from web/src/app/app.component.css rename to web/src/app/app.component.scss diff --git a/web/src/app/app.component.ts b/web/src/app/app.component.ts index ff63e05..2bcab87 100644 --- a/web/src/app/app.component.ts +++ b/web/src/app/app.component.ts @@ -1,10 +1,10 @@ -import { Component } from '@angular/core'; +import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] + styleUrls: ['./app.component.scss'] }) export class AppComponent { - title = 'app works!'; + } diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts index 67ae491..78a19b5 100644 --- a/web/src/app/app.module.ts +++ b/web/src/app/app.module.ts @@ -2,19 +2,42 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; +import { MaterialModule } from '@angular/material'; + +import { CodemirrorModule } from 'ng2-codemirror'; + +import 'codemirror'; +import 'hammerjs'; import { AppComponent } from './app.component'; +import { DialogContentComponent } from './shared/dialog-content/dialog-content.component'; +import { ViewportComponent } from './viewport/viewport.component'; +import { HeaderComponent } from './header/header.component'; +import { EditorComponent } from './editor/editor.component'; +import { PreviewComponent } from './preview/preview.component'; +import { SidenavComponent } from './sidenav/sidenav.component'; @NgModule({ declarations: [ - AppComponent + AppComponent, + DialogContentComponent, + ViewportComponent, + HeaderComponent, + EditorComponent, + PreviewComponent, + SidenavComponent ], imports: [ BrowserModule, FormsModule, - HttpModule + HttpModule, + CodemirrorModule, + MaterialModule.forRoot() ], providers: [], - bootstrap: [AppComponent] + bootstrap: [AppComponent], + entryComponents: [ + DialogContentComponent + ] }) export class AppModule { } diff --git a/web/src/app/editor/editor.component.html b/web/src/app/editor/editor.component.html new file mode 100644 index 0000000..2929f35 --- /dev/null +++ b/web/src/app/editor/editor.component.html @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + Unchecked + Checked + Indeterminate + Disabled + + + + Alpha + Beta + Gamma + + + + + + + + {{nickname.characterCount}} / 50 + + + + + + android Favorite phone + + + + + + motorcycle +   + + + + + + + +

{{food.name}}

+

{{food.rating}}

+ + + + + + + + + + + + + + + + + + +

EARTH

+ + +

FIRE

+ + + + + + build + + + + + + + + + + + + + +

Last dialog result: {{lastDialogResult}}

+ + + \ No newline at end of file diff --git a/web/src/app/editor/editor.component.scss b/web/src/app/editor/editor.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/web/src/app/editor/editor.component.spec.ts b/web/src/app/editor/editor.component.spec.ts new file mode 100644 index 0000000..6865b3e --- /dev/null +++ b/web/src/app/editor/editor.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { EditorComponent } from './editor.component'; + +describe('EditorComponent', () => { + let component: EditorComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EditorComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/editor/editor.component.ts b/web/src/app/editor/editor.component.ts new file mode 100644 index 0000000..e658bb3 --- /dev/null +++ b/web/src/app/editor/editor.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit } from '@angular/core'; +import 'codemirror/mode/javascript/javascript'; + +@Component({ + selector: 'app-editor', + templateUrl: './editor.component.html', + styleUrls: ['./editor.component.scss'] +}) +export class EditorComponent implements OnInit { + + public code:String = ""; + public cmOptions:Object = {}; + + constructor() { + this.cmOptions = { + lineNumbers: true, + mode: { + name: 'javascript', + json: true + } + }; + + } + + ngOnInit() { + } + +} diff --git a/web/src/app/header/header.component.html b/web/src/app/header/header.component.html new file mode 100644 index 0000000..a86a793 --- /dev/null +++ b/web/src/app/header/header.component.html @@ -0,0 +1,10 @@ + + + Scaffolding-all: Scaffold Documnetation + + + \ No newline at end of file diff --git a/web/src/app/header/header.component.scss b/web/src/app/header/header.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/web/src/app/header/header.component.spec.ts b/web/src/app/header/header.component.spec.ts new file mode 100644 index 0000000..00b8bf6 --- /dev/null +++ b/web/src/app/header/header.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { HeaderComponent } from './header.component'; + +describe('HeaderComponent', () => { + let component: HeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/header/header.component.ts b/web/src/app/header/header.component.ts new file mode 100644 index 0000000..591e148 --- /dev/null +++ b/web/src/app/header/header.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-header', + templateUrl: './header.component.html', + styleUrls: ['./header.component.scss'] +}) +export class HeaderComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/web/src/app/preview/preview.component.html b/web/src/app/preview/preview.component.html new file mode 100644 index 0000000..ceb8185 --- /dev/null +++ b/web/src/app/preview/preview.component.html @@ -0,0 +1,3 @@ +

+ preview works! +

diff --git a/web/src/app/preview/preview.component.scss b/web/src/app/preview/preview.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/web/src/app/preview/preview.component.spec.ts b/web/src/app/preview/preview.component.spec.ts new file mode 100644 index 0000000..64ad987 --- /dev/null +++ b/web/src/app/preview/preview.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { PreviewComponent } from './preview.component'; + +describe('PreviewComponent', () => { + let component: PreviewComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PreviewComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PreviewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/preview/preview.component.ts b/web/src/app/preview/preview.component.ts new file mode 100644 index 0000000..2aeea0a --- /dev/null +++ b/web/src/app/preview/preview.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-preview', + templateUrl: './preview.component.html', + styleUrls: ['./preview.component.scss'] +}) +export class PreviewComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/web/src/app/shared/dialog-content/dialog-content.component.html b/web/src/app/shared/dialog-content/dialog-content.component.html new file mode 100644 index 0000000..bce20a7 --- /dev/null +++ b/web/src/app/shared/dialog-content/dialog-content.component.html @@ -0,0 +1,8 @@ +

This is a dialog

+

+ +

+

\ No newline at end of file diff --git a/web/src/app/shared/dialog-content/dialog-content.component.scss b/web/src/app/shared/dialog-content/dialog-content.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/web/src/app/shared/dialog-content/dialog-content.component.spec.ts b/web/src/app/shared/dialog-content/dialog-content.component.spec.ts new file mode 100644 index 0000000..0850b50 --- /dev/null +++ b/web/src/app/shared/dialog-content/dialog-content.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { DialogContentComponent } from './dialog-content.component'; + +describe('DialogContentComponent', () => { + let component: DialogContentComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DialogContentComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DialogContentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/shared/dialog-content/dialog-content.component.ts b/web/src/app/shared/dialog-content/dialog-content.component.ts new file mode 100644 index 0000000..041254f --- /dev/null +++ b/web/src/app/shared/dialog-content/dialog-content.component.ts @@ -0,0 +1,16 @@ +import { Component, Optional, OnInit } from '@angular/core'; +import {MdDialog, MdDialogRef} from '@angular/material'; + +@Component({ + selector: 'app-dialog-content', + templateUrl: './dialog-content.component.html', + styleUrls: ['./dialog-content.component.scss'] +}) +export class DialogContentComponent implements OnInit { + + constructor(@Optional() public dialogRef: MdDialogRef) { } + + ngOnInit() { + } + +} diff --git a/web/src/app/sidenav/sidenav.component.html b/web/src/app/sidenav/sidenav.component.html new file mode 100644 index 0000000..d422df4 --- /dev/null +++ b/web/src/app/sidenav/sidenav.component.html @@ -0,0 +1,3 @@ + + Sidenav + \ No newline at end of file diff --git a/web/src/app/sidenav/sidenav.component.scss b/web/src/app/sidenav/sidenav.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/web/src/app/sidenav/sidenav.component.spec.ts b/web/src/app/sidenav/sidenav.component.spec.ts new file mode 100644 index 0000000..319f7e4 --- /dev/null +++ b/web/src/app/sidenav/sidenav.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { SidenavComponent } from './sidenav.component'; + +describe('SidenavComponent', () => { + let component: SidenavComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SidenavComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SidenavComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/sidenav/sidenav.component.ts b/web/src/app/sidenav/sidenav.component.ts new file mode 100644 index 0000000..5ca0d30 --- /dev/null +++ b/web/src/app/sidenav/sidenav.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-sidenav', + templateUrl: './sidenav.component.html', + styleUrls: ['./sidenav.component.scss'] +}) +export class SidenavComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/web/src/app/viewport/viewport.component.html b/web/src/app/viewport/viewport.component.html new file mode 100644 index 0000000..44ec156 --- /dev/null +++ b/web/src/app/viewport/viewport.component.html @@ -0,0 +1,11 @@ + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/web/src/app/viewport/viewport.component.scss b/web/src/app/viewport/viewport.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/web/src/app/viewport/viewport.component.spec.ts b/web/src/app/viewport/viewport.component.spec.ts new file mode 100644 index 0000000..2f5dad1 --- /dev/null +++ b/web/src/app/viewport/viewport.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { ViewportComponent } from './viewport.component'; + +describe('ViewportComponent', () => { + let component: ViewportComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ViewportComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ViewportComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/web/src/app/viewport/viewport.component.ts b/web/src/app/viewport/viewport.component.ts new file mode 100644 index 0000000..a84ad49 --- /dev/null +++ b/web/src/app/viewport/viewport.component.ts @@ -0,0 +1,46 @@ +import { Component, OnInit } from '@angular/core'; +import {MdDialog, MdDialogRef, MdSnackBar} from '@angular/material'; + +import { DialogContentComponent } from '../shared/dialog-content/dialog-content.component'; + +@Component({ + selector: 'app-viewport', + templateUrl: './viewport.component.html', + styleUrls: ['./viewport.component.scss'] +}) +export class ViewportComponent implements OnInit { + + isDarkTheme: boolean = true; + lastDialogResult: string; + + foods: any[] = [ + {name: 'Pizza', rating: 'Excellent'}, + {name: 'Burritos', rating: 'Great'}, + {name: 'French fries', rating: 'Pretty good'}, + ]; + + progress: number = 0; + + constructor(private _dialog: MdDialog, private _snackbar: MdSnackBar) { + // Update the value for the progress-bar on an interval. + setInterval(() => { + this.progress = (this.progress + Math.floor(Math.random() * 4) + 1) % 100; + }, 200); + } + + openDialog() { + let dialogRef = this._dialog.open(DialogContentComponent); + + dialogRef.afterClosed().subscribe(result => { + this.lastDialogResult = result; + }) + } + + showSnackbar() { + this._snackbar.open('YUM SNACKS', 'CHEW'); + } + + ngOnInit() { + } + +} diff --git a/web/src/index.html b/web/src/index.html index 19cdc48..428b0f2 100644 --- a/web/src/index.html +++ b/web/src/index.html @@ -6,6 +6,7 @@ + diff --git a/web/src/styles.css b/web/src/styles.css deleted file mode 100644 index 90d4ee0..0000000 --- a/web/src/styles.css +++ /dev/null @@ -1 +0,0 @@ -/* You can add global styles to this file, and also import other style files */ diff --git a/web/src/styles.scss b/web/src/styles.scss new file mode 100644 index 0000000..f7f1511 --- /dev/null +++ b/web/src/styles.scss @@ -0,0 +1,79 @@ +/* You can add global styles to this file, and also import other style files */ + +body { + margin: 0 +} + +md-sidenav-layout.m2app-dark { + background: black; +} + +.app-content { + padding: 20px; +} + +.app-content md-card { + margin: 20px; +} + +.app-sidenav { + padding: 10px; + min-width: 100px; +} + +.app-content md-checkbox { + margin: 10px; +} + +.app-toolbar-filler { + flex: 1 1 auto; +} + +.app-toolbar-menu { + padding: 0 14px 0 14px; + color: white; +} + +.app-icon-button { + box-shadow: none; + user-select: none; + background: none; + border: none; + cursor: pointer; + filter: none; + font-weight: normal; + height: auto; + line-height: inherit; + margin: 0; + min-width: 0; + padding: 0; + text-align: left; + text-decoration: none; +} + +.app-action { + display: inline-block; + position: fixed; + bottom: 20px; + right: 20px; +} + +.app-spinner { + height: 30px; + width: 30px; + display: inline-block; +} + +.app-input-icon { + font-size: 16px; +} + +.app-list { + border: 1px solid rgba(0,0,0,0.12); + width: 350px; + margin: 20px; +} + +.app-progress { + margin: 20px; +} \ No newline at end of file diff --git a/web/src/theme.scss b/web/src/theme.scss new file mode 100644 index 0000000..1677ce9 --- /dev/null +++ b/web/src/theme.scss @@ -0,0 +1,23 @@ +@import '~@angular/material/core/theming/all-theme'; + +// NOTE: Theming is currently experimental and not yet publically released! + +@include md-core(); + +$primary: md-palette($md-deep-purple); +$accent: md-palette($md-amber, A200, A100, A400); + +$theme: md-light-theme($primary, $accent); + + +@include angular-material-theme($theme); + +.m2app-dark { + $dark-primary: md-palette($md-pink, 700, 500, 900); + $dark-accent: md-palette($md-blue-grey, A200, A100, A400); + $dark-warn: md-palette($md-deep-orange); + + $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn); + + @include angular-material-theme($dark-theme); +} diff --git a/web/src/tsconfig.json b/web/src/tsconfig.json index 1cf713a..99d30e4 100644 --- a/web/src/tsconfig.json +++ b/web/src/tsconfig.json @@ -13,6 +13,11 @@ "target": "es5", "typeRoots": [ "../node_modules/@types" - ] + ], + "compilerOptions": { + "types": [ + "hammerjs" + ] + } } }