Skip to content

Commit

Permalink
updating to angular2 material design
Browse files Browse the repository at this point in the history
  • Loading branch information
techieshravan committed May 15, 2016
1 parent a291235 commit b7eda65
Show file tree
Hide file tree
Showing 18 changed files with 280 additions and 186 deletions.
35 changes: 20 additions & 15 deletions ContactsManager/app/app.component.html
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&#45;&#45;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">-->
<!--&lt;!&ndash;<a *ngFor="#item of menuItems" [routerLink]="item.link" class="nav-link" href="">{{item.name}}</a>&ndash;&gt;-->
<!--&lt;!&ndash;<a class="mdl-navigation__link" [routerLink]="links.items">Contacts</a>&ndash;&gt;-->
<!--</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>
18 changes: 10 additions & 8 deletions ContactsManager/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import { ContactsListComponent, CreateContactComponent, ContactsService } from './contacts/contacts';
import { Logger } from './logger/logger.service';
import {Component} from '@angular/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {ContactsListComponent, CreateContactComponent, ContactsService} from './contacts/contacts';
import {Logger} from './logger/logger.service';
import {MdToolbar} from '@angular2-material/toolbar';

@Component({
moduleId: module.id,
selector: 'contacts-app',
templateUrl: 'app/app.component.html',
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app.component.html',
directives: [ROUTER_DIRECTIVES, MdToolbar],
providers: [ROUTER_PROVIDERS, ContactsService, Logger]
})
@RouteConfig([
Expand All @@ -24,6 +26,6 @@ import { Logger } from './logger/logger.service';
])
export class AppComponent {
public menuItems = [
{ name: 'Contacts', link: ['Contacts'] }
{name: 'Contacts', link: ['Contacts']}
];
}
}
125 changes: 67 additions & 58 deletions ContactsManager/app/assets/styles.css
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;*/
/*}*/
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>
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.
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>
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { Component, OnInit } from 'angular2/core';
import { Contact } from '../contact';
import { ContactComponent } from '../contact-item/contact-item.component';
import { ContactsService } from '../contacts.service';
import {Component, OnInit} from '@angular/core';
import {Contact} from '../contact';
import {ContactComponent} from '../contact-item/contact-item.component';
import {ContactsService} from '../contacts.service';
import {MD_LIST_DIRECTIVES} from '@angular2-material/list';

@Component({
moduleId: module.id,
selector: 'contacts-list',
templateUrl: 'app/contacts/contacts-list/contacts-list.component.html',
styleUrls: ['app/contacts/contacts-list/contacts-list.component.css'],
directives: [ContactComponent]
templateUrl: 'contacts-list.component.html',
styleUrls: ['contacts-list.component.css'],
directives: [ContactComponent, MD_LIST_DIRECTIVES]
})
export class ContactsListComponent implements OnInit {

contactsList: Contact[];
selectedContact: Contact;

constructor(private _contactsService: ContactsService) { }

Expand All @@ -22,4 +25,12 @@ export class ContactsListComponent implements OnInit {
private _getContacts() {
this._contactsService.getContacts().then(contacts => this.contactsList = contacts);
}
}

public onSelect(contact) {
this.selectedContact = contact;
}

public onDelete(event){
console.log(event);
}
}
8 changes: 4 additions & 4 deletions ContactsManager/app/contacts/contacts.service.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Injectable } from 'angular2/core';
import { ContactsList } from './mock-contacts';
import { Contact } from './contact';
import { Logger } from '../logger/logger.service';
import {Injectable} from '@angular/core';
import {ContactsList} from './mock-contacts';
import {Contact} from './contact';
import {Logger} from '../logger/logger.service';

@Injectable()
export class ContactsService {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import { Component } from 'angular2/core';
import { ControlGroup, FormBuilder, Validators } from 'angular2/common';
import { ContactsService } from '../contacts.service';
import {Component} from '@angular/core';
import {ControlGroup, FormBuilder, Validators} from '@angular/common';
import {ContactsService} from '../contacts.service';

@Component({
moduleId: module.id,
selector: 'create-contact',
templateUrl: 'app/contacts/create-contact/create-contact.component.html'
templateUrl: 'create-contact.component.html'
})
export class CreateContactComponent {

contactForm: ControlGroup;
contactForm:ControlGroup;

constructor(private _fb: FormBuilder, private _contactsService: ContactsService) {
constructor(private _fb:FormBuilder, private _contactsService:ContactsService) {

this.contactForm = _fb.group({
name: ['', Validators.required],
Expand Down
4 changes: 2 additions & 2 deletions ContactsManager/app/contacts/mock-contacts.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Contact } from './contact';
import {Contact} from './contact';

export let ContactsList: Contact[] = [
export var ContactsList: Contact[] = [
{
name: 'Debra Garcia',
address: '1234 Main St',
Expand Down
6 changes: 3 additions & 3 deletions ContactsManager/app/logger/logger.service.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Injectable } from 'angular2/core';
import {Injectable} from '@angular/core';

@Injectable()
export class Logger {

logs: string[] = [];

log(message: string) {
this.logs.push(message);
console.log(message);
Expand Down
6 changes: 2 additions & 4 deletions ContactsManager/app/main.ts
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);
Loading

0 comments on commit b7eda65

Please sign in to comment.