Skip to content

Commit

Permalink
adding material design
Browse files Browse the repository at this point in the history
adding material design
  • Loading branch information
techieshravan committed Mar 9, 2016
1 parent 3e4e85a commit 533fd76
Show file tree
Hide file tree
Showing 15 changed files with 173 additions and 118 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,7 @@ node_modules
.idea
bower_components
*.js

.DS_Store

typings
47 changes: 16 additions & 31 deletions ContactsManager/index.html
Original file line number Diff line number Diff line change
@@ -1,20 +1,32 @@
<html>

<head>
<base href="/">
<title>Angular 2 Contacts Manager</title>

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="styles.css"> -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<!--<link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.indigo-pink.min.css">-->
<link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.blue-red.min.css" />

<script defer src="https://code.getmdl.io/1.1.2/material.min.js"></script>


<link rel="stylesheet" href="src/assets/styles.css" />

<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
Expand All @@ -26,41 +38,14 @@
}
}
});
System.import('src/boot')
.then(null, console.error.bind(console));
System.import('src/bootstrap').then(null, console.error.bind(console));
</script>

</head>

<!-- 3. Display the application -->
<body>
<div class="container">
<!--<nav class="navbar navbar-default navbar-fixed-top">-->
<!--<div class="container-fluid">-->
<!--&lt;!&ndash; Brand and toggle get grouped for better mobile display &ndash;&gt;-->

<!--<div class="navbar-header">-->
<!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">-->
<!--<span class="sr-only">Toggle navigation</span>-->
<!--<span class="icon-bar"></span>-->
<!--<span class="icon-bar"></span>-->
<!--<span class="icon-bar"></span>-->
<!--</button>-->
<!--<a class="navbar-brand" href="#">Angular 2 Contacts Manager</a>-->
<!--</div>-->

<!--&lt;!&ndash; Collect the nav links, forms, and other content for toggling &ndash;&gt;-->
<!--<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">-->
<!--<ul class="nav navbar-nav">-->
<!--<li class="active"><a href="#">Link1 <span class="sr-only">(current)</span></a></li>-->
<!--<li><a href="#">Link2</a></li>-->
<!--</ul>-->
<!--</div>&lt;!&ndash; /.navbar-collapse &ndash;&gt;-->
<!--</div>&lt;!&ndash; /.container-fluid &ndash;&gt;-->
<!--</nav>-->
<h3>Angular 2 Contacts Manager</h3>
<contacts-app>Loading...</contacts-app>
</div>
<contacts-app>Loading...</contacts-app>
</body>

</html>
22 changes: 12 additions & 10 deletions ContactsManager/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,27 @@
"name": "contacts-manager",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.3",
"bootstrap": "^3.3.6",
"angular2": "2.0.0-beta.8",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.6",
"zone.js": "0.5.11"
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^2.0.1",
"typescript": "^1.7.5"
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.2",
"typings":"^0.6.8"
}
}
}
File renamed without changes.
4 changes: 0 additions & 4 deletions ContactsManager/src/boot.ts

This file was deleted.

6 changes: 6 additions & 0 deletions ContactsManager/src/bootstrap.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from "./components/app/app.component";

bootstrap(AppComponent);
18 changes: 18 additions & 0 deletions ContactsManager/src/components/app/app.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<a class="md-title-icon" href="#" target="_blank"><i></i></a>
<span class="mdl-layout-title">Contacts Manager</span>
</div>
<div class="mdl-navigation">
<!--<a *ngFor="#item of menuItems" [routerLink]="item.link" class="nav-link" href="">{{item.name}}</a>-->
</div>
</header>
<main class="mdl-layout__content">
<section>
<div class="page-content">
<router-outlet></router-outlet>
</div>
</section>
</main>
</div>
29 changes: 29 additions & 0 deletions ContactsManager/src/components/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { CreateContactComponent } from "../create-contact/create-contact.component";
import { DisplayContactsComponent } from "../display-contacts/display-contacts";

@Component({
selector: 'contacts-app',
templateUrl: './src/components/app/app.component.html',
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
})
@RouteConfig([
{
path: '/contacts',
name: 'Contacts',
component: DisplayContactsComponent,
useAsDefault: true
},
{
path: '/create-contact',
name: 'CreateContact',
component: CreateContactComponent
}
])
export class AppComponent {
public menuItems = [
{name: 'Contacts', link: ['Contacts']}
];
}
12 changes: 0 additions & 12 deletions ContactsManager/src/components/app/app.ts

