Merged PR 6: Add icon of todo list and redesign it.

Related work items: #1, #3

1 files changed, 9 insertions, 10 deletions

diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
index 4e1aa2f1..3b4809ae 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html
@@ -2,18 +2,17 @@
 
 <mat-list>
   <mat-list-item *ngFor="let item of items; let i = index" style="height:unset;">
-    <div class="item-box" [class.first-item-box]="i === 0">
-      <mat-card class="mat-elevation-z2" [class.align-self-bottom]="i === 0">
-        <span class="item-id" [class.item-id-closed]="item.closed"
-          [class.item-id-open]="!item.closed">{{item.id}}</span>
-        <a class="mat-h3 item-title" [href]="item.detailUrl">{{item.title}}</a>
-      </mat-card>
+    <div class="item-box" [class.first-item-box]="i === 0" [class.non-first-item-box]="i !== 0">
+      <app-todo-item [class.align-self-bottom]="i === 0" [item]="item"></app-todo-item>
+      <div class="space"></div>
       <div class="sample-box" *ngIf="i === 0">
-        <div class="mat-caption sample-container">
-          <span class="item-id-sample item-id-open"></span> means working now.
+        <div class="mat-caption sample-item">
+          <span class="sample-color-block color-block-open"></span>
+          <span> means working now.</span>
         </div>
-        <div class="mat-caption sample-container">
-          <span class="item-id-sample item-id-closed"></span> means completed.
+        <div class="mat-caption sample-item">
+          <span class="sample-color-block color-block-closed"></span>
+          <span> means completed.</span>
         </div>
         <div class="mat-caption">click on item to see details.</div>
       </div>