Initial commit

src/app/activities-list/activities-list.component.html

@@ -0,0 +1,42 @@
+<div class="card-panel grey lighten-5 z-depth-1">
+  <h6 class="panel-header">Last activities</h6>
+  <div class="divider"></div>
+  <div class="row valign-wrapper">
+    <div class="col s2">
+      <img src="assets/images/51.jpg" alt="" class="circle responsive-img">
+    </div>
+    <div class="col s10">
+          <span class="black-text activity-title">
+            Changed status of Task title from
+            <span class="status status-todo">TODO</span>
+            to <span class="status status-progress">IN PROGRESS</span>.
+          </span>
+    </div>
+  </div>
+  <div class="divider"></div>
+  <div class="row valign-wrapper">
+    <div class="col s2">
+      <img src="assets/images/72.jpg" alt="" class="circle responsive-img">
+    </div>
+    <div class="col s10">
+          <span class="black-text activity-title">
+            Changed status of Task title from
+            <span class="status status-review">IN REVIEW</span>
+            to <span class="status status-done">DONE</span>.
+          </span>
+    </div>
+  </div>
+  <div class="divider"></div>
+  <div class="row valign-wrapper">
+    <div class="col s2">
+      <img src="assets/images/62.jpg" alt="" class="circle responsive-img">
+    </div>
+    <div class="col s10">
+          <span class="black-text activity-title">
+            Changed status of Task title from
+            <span class="status status-bug">BUG</span>
+            to <span class="status status-todo">TODO</span>.
+          </span>
+    </div>
+  </div>
+</div>

src/app/activities-list/activities-list.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { ActivitiesListComponent } from './activities-list.component';
+
+describe('ActivitiesListComponent', () => {
+  let component: ActivitiesListComponent;
+  let fixture: ComponentFixture<ActivitiesListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ActivitiesListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActivitiesListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/activities-list/activities-list.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-activities-list',
+  templateUrl: './activities-list.component.html',
+  styleUrls: ['./activities-list.component.css']
+})
+export class ActivitiesListComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/app.component.css

@@ -1,8 +1,7 @@
-.btn:active {
-  transform: scale(0.8);
+body {
+  background: silver;
 }
 
-.container {
-  margin-top: 60px;
-  width: 50%;
+.btn:active {
+  transform: scale(0.8);
 }

src/app/app.component.html

@@ -1,11 +1,14 @@
-<div class="container">
-  <h5>{{ heading }}</h5>
-  <p [style.font-weight]="counter > 0 ? '700' : '400'">Click counter: {{ counter }}</p>
-  <p>DoCheck fires: {{ doCheckFires }} times</p>
-  <ul class="collection" *ngIf="list.length > 0">
-    <li class="collection-item" *ngFor="let item of list">
-      <p>{{ item }}</p>
-    </li>
-  </ul>
-  <button type="button" class="btn red accent-2" (click)="click()">Click</button>
-</div>
+<app-header>
+  <a href="#">
+    <img src="assets/images/logo.svg" alt="Logo" />
+  </a>
+</app-header>
+<app-main>
+  <h5>Dashboard</h5>
+  <app-activities-list sidebar></app-activities-list>
+</app-main>
+<app-footer>
+  <p class="grey-text text-lighten-4">
+    © 2016 Copyright Text
+  </p>
+</app-footer>

src/app/app.component.ts

@@ -1,23 +1,8 @@
-import { Component, DoCheck } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements DoCheck {
-  heading = 'Before click';
-  list: string[] = [];
-  doCheckFires = 0;
-  counter = 0;
-
-  ngDoCheck() {
-    ++this.doCheckFires;
-  }
-
-  click(): void {
-    this.counter++;
-    this.heading = 'After click';
-    this.list = [ 'Label 1', 'Label 2', 'Label 3' ];
-  }
-}
+export class AppComponent {}

src/app/app.module.ts

@@ -4,10 +4,20 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
+import { HeaderComponent } from './header/header.component';
+import { FooterComponent } from './footer/footer.component';
+import { MainComponent } from './main/main.component';
+import { ActivitiesListComponent } from './activities-list/activities-list.component';
+import { CardComponent } from './card/card.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HeaderComponent,
+    FooterComponent,
+    MainComponent,
+    ActivitiesListComponent,
+    CardComponent
   ],
   imports: [
     BrowserModule,

src/app/card/card.component.html

@@ -0,0 +1,7 @@
+<div class="card">
+  <div class="card-content black-text">
+    <span class="card-title"><ng-content></ng-content></span>
+    <p>I am a very simple card. I am good at containing small bits of information.
+      I am convenient because I require little markup to use effectively.</p>
+  </div>
+</div>

src/app/card/card.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/card/card.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.css']
+})
+export class CardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/footer/footer.component.css

@@ -0,0 +1,4 @@
+.page-footer {
+  font-size: 0.9rem;
+  padding: 0;
+}

src/app/footer/footer.component.html

@@ -0,0 +1,5 @@
+<footer class="page-footer row">
+  <div class="col s12">
+    <ng-content></ng-content>
+  </div>
+</footer>

src/app/footer/footer.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/footer/footer.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/header/header.component.css

@@ -0,0 +1,29 @@
+nav {
+  //background: linear-gradient(-125deg, #7175d6 , #be76ab);
+  background: #6f7bc2;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+nav ul a {
+  font-size: 0.9rem;
+}
+
+nav .brand-logo {
+  font-size: 1.4rem;
+  padding-left: 10px;
+}
+
+span.badge.new {
+  background-color: #f48288;
+}
+
+@media only screen and (min-width: 601px) {
+  nav,
+  nav .nav-wrapper i,
+  nav a.button-collapse,
+  nav a.button-collapse i {
+    height: 54px;
+    line-height: 54px;
+  }
+}

src/app/header/header.component.html

@@ -0,0 +1,8 @@
+<nav>
+  <ng-content></ng-content>
+  <ul id="nav-mobile" class="right">
+    <li>
+      <a href="">Activities <span class="new badge">3</span></a></li>
+    <li><a href=""><i class="material-icons">more_vert</i></a></li>
+  </ul>
+</nav>

src/app/header/header.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/header/header.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/main/main.component.css

@@ -0,0 +1,12 @@
+.page-container {
+  margin-top: 30px;
+  min-height: 500px;
+}
+
+.page-title {
+  margin-bottom: 20px;
+}
+
+.activity-title {
+  line-height: 26px;
+}