This file was deleted.

88 changes: 45 additions & 43 deletions ContactsManager/src/components/create-contact/create-contact.html
Original file line number Diff line number Diff line change
@@ -1,43 +1,45 @@
<h4>Create Contact</h4>
<form [ngFormModel]="contactForm" (submit)="doLogin($event)">

<div class="form-group">
<label for="email">Name</label>
<input class="form-control" id="name" ngControl="name">
</div>

<div class="form-group">
<label for="address">Address</label>
<input class="form-control" id="address" ngControl="address">
</div>

<div class="form-group">
<label for="city">City</label>
<input class="form-control" id="city" ngControl="city">
</div>

<div class="form-group">
<label for="state">State</label>
<input class="form-control" id="state" ngControl="state">
</div>

<div class="form-group">
<label for="zip">Zip</label>
<input class="form-control" id="zip" ngControl="zip">
</div>

<div class="form-group">
<label for="email">Email</label>
<input class="form-control" id="email" ngControl="email">
</div>

<div class="form-group">
<label for="twitter">Twitter</label>
<input class="form-control" id="twitter" ngControl="twitter">
</div>

<button type="submit" class="btn btn-default">Log in</button>



</form>
<article class="template animated slideInRight">
<h4>Create Contact</h4>
<form [ngFormModel]="contactForm" (submit)="doLogin($event)">

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="email">Name</label>
<input class="mdl-textfield__input" type="text" id="name" ngControl="name">
</div>

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="address">Address</label>
<input class="mdl-textfield__input" type="text" id="address" ngControl="address">
</div>

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="city">City</label>
<input class="mdl-textfield__input" type="text" id="city" ngControl="city">
</div>

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="state">State</label>
<input class="mdl-textfield__input" type="text" id="state" ngControl="state">
</div>

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="zip">Zip</label>
<input class="mdl-textfield__input" type="text" id="zip" ngControl="zip">
</div>

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="email">Email</label>
<input class="mdl-textfield__input" type="text" id="email" ngControl="email">
</div>

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="twitter">Twitter</label>
<input class="mdl-textfield__input" type="text" id="twitter" ngControl="twitter">
</div>

<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Log in
</button>

</form>
</article>
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12" *ngFor="#contact of contactsList">
<div class="panel panel-primary">
<div class="panel-heading">{{contact.name}}</div>
<div class="panel-body">
<p>{{contact.address}}</p>
<p>
<span>{{contact.city}}</span>,
<span>{{contact.state}}</span>
<span>{{contact.zip}}</span>
</p>
<p>{{email}}</p>
<p>
<a [href]="'http:https://twitter.com/' + contact.twitter">@{{contact.twitter}}</a>
</p>
<div class="mdl-grid">
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--3-col-desktop"
*ngFor="#contact of contactsList">
<div class="mdl-card__title mdl-card--expand">
<h2 class="mdl-card__title-text">{{contact.name}}</h2>
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
{{contact.address}}, {{contact.city}}, {{contact.state}} {{contact.zip}}
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
{{contact.email}}
</div>
<div class="mdl-card__actions mdl-card--border">
<a [href]="'http:https://twitter.com/' + contact.twitter" class="mdl-button mdl-js-button mdl-js-ripple-effect">@{{contact.twitter}}</a>
</div>
</div>
</div>
</div>

<!--<button class="mdl-button mdl-js-button mdl-button&#45;&#45;fab mdl-button&#45;&#45;colored">-->
<!--<i class="material-icons">add</i>-->
<!--</button>-->
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,20 @@ import {ContactsList} from "../../mock-contacts";

@Component({
selector: 'display-contacts',
templateUrl:'/src/components/display-contacts/display-contacts.html'
templateUrl:'/src/components/display-contacts/display-contacts.html',
styles: [`
.mdl-card {
width: 320px;
height: 320px;
}
.mdl-card > .mdl-card__title {
background: #FF5252;
color: #fff;
/*background: url('./images/image_card.jpg') bottom right 15% no-repeat #46B6AC;*/
}
`]
})
export class DisplayContactsComponent {
contactsList: Contact[] = ContactsList;
Expand Down
6 changes: 4 additions & 2 deletions ContactsManager/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
"noImplicitAny": false
},
"exclude": [
"node_modules"
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
}
6 changes: 6 additions & 0 deletions ContactsManager/typings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#bc92442c075929849ec41d28ab618892ba493504"
}
}

0 comments on commit 533fd76

Please sign in to comment.