[Frontend] Mods to layout element drag handles and editing behavior

WTD-951
layout.html:
Added classes to and removed inline styles from drag handles,
Removed edge handles, leaving corner handles in NW, SW and SE only;
Added hover classes to display corner handles while editing;
Modified z-indexing to allow view switcher to be accessed while editing;
This commit is contained in:
Charles Hacskaylo
2015-06-16 12:40:48 -07:00
parent a984e60ca5
commit 70e1a8ad9e
4 changed files with 121 additions and 42 deletions

View File

@@ -34,13 +34,14 @@
<!-- Drag handles -->
<span ng-show="domainObject.hasCapability('editor')">
<span
class="edit-handle edit-move"
mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [0,0])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<!--
<span
class="edit-handle edit-resize-w"
mct-drag-down="controller.startDrag(childObject.getId(), [1,0], [-1,0])"
@@ -66,23 +67,29 @@
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
-->
<span style="position: absolute; left: 0px; width: 12px; top: 0px; height: 12px; cursor: nw-resize;"
<span
class="edit-corner edit-resize-nw"
mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [-1,-1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<span style="position: absolute; right: 0px; width: 12px; top: 0px; height: 12px; cursor: ne-resize;"
<!--span
class="edit-corner edit-resize-nw"
style="position: absolute; right: 0px; width: 12px; top: 0px; height: 12px; cursor: ne-resize;"
mct-drag-down="controller.startDrag(childObject.getId(), [0,1], [1,-1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<span style="position: absolute; left: 0px; width: 12px; bottom: 0px; height: 12px; cursor: sw-resize;"
</span-->
<span
class="edit-corner edit-resize-sw"
mct-drag-down="controller.startDrag(childObject.getId(), [1,0], [-1,1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<span style="position: absolute; right: 0px; width: 12px; bottom: 0px; height: 12px; cursor: se-resize;"
<span
class="edit-corner edit-resize-se"
mct-drag-down="controller.startDrag(childObject.getId(), [0,0], [1,1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">