Lot of visual improvements.

src/app/active-list-tasks/active-list-tasks.component.scss

@@ -2,31 +2,30 @@
     max-width: 50rem;
     width: 90%;
     margin: 0 auto;
+    padding: 2rem;
 
     .task {
-        position: relative;
-        width: 100%;
-        height: 2.5rem;
-        display: flex;
-        align-items: center;
-        margin: .5rem 0;
-        
-        input {
-            width: 100%;
-            height: 100%;
-            padding: 0 3rem;
-            border-radius: .1rem;
-            border-style: none;
-            background-color: #444;
-        }
-
         &.new {
+            position: relative;
+            width: 100%;
+            display: flex;
+            align-items: center;
             margin-top: 1rem;
+            height: 2.5rem;
 
             mat-icon {
                 position: absolute;
                 left: 1rem;
             }
+
+            input {
+                width: 100%;
+                height: 100%;
+                padding: 0 3rem;
+                border-radius: .1rem;
+                border-style: none;
+                background-color: #444;
+            }
         }
     }
 }

src/app/active-list-tasks/task-display/task-display.component.html

@@ -5,8 +5,27 @@
         <div class="input-container">
             <input type="text" [formControl]="titleControl" />
         </div>
-        <button mat-button type="button" class="expand">
+        <button type="button" class="expand icon" (click)="expand()" matRipple>
-            <mat-icon>expand_more</mat-icon>
+            <mat-icon *ngIf="!isExpanded">expand_more</mat-icon>
+            <mat-icon *ngIf="isExpanded">expand_less</mat-icon>
         </button>
     </div>
+    <div [ngClass]="getExpendedClass()">
+        <div class="container">
+            <div class="description-container">
+                <label for="description">
+                    Description
+                </label>
+                <textarea id="description"></textarea>
+            </div>
+            <div class="actions">
+                <button class="icon raised" matRipple matTooltip="Définir une alerte dans X minutes">
+                    <mat-icon>update</mat-icon>
+                </button>
+                <button class="icon raised alert" matRipple>
+                    <mat-icon>delete</mat-icon>
+                </button>
+            </div>
+        </div>
+    </div>
 </div>

src/app/active-list-tasks/task-display/task-display.component.scss

@@ -1,15 +1,15 @@
 .task {
     position: relative;
     width: 100%;
-    height: 2.5rem;
     display: flex;
     align-items: center;
-    margin: .5rem 0;
+    margin-bottom: .5rem;
+    flex-direction: column;
+    background-color: #444;
 
     .header {
         border-radius: .1rem;
         height: 2.5rem;
-        background-color: #444;
         width: 100%;
         display: flex;
         align-items: center;
@@ -52,29 +52,52 @@
         }
 
         .expand {
-            display: flex;
-            justify-content: end;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 0;
             margin-right: .5rem;
+        }
+    }
 
-            border-style: solid;
+    .body {
-            border-width: .1rem;
+        height: 0;
-            border-color: rgba(0,0,0, 0);
+        visibility: hidden;
+        transition: height .1s ease-in-out;
+        display: flex;
 
-            width: 2rem;
+        &.expanded {
-            height: 2rem;
+            height: 20rem;
-            min-width: 2rem;
+            visibility: visible;
-            min-height: 2rem;
+            width: 100%;
+        }
 
-            transition: background-color .2s ease-out,
+        .container {
-                        border-color .2s ease-out;
+            flex-grow: 1;
+            padding: 1rem;
+            display: flex;
+            flex-direction: row;
 
-            &:hover {
+            .description-container {
-                background-color: #666;
+                width: 80%;
-                border-color: rgb(53, 53, 53);
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+    
+                textarea {
+                    flex-grow: 1;
+                    border: 1px solid #444;
+                    border-radius: .2rem;
+                    background-color: #4a4a4a;
+                    resize: none;
+                }
+            }
+    
+            .actions {
+                display: flex;
+                flex-grow: 1;
+                height: 100%;
+                flex-wrap: wrap;
+                max-width: 20%;
+                justify-content: space-around;
+                align-items: flex-start;
+                padding: 1rem;
             }
         }
     }

src/app/active-list-tasks/task-display/task-display.component.ts

@@ -1,8 +1,9 @@
-import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
+import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Task } from 'src/app/core/entity/task';
 import { TaskListService } from 'src/app/core/service/task-list.service';
 
