Refactor header style.

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

@@ -1,21 +1,34 @@
 <nav *ngIf="!selectionMode">
-  <span class="title">
-    <img src="../../assets/images/to-do.png" />
-    To Do
-  </span>
-  <button *ngIf="!activeTaskList"
-      (click)="openNewListForm()"
-      class="raised"
-      matRipple>
-    Nouvelle liste
-  </button>
-  <button *ngIf="activeTaskList"
-      (click)="goTaskListsPane()"
-      class="icon raised"
-      matRipple
-      matTooltip="Retourner aux task-lists">
-    <mat-icon>chevron_left</mat-icon>
-  </button>
+  <div class="left">
+    <span class="title">
+      <img src="../../assets/images/to-do.png" />
+      To Do
+    </span>
+    <button *ngIf="!activeTaskList"
+        (click)="openNewListForm()"
+        class="raised"
+        matRipple>
+      Nouvelle liste
+    </button>
+    <button *ngIf="activeTaskList"
+        (click)="goTaskListsPane()"
+        class="icon raised"
+        matRipple
+        matTooltip="Retourner aux task-lists">
+      <mat-icon>chevron_left</mat-icon>
+    </button>
+  </div>
+  <div class="middle">
+    test
+  </div>
+  <div class="right">
+    <button class="icon raised"
+        (click)="enableSelectionMode()"
+        matTooltip="Activer la sélection des task-lists"
+        matTooltipPosition="left">
+      <mat-icon>checklist_rtl</mat-icon>
+    </button>
+  </div>
 </nav>
 <nav *ngIf="selectionMode" class="selectionMode">
   <div></div>

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

@@ -8,6 +8,33 @@ nav {
   height: 3.2rem;
   background-color: #666;
 
+  .left {
+    position: absolute;
+    left: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .title {
+      font-size: 1.5rem;
+      display: flex;
+      align-items: center;
+      margin-right: 1rem;
+    }
+
+    
+  }
+
+  .middle {
+    display: flex;
+    margin: auto;
+  }
+
+  .right {
+    position: absolute;
+    right: 1rem;
+  }
+  
   &.selectionMode {
     font-weight: bold;
     background-color: #185eb4;
@@ -21,11 +48,4 @@ nav {
       margin: 0 1rem;
     }
   }
-
-  .title {
-    font-size: 1.5rem;
-    margin: 0 1rem;
-    display: flex;
-    align-items: center;
-  }
 }

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

@@ -46,6 +46,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this._taskListService.removeActiveTaskList();
   }
 
+  enableSelectionMode(): void {
+    this._taskListService.enableSelectionMode();
+  }
+
   disableSelectionMode(): void {
     this._taskListService.disableSelectionMode();
   }