Added :hover and :active styles to drag handles

QutEcoacoustics · Feb 4, 2014 · 7f47bcd · 7f47bcd
1 parent 2cded36
commit 7f47bcd
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 17 deletions.
diff --git a/bower.json b/bower.json
@@ -18,7 +18,8 @@
     "objectdiff": "https://github.com/NV/objectDiff.js.git",
     "lodash": "~2.3.0",
     "angular-tags": "git://github.com/boneskull/angular-tags.git#master",
-    "angular-sanitize": "~1.2.x"
+    "angular-sanitize": "~1.2.x",
+    "draggabilly": "~1.0.9"
   },
   "dependencies": {},
   "resolutions": {

diff --git a/src/app/annotationViewer/_annotation_viewer.scss b/src/app/annotationViewer/_annotation_viewer.scss
@@ -46,16 +46,16 @@ baw-annotation-viewer {
       padding: 0;
       margin: 0;
 
-      position:  relative;
-      height:  60px;
+      position: relative;
+      height: 60px;
       //overflow: none;
       line-height: $standard-line-height;
 
       li {
 
         margin-left: -4px;
         position: absolute;
-        bottom:  -1px;
+        bottom: -1px;
         padding-left: 2px;
         z-index: 0;
         background-color: transparent;
@@ -64,7 +64,7 @@ baw-annotation-viewer {
         border-bottom: transparent solid 1px;
 
         @include vendor-prefix(transform-origin, 0 0);
-        @include vendor-prefix(transform, rotate3d(0,0,1,-20deg));
+        @include vendor-prefix(transform, rotate3d(0, 0, 1, -20deg));
 
       }
     }
@@ -76,7 +76,6 @@ baw-annotation-viewer {
     border-bottom: $tagAlignmentLine solid 1px !important;
   }
 
-
   & .annotation-viewer {
 
     // prevent text-selection of the elements on the draw surface
@@ -102,14 +101,14 @@ baw-annotation-viewer {
     // overlay
     & img + div {
       width: 100%;
-      height : 100%;
+      height: 100%;
       position: absolute;
       top: 0;
       left: 0;
       overflow: hidden;
 
       // debug
-     // @if $DEBUG { background-color: rgba(255,0,0,0.15) ;}
+      // @if $DEBUG { background-color: rgba(255,0,0,0.15) ;}
 
       // required for IE10
       background-color: rgba(255, 255, 255, 0);
@@ -122,17 +121,33 @@ baw-annotation-viewer {
       height: 100%;
       width: 1px;
       position: absolute;
-      top:  0;
+      top: 0;
       left: 0;
       @include vendor-prefix(transform, translate3d(0px, 0, 0));
 
       &.hidden {
         display: none;
       }
 
-      >.grab-bottom-center {
+      > .grab-bottom-center {
         bottom: -$grab-handle-bottom-shift;
+        left: 0.3px
       }
+
+      &.is-dragging {
+        > .grab-bottom-center {
+          // simulate the :hover and :active styles when dragging
+
+          @include touch-handle-hover;
+
+          @include touch-handle-active;
+
+          &:before {
+            content: url("data:image/svg+xml;utf8,#{$pen-tip-hover}");
+          }
+        }
+      }
+
     }
   }
 
@@ -148,7 +163,7 @@ baw-annotation-viewer {
     border-width: $border-width;
     border-color: $marqueeBorderColorInactive;
     position: absolute;
-    background-color: rgba(255,255,255,0.05);
+    background-color: rgba(255, 255, 255, 0.05);
     overflow: visible;
     z-index: 0;
 
@@ -176,7 +191,7 @@ baw-annotation-viewer {
       @include glow($marqueeBorderColorSelectedGlow);
       z-index: 100;
 
-      & .close-icon{
+      & .close-icon {
         visibility: visible;
       }
 
@@ -185,7 +200,7 @@ baw-annotation-viewer {
       }
     }
 
-    &:hover  {
+    &:hover {
       border-color: $marqueeBorderColorHover;
       & .close-icon {
         visibility: visible;

diff --git a/src/sass/touch/_touch.scss b/src/sass/touch/_touch.scss
@@ -1,12 +1,22 @@
 $handle-default-color: #333;
-$handle-default-bg: #F8F8F8;
-//#fff;
+$handle-default-bg: #FFFFFF;
 $handle-border-color: #333;
+
+$handle-hover-bg: #ebebeb;
+$handle-hover-border-color: #adadad;
+
+$handle-active-shadow: inset 0 3px 5px rgba(0,0,0, 0.125);
+
 $shadow: #666;
 $smallest-size: 6px;
 
 $pen-tip: "<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' width='12' height='12' version='1.1'>  <g transform='scale(1.0, 1.0)'><path d='M6 0.4L0.4 6 2.4 8C3.3 7.1 4.6 6.6 6 6.6 7.4 6.6 8.7 7.1 9.6 8L11.6 6 6 0.4z' style='fill:#{$handle-default-bg};stroke-width:1.0;stroke:#{$handle-border-color};stroke-opacity:1.0'/></g></svg>";
 
+$pen-tip-hover: "<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' width='12' height='12' version='1.1'>  <g transform='scale(1.0, 1.0)'><path d='M6 0.4L0.4 6 2.4 8C3.3 7.1 4.6 6.6 6 6.6 7.4 6.6 8.7 7.1 9.6 8L11.6 6 6 0.4z' style='fill:#{$handle-hover-bg};stroke-width:1.0;stroke:#{$handle-hover-border-color};stroke-opacity:1.0'/></g></svg>";
+
+
+
+
 // This has not been tested
 $line-tip: "<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' width='12' height='12' version='1.1'>  <g transform='scale(1.0, 1.0)'><line x1='6' y1='12' x2='6' y2='0'  style='fill:#{$handle-default-bg};stroke-width:1.0;stroke:#{$handle-border-color};stroke-opacity:1.0'/></g></svg>";
 
@@ -34,6 +44,25 @@ $line-tip: "<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org
   @include size($smallest-size * 4.0);
 }
 
+@mixin touch-handle-hover() {
+  background-color: $handle-hover-bg;
+  border-color: $handle-hover-border-color;
+}
+
+@mixin touch-handle-active() {
+  @include vendor-prefix(box-shadow, $handle-active-shadow);
+}
+
+@mixin interactivity {
+  &:hover {
+    @include touch-handle-hover;
+  }
+
+  &:active {
+    @include touch-handle-active;
+  }
+}
+
 .touch-handle {
   background-color: $handle-default-bg;
   border: solid 1px $handle-border-color;
@@ -51,6 +80,8 @@ $line-tip: "<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org
   z-index: 1000;
   overflow: visible !important;
   display: block;
+
+  @include interactivity;
 }
 
 @mixin curved-tail-angle($angle) {
@@ -60,23 +91,32 @@ $line-tip: "<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org
 
 @mixin curved-tail($size, $both) {
   @mixin inner($size) {
-    content: "";
+    content: url("data:image/svg+xml;utf8,#{$pen-tip}");
     position: absolute;
     width: $size;
     height: $size;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     left: -1px;
-    background-image: url("data:image/svg+xml;utf8,#{$pen-tip}");
+    //background-image: url("data:image/svg+xml;utf8,#{$pen-tip}");
   }
 
+  &:hover:before {
+    content: url("data:image/svg+xml;utf8,#{$pen-tip-hover}");
+  }
+
+
   &:before {
     top: -($size / 2.0) - 1px;
     @include inner($size);
   }
 
   @if $both {
+    &:hover:after {
+      content: url("data:image/svg+xml;utf8,#{$pen-tip-hover}");
+    }
+
     &:after {
       top: ($size / 2.0) - 1px;
       @include inner($size);
@@ -131,76 +171,87 @@ $current-angle: 0deg;
 
 .grab-center {
   @extend .touch-handle;
+  @include interactivity;
 
   top: 50%;
   left: 50%;
 }
 
 .grab-left-center {
   @extend .touch-handle;
+  @include interactivity;
 
   top: 50%;
   left: 0;
 }
 
 .grab-top-center {
   @extend .touch-handle;
+  @include interactivity;
 
   top: 0;
   left: 50%;
 }
 
 .grab-right-center {
   @extend .touch-handle;
+  @include interactivity;;
 
   top: 50%;
   right: 0;
 }
 
 .grab-bottom-center {
   @extend .touch-handle;
+  @include interactivity;
 
   bottom: 0;
   left: 50%;
 }
 
 .grab-top-left {
   @extend .touch-handle;
+  @include interactivity;
 
   top: 0;
   left: 0;
 }
 
 .grab-top-right {
   @extend .touch-handle;
+  @include interactivity;
 
   top: 0;
   right: 0;
 }
 
 .grab-top-center {
   @extend .touch-handle;
+  @include interactivity;
 
   top: 0;
   left: 50%;
 }
 
 .grab-bottom-left {
   @extend .touch-handle;
+  @include interactivity;
 
   bottom: 0;
   left: 0;
 }
 
 .grab-bottom-right {
   @extend .touch-handle;
+  @include interactivity;
 
   bottom: 0;
   right: 0;
 }
 
 .grab-bottom-centre {
   @extend .touch-handle;
+  @include interactivity;
 
   bottom: 0;
   left: 0;