From c55b65b2d57b2def72bf33bd7eecd7a182a7556c Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 23 Mar 2018 19:04:02 +0100
Subject: [PATCH] feat: add possibility to hide task list controls

---
 app-src/scripts/task-list/_task-list-d.scss | 10 ++++++++-
 app-src/scripts/task-list/task-list-d.html  | 24 ++++++++++++---------
 app-src/scripts/task-list/task-list-d.js    |  3 ++-
 app-src/scripts/work-view/_work-view-d.scss |  4 ++++
 app-src/scripts/work-view/work-view-d.html  |  8 +++++++
 5 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/app-src/scripts/task-list/_task-list-d.scss b/app-src/scripts/task-list/_task-list-d.scss
index a0b0ff16b5..97b93e1451 100644
--- a/app-src/scripts/task-list/_task-list-d.scss
+++ b/app-src/scripts/task-list/_task-list-d.scss
@@ -35,6 +35,15 @@ task-list {
       margin: 1px -5px 10px 0;
     }
   }
+
+
+  &.is-hide-controls {
+    .handle,
+    .controls,
+    .md-icon-button {
+      display: none;
+    }
+  }
 }
 
 .task {
@@ -365,7 +374,6 @@ task-list {
       margin-top: 8px;
     }
   }
-
 }
 
 // animations
diff --git a/app-src/scripts/task-list/task-list-d.html b/app-src/scripts/task-list/task-list-d.html
index 91d3f71c58..cac2ceec04 100644
--- a/app-src/scripts/task-list/task-list-d.html
+++ b/app-src/scripts/task-list/task-list-d.html
@@ -1,9 +1,13 @@
 <ul class="task-list"
     as-sortable="$ctrl.dragControlListeners"
+    ng-class="{ 'is-hide-controls': $ctrl.isHideControls}"
     ng-model="$ctrl.tasks">
   <li class="task"
       as-sortable-item
-      ng-class="{'is-current': $ctrl.currentTaskId === task.id, 'is-done':task.isDone}"
+      ng-class="{
+      'is-current': $ctrl.currentTaskId === task.id,
+      'is-done':task.isDone
+      }"
       ng-repeat="task in $ctrl.tasks|limitTo:$ctrl.limitTo|filter:$ctrl.filter track by task.id"
       tabindex="1"
       md-whiteframe="1"
@@ -113,15 +117,15 @@
                       class="delete-icon"
                       aria-label="delete"></ng-md-icon>
         </md-button>
-        <md-button ng-click="task.isDone= !task.isDone; $ctrl.onTaskDoneChanged(task)"
-                   class="md-icon-button"
-                   tabindex="2"
-                   aria-label="un-/mark as done">
-          <ng-md-icon icon="check"
-                      ng-show="!task.isDone"></ng-md-icon>
-          <ng-md-icon icon="undo"
-                      ng-show="task.isDone"></ng-md-icon>
-        </md-button>
+        <!--<md-button ng-click="task.isDone= !task.isDone; $ctrl.onTaskDoneChanged(task)"-->
+        <!--class="md-icon-button"-->
+        <!--tabindex="2"-->
+        <!--aria-label="un-/mark as done">-->
+        <!--<ng-md-icon icon="check"-->
+        <!--ng-show="!task.isDone"></ng-md-icon>-->
+        <!--<ng-md-icon icon="undo"-->
+        <!--ng-show="task.isDone"></ng-md-icon>-->
+        <!--</md-button>-->
       </div>
     </div>
 
diff --git a/app-src/scripts/task-list/task-list-d.js b/app-src/scripts/task-list/task-list-d.js
index b680f46221..fb0b1b905a 100644
--- a/app-src/scripts/task-list/task-list-d.js
+++ b/app-src/scripts/task-list/task-list-d.js
@@ -458,7 +458,8 @@
         onItemMoved: '&',
         onOrderChanged: '&',
         onTaskDoneChangedCallback: '&onTaskDoneChanged',
-        parentTask: '='
+        parentTask: '=',
+        isHideControls: '<'
       }
     });
 })();
diff --git a/app-src/scripts/work-view/_work-view-d.scss b/app-src/scripts/work-view/_work-view-d.scss
index 3453377c4f..7afab2c862 100644
--- a/app-src/scripts/work-view/_work-view-d.scss
+++ b/app-src/scripts/work-view/_work-view-d.scss
@@ -3,6 +3,10 @@ work-view {
   max-width: $component-max-width;
   text-align: center;
   margin: auto;
+
+  .hide-controls-icon {
+    transform: rotate(90deg);
+  }
 }
 
 .work-view-header {
diff --git a/app-src/scripts/work-view/work-view-d.html b/app-src/scripts/work-view/work-view-d.html
index e6e83e2376..46a4c6d2dc 100644
--- a/app-src/scripts/work-view/work-view-d.html
+++ b/app-src/scripts/work-view/work-view-d.html
@@ -22,6 +22,12 @@
         <strong ng-bind="vm.session.timeWorkedWithoutBreak|duration"></strong><ng-md-icon icon="timer"></ng-md-icon>
       </span>
     </div>
+    <md-button ng-click="vm.isHideControls = !(vm.isHideControls);"
+               class="md-icon-button md-primary">
+      <ng-md-icon icon="vertical_align_center"
+                  class="hide-controls-icon"
+                  aria-label="collapse sub tasks and notes"></ng-md-icon>
+    </md-button>
 
     <md-button ng-click="vm.collapseAllNotesAndSubTasks()"
                class="md-icon-button md-primary">
@@ -36,6 +42,7 @@
 
   <task-list tasks="vm.tasksUndone"
              current-task-id="r.currentTask.id"
+             is-hide-controls="vm.isHideControls"
              on-task-done-changed="vm.onTaskDoneChangedUndoneList(task)"
              allow-task-selection="true"></task-list>
 </section>
@@ -63,6 +70,7 @@
   <p ng-if="!vm.tasksDone.length">You currently have no done tasks.</p>
 
   <task-list tasks="vm.tasksDone"
+             is-hide-controls="vm.isHideControls"
              on-task-done-changed="vm.onTaskDoneChangedDoneList(task)"
              current-task-id="r.currentTask.id"></task-list>
 </section>