Lot of visual improvements

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

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

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

@@ -5,8 +5,26 @@
         <div class="input-container">
             <input type="text" [formControl]="titleControl" />
         </div>
-        <button mat-button type="button" class="expand">
+        <button mat-button type="button" class="expand" (click)="expand()">
             <mat-icon>expand_more</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 matTooltip="Définir une alerte dans X minutes">
+                    <mat-icon>update</mat-icon>
+                </button>
+                <button>
+                    <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;
-            border-width: .1rem;
-            border-color: rgba(0,0,0, 0);
+    .body {
+        height: 0;
+        visibility: hidden;
+        transition: height .1s ease-in-out;
+        display: flex;
 
-            width: 2rem;
-            height: 2rem;
-            min-width: 2rem;
-            min-height: 2rem;
+        &.expanded {
+            height: 20rem;
+            visibility: visible;
+            width: 100%;
+        }
 
-            transition: background-color .2s ease-out,
-                        border-color .2s ease-out;
+        .container {
+            flex-grow: 1;
+            padding: 1rem;
+            display: flex;
+            flex-direction: row;
 
-            &:hover {
-                background-color: #666;
-                border-color: rgb(53, 53, 53);
+            .description-container {
+                width: 80%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+    
+                textarea {
+                    flex-grow: 1;
+                    border: 1px solid #444;
+                    background-color: #4a4a4a;
+                    resize: none;
+                }
+            }
+    
+            .actions {
+                display: flex;
+                flex-grow: 1;
+                background-color: gray;
+                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,7 @@ 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'; 
 
 @NgModule({
   declarations: [
@@ -45,7 +46,8 @@ import { StorePersistenceService } from './core/service/store-persistence.servic
     MatButtonModule,
     ReactiveFormsModule,
     MatSnackBarModule,
-    MatCheckboxModule
+    MatCheckboxModule,
+    MatTooltipModule
   ],
   providers: [
     CookieService,

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

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

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/styles.scss

@@ -25,3 +25,31 @@ 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: 2rem;
+    min-height: 2rem;
+    padding: 0;
+  }
+}