feat(tasks): improve quick access menu

src/_variables.scss

@@ -52,6 +52,7 @@ $ani-leave-timing: cubic-bezier(.4, 0, 1, 1) !default;
 $ani-sharp-timing: cubic-bezier(.4, 0, .6, 1) !default;
 
 $ease-in-out-quint: cubic-bezier(.38, .04, .35, .96);
+$transition-duration-xs: 90ms;
 $transition-duration-s: 150ms;
 $transition-duration-m: 225ms;
 $transition-duration-l: 375ms;
@@ -63,6 +64,7 @@ $transition-enter: $transition-duration--enter $ani-enter-timing;
 $transition-leave: $transition-duration--leave $ani-leave-timing;
 $transition-standard: $transition-duration-m $ani-standard-timing;
 $transition-fast: $transition-duration-s $ani-standard-timing;
+$transition-ultra-fast: $transition-duration-xs $ani-standard-timing;
 
 $page-transition-duration: $transition-duration-m;
 

src/app/features/tasks/task/task.component.html

@@ -94,46 +94,6 @@
     </div>
 
     <div class="all-controls-wrapper">
-      <div class="hover-controls hide-xs bg-standard"
-           [class.bg-600i]="isCurrent">
-        <button (click)="startTask()"
-                *ngIf="!task.isDone && !isCurrent && !task.subTasks"
-                aria-label="mark as current"
-                class="ico-btn"
-                color=""
-                mat-icon-button
-                tabindex="2">
-          <mat-icon class="play-icon"
-                    svgIcon="play"></mat-icon>
-        </button>
-
-        <button (click)="pauseTask()"
-                *ngIf="!task.isDone && isCurrent && !task.subTasks"
-                class="ico-btn"
-                color=""
-                mat-icon-button
-                tabindex="2">
-          <mat-icon>pause</mat-icon>
-        </button>
-        <button (click)="toggleTaskDone()"
-                class="ico-btn"
-                color=""
-                mat-icon-button
-                tabindex="2">
-          <mat-icon *ngIf="task.isDone">undo</mat-icon>
-          <mat-icon *ngIf="!task.isDone">check</mat-icon>
-        </button>
-        <button *ngIf="!task.subTasks?.length"
-                (click)="estimateTime()"
-                aria-label="time estimation"
-                class="ico-btn time-btn hide-xs"
-                color=""
-                mat-icon-button
-                tabindex="2">
-          <mat-icon aria-label="time estimation">access_time</mat-icon>
-        </button>
-      </div>
-
       <div (click)="estimateTime()"
            [class.isEditable]="!task.subTasks?.length"
            class="time-wrapper">
@@ -148,6 +108,46 @@
       </div>
 
       <div class="controls">
+        <div class="hover-controls bg-standard"
+             [class.bg-600i]="isCurrent">
+          <button (click)="startTask()"
+                  *ngIf="!task.isDone && !isCurrent && !task.subTasks"
+                  aria-label="mark as current"
+                  class="ico-btn"
+                  color=""
+                  mat-icon-button
+                  tabindex="2">
+            <mat-icon class="play-icon"
+                      svgIcon="play"></mat-icon>
+          </button>
+
+          <button (click)="pauseTask()"
+                  *ngIf="!task.isDone && isCurrent && !task.subTasks"
+                  class="ico-btn"
+                  color=""
+                  mat-icon-button
+                  tabindex="2">
+            <mat-icon>pause</mat-icon>
+          </button>
+          <button (click)="toggleTaskDone()"
+                  class="ico-btn"
+                  color=""
+                  mat-icon-button
+                  tabindex="2">
+            <mat-icon *ngIf="task.isDone">undo</mat-icon>
+            <mat-icon *ngIf="!task.isDone">check</mat-icon>
+          </button>
+          <button *ngIf="!task.subTasks?.length"
+                  (click)="estimateTime()"
+                  aria-label="time estimation"
+                  class="ico-btn time-btn hide-xs"
+                  color=""
+                  mat-icon-button
+                  tabindex="2">
+            <mat-icon aria-label="time estimation">access_time</mat-icon>
+          </button>
+        </div>
+
         <button *ngIf="task.reminderId"
                 (click)="editReminder()"
                 color=""
@@ -157,7 +157,7 @@
           <mat-icon>alarm</mat-icon>
         </button>
         <button (click)="toggleShowAdditionalInfoOpen()"
-                *ngIf="task.notes||task.issueData||task.attachmentIds?.length"
+                *ngIf="task.notes||task.issueData"
                 [class.isActive]="task._isAdditionalInfoOpen"
                 aria-label="additional-info"
                 class="ico-btn show-additional-info-btn hide-xs"
@@ -169,8 +169,9 @@
 
         <button (click)="toggleShowAttachments()"
                 *ngIf="task.attachmentIds?.length"
+                [class.isActive]="task._isAdditionalInfoOpen"
                 aria-label="additional-info"
-                class="ico-btn hide-xs"
+                class="ico-btn attachment-btn hide-xs"
                 color=""
                 mat-icon-button
                 tabindex="2">
@@ -178,7 +179,7 @@
         </button>
 
         <button [matMenuTriggerFor]="menu"
-                class="ico-btn"
+                class="ico-btn menu-trigger"
                 color=""
                 mat-icon-button>
           <mat-icon>more_vert</mat-icon>

src/app/features/tasks/task/task.component.scss

@@ -27,8 +27,7 @@ $z-task-title-focus: 15;
 $z-drag-over-msg: 16;
 $z-time-btn-svg-wrapper: 5555;
 
-
-%standardTaskOpacityChange {
+@mixin standardTaskOpacityChange {
   opacity: $this-icon-default-opacity;
   transition: transform $transition-fast;
 
@@ -40,6 +39,10 @@ $z-time-btn-svg-wrapper: 5555;
   }
 }
 
+%standardTaskOpacityChange {
+  @include standardTaskOpacityChange;
+}
+
 %standardTaskZoom {
   &:hover,
   &:focus {
@@ -111,7 +114,6 @@ $z-time-btn-svg-wrapper: 5555;
   padding: 0;
   z-index: $z-btn;
   @extend %standardTaskOpacityChange;
-  @extend %standardTaskZoom;
 
   &:hover {
     z-index: $z-btn-hover;
@@ -196,7 +198,7 @@ $z-time-btn-svg-wrapper: 5555;
   }
 }
 
-
+.attachment-btn,
 .show-additional-info-btn {
   mat-icon {
     transition: transform $transition-standard;
@@ -222,13 +224,39 @@ $z-time-btn-svg-wrapper: 5555;
   }
 }
 
+@include mq(xs) {
+  .first-line .menu-trigger {
+    opacity: 0;
+  }
+
+  .first-line:hover {
+    .hover-controls {
+      opacity: 1;
+      transform: scaleX(1);
+    }
+
+    .menu-trigger {
+      @include standardTaskOpacityChange;
+    }
+
+    .time-wrapper {
+      visibility: hidden;
+    }
+  }
+}
+
+
 .hover-controls {
+  @include mq(xs, max) {
+    display: none !important;
+  }
+
   display: flex;
   flex-flow: row;
   transform: scaleX(0);
   transform-origin: right center;
   opacity: 0;
-  transition: $transition-fast;
+  transition: $transition-ultra-fast;
   transition-property: transform, opacity;
   position: absolute;
   right: 100%;
@@ -274,6 +302,7 @@ $z-time-btn-svg-wrapper: 5555;
   white-space: nowrap;
   text-align: right;
   margin-right: 2px;
+  position: relative;
 
   @include mq(xs, max) {
     white-space: normal;