[Frontend] Fixed cursor: grab on Time Conductor

Fixes #933 Fixes #1193 Moved cursor: grab into mixin; sass cleanups
nasa · Oct 14, 2016 · 8f67cbd · 8f67cbd
1 parent 07a4e26
commit 8f67cbd
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 20 deletions.
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
@@ -363,14 +363,13 @@
     }
 }
 
-@mixin webkitProp($name, $val) {
-	#{$name}: #{$val};
-	-webkit-#{$name}: #{$val};
-}
-
-@mixin webkitVal($name, $val) {
-	#{$name}: #{$val};
-	#{$name}: -webkit-#{$val};
+@mixin cursorGrab() {
+    cursor: grab;
+    cursor: -webkit-grab;
+    &:active {
+        cursor: grabbing;
+        cursor: -webkit-grabbing;
+    }
 }
 
 @mixin verticalCenter {

diff --git a/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss b/platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss
@@ -345,6 +345,9 @@
         .mode-selector .s-menu-button:before {
             content: $i;
         }
+        .l-axis-holder {
+            @include cursorGrab();
+        }
     }
 
     // Realtime mode

diff --git a/platform/features/conductor-v2/conductor/res/templates/time-conductor.html b/platform/features/conductor-v2/conductor/res/templates/time-conductor.html
@@ -1,15 +1,4 @@
 <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
-<style>
-    .fixed-mode .l-axis-holder {
-        cursor: grab;
-        cursor: -webkit-grab;
-    }
-
-    .fixed-mode .l-axis-holder:active {
-        cursor: grabbing;
-        cursor: -webkit-grabbing;
-    }
-</style>
 <div ng-controller="TimeConductorController as tcController"
     class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selectedKey}}-mode {{timeSystemModel.selected.metadata.key}}-time-system"
         ng-class="{'status-panning': panning}">

diff --git a/platform/features/conductor/res/sass/time-conductor.scss b/platform/features/conductor/res/sass/time-conductor.scss
@@ -164,7 +164,7 @@ $ueTimeConductorH: (33px, 18px, 20px);
                     margin-left: 0;
                 }
                 .l-time-range-tick-label {
-                    @include webkitProp(transform, translateX(-50%));
+                    @include transform(translateX(-50%));
                     color: $colorPlotLabelFg;
                     display: inline-block;
                     font-size: 0.7rem;