isa44.74/To-do-List-App
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

enhancing ui

Browse source
This commit is contained in:
imelilabourne 2020-09-18 12:59:13 +08:00
parent 820107933c
commit 466d4736c1
6 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
db.json
View file

@ -1,10 +1,16 @@
{ {
"tasks": [ "tasks": [
{ {
"title": "Drink Coffee", "title": "30 secs side plank",
"completed": false, "completed": false,
"editing": false, "editing": false,
"id": 1 "id": 4
},
{
"title": "sleep",
"completed": false,
"editing": false,
"id": 5
} }
] ]
} }

5
src/app/Todo-List-App/components/todo-empty/todo-empty.component.css
View file

@ -1,8 +1,9 @@
h3{ h5{
font-size: 2em; font-size: 2em;
margin-top: 1em;
} }
.img-div, h3{ .img-div, h5{
display: flex; display: flex;
justify-content: center; justify-content: center;
} }

6
src/app/Todo-List-App/components/todo-empty/todo-empty.component.html
View file

@ -1,6 +1,6 @@
<div @fade> <div @fade>
<h3>All Task Accomplished 👻</h3> <h5>Yey! All task has been completed 👻</h5>
<div class="img-div"> <!-- <div class="img-div">
<img src="../../../../assets/to-do.png" alt="to-do"> <img src="../../../../assets/to-do.png" alt="to-do">
</div> </div> -->
</div> </div>

2
src/app/Todo-List-App/containers/TodoList/todo-list.component.css
View file

@ -32,6 +32,8 @@ li > *{
margin: 2px; margin: 2px;
} }
.main{ .main{
max-width: 50%; max-width: 50%;
box-shadow: 8px 6px#858181; box-shadow: 8px 6px#858181;

10
src/app/Todo-List-App/containers/TodoList/todo-list.component.html
View file

@ -4,9 +4,7 @@
<div class="header"> <div class="header">
<h1>TODO LIST <i class="fa fa-pencil"></i></h1> <h1>TODO LIST <i class="fa fa-pencil"></i></h1>
</div> </div>
<div *ngIf="remaining() !== 0"> <div class="info selectall"><input type="checkbox" (change)="selectAll()">Select All</div>
<div class="info selectall"><input type="checkbox" (change)="selectAll()">Select All</div>
</div>
<div class="inputDiv"> <div class="inputDiv">
<input type="text" class="form-control addInput" placeholder="Things you want to do today?" [(ngModel)]="taskTitle" (keyup.enter) = "addTask()"> <input type="text" class="form-control addInput" placeholder="Things you want to do today?" [(ngModel)]="taskTitle" (keyup.enter) = "addTask()">
</div> </div>
@ -23,15 +21,15 @@
</ng-template> </ng-template>
<!-- buttons switching --> <!-- buttons switching -->
<div *ngIf="!task.editing; else doneBtn" ><button [ngClass] = "{disabled: task.completed}" class="btn btn-success listBtn"(click)="toggleEdit(task)" ><i class="fa fa-edit"> Edit</i></button></div> <div *ngIf="!task.editing; else doneBtn" ><button [ngClass] = "{disabled: task.completed}" class="btn btn-success listBtn"(click)="toggleEdit(task)" ><i class="fa fa-edit"> </i>Edit</button></div>
<ng-template #doneBtn> <ng-template #doneBtn>
<div> <div>
<button class="btn btn-success listBtn"(click)="editTask(task); toggleEdit(task)" ><i class="fa fa-edit">Done</i></button> <button class="btn btn-success listBtn"(click)="editTask(task); toggleEdit(task)" ><i class="fa fa-edit"></i> Done</button>
</div> </div>
</ng-template> </ng-template>
<div> <div>
<button class="btn btn-danger listBtn" (click)="deleteTask(task)"><i class="fa fa-trash"> Del</i></button> <button class="btn btn-danger listBtn" (click)="deleteTask(task)"><i class="fa fa-trash"> </i> Del</button>
</div> </div>
</li> </li>
</ul> </ul>

2
src/app/Todo-List-App/containers/TodoList/todo-list.component.ts
View file

@ -26,7 +26,7 @@ export class TodoList{
taskId: number; taskId: number;
taskTitle: string; taskTitle: string;
editing: boolean = false; editing: boolean = false;
tasks:Tasks[]; tasks:Tasks[] = [];
beforeEditing: string; beforeEditing: string;
today: number = Date.now(); today: number = Date.now();