Working on touch handle styling. Also removed overflow scroll on spec…

…trogram
QutEcoacoustics · Jan 30, 2014 · 60cfd99 · 60cfd99
1 parent 1edee93
commit 60cfd99
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 10 deletions.
diff --git a/src/app/annotationViewer/_annotation_viewer.scss b/src/app/annotationViewer/_annotation_viewer.scss
@@ -67,7 +67,7 @@ baw-annotation-viewer {
 
   & #scroller{
 
-    overflow-x: scroll;
+    overflow-x: visible;
     overflow-y: hidden;
     line-height: 0;
   }

diff --git a/src/app/annotationViewer/annotationViewer.js b/src/app/annotationViewer/annotationViewer.js
@@ -1,6 +1,9 @@
 var avModule = angular.module('bawApp.annotationViewer', []);
 
 avModule.controller('AnnotationViewerCtrl', ['$scope', '$element', '$attrs', '$transclude', 'Tag',
+
+    // TODO: possible optimisation evaluate these functions once per frame
+
     /**
      * The AnnotationViewer controller
      * @param $scope

diff --git a/src/app/annotationViewer/annotationViewer.tpl.html b/src/app/annotationViewer/annotationViewer.tpl.html
@@ -18,7 +18,11 @@
             <img ng-src="{{model.media.spectrogram.url}}" src=""
                  ng-style="{width: model.converters.conversions.enforcedImageWidth, height: model.converters.conversions.enforcedImageHeight}">
             <div id="spectrogramAnnotations_{{id}}" ></div>
-            <div class="positionLine" baw-translate-x="positionLine()" ng-class="{hidden: !model.audioElement.canPlay}" ></div>
+            <div class="positionLine" baw-translate-x="positionLine()"
+                 ng-class="{hidden: !model.audioElement.canPlay}" >
+                <div class="grab-bottom-center"
+                        ></div>
+                 </div>
         </div>
     </div>
 

diff --git a/src/sass/touch/_touch.scss b/src/sass/touch/_touch.scss
@@ -2,33 +2,46 @@
 $btn-default-color: #333;
 $handle-default-bg: #fff;
 $handle-border-color: darken($handle-default-bg, 5%);
+$smallest-size: 6px;
 
 @mixin size($size) {
   width: $size;
   height: $size;
+
+  margin-left: -($size / 2.0);
+  margin-top: -($size / 2.0);
+  margin-right: -($size / 2.0);
+  margin-bottom: -($size / 2.0);
+
   @include rounded-corners($size / 2.0);
 }
 
 .touch-handle-default {
-  @include size(6px);
+  @include size($smallest-size * 2.0);
 }
 
-.touch-handle-large {
-  @include size(6px);
+.touch-handle-small {
+  @include size($smallest-size);
 }
 
-.touch-handle-largest {
-  @include size(6px);
+.touch-handle-large {
+  @include size($smallest-size * 4.0);
 }
 
 
 .touch-handle {
   background-color: $handle-default-bg;
   border: solid 1px $handle-border-color;
+  margin:0;
+  padding: 0;
 
-  @extend .touch-handle-default; 
+  // lib-sass currently does not support inherited extends
+  // so temporarily change this extend to a mixin
+  //@extend .touch-handle-default;
+  @include size($smallest-size * 2.0);
 
-  position: relative;
+  position: absolute;
+  z-index: 1000;
 }
 
 @mixin curved-tail {
@@ -55,7 +68,40 @@ $handle-border-color: darken($handle-default-bg, 5%);
 
 }
 
+.grab-center {
+  @extend .touch-handle;
+
+  top:50%;
+  left:50%;
+}
+
+.grab-left-center {
+  @extend .touch-handle;
+
+  top:50%;
+  left:0;
+}
+
+.grab-top-center {
+  @extend .touch-handle;
+
+  top:0;
+  left:50%;
+}
 
+.grab-right-center {
+  @extend .touch-handle;
+
+  top:50%;
+  right:0;
+}
+
+.grab-bottom-center {
+  @extend .touch-handle;
+
+  bottom:0;
+  left:50%;
+}
 
 .grab-top-left {
   @extend .touch-handle;
@@ -71,6 +117,13 @@ $handle-border-color: darken($handle-default-bg, 5%);
   right:0;
 }
 
+.grab-top-center {
+  @extend .touch-handle;
+
+  top:0;
+  left:50%;
+}
+
 .grab-bottom-left {
   @extend .touch-handle;
 
@@ -83,4 +136,11 @@ $handle-border-color: darken($handle-default-bg, 5%);
 
   bottom:0;
   right:0;
-}
+}
+
+.grab-bottom-centre {
+  @extend .touch-handle;
+
+  bottom:0;
+  left:0;
+}