feat(switch): add grab/grabbing cursor during drag

Closes #983.
angular · Jan 8, 2015 · c60640b · c60640b
1 parent 9b16220
commit c60640b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/src/components/switch/switch.js b/src/components/switch/switch.js
@@ -67,6 +67,8 @@ function MdSwitch(mdCheckboxDirective, $mdTheming, $mdUtil, $document, $mdConsta
 
   function compile(element, attr) {
     var checkboxLink = checkboxDirective.compile(element, attr);
+    // no transition on initial load
+    element.addClass('md-dragging');
 
     return function (scope, element, attr, ngModel) {
       ngModel = ngModel || $mdUtil.fakeNgModel();
@@ -76,7 +78,7 @@ function MdSwitch(mdCheckboxDirective, $mdTheming, $mdUtil, $document, $mdConsta
 
       // no transition on initial load
       $$rAF(function() {
-        element.addClass('transition');
+        element.removeClass('md-dragging');
       });
 
       // Tell the checkbox we don't want a click listener.
@@ -96,7 +98,7 @@ function MdSwitch(mdCheckboxDirective, $mdTheming, $mdUtil, $document, $mdConsta
         if (disabledGetter(scope)) return ev.preventDefault();
 
         drag.width = thumbContainer.prop('offsetWidth');
-        element.removeClass('transition');
+        element.addClass('md-dragging');
       }
       function onDrag(ev, drag) {
         var percent = drag.distance / drag.width;
@@ -112,7 +114,7 @@ function MdSwitch(mdCheckboxDirective, $mdTheming, $mdUtil, $document, $mdConsta
       function onDragEnd(ev, drag) {
         if (disabledGetter(scope)) return false;
 
-        element.addClass('transition');
+        element.removeClass('md-dragging');
         thumbContainer.css($mdConstant.CSS.TRANSFORM, '');
 
         // We changed if there is no distance (this is a click a click),

diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
@@ -9,13 +9,22 @@ md-switch {
   align-items: center;
 
   .md-container {
+    cursor: grab;
     width: $switch-width;
     height: $switch-height;
     position: relative;
     user-select: none;
     margin-right: 8px;
   }
 
+  // If the user moves his mouse off the switch, stil display grabbing cursor
+  &:not([disabled]) {
+    .md-dragging,
+    &.md-dragging .md-container {
+      cursor: grabbing;
+    }
+  }
+
   .md-label {
     border-color: transparent;
     border-width: 1px;
@@ -65,7 +74,7 @@ md-switch {
     }
   }
 
-  &.transition {
+  &:not(.md-dragging) {
     .md-bar,
     .md-thumb-container,
     .md-thumb {