-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
updating to angular2 material design
- Loading branch information
1 parent
a291235
commit b7eda65
Showing
18 changed files
with
280 additions
and
186 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,20 @@ | ||
<div class="content mdl-layout mdl-js-layout mdl-layout--fixed-header"> | ||
<header class="mdl-layout__header"> | ||
<div class="mdl-layout__header-row"> | ||
<span class="mdl-layout-title">Contacts Manager</span> | ||
<div class="mdl-layout-spacer"></div> | ||
<nav class="mdl-navigation"> | ||
<!--<a *ngFor="#item of menuItems" [routerLink]="item.link" class="nav-link" href="">{{item.name}}</a>--> | ||
<!--<a class="mdl-navigation__link" [routerLink]="links.items">Contacts</a>--> | ||
</nav> | ||
</div> | ||
</header> | ||
<main class="mdl-layout__content page-content"> | ||
<router-outlet></router-outlet> | ||
</main> | ||
</div> | ||
<!--<div class="content mdl-layout mdl-js-layout mdl-layout--fixed-header">--> | ||
<!--<header class="mdl-layout__header">--> | ||
<!--<div class="mdl-layout__header-row">--> | ||
<!--<span class="mdl-layout-title">Contacts Manager</span>--> | ||
<!--<div class="mdl-layout-spacer"></div>--> | ||
<!--<nav class="mdl-navigation">--> | ||
<!--<!–<a *ngFor="#item of menuItems" [routerLink]="item.link" class="nav-link" href="">{{item.name}}</a>–>--> | ||
<!--<!–<a class="mdl-navigation__link" [routerLink]="links.items">Contacts</a>–>--> | ||
<!--</nav>--> | ||
<!--</div>--> | ||
<!--</header>--> | ||
<!--<main class="mdl-layout__content page-content">--> | ||
<!--<router-outlet></router-outlet>--> | ||
<!--</main>--> | ||
<!--</div>--> | ||
|
||
<md-toolbar color="primary"> | ||
<span>Contacts Manager</span> | ||
</md-toolbar> | ||
<router-outlet></router-outlet> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,58 +1,67 @@ | ||
html, body { | ||
font-family: Roboto, "Helvetica", "Arial", sans-serif; | ||
} | ||
|
||
/*.ng-valid[required] { | ||
border-left: 5px solid #42A948; | ||
} | ||
.ng-invalid { | ||
border-left: 5px solid #a94442; | ||
}*/ | ||
|
||
body { | ||
background-color: whitesmoke; | ||
} | ||
.content .mdl-layout__header { | ||
background-color: #263238; | ||
} | ||
.content .mdl-spinner { | ||
margin: 0 auto; | ||
} | ||
.mdl-navigation__link--icon>.material-icons { | ||
margin-right: 8px; | ||
margin-top: 8px; | ||
} | ||
.page-content { | ||
max-width: 1200px; | ||
width: 100%; | ||
margin: 0 auto; | ||
padding: 0; | ||
} | ||
.fem-card.mdl-card { | ||
width: 100%; | ||
min-height: inherit; | ||
cursor: pointer; | ||
} | ||
.fem-card .mdl-textfield { | ||
width: 100%; | ||
} | ||
.fem-card .mdl-textfield__input { | ||
border: none; | ||
border-bottom: 1px solid rgba(0, 0, 0, .12); | ||
display: block; | ||
font-size: 16px; | ||
margin: 0; | ||
padding: 4px 0; | ||
width: 100%; | ||
background: 0 0; | ||
text-align: left; | ||
color: inherit; | ||
} | ||
.fem-card label { | ||
font-size: 12px; | ||
font-weight: bold; | ||
} | ||
*:focus { | ||
outline: none; | ||
} | ||
/*html, body {*/ | ||
/*font-family: Roboto, "Helvetica", "Arial", sans-serif;*/ | ||
/*}*/ | ||
|
||
/*!*.ng-valid[required] {*/ | ||
/*border-left: 5px solid #42A948;*/ | ||
/*}*/ | ||
|
||
/*.ng-invalid {*/ | ||
/*border-left: 5px solid #a94442;*/ | ||
/*}*!*/ | ||
|
||
/*body {*/ | ||
/*background-color: whitesmoke;*/ | ||
/*}*/ | ||
|
||
/*.content .mdl-layout__header {*/ | ||
/*background-color: #263238;*/ | ||
/*}*/ | ||
|
||
/*.content .mdl-spinner {*/ | ||
/*margin: 0 auto;*/ | ||
/*}*/ | ||
|
||
/*.mdl-navigation__link--icon > .material-icons {*/ | ||
/*margin-right: 8px;*/ | ||
/*margin-top: 8px;*/ | ||
/*}*/ | ||
|
||
/*.page-content {*/ | ||
/*max-width: 1200px;*/ | ||
/*width: 100%;*/ | ||
/*margin: 0 auto;*/ | ||
/*padding: 0;*/ | ||
/*}*/ | ||
|
||
/*.fem-card.mdl-card {*/ | ||
/*width: 100%;*/ | ||
/*min-height: inherit;*/ | ||
/*cursor: pointer;*/ | ||
/*}*/ | ||
|
||
/*.fem-card .mdl-textfield {*/ | ||
/*width: 100%;*/ | ||
/*}*/ | ||
|
||
/*.fem-card .mdl-textfield__input {*/ | ||
/*border: none;*/ | ||
/*border-bottom: 1px solid rgba(0, 0, 0, .12);*/ | ||
/*display: block;*/ | ||
/*font-size: 16px;*/ | ||
/*margin: 0;*/ | ||
/*padding: 4px 0;*/ | ||
/*width: 100%;*/ | ||
/*background: 0 0;*/ | ||
/*text-align: left;*/ | ||
/*color: inherit;*/ | ||
/*}*/ | ||
|
||
/*.fem-card label {*/ | ||
/*font-size: 12px;*/ | ||
/*font-weight: bold;*/ | ||
/*}*/ | ||
|
||
/**:focus {*/ | ||
/*outline: none;*/ | ||
/*}*/ |
14 changes: 7 additions & 7 deletions
14
ContactsManager/app/contacts/contact-item/contact-item.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,15 @@ | ||
<div *ngIf="contact" class="mdl-card mdl-shadow--2dp contact-card"> | ||
<div class="mdl-card__title"> | ||
<h2 class="mdl-card__title-text">{{contact.name}}</h2> | ||
<div *ngIf="contact"> | ||
<div> | ||
<h2>{{contact.name}}</h2> | ||
</div> | ||
<div class="mdl-card__supporting-text"> | ||
<div> | ||
<p>{{contact.address}}, {{contact.city}}, {{contact.state}} - {{contact.zip}}</p> | ||
</div> | ||
<div class="mdl-card__supporting-text"> | ||
<div> | ||
<p>{{contact.email}}</p> | ||
<p>@{{contact.twitter}}</p> | ||
</div> | ||
<div class="mdl-card__actions"> | ||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" (click)="deleteContact()">Delete</button> | ||
<div> | ||
<button md-raised-button color="warn" (click)="deleteContact()">Delete</button> | ||
</div> | ||
</div> |
19 changes: 11 additions & 8 deletions
19
ContactsManager/app/contacts/contact-item/contact-item.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,20 +1,23 @@ | ||
import {Component, Input, Output, EventEmitter} from 'angular2/core'; | ||
import { Contact } from '../contact'; | ||
import {Component, Input, Output, EventEmitter} from '@angular/core'; | ||
import {MdButton} from '@angular2-material/button'; | ||
import {Contact} from '../contact'; | ||
|
||
@Component({ | ||
selector: 'contact-card', | ||
templateUrl: 'app/contacts/contact-item/contact-item.component.html', | ||
moduleId: module.id, | ||
selector: 'contact-item', | ||
templateUrl: 'contact-item.component.html', | ||
styles: [` | ||
.contact-card { | ||
margin-top: 22px; | ||
} | ||
`] | ||
`], | ||
directives: [MdButton] | ||
}) | ||
export class ContactComponent { | ||
@Input() contact:Contact; | ||
@Input() contact: Contact; | ||
@Output() delete = new EventEmitter(); | ||
|
||
deleteContact(){ | ||
deleteContact() { | ||
this.delete.emit(this.contact); | ||
} | ||
} | ||
} |
Empty file.
20 changes: 7 additions & 13 deletions
20
ContactsManager/app/contacts/contacts-list/contacts-list.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,7 @@ | ||
<h4>Contacts List</h4> | ||
<div class="mdl-grid"> | ||
<div class="mdl-cell mdl-cell--3-col"> | ||
<ul class="mdl-list"> | ||
<li class="mdl-list__item mdl-shadow--2dp contact-item" *ngFor="#contact of contacts" (click)="onSelect(contact)"> | ||
{{contact.name}} | ||
</li> | ||
</ul> | ||
</div> | ||
<div class="mdl-cell mdl-cell--9-col"> | ||
<contact-item [contact]="selectedContact" (delete)="onDelete($event)"></contact-item> | ||
</div> | ||
</div> | ||
<h2>Contacts List</h2> | ||
<md-list style="width: 30%; float: left"> | ||
<md-list-item *ngFor="let contact of contactsList" (click)="onSelect(contact)"> | ||
{{contact.name}} | ||
</md-list-item> | ||
</md-list> | ||
<contact-item [contact]="selectedContact" (delete)="onDelete($event)" style="width: 70%; float: right"></contact-item> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 7 additions & 6 deletions
13
ContactsManager/app/contacts/create-contact/create-contact.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,4 @@ | ||
///<reference path="../node_modules/angular2/typings/browser.d.ts"/> | ||
|
||
import { bootstrap } from 'angular2/platform/browser'; | ||
import { AppComponent } from "./app.component"; | ||
import {bootstrap} from '@angular/platform-browser-dynamic'; | ||
import {AppComponent} from './app.component'; | ||
|
||
bootstrap(AppComponent); |
Oops, something went wrong.