Skip to content

Commit

Permalink
feat(form): create project from branch step-12
Browse files Browse the repository at this point in the history
  • Loading branch information
nlm-pro committed Nov 25, 2018
1 parent cab5087 commit 1027271
Show file tree
Hide file tree
Showing 45 changed files with 1,104 additions and 0 deletions.
99 changes: 99 additions & 0 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -2192,6 +2192,105 @@
}
}
}
},
"form": {
"root": "steps/form/",
"sourceRoot": "steps/form/src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/form",
"index": "steps/form/src/index.html",
"main": "steps/form/src/main.ts",
"polyfills": "steps/form/src/polyfills.ts",
"tsConfig": "steps/form/tsconfig.app.json",
"assets": [
"steps/form/src/favicon.ico",
"steps/form/src/assets"
],
"styles": [
"steps/form/src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "steps/form/src/environments/environment.ts",
"with": "steps/form/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "form:build"
},
"configurations": {
"production": {
"browserTarget": "form:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "form:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "steps/form/src/test.ts",
"polyfills": "steps/form/src/polyfills.ts",
"tsConfig": "steps/form/tsconfig.spec.json",
"karmaConfig": "steps/form/karma.conf.js",
"styles": [
"steps/form/src/styles.css"
],
"scripts": [],
"assets": [
"steps/form/src/favicon.ico",
"steps/form/src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"steps/form/tsconfig.app.json",
"steps/form/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "angular-200",
Expand Down
11 changes: 11 additions & 0 deletions steps/form/browserslist
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
#
# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11
50 changes: 50 additions & 0 deletions steps/form/src/app/_static/form.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@

mat-card,
mat-list-item {
color: rgba(0,0,0,0.87);
background-color: white;
margin: 10px;
width: 360px;
}

mat-card:hover {
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),
0 24px 38px 3px rgba(0,0,0,.14),
0 9px 46px 8px rgba(0,0,0,.12);
}

mat-list-item {
height: 22px;
padding: 0;
margin-left: -12px;
font-size: 14px;
}

mat-card-title {
margin-bottom: 0;
}

mat-card-title span {
font-size: 24px;
font-weight: 400;
line-height: 32px;
}

mat-card-subtitle {
margin-top: -18px;
height: 17px;
}

mat-card-title-group {
margin-bottom: 20px;
}

img {
border-radius: 50%;
margin-right: 18px;
-webkit-filter: grayscale(100%);
}

.align-right {
text-align: right;
}
69 changes: 69 additions & 0 deletions steps/form/src/app/_static/form.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<mat-card class="mat-whiteframe-2dp">

<mat-card-title>
<span>Create new person</span>
</mat-card-title>

<mat-card-content>
<form>

<p>
<mat-form-field>
<input matInput style="width:100%" placeholder="ID (disabled)" disabled name="id">
</mat-form-field>
</p>

<table style="width: 100%" cellspacing="0">
<tr>
<td>
<mat-form-field>
<input matInput placeholder="First name *" name="firstname">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Last Name *" name="lastname">
</mat-form-field>
</td>
<td class="align-right">
<img width="100" src="https://randomuser.me/api/portraits/lego/6.jpg" />
<input type="hidden" name="photo">
</td>
</tr>
</table>

<p>
<mat-form-field>
<input matInput placeholder="Email *" style="width:100%" name="email">
</mat-form-field>
</p>

<p>
<mat-form-field>
<input matInput placeholder="Address" style="width:100%" name="street">
</mat-form-field>
</p>

<p>
<mat-form-field>
<input matInput placeholder="City" name="city">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Postal Code" name="postalCode">
</mat-form-field>
</p>

<p>
<mat-form-field>
<input matInput placeholder="Phone * (ex: 0612345678)" style="width:100%" name="phone">
</mat-form-field>
</p>

<p>
<mat-checkbox>Manager</mat-checkbox>
</p>
<mat-card-actions align="end">
<button mat-button type="button">Cancel</button>
<button mat-button color="primary" type="submit">Save</button>
</mat-card-actions>
</form>
</mat-card-content>
</mat-card>
46 changes: 46 additions & 0 deletions steps/form/src/app/app.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
mat-toolbar.extend-toolbar {
background-color: #0168AB;
background-image: url('/assets/images/bg_right.png');
background-repeat: no-repeat;
background-position: right;
top: 0px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
width: 100%;
z-index: 1;
color: white;
margin-bottom: 10px;
}

mat-toolbar .flex {
flex: 1 1 auto;
}

mat-toolbar a {
color: inherit;
text-decoration: none;
height: 100%;
margin: 0px 10px 0px 10px;
border-bottom: 2px solid transparent;
font-size: 1.1em;
font-weight: normal;
font-family: 'Open Sans', sans-serif;
}

mat-toolbar a:not(.active):hover {
border-bottom: 2px solid white;
}

mat-toolbar a img {
height: 100%;
margin-left: -60px;
}

mat-toolbar-row:nth-child(1) {
margin-bottom: 66px;
}
mat-toolbar-row:nth-child(2) {
padding-left: 30px;
text-align: center;
height: 56px;
margin-top: 56px;
}
16 changes: 16 additions & 0 deletions steps/form/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<mat-toolbar class="extend-toolbar">
<span>
<a [routerLink]="['/']">
<img src="assets/images/logo-sfeir.svg" aria-label="sfeir" alt="Sfeir">
</a>
</span>

<span class="flex"></span>

<span>
<a href="#/locator">Maps</a>
<a [routerLink]="['/people']">List</a>
</span>
</mat-toolbar>

<router-outlet></router-outlet>
10 changes: 10 additions & 0 deletions steps/form/src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { Component } from '@angular/core';

@Component({
selector: 'sfeir-app',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class PeopleAppComponent {
constructor() {}
}
60 changes: 60 additions & 0 deletions steps/form/src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
// CORE DEPS
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
// MATERIAL DESIGN MODULES
import {
MatToolbarModule,
MatCardModule,
MatTabsModule,
MatButtonModule,
MatInputModule,
MatCheckboxModule,
MatRadioModule,
MatIconModule,
MatListModule,
MatDialogModule,
} from '@angular/material';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import { APP_ROUTES } from './app.routes';

import { PeopleAppComponent } from './app.component';
import { HomeComponent } from './home';
import { PeopleComponent } from './people';
import { CardComponent } from './shared/card';
import { AddDialogComponent } from 'app/people/add-dialog/add-dialog.component';

@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MatToolbarModule,
MatCardModule,
MatTabsModule,
MatButtonModule,
MatInputModule,
MatCheckboxModule,
MatRadioModule,
MatIconModule,
MatListModule,
MatDialogModule,
HttpClientModule,
APP_ROUTES
],
declarations: [
PeopleAppComponent,
HomeComponent,
PeopleComponent,
CardComponent,
AddDialogComponent,
],
entryComponents: [AddDialogComponent],
providers: [
HttpClient,
],
bootstrap: [
PeopleAppComponent
]
})
export class AppModule { }
13 changes: 13 additions & 0 deletions steps/form/src/app/app.routes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { RouterModule, Routes } from '@angular/router';

// APP COMPONENTS
import { HomeComponent } from './home/index';
import { PeopleComponent } from './people/index';

const ROUTES: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'people', component: PeopleComponent}
];

export const APP_ROUTES = RouterModule.forRoot(ROUTES, {useHash: true});
Loading

0 comments on commit 1027271

Please sign in to comment.