Some change styling.

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

@@ -1,4 +1,4 @@
-<nav>
+<nav *ngIf="!selectionMode">
   <span class="title" routerLink="/">
     To Do
   </span>
@@ -16,3 +16,12 @@
     Liste active : {{activeTaskList.name}}
   </div>
 </nav>
+<nav *ngIf="selectionMode" class="selectionMode">
+  <div></div>
+  <div>
+    Cliquez sur une liste pour la sélectionner
+  </div>
+  <div class="actions">
+    <button mat-raised-button (click)="disableSelectionMode()">Annuler</button>
+  </div>
+</nav>

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

@@ -5,7 +5,22 @@ nav {
   right: 0;
   display: flex;
   align-items: center;
-  height: 4rem;
+  height: 3.2rem;
+  background-color: #eee;
+
+  &.selectionMode {
+    font-weight: bold;
+    background-color: #185eb4;
+    color: white;
+    display: flex;
+    justify-content: center;
+
+    .actions {
+      position: absolute;
+      right: 0;
+      margin: 0 1rem;
+    }
+  }
 
   .title {
     font-size: 1.5rem;

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

@@ -14,6 +14,7 @@ import { TaskListService } from '../../service/task-list.service';
 export class HeaderComponent implements OnInit, OnDestroy {
   private _storeSubscription?: Subscription;
   activeTaskList?: TaskList;
+  selectionMode = false;
 
   constructor(
     private _dialog: MatDialog,
@@ -24,6 +25,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this._storeSubscription = this._taskListService.store$.subscribe(store => {
       this.activeTaskList = store.taskLists.find(taskList => store.activeTaskListId === taskList.id);
+      this.selectionMode = store.selectionMode;
     });
   }
 
@@ -38,4 +40,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
   goTaskListsPane(): void {
     this._taskListService.removeActiveTaskList();
   }
+
+  disableSelectionMode(): void {
+    this._taskListService.disableSelectionMode();
+  }
 }

src/app/core/service/task-list.service.ts

@@ -118,7 +118,8 @@ export class TaskListService {
 
   disableSelectionMode(): void {
     const store = this.store;
-    store.selectionMode = true;
+    store.selectionMode = false;
+    store.selectedTaskLists = [];
     this._store.next(store);
   }
 }

src/styles.scss

@@ -4,7 +4,7 @@ html, body { height: 100%; }
 body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
-  padding-top: 4rem;
+  padding-top: 3.2rem;
 }