From e4b394dcfd727fd02c34de88261c813fbe24776f Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 23 Feb 2019 23:55:04 +0800
Subject: Add icon of todo list and redesign the page.

---
 .../app/todo-list-page/todo-list-color-block.css   |  7 ++++++
 .../todo-list-page/todo-list-page.component.css    | 29 +++++-----------------
 .../todo-list-page/todo-list-page.component.html   | 19 +++++++-------
 .../app/todo-list-page/todo-list-page.component.ts |  2 +-
 4 files changed, 23 insertions(+), 34 deletions(-)
 create mode 100644 Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css

(limited to 'Timeline/ClientApp/src/app/todo-list-page')

diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css
new file mode 100644
index 00000000..5e0d4ba9
--- /dev/null
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-color-block.css
@@ -0,0 +1,7 @@
+.color-block-open {
+  background: red;
+}
+
+.color-block-closed {
+  background: green;
+}
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
index ed260d5c..754b786e 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css
@@ -5,29 +5,20 @@
 .item-box {
   display: flex;
   width: 100%;
-  padding: 5px;
   box-sizing: border-box;
 }
 
 .first-item-box {
   justify-content: space-between;
+  padding: 0 0 5px 5px;
 }
 
-.item-card {
-  display: flex;
-  align-items: center;
-}
-
-.item-img {
-  padding: 1px;
-  background: white;
-  border-radius: 3px;
+.non-first-item-box {
+  padding: 5px;
 }
 
-.item-title {
-  padding-left: 5px;
-  color: black;
-  text-decoration: none;
+.space {
+  flex: 1 4 20px;
 }
 
 .sample-box {
@@ -35,7 +26,7 @@
   align-self: flex-start;
 }
 
-.sample-container {
+.sample-item {
   display: flex;
   align-items: center;
 }
@@ -46,11 +37,3 @@
   height: 1em;
   margin-right: 2px;
 }
-
-.sample-color-block-open {
-  background: tomato;
-}
-
-.sample-color-block-closed {
-  background: mediumspringgreen;
-}
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 0dcc8a94..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 item-card" [style.background]="item.closed ? 'mediumspringgreen' : 'tomato'"
-        [class.align-self-bottom]="i === 0">
-        <img class="item-img" width="18" height="18" [src]="item.iconUrl">
-        <a class="mat-h3 item-title" [href]="item.detailUrl">{{item.id}} {{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="sample-color-block sample-color-block-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="sample-color-block sample-color-block-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>
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
index 06f49923..e58cca7d 100644
--- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
+++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts
@@ -4,7 +4,7 @@ import { TodoListService, WorkItem } from './todo-list.service';
 @Component({
   selector: 'app-todo-list-page',
   templateUrl: './todo-list-page.component.html',
-  styleUrls: ['./todo-list-page.component.css']
+  styleUrls: ['./todo-list-page.component.css', './todo-list-color-block.css']
 })
 export class TodoListPageComponent implements OnInit {
 
-- 
cgit v1.2.3