From c027357cfef767e217f8034eef3146a2a6c8a327 Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry72@gmail.com>
Date: Sun, 6 Mar 2022 13:38:02 +0100
Subject: [PATCH] Refactor header style.

---
 .../components/header/header.component.html   | 47 ++++++++++++-------
 .../components/header/header.component.scss   | 34 +++++++++++---
 .../components/header/header.component.ts     |  4 ++
 3 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
index cd3b83f..a8c6cda 100644
--- a/src/app/core/components/header/header.component.html
+++ b/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>
diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss
index 762d689..b7c50bd 100644
--- a/src/app/core/components/header/header.component.scss
+++ b/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;
-  }
 }
\ No newline at end of file
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
index ba126d0..f20fdd2 100644
--- a/src/app/core/components/header/header.component.ts
+++ b/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();
   }