+
 @Component({
   selector: 'app-task-display',
   templateUrl: './task-display.component.html',
@@ -11,13 +12,26 @@ import { TaskListService } from 'src/app/core/service/task-list.service';
 export class TaskDisplayComponent implements AfterViewInit {
   @Input() task?: Task;
   titleControl = new FormControl(this.task?.title);
+  isExpanded = false;
 
   constructor(
     private _taskListService: TaskListService
   ) {}
-  
 
   ngAfterViewInit(): void {
     this.titleControl.setValue(this?.task?.title);
   }
+
+  expand(): void {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  getExpendedClass(): string {
+    let result = 'body';
+
+    if (this.isExpanded) {
+      result += ' expanded';
+    }
+    return result;
+  }
 }

src/app/app.module.ts

@@ -22,6 +22,8 @@ import { TaskDisplayComponent } from './active-list-tasks/task-display/task-disp
 import {MatCheckboxModule} from '@angular/material/checkbox'; 
 import { TaskListService } from './core/service/task-list.service';
 import { StorePersistenceService } from './core/service/store-persistence.service';
+import {MatTooltipModule} from '@angular/material/tooltip'; 
+import {MatRippleModule} from '@angular/material/core'; 
 
 @NgModule({
   declarations: [
@@ -45,7 +47,9 @@ import { StorePersistenceService } from './core/service/store-persistence.servic
     MatButtonModule,
     ReactiveFormsModule,
     MatSnackBarModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    MatTooltipModule,
+    MatRippleModule
   ],
   providers: [
     CookieService,

src/app/core/components/header/header.component.html

@@ -1,20 +1,24 @@
 <nav *ngIf="!selectionMode">
-  <span class="title" routerLink="/">
+  <span class="title">
+    <img src="../../assets/images/to-do.png" />
     To Do
   </span>
-  <button mat-raised-button
+  <button *ngIf="!activeTaskList"
-      *ngIf="!activeTaskList"
+      (click)="openNewListForm()"
-      (click)="openNewListForm()">
+      class="raised"
+      matRipple>
     Nouvelle liste
   </button>
-  <button mat-raised-button
+  <button *ngIf="activeTaskList"
-      *ngIf="activeTaskList"
+      (click)="goTaskListsPane()"
-      (click)="goTaskListsPane()">
+      class="icon raised"
+      matRipple
+      matTooltip="Retourner aux task-lists">
     <mat-icon>chevron_left</mat-icon>
   </button>
-  <div *ngIf="activeTaskList">
+  <!-- <div *ngIf="activeTaskList">
     Liste active : {{activeTaskList.name}}
-  </div>
+  </div> -->
 </nav>
 <nav *ngIf="selectionMode" class="selectionMode">
   <div></div>

src/app/core/components/header/header.component.scss

@@ -25,5 +25,7 @@ nav {
   .title {
     font-size: 1.5rem;
     margin: 0 1rem;
+    display: flex;
+    align-items: center;
   }
-}
+}

src/app/task-lists/task-lists.component.html

@@ -1,12 +1,18 @@
 <div class="task-lists">
   <div *ngFor="let taskList of taskLists" class="task-list-container">
-    <div class="task-list shadowed" (click)="selectActiveTaskList(taskList)" (contextmenu)="$event.preventDefault(); onRightClick(taskList)">
+    <div class="task-list shadowed"
+        (click)="selectActiveTaskList(taskList)"
+        (contextmenu)="$event.preventDefault(); onRightClick(taskList)"
+        matRipple>
       <ng-container [ngPlural]="taskList.tasks?.length ?? 0">
-        <ng-template ngPluralCase=">1">
+        <ng-template ngPluralCase="0">
-          {{taskList.tasks?.length}} tâches
+          Aucune tâche
+        </ng-template>
+        <ng-template ngPluralCase="1">
+          {{taskList.tasks?.length}} tâche
         </ng-template>
         <ng-template ngPluralCase="other">
-          {{taskList.tasks?.length}} tâche
+          {{taskList.tasks?.length}} tâches
         </ng-template>
       </ng-container>
     </div>

src/styles.scss

@@ -25,3 +25,41 @@ a.no-style {
   color: inherit;
   text-decoration: none;
 }
+
+
+button {
+  border-style: solid;
+  border-width: .1rem;
+  border-color: rgba(0,0,0, 0);
+  border-radius: .2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: .5rem;
+
+  transition: background-color .2s ease-out,
+              border-color .2s ease-out;
+
+  &:hover {
+      background-color: #666;
+      border-color: rgb(53, 53, 53);
+  }
+
+  &.icon {
+      width: 2rem;
+      height: 2rem;
+      min-width: 1rem;
+      min-height: 1rem;
+      padding: 0;
+      background-color: inherit;
+  }
+
+  &.raised {
+    background-color: #4a4a4a;
+  }
+
+  &.alert {
+    background: #F93154;
+    color: #fff;
+  }
+}