From 47b1d0bb8df09f8b429751b194d3e4892b9e4a93 Mon Sep 17 00:00:00 2001 From: Gregory Mundy Date: Fri, 18 Aug 2017 23:33:36 -0400 Subject: [PATCH] initial layout for labeller established --- .angular-cli.json | 52 +++++++++---------- package-lock.json | 26 ++++++++++ package.json | 6 ++- src/app/app.component.css | 3 ++ src/app/app.component.html | 23 ++------ src/app/app.component.ts | 1 + src/app/app.module.ts | 19 ++++++- .../label-display/labeller.component.css | 17 ++++++ .../label-display/labeller.component.html | 15 ++++++ .../label-display/labeller.component.spec.ts | 25 +++++++++ .../label-display/labeller.component.ts | 27 ++++++++++ src/index.html | 5 ++ src/styles.css | 6 ++- 13 files changed, 175 insertions(+), 50 deletions(-) create mode 100644 src/app/labeller/label-display/labeller.component.css create mode 100644 src/app/labeller/label-display/labeller.component.html create mode 100644 src/app/labeller/label-display/labeller.component.spec.ts create mode 100644 src/app/labeller/label-display/labeller.component.ts diff --git a/.angular-cli.json b/.angular-cli.json index 810d06a..f244ff3 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -3,39 +3,37 @@ "project": { "name": "skill-labeller-ui" }, - "apps": [ - { - "root": "src", - "outDir": "dist", - "assets": [ - "assets", - "favicon.ico" - ], - "index": "index.html", - "main": "main.ts", - "polyfills": "polyfills.ts", - "test": "test.ts", - "tsconfig": "tsconfig.app.json", - "testTsconfig": "tsconfig.spec.json", - "prefix": "app", - "styles": [ - "styles.css" - ], - "scripts": [], - "environmentSource": "environments/environment.ts", - "environments": { - "dev": "environments/environment.ts", - "prod": "environments/environment.prod.ts" - } + "apps": [{ + "root": "src", + "outDir": "dist", + "assets": [ + "assets", + "favicon.ico" + ], + "index": "index.html", + "main": "main.ts", + "polyfills": "polyfills.ts", + "test": "test.ts", + "tsconfig": "tsconfig.app.json", + "testTsconfig": "tsconfig.spec.json", + "prefix": "app", + "styles": [ + "../node_modules/bootstrap/dist/css/bootstrap-grid.min.css", + "styles.css" + ], + "scripts": [], + "environmentSource": "environments/environment.ts", + "environments": { + "dev": "environments/environment.ts", + "prod": "environments/environment.prod.ts" } - ], + }], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, - "lint": [ - { + "lint": [{ "project": "src/tsconfig.app.json", "exclude": "**/node_modules/**" }, diff --git a/package-lock.json b/package-lock.json index f23a589..c30c6fe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,14 @@ "tslib": "1.7.1" } }, + "@angular/cdk": { + "version": "2.0.0-beta.8", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.8.tgz", + "integrity": "sha512-OOtK+AA14cmRG9AbUgvoKC9Tooz0N37GTaRSV+xziC8GxXHgwvTu4PFSFHlBnHPipOYC/tB2oP39j3KuurEMPA==", + "requires": { + "tslib": "1.7.1" + } + }, "@angular/cli": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.3.0.tgz", @@ -159,6 +167,14 @@ "integrity": "sha1-ttiC6kDRjVE/w6A1p5h1Ap/jjwE=", "dev": true }, + "@angular/material": { + "version": "2.0.0-beta.8", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-2.0.0-beta.8.tgz", + "integrity": "sha512-4+OecvjU15i+l/vXBP2qEHdlsU9taK6kBhsWKsxNLK3+TAVoV5qjc2rjOucHtTwI/oOjyBXnLJP6pl4tuLEUQw==", + "requires": { + "tslib": "1.7.1" + } + }, "@angular/platform-browser": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-4.3.5.tgz", @@ -922,6 +938,11 @@ "hoek": "2.16.3" } }, + "bootstrap": { + "version": "4.0.0-beta", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-beta.tgz", + "integrity": "sha512-I/r3fYtUZr+rUNkh8HI+twxZ56p6ehNn27eA1XSebLVQKAJ2xZHnEvZrSR+UR2A/bONcd9gHC3xatVhQlH6R6w==" + }, "brace-expansion": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz", @@ -3060,6 +3081,11 @@ "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=", "dev": true }, + "hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=" + }, "handle-thing": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-1.2.5.tgz", diff --git a/package.json b/package.json index 796ef5e..f091b0d 100644 --- a/package.json +++ b/package.json @@ -12,16 +12,20 @@ }, "private": true, "dependencies": { - "@angular/animations": "^4.2.4", + "@angular/animations": "^4.3.5", + "@angular/cdk": "^2.0.0-beta.8", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", + "@angular/material": "^2.0.0-beta.8", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", + "bootstrap": "^4.0.0-beta", "core-js": "^2.4.1", + "hammerjs": "^2.0.8", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }, diff --git a/src/app/app.component.css b/src/app/app.component.css index e69de29..2ca6e5f 100644 --- a/src/app/app.component.css +++ b/src/app/app.component.css @@ -0,0 +1,3 @@ +.fill-remaining-space { + flex: 1 1 auto; +} diff --git a/src/app/app.component.html b/src/app/app.component.html index 230f4ed..c6f8f27 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1,5 @@ - -
-

- Welcome to {{title}}! -

- -
-

Here are some links to help you start:

- + + Workforce Data Initiative Skill Labeller + + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7b0f672..61e13da 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,6 @@ import { Component } from '@angular/core'; + @Component({ selector: 'app-root', templateUrl: './app.component.html', diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f657163..e2cf16e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,13 +2,28 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; +import { LabellerComponent } from './labeller/label-display/labeller.component'; + +import {MdToolbarModule} from '@angular/material'; +import {MdButtonModule} from '@angular/material'; +import {MdIconModule} from '@angular/material'; +import {MdCardModule} from '@angular/material'; +import {MdDialogModule, MdDialogRef, MdDialog} from '@angular/material'; + +import 'hammerjs'; @NgModule({ declarations: [ - AppComponent + AppComponent, + LabellerComponent ], imports: [ - BrowserModule + BrowserModule, + MdToolbarModule, + MdButtonModule, + MdIconModule, + MdCardModule, + MdDialogModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/labeller/label-display/labeller.component.css b/src/app/labeller/label-display/labeller.component.css new file mode 100644 index 0000000..c2d77f4 --- /dev/null +++ b/src/app/labeller/label-display/labeller.component.css @@ -0,0 +1,17 @@ +.card-container { + padding: 3rem 1.5rem; + text-align: center; + width: 30%; +} + +.border:not([class*=mat-elevation-z]) { + box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); +} + +.swipe-left { + background-color: #E53935; +} + +.swipe-right { + background-color: #43A047; +} diff --git a/src/app/labeller/label-display/labeller.component.html b/src/app/labeller/label-display/labeller.component.html new file mode 100644 index 0000000..972ad21 --- /dev/null +++ b/src/app/labeller/label-display/labeller.component.html @@ -0,0 +1,15 @@ +
+ Is this a skill? + + +

Ability to work under pressure.

+ + + + + + + + + +
diff --git a/src/app/labeller/label-display/labeller.component.spec.ts b/src/app/labeller/label-display/labeller.component.spec.ts new file mode 100644 index 0000000..93abd60 --- /dev/null +++ b/src/app/labeller/label-display/labeller.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LabellerComponent } from './labeller.component'; + +describe('LabellerComponent', () => { + let component: LabellerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LabellerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LabellerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should be created', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/labeller/label-display/labeller.component.ts b/src/app/labeller/label-display/labeller.component.ts new file mode 100644 index 0000000..9b12d82 --- /dev/null +++ b/src/app/labeller/label-display/labeller.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-labeller', + templateUrl: './labeller.component.html', + styleUrls: ['./labeller.component.css'] +}) +export class LabellerComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + + onSwipeLeft() { + console.log('Left Swipe'); + } + + onSwipeRight() { + console.log('Right Swipe'); + } + + onRequestHelp() { + console.log('Request help'); + } + +} diff --git a/src/index.html b/src/index.html index d4715b0..f8e6849 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,6 @@ + SkillLabellerUi @@ -7,8 +8,12 @@ + + + + diff --git a/src/styles.css b/src/styles.css index 90d4ee0..9da57fe 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,5 @@ -/* You can add global styles to this file, and also import other style files */ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; +body { + padding: 0px; + margin: 0px; +}