[Frontend] Added top right resize corner

WTD-1404
WTD-1376
This commit is contained in:
Charles Hacskaylo
2015-06-30 09:27:56 -07:00
parent 8ee28c3918
commit af2ca49b23
4 changed files with 37 additions and 21 deletions

View File

@@ -2797,6 +2797,9 @@ label.checkbox.custom {
width: 15px;
height: 15px; }
/* line 35, ../sass/edit/_editor.scss */
.edit-main .edit-corner:hover {
z-index: 11; }
/* line 38, ../sass/edit/_editor.scss */
.edit-main .edit-corner.edit-resize-nw {
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
@@ -2804,7 +2807,15 @@ label.checkbox.custom {
cursor: nw-resize;
top: 0;
left: 0; }
/* line 40, ../sass/edit/_editor.scss */
/* line 43, ../sass/edit/_editor.scss */
.edit-main .edit-corner.edit-resize-ne {
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
cursor: ne-resize;
top: 0;
right: 0; }
/* line 48, ../sass/edit/_editor.scss */
.edit-main .edit-corner.edit-resize-se {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
@@ -2812,7 +2823,7 @@ label.checkbox.custom {
cursor: se-resize;
bottom: 0;
right: 0; }
/* line 45, ../sass/edit/_editor.scss */
/* line 53, ../sass/edit/_editor.scss */
.edit-main .edit-corner.edit-resize-sw {
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
@@ -2820,13 +2831,13 @@ label.checkbox.custom {
cursor: sw-resize;
bottom: 0;
left: 0; }
/* line 53, ../sass/edit/_editor.scss */
/* line 61, ../sass/edit/_editor.scss */
.edit-main .edit-handle {
top: 15px;
right: 15px;
bottom: 15px;
left: 15px; }
/* line 55, ../sass/edit/_editor.scss */
/* line 63, ../sass/edit/_editor.scss */
.edit-main .edit-handle.edit-move {
cursor: move;
left: 0;
@@ -2834,43 +2845,43 @@ label.checkbox.custom {
top: 0;
bottom: 0;
z-index: 1; }
/* line 65, ../sass/edit/_editor.scss */
/* line 73, ../sass/edit/_editor.scss */
.edit-main .edit-handle.edit-resize-n {
top: 0px;
bottom: auto;
height: 15px;
cursor: n-resize; }
/* line 70, ../sass/edit/_editor.scss */
/* line 78, ../sass/edit/_editor.scss */
.edit-main .edit-handle.edit-resize-e {
right: 0px;
left: auto;
width: 15px;
cursor: e-resize; }
/* line 75, ../sass/edit/_editor.scss */
/* line 83, ../sass/edit/_editor.scss */
.edit-main .edit-handle.edit-resize-s {
bottom: 0px;
top: auto;
height: 15px;
cursor: s-resize; }
/* line 80, ../sass/edit/_editor.scss */
/* line 88, ../sass/edit/_editor.scss */
.edit-main .edit-handle.edit-resize-w {
left: 0px;
right: auto;
width: 15px;
cursor: w-resize; }
/* line 89, ../sass/edit/_editor.scss */
/* line 97, ../sass/edit/_editor.scss */
.edit-main .frame.child-frame.panel:hover {
-moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
border-color: #0099cc; }
/* line 93, ../sass/edit/_editor.scss */
/* line 101, ../sass/edit/_editor.scss */
.edit-main .frame.child-frame.panel:hover .view-switcher {
opacity: 1; }
/* line 96, ../sass/edit/_editor.scss */
/* line 104, ../sass/edit/_editor.scss */
.edit-main .frame.child-frame.panel:hover .edit-corner {
background-color: rgba(0, 153, 204, 0.8); }
/* line 98, ../sass/edit/_editor.scss */
/* line 106, ../sass/edit/_editor.scss */
.edit-main .frame.child-frame.panel:hover .edit-corner:hover {
background-color: #0099cc; }
@@ -4129,14 +4140,14 @@ input[type="text"] {
right: 5px;
bottom: 5px;
left: 5px; }
/* line 54, ../sass/user-environ/_frame.scss */
/* line 53, ../sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher {
opacity: 0;
z-index: 10; }
/* line 59, ../sass/user-environ/_frame.scss */
/* line 57, ../sass/user-environ/_frame.scss */
.frame.frame-template:hover .view-switcher {
opacity: 1; }
/* line 67, ../sass/user-environ/_frame.scss */
/* line 65, ../sass/user-environ/_frame.scss */
.frame .view-switcher .name {
display: none; }

View File

@@ -32,11 +32,19 @@
.edit-corner {
width: $handleD;
height: $handleD;
&:hover {
z-index: 11;
}
&.edit-resize-nw {
@include border-bottom-right-radius($cr);
cursor: nw-resize;
top: 0; left: 0;
}
&.edit-resize-ne {
@include border-bottom-left-radius($cr);
cursor: ne-resize;
top: 0; right: 0;
}
&.edit-resize-se {
@include border-top-left-radius($cr);
cursor: se-resize;

View File

@@ -50,9 +50,7 @@
&.frame-template {
// Hide the view switcher by default when it's in an element that's in a frame context
// Frame template is used because we need to target the lowest nested frame
// This has the effect of hiding the view switcher in nested frames in edit mode, which is desirable currently (as it's non-functional)
.view-switcher {
//display: none;
opacity: 0;
z-index: 10;
}

View File

@@ -75,13 +75,12 @@
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span>
<!--span
class="edit-corner edit-resize-nw"
style="position: absolute; right: 0px; width: 12px; top: 0px; height: 12px; cursor: ne-resize;"
<span
class="edit-corner edit-resize-ne"
mct-drag-down="controller.startDrag(childObject.getId(), [0,1], [1,-1])"
mct-drag="controller.continueDrag(delta)"
mct-drag-up="controller.endDrag()">
</span-->
</span>
<span
class="edit-corner edit-resize-sw"
mct-drag-down="controller.startDrag(childObject.getId(), [1,0], [-1,1])"