Skip to content

Commit

Permalink
More work on UI.
Browse files Browse the repository at this point in the history 
Pretty much completed the touch css UI sub-library. Works properly now.

Also fixed important bugs with annotation drawing and CSS:
 - Can no longer resize past the dimensions of the parent
 - Can resize properly to the edges (jquery-ui resizable bug with border-box property)
   - Had to turn change `box-sizing` from `border-box` to `content-box` for box items and change offset values in jquery.drawabox.js
 - You can now create a new box that can go right up to the edges
  • Loading branch information
@atruskie
atruskie committed Feb 1, 2014
1 parent dcc8c7b commit 952f146
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 49 deletions.
6 changes: 5 additions & 1 deletion src/app/annotationViewer/_annotation_viewer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
15 changes: 8 additions & 7 deletions src/app/annotationViewer/annotationViewer.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,23 @@
ng-class="{active: annotation.selected || annotation.hovering}"
ng-style="{left: (positionLabel(annotation)) + 'px' }"
ng-eval="tag = getTag(annotation)"
>
<span class="{{tag.typeOfTag}}">
>
<span class="{{tag.typeOfTag}}">
{{tag.text}}
</span>
</li>
</ul>
</div>
<div class="annotation-viewer" id="annotation-viewer_{{id}}" >
<div class="annotation-viewer" id="annotation-viewer_{{id}}">
<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 id="spectrogramAnnotations_{{id}}"></div>
<div class="positionLine" baw-translate-x="positionLine()"
ng-class="{hidden: !model.audioElement.canPlay}" >
<div class="grab-bottom-center grab-handle-tail-0"
ng-class="{hidden: !model.audioElement.canPlay}">
<div class="grab-bottom-center grab-handle-tail grab-handle-angle-0"
></div>
</div>
</div>
</div>
</div>

Expand Down
16 changes: 10 additions & 6 deletions src/common/jquery.drawabox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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); }
});
Expand Down Expand Up @@ -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);
Expand Down
45 changes: 10 additions & 35 deletions src/sass/touch/_touch.scss
View file
Original file line number Diff line number Diff line change
@@ -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 "<svg xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' width='24' height='24.38'><g transform='translate(0,-40)'><path d='M11.36 40.52C10.92 44.29 8.59 47.54 5.78 49.98 4.28 51.18 2.96 52.64 2.14 54.4 1.31 56.15 0.67 58.05 0.5 59.99c0 1.17 0 2.33 0 3.5 0.81-0.5 0.71-2.32 1.5-3.16 2.25-4.09 7.15-6.48 11.75-5.69 4.57 0.65 8.49 4.34 9.44 8.85 0.53 0.12 0.18-0.64 0.28-0.95-0.05-1.42 0.16-2.87-0.28-4.26-0.7-3.03-2.14-6.02-4.65-7.96-2.83-2.41-5.26-5.54-5.86-9.3 0.14-0.81-0.75-0.41-1.23-0.5l-0.07 0-0.03 0z' style='fill:#{$handle-default-bg};stroke-linecap:rounded;stroke-width:2.0;stroke:#{$handle-border-color}'/></g></svg>";
}
$circle: "<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>";

@mixin size($size) {
width: $size;
Expand Down Expand Up @@ -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);
}
}

Expand All @@ -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;
}

Expand Down

0 comments on commit 952f146

Please sign in to comment.