feat: add possibility to hide task list controls

johannesjo · Mar 23, 2018 · c55b65b · c55b65b
1 parent 902fd7e
commit c55b65b
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 @@ <h2 class="md-title">
   <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>