florian/Todo-tool
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add button to show task addition pane.

Browse Source
This commit is contained in:
florian
2021-10-20 14:01:23 +02:00
parent 89b50142c7
commit ee3a24d238
10 changed files with 116 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/add-task/add-task.component.html
View File

@@ -1 +1,3 @@
<p>add-task works!</p>
<div>
<mat-icon>add</mat-icon>
</div>

7
src/app/app.module.ts
View File

@@ -6,6 +6,8 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MainPageComponent } from './main-page/main-page.component';
import { AddTaskComponent } from './add-task/add-task.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatIconModule} from '@angular/material/icon';
@NgModule({
declarations: [
@@ -15,11 +17,12 @@ import { AddTaskComponent } from './add-task/add-task.component';
],
imports: [
BrowserModule,
AppRoutingModule
AppRoutingModule,
BrowserAnimationsModule,
MatIconModule
],
providers: [
CookieService,
],
bootstrap: [AppComponent]
})

7
src/app/main-page/main-page.component.html
View File

@@ -1,7 +1,12 @@
<div>
<div class="component">
<h1>Todo List</h1>
<div *ngFor="let task of tasks" [title]="task.creationDate">
<h1>{{ task.title }}</h1>
<p>{{ task.description }}</p>
</div>
<div id="add-task-btn" *ngIf="!isAddingATask" (click)="startTaskAddition()">
<mat-icon>add</mat-icon>
<span>Ajouter une nouvelle tâche...</span>
</div>
<app-add-task *ngIf="isAddingATask"></app-add-task>
</div>

21
src/app/main-page/main-page.component.scss
View File

@@ -0,0 +1,21 @@
.component {
#add-task-btn {
border-radius: 3px;
border-width: 1px;
border-color: #AAAAAA;
border-style: solid;
background-color: #FFFFFF;
display: flex;
align-items: center;
padding: 10px 20px;
cursor: pointer;
mat-icon {
margin: 0 10px;
}
span {
color: #AAAAAA;
}
}
}

4
src/app/main-page/main-page.component.ts
View File

@@ -9,6 +9,7 @@ import { TaskService } from '../core/service/task.service';
})
export class MainPageComponent implements OnInit {
tasks: Task[] = [];
isAddingATask = false;
constructor(
private _taskService: TaskService
@@ -18,4 +19,7 @@ export class MainPageComponent implements OnInit {
this._taskService.tasks.subscribe(tasks => this.tasks = tasks);
}
startTaskAddition(): void {
this.isAddingATask = true;
}
}

5
src/index.html
View File

@@ -6,8 +6,11 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>

3
src/styles.scss
View File

@@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }