From 44e41080c512c6b76cad17b38666bdc980889dd1 Mon Sep 17 00:00:00 2001
From: Vince <vincent.francolin@outlook.com>
Date: Tue, 7 May 2019 23:45:07 +0200
Subject: [PATCH 1/2] #2: same clear title area for content views

---
 timelog-ui/src/app/app.component.html         |  2 +-
 .../settings-view/settings-view.component.css |  3 -
 .../settings-view.component.html              | 28 ++++---
 .../task-detail/task-detail.component.css     | 16 ----
 .../task-detail/task-detail.component.html    | 66 +++++++++--------
 .../tasks/task-list/task-list.component.css   |  1 -
 .../tasks/task-list/task-list.component.html  | 74 ++++++++++---------
 timelog-ui/src/content.css                    | 39 ++++++++++
 timelog-ui/src/styles.css                     |  3 +
 9 files changed, 135 insertions(+), 97 deletions(-)
 create mode 100644 timelog-ui/src/content.css

diff --git a/timelog-ui/src/app/app.component.html b/timelog-ui/src/app/app.component.html
index 9085593..6e88414 100644
--- a/timelog-ui/src/app/app.component.html
+++ b/timelog-ui/src/app/app.component.html
@@ -1,7 +1,7 @@
 <app-toolbar></app-toolbar>
 
 <mat-sidenav-container >
-	<mat-sidenav #sidenav mode="side" [opened]="opened">
+	<mat-sidenav #sidenav mode="side" [opened]="opened" class="mat-elevation-z3">
 		<app-navigation-menu ></app-navigation-menu>	
 	</mat-sidenav>
 
diff --git a/timelog-ui/src/app/components/settings/settings-view/settings-view.component.css b/timelog-ui/src/app/components/settings/settings-view/settings-view.component.css
index c698938..e69de29 100644
--- a/timelog-ui/src/app/components/settings/settings-view/settings-view.component.css
+++ b/timelog-ui/src/app/components/settings/settings-view/settings-view.component.css
@@ -1,3 +0,0 @@
-.settings-view {
-    padding: 24px;
-}
\ No newline at end of file
diff --git a/timelog-ui/src/app/components/settings/settings-view/settings-view.component.html b/timelog-ui/src/app/components/settings/settings-view/settings-view.component.html
index 55261c0..51e37d0 100644
--- a/timelog-ui/src/app/components/settings/settings-view/settings-view.component.html
+++ b/timelog-ui/src/app/components/settings/settings-view/settings-view.component.html
@@ -2,16 +2,22 @@
   Loading...
 </div>
 <div class="settings-view" *ngIf="loading === false"> 
-  <h1>Settings</h1>
-  <form class="">
-    <div class="input-full-width">
-      <mat-checkbox name="isDoneRequiringTimelog" [(ngModel)]="settings.doneRequiresTimelog">Prevent task with no time log to be put to "Done"</mat-checkbox>
-    </div>
-    <div class="input-full-width">
-      <mat-checkbox name="allowUndone" [(ngModel)]="settings.allowUndone">Allow task to be undone</mat-checkbox>
-    </div>
-  </form>
-  <div>
-    <button mat-raised-button (click)="saveSettings()" color="primary">Save</button>
+  <div class="content-view-title mat-elevation-z2">
+      <h1>Settings</h1>
+      <div class="actions">
+          <button mat-button (click)="saveSettings()">
+            <mat-icon>save</mat-icon>
+          </button>
+      </div>
+  </div>
+  <div class="content-view-body">
+    <form class="">
+      <div class="input-full-width">
+        <mat-checkbox color="primary" name="isDoneRequiringTimelog" [(ngModel)]="settings.doneRequiresTimelog">Prevent task with no time log to be put to "Done"</mat-checkbox>
+      </div>
+      <div class="input-full-width">
+        <mat-checkbox color="primary" name="allowUndone" [(ngModel)]="settings.allowUndone">Allow task to be undone</mat-checkbox>
+      </div>
+    </form>
   </div>
 </div>
diff --git a/timelog-ui/src/app/components/tasks/task-detail/task-detail.component.css b/timelog-ui/src/app/components/tasks/task-detail/task-detail.component.css
index dab254e..345e9b5 100644
--- a/timelog-ui/src/app/components/tasks/task-detail/task-detail.component.css
+++ b/timelog-ui/src/app/components/tasks/task-detail/task-detail.component.css
@@ -1,19 +1,3 @@
-.task-details {
-    padding: 24px;
-}
-
-.detail-view-header {
-    display: flex;
-}
-
-.detail-view-header div {
-    flex: 1;
-}
-
-.detail-view-header .actions {
-    text-align: right;
-}
-
 .timelog-entry .timelog-content {
     flex: 1;
 }
diff --git a/timelog-ui/src/app/components/tasks/task-detail/task-detail.component.html b/timelog-ui/src/app/components/tasks/task-detail/task-detail.component.html
index f777521..b1caa48 100644
--- a/timelog-ui/src/app/components/tasks/task-detail/task-detail.component.html
+++ b/timelog-ui/src/app/components/tasks/task-detail/task-detail.component.html
@@ -21,46 +21,52 @@
     </mat-card-actions>
   </mat-card>
 </div>
-<div class="task-details" *ngIf="loading === false && errors.length === 0">
-  <div class="detail-view-header">
-    <div>
+<div class="task-details content-view" *ngIf="loading === false && errors.length === 0">
+  <div class="detail-view-header content-view-title mat-elevation-z2">
+    <div class="actions-left">
       <button mat-button (click)="goToTaskList()">
         <mat-icon>arrow_back</mat-icon>
       </button>
     </div>
+    <div class="title-area">
+
+      <h1>Task {{task.name}}</h1>
+    </div>
     <div class="actions">
       <!-- <button mat-button (click)="deleteTask()">
         <mat-icon>delete</mat-icon>
       </button> -->
     </div>
   </div>
-  <h1>
-    {{task.name}}
-  </h1>
-  <p>
-    Status: {{done?'Done':'Pending'}}
-  </p>
-  <p>
-    Total time spent: {{totalSpentTime}}
-  </p>
+  <div class="content-view-body">
+    <h2>
+      {{task.name}}
+    </h2>
+    <p>
+      Status: {{done?'Done':'Pending'}}
+    </p>
+    <p>
+      Total time spent: {{totalSpentTime}}
+    </p>
 
-  <div class="">
-    <h3>Activity</h3>
-    <mat-list class="timelog-entry">
-      <ng-container *ngFor="let timelog of timeLogs">
-        <mat-list-item class="timelog-entry">
-          <span mat-line class="timelog-content">
-            <strong>{{getTimelogFormattedDuration(timelog)}}</strong> <small> on {{getTimelogFormattedDate(timelog)}}
-            </small>
-          </span>
-          <p class="timelog-actions">
-            <button mat-icon-button (click)="deleteTimeLog(timelog)">
-              <mat-icon aria-label="Delete time log">delete</mat-icon>
-            </button>
-          </p>
-        </mat-list-item>
-        <mat-divider></mat-divider>
-      </ng-container>
-    </mat-list>
+    <div class="">
+      <h3>Activity</h3>
+      <mat-list class="timelog-entry">
+        <ng-container *ngFor="let timelog of timeLogs">
+          <mat-list-item class="timelog-entry">
+            <span mat-line class="timelog-content">
+              <strong>{{getTimelogFormattedDuration(timelog)}}</strong> <small> on {{getTimelogFormattedDate(timelog)}}
+              </small>
+            </span>
+            <p class="timelog-actions">
+              <button mat-icon-button (click)="deleteTimeLog(timelog)">
+                <mat-icon aria-label="Delete time log">delete</mat-icon>
+              </button>
+            </p>
+          </mat-list-item>
+          <mat-divider></mat-divider>
+        </ng-container>
+      </mat-list>
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/timelog-ui/src/app/components/tasks/task-list/task-list.component.css b/timelog-ui/src/app/components/tasks/task-list/task-list.component.css
index 19e5e2c..4cfd481 100644
--- a/timelog-ui/src/app/components/tasks/task-list/task-list.component.css
+++ b/timelog-ui/src/app/components/tasks/task-list/task-list.component.css
@@ -1,6 +1,5 @@
 .task-list {
     display: flex;
-    padding: 24px;
     height: 100%;
     box-sizing: border-box;
     flex-direction: column;
diff --git a/timelog-ui/src/app/components/tasks/task-list/task-list.component.html b/timelog-ui/src/app/components/tasks/task-list/task-list.component.html
index fa2e8f1..ad860af 100644
--- a/timelog-ui/src/app/components/tasks/task-list/task-list.component.html
+++ b/timelog-ui/src/app/components/tasks/task-list/task-list.component.html
@@ -6,42 +6,46 @@
 <div *ngIf="isLoading === true">
     Loading...
 </div>
-<div class="task-list" *ngIf="isLoading === false && errors.length === 0">
-    <div class="list-header">
+<div class="content-view" *ngIf="isLoading === false && errors.length === 0">
+    <div class="content-view-title mat-elevation-z2">
         <h1>My tasks</h1>
-        <mat-chip-list>
-            <mat-chip (click)="setListSelection('Pending')" class="chip-with-badge" [selected]="listSelection === 'Pending'" color="primary" matBadge="{{filteredLists.get('Pending').length}}">Pending</mat-chip>
-            <mat-chip (click)="setListSelection('Done')" class="chip-with-badge" [selected]="listSelection === 'Done'" color="primary" matBadge="{{filteredLists.get('Done').length}}">Done</mat-chip>
-            <mat-chip (click)="setListSelection('All')" class="chip-with-badge" [selected]="listSelection === 'All'" color="primary" matBadge="{{filteredLists.get('All').length}}">All</mat-chip>
-        </mat-chip-list>
     </div>
-    <div class="list-container">
-        <mat-list>
-            <ng-container *ngFor="let task of filteredLists.get(listSelection)">
-                <mat-list-item class="task-entry">
-                    <h4 mat-line>{{task.name}}</h4>
-                    <p class="task-actions">
-                        <button mat-icon-button (click)="addTimeLog(task)">
-                            <mat-icon aria-label="Log time to task">add_alarm</mat-icon>
-                        </button>
-                        <button mat-icon-button (click)="displayTaskDetails(task)">
-                            <mat-icon aria-label="View task detail">info</mat-icon>
-                        </button>
-                        <button *ngIf="!task.done" mat-icon-button (click)="markTaskDone(task)">
-                            <mat-icon aria-label="Mark task done">check_circle</mat-icon>
-                        </button>
-                        <button *ngIf="task.done && taskCanBeUndone|async" mat-icon-button (click)="markTaskUndone(task)">
-                            <mat-icon aria-label="Mark task undone">highlight_off</mat-icon>
-                        </button>
-                    </p>
-                </mat-list-item>
-                <mat-divider></mat-divider>
-            </ng-container>
-        </mat-list>
-    </div>
-    <div class="bottom-actions">
-        <button mat-mini-fab color="primary" (click)="addTask()">
-            <mat-icon aria-label="Add a task action button">add</mat-icon>
-        </button>
+    <div class="task-list content-view-body" >
+        <div class="list-header">
+            <mat-chip-list>
+                <mat-chip (click)="setListSelection('Pending')" class="chip-with-badge" [selected]="listSelection === 'Pending'" color="primary" matBadge="{{filteredLists.get('Pending').length}}">Pending</mat-chip>
+                <mat-chip (click)="setListSelection('Done')" class="chip-with-badge" [selected]="listSelection === 'Done'" color="primary" matBadge="{{filteredLists.get('Done').length}}">Done</mat-chip>
+                <mat-chip (click)="setListSelection('All')" class="chip-with-badge" [selected]="listSelection === 'All'" color="primary" matBadge="{{filteredLists.get('All').length}}">All</mat-chip>
+            </mat-chip-list>
+        </div>
+        <div class="list-container">
+            <mat-list>
+                <ng-container *ngFor="let task of filteredLists.get(listSelection)">
+                    <mat-list-item class="task-entry">
+                        <h4 mat-line>{{task.name}}</h4>
+                        <p class="task-actions">
+                            <button mat-icon-button (click)="addTimeLog(task)">
+                                <mat-icon aria-label="Log time to task">add_alarm</mat-icon>
+                            </button>
+                            <button mat-icon-button (click)="displayTaskDetails(task)">
+                                <mat-icon aria-label="View task detail">info</mat-icon>
+                            </button>
+                            <button *ngIf="!task.done" mat-icon-button (click)="markTaskDone(task)">
+                                <mat-icon aria-label="Mark task done">check_circle</mat-icon>
+                            </button>
+                            <button *ngIf="task.done && taskCanBeUndone|async" mat-icon-button (click)="markTaskUndone(task)">
+                                <mat-icon aria-label="Mark task undone">highlight_off</mat-icon>
+                            </button>
+                        </p>
+                    </mat-list-item>
+                    <mat-divider></mat-divider>
+                </ng-container>
+            </mat-list>
+        </div>
+        <div class="bottom-actions">
+            <button mat-mini-fab color="primary" (click)="addTask()">
+                <mat-icon aria-label="Add a task action button">add</mat-icon>
+            </button>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/timelog-ui/src/content.css b/timelog-ui/src/content.css
new file mode 100644
index 0000000..4786876
--- /dev/null
+++ b/timelog-ui/src/content.css
@@ -0,0 +1,39 @@
+.content-view {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.content-view-title {
+    flex: 0;
+    display: flex;
+    padding: 16px;
+    background: rgba(255, 255, 255, 0.78);
+}
+
+.content-view-title h1,
+.content-view-title .title-area {
+    flex: 1;
+}
+
+.content-view-title h1 {
+    margin: 0;
+    font-size: 24px;
+    margin-top: 4px;
+    display: inline-block;
+}
+
+.content-view-title .actions-left {
+    flex: 0;
+    text-align: left;
+}
+
+.content-view-title .actions {
+    flex: 0;
+    text-align: right;
+}
+
+.content-view-body {
+    padding: 24px;
+    flex: 1;
+}
\ No newline at end of file
diff --git a/timelog-ui/src/styles.css b/timelog-ui/src/styles.css
index 2302af0..8955289 100644
--- a/timelog-ui/src/styles.css
+++ b/timelog-ui/src/styles.css
@@ -1,12 +1,15 @@
 /* You can add global styles to this file, and also import other style files */
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import "https://fonts.googleapis.com/icon?family=Material+Icons";
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i');
 @import "./form.css";
+@import "./content.css";
 
 html, body{
     margin: 0;
     height: 100%;
     width: 100%;
+    font-family: 'Roboto', sans-serif;
 }
 
 app-root{

From 65dbf09fbff2ace2d56cde2bad9260632b93f92e Mon Sep 17 00:00:00 2001
From: Vince <vincent.francolin@outlook.com>
Date: Sat, 1 Jun 2019 13:39:45 +0200
Subject: [PATCH 2/2] Update test

---
 timelog-ui/integrationTests/scenario2.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/timelog-ui/integrationTests/scenario2.ts b/timelog-ui/integrationTests/scenario2.ts
index e30496c..60d7c85 100644
--- a/timelog-ui/integrationTests/scenario2.ts
+++ b/timelog-ui/integrationTests/scenario2.ts
@@ -136,7 +136,7 @@ test('Clicking on detail button should go to detail view', async t => {
 
     let taskTitle = Selector(".task-details h1");
     await t.expect(taskTitle.exists).ok;
-    await t.expect(taskTitle.innerText).eql("test");
+    await t.expect(taskTitle.innerText).eql("Task test");
 
     let taskStatus = Selector(".task-details [data-section='status']");
     await t.expect(taskStatus.exists).ok;