From 4fcf15ebe883fb40dc6ab564eff1aee5cbba66ca Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Fri, 23 Mar 2018 17:42:48 +0100
Subject: [PATCH] feat: restyle task list

---
 .../scripts/main-header/_main-header-d.scss   |   4 -
 app-src/scripts/task-list/_task-list-d.scss   | 145 ++++++++++--------
 app-src/scripts/task-list/task-list-d.html    |  20 ++-
 3 files changed, 91 insertions(+), 78 deletions(-)

diff --git a/app-src/scripts/main-header/_main-header-d.scss b/app-src/scripts/main-header/_main-header-d.scss
index 384d3ee7f5..859dfe3e12 100644
--- a/app-src/scripts/main-header/_main-header-d.scss
+++ b/app-src/scripts/main-header/_main-header-d.scss
@@ -7,10 +7,6 @@ main-header {
     &.md-icon-button {
       margin: 0 3px;
 
-      &.is-active {
-        border: 1px solid #ffffff;
-      }
-
       @media(max-width: $layout-xs) {
         margin: 0 1px;
       }
diff --git a/app-src/scripts/task-list/_task-list-d.scss b/app-src/scripts/task-list/_task-list-d.scss
index 5c53771a88..286502ea5a 100644
--- a/app-src/scripts/task-list/_task-list-d.scss
+++ b/app-src/scripts/task-list/_task-list-d.scss
@@ -108,87 +108,105 @@ task-list {
       flex-wrap: wrap;
     }
 
-    // Button Stuff
-    ng-md-icon {
-      fill: gray;
-    }
-    .md-button,
-    md-checkbox {
-      padding: 4px 2px;
-      // always reserve space for buttons
-      min-width: 28px;
-      width: 32px;
-      height: 32px;
-      margin: 0;
+    $this-button-spacer: 2px;
+    $this-button-spacer-mobile: 4px;
+    $this-button-size: 34px;
+    $this-button-size-mobile: 34px;
+    $this-icon-color: #545454;
+    .md-icon-button {
+      margin: $this-button-spacer;
+      height: $this-button-size;
+      width: $this-button-size;
+      min-width: $this-button-size;
+      min-height: $this-button-size;
+      padding: 0;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+      border: 1px solid #dddddd;
+      border-radius: 100%;
+      text-align: center;
+      background: #ffffff !important;
+      overflow: hidden;
 
       &:hover {
-        transform: scale(1.4);
+        transform: scale(1.3);
+        background: #ffffff;
       }
-    }
-    .play-btn {
-      padding-left: 0;
-      margin-left: -2px;
-
-      // move over original link btn
-      position: relative;
-      z-index: 1;
-    }
-
-    .original-link-btn {
-      margin-left: -2px;
-      margin-right: 10px;
-      ng-md-icon {
-        // hacky align icon inside link with the one inside the play button
-        margin-top: 2px;
-      }
-    }
-
-    md-checkbox {
-      margin-left: 6px;
-      min-width: 16px;
-      width: 32px;
-      height: 32px;
-    }
-
-    ng-md-icon {
-      min-width: 24px;
-    }
-
-    .update-icon {
-      fill: #000000;
-      @include dark-theme {
-        fill: #ffffff;
-      }
-    }
-    .md-button {
       &:hover,
       &.is-active {
+        background: #000000 !important;
+        background: $this-icon-color !important;
+
         > ng-md-icon {
-          fill: #000000;
+          fill: #ffffff;
           @include dark-theme {
             fill: #ffffff;
           }
         }
       }
+      ng-md-icon {
+        fill: $this-icon-color;
+      }
+
+      &.delete-btn {
+        ng-md-icon.delete-icon {
+          fill: $red !important;
+          @include dark-theme {
+            fill: $red !important;
+          }
+        }
+
+        &:hover {
+          background: $red !important;
+          ng-md-icon.delete-icon {
+            fill: #ffffff !important;
+            @include dark-theme {
+              fill: #ffffff !important;
+            }
+          }
+        }
+
+      }
+
+      @media(max-width: $layout-xs) {
+        margin: $this-button-spacer-mobile;
+        height: $this-button-size-mobile;
+        width: $this-button-size-mobile;
+        min-width: $this-button-size-mobile;
+        min-height: $this-button-size-mobile;
+      }
+    }
+
+    // Button Stuff
+    ng-md-icon {
+      fill: #545454;
+    }
+
+    .play-btn {
+      padding-left: 0;
+      margin-left: -2px;
+      margin-right: 3px;
+      // move over original link btn
+      position: relative;
+      z-index: 1;
     }
   }
 
   .controls {
     white-space: nowrap;
     text-align: right;
+    // move a little closer to the right
+    margin-right: -2px;
 
+    // nice idea but problematic with the time button and also the play and original issue
+    //transition: 300ms;
+    //&:hover {
+    //  transform: scale(1.2);
+    //}
     @media(max-width: $layout-xs) {
       white-space: normal;
     }
   }
 
-  ng-md-icon.delete-icon {
-    fill: $red !important;
-    @include dark-theme {
-      fill: $red !important;
-    }
-  }
-
   &.is-current {
     background: $light-green;
     color: #000000;
@@ -210,17 +228,11 @@ task-list {
       }
     }
   }
+
   .md-bar {
     background-color: #cccccc !important;
   }
 
-  //md-checkbox.md-checked .md-icon {
-  //  background-color: $green;
-  //  @include dark-theme {
-  //    background-color: $green;
-  //  }
-  //}
-
   md-progress-linear {
     margin-left: -12px;
     margin-right: -12px;
@@ -240,6 +252,7 @@ task-list {
     text-align: left;
     cursor: pointer;
     outline: none;
+    margin-left: 10px;
     .text {
       outline: none;
       display: block;
@@ -339,7 +352,7 @@ task-list {
   .first-line {
     .md-button,
     md-checkbox {
-      transition: 300ms;
+      transition: 200ms;
     }
   }
 
diff --git a/app-src/scripts/task-list/task-list-d.html b/app-src/scripts/task-list/task-list-d.html
index 1de25633b1..91d3f71c58 100644
--- a/app-src/scripts/task-list/task-list-d.html
+++ b/app-src/scripts/task-list/task-list-d.html
@@ -39,7 +39,7 @@
                    ng-click="$ctrl.togglePlay(task)"
                    ng-if="!task.isDone && $ctrl.allowTaskSelection && !task.subTasks.length">
 
-          <ng-md-icon icon="{{$ctrl.currentTaskId === task.id ? 'pause_circle_filled':'play_circle_fill'}}"
+          <ng-md-icon icon="{{$ctrl.currentTaskId === task.id ? 'pause':'play_arrow'}}"
                       aria-label="mark as current"></ng-md-icon>
         </md-button>
         <md-button class="md-icon-button original-link-btn"
@@ -50,7 +50,7 @@
                    ng-if="::task.originalLink"
                    ng-href="{{ ::task.originalLink }}">
 
-          <ng-md-icon icon="link"
+          <ng-md-icon icon="explore"
                       ng-if="::task.originalType !=='GITHUB'"
                       aria-label="link"></ng-md-icon>
           <ng-md-icon icon="github-circle"
@@ -104,7 +104,7 @@
           <ng-md-icon icon="{{(task.notes||task.originalKey) ?'insert_comment': 'mode_comment'}}"
                       aria-label="notes"></ng-md-icon>
         </md-button>
-        <md-button class="md-icon-button"
+        <md-button class="md-icon-button delete-btn"
                    aria-label="delete"
                    tabindex="2"
                    ng-click="$ctrl.deleteTask(task, $index)">
@@ -113,11 +113,15 @@
                       class="delete-icon"
                       aria-label="delete"></ng-md-icon>
         </md-button>
-        <md-checkbox ng-model="task.isDone"
-                     tabindex="2"
-                     ng-change="$ctrl.onTaskDoneChanged(task)"
-                     aria-label="un-/mark as done">
-        </md-checkbox>
+        <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>