diff --git a/src/app/annotationViewer/_annotation_viewer.scss b/src/app/annotationViewer/_annotation_viewer.scss index e7704386..3200f172 100644 --- a/src/app/annotationViewer/_annotation_viewer.scss +++ b/src/app/annotationViewer/_annotation_viewer.scss @@ -13,7 +13,7 @@ $loadGifPath: $IMAGE_ASSET_PATH + 'assets/img/load.gif'; // see _touch.scss and annotate.tpl.html $grab-handle-radius: 12px; -$grab-handle-bottom-shift: 17px; +$grab-handle-bottom-shift: 12px; //noinspection CssInvalidHtmlTagReference baw-annotation-viewer { @@ -152,6 +152,10 @@ baw-annotation-viewer { overflow: visible; z-index: 0; + // this needs to be changed because of a jquery-ui bug + //http://bugs.jqueryui.com/ticket/8932 + box-sizing: content-box; + &:before { @if not $DEBUG { background-color: red; diff --git a/src/app/annotationViewer/annotationViewer.tpl.html b/src/app/annotationViewer/annotationViewer.tpl.html index 60f774a7..48c72a2e 100644 --- a/src/app/annotationViewer/annotationViewer.tpl.html +++ b/src/app/annotationViewer/annotationViewer.tpl.html @@ -7,22 +7,23 @@ ng-class="{active: annotation.selected || annotation.hovering}" ng-style="{left: (positionLabel(annotation)) + 'px' }" ng-eval="tag = getTag(annotation)" - > - + > + {{tag.text}} -
+
-
+ +
-
+
-
+
diff --git a/src/common/jquery.drawabox.js b/src/common/jquery.drawabox.js index 2e746b64..f374a477 100644 --- a/src/common/jquery.drawabox.js +++ b/src/common/jquery.drawabox.js @@ -20,8 +20,8 @@ posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } - // FIX: need to take off an extra 10px from y (vertical) for some reason - don't know why. - return { posx: posx - 5, posy: posy - 5 }; + // The minus ones allow a new box to be drawn right up to the edge + return { posx: posx - 1, posy: posy - 1 }; }; var elementPosition = function (obj) { @@ -104,8 +104,9 @@ } var $box = $('#' + currentBoxId); - $box.draggable({ containment: 'parent' }) - .resizable({ containment: 'parent', handles: 'all' }); + // 02-Feb-14, ANT: removed, seems redundant, removal does not seem to affect functionality + //$box.draggable({ containment: 'parent' }) + // .resizable({ containment: 'parent', handles: 'all' }); // update stored values dataMouseUp.mousedown = false; @@ -184,7 +185,7 @@ // add other events $newBox.resizable({ handles: "all", - //containment: "parent", + containment: "parent", resize: function (event, ui) { contextData.options.boxResizing($newBox); }, stop: function (event, ui) { contextData.options.boxResized($newBox); } }); @@ -286,9 +287,12 @@ /** * This is dodgy as fuck - if the border width changes... + * This varies based on box-sizing as well + * This value needs to be set because of a jquery-ui bug with resizeable and border-box + * http://bugs.jqueryui.com/ticket/8932 * @type {number} */ - var BORDER_MODEL_DIFFERANCE = 0; + var BORDER_MODEL_DIFFERANCE = 2; var getBox = function ($element) { var selectedAttr = $element.attr(SELECTED_ATTRIBUTE); diff --git a/src/sass/touch/_touch.scss b/src/sass/touch/_touch.scss index 669f721b..533b488f 100644 --- a/src/sass/touch/_touch.scss +++ b/src/sass/touch/_touch.scss @@ -1,14 +1,11 @@ $handle-default-color: #333; -$handle-default-bg: #FFF; +$handle-default-bg: #F8F8F8; //#fff; -$handle-border-color: darken($handle-default-bg, 40%); +$handle-border-color: #333; $shadow: #666; $smallest-size: 6px; -@function tail-svg($size) { - $scale: strip-units($size) / 24.002766; - @return ""; -} +$circle: " "; @mixin size($size) { width: $size; @@ -60,34 +57,27 @@ $smallest-size: 6px; @mixin curved-tail($size, $both) { @mixin inner($size) { - $svg: tail-svg($size); content: ""; - background-image: url("data:image/svg+xml;utf8,#{$svg}"); position: absolute; - width: $size + 0; - height: $size + 0; + width: $size; + height: $size; background-position: center; background-repeat: no-repeat; background-size: contain; left: -1px; - + background-image: url("data:image/svg+xml;utf8,#{$circle}"); } &:before { - top: -$size + 1px; + top: -($size / 2.0) - 1px; @include inner($size); - - // TODO: broken - //@include vendor-prefix(transform-origin, ($size / 2.0) ($size + 4px) ); } @if $both { &:after { - top: ($size / 2.0) + 2px + 1px; + top: ($size / 2.0) - 1px; @include inner($size); - - // TODO: broken - //@include vendor-prefix(transform-origin, (($size / 2.0) - 4) ($size / 2.0) ); + @include vendor-prefix-function(transform, scaleY, -1); } } @@ -106,26 +96,11 @@ $smallest-size: 6px; $angle-size: 45deg; $current-angle: 0deg; @while $current-angle < 360deg { - .grab-handle-tail-#{strip-units($current-angle)}:before { - @extend .grab-handle-tail:before; - @include curved-tail-angle($current-angle); - } - - .grab-handle-tail-#{strip-units($current-angle)}:after { - @extend .grab-handle-tail:after; - @include curved-tail-angle($current-angle + 180deg); - } - .grab-handle-double-tail-#{strip-units($current-angle)}:before { - @extend .grab-handle-double-tail:before; + .grab-handle-angle-#{strip-units($current-angle)} { @include curved-tail-angle($current-angle); } - .grab-handle-double-tail-#{strip-units($current-angle)}:after { - @extend .grab-handle-double-tail:after; - @include curved-tail-angle($current-angle + 180deg); - } - $current-angle: $current-angle + $angle-size; }