alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

85
platform/commonUI/general/res/css/theme-espresso.css
View File

@@ -2663,52 +2663,92 @@ label.checkbox.custom {
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/* line 26, ../sass/edit/_editor.scss */ /* line 26, ../sass/edit/_editor.scss */
.edit-main .edit-corner,
.edit-main .edit-handle { .edit-main .edit-handle {
position: absolute; position: absolute;
top: 40px; z-index: 2; }
right: 40px; /* line 32, ../sass/edit/_editor.scss */
bottom: 40px; .edit-main .edit-corner {
left: 40px; } width: 15px;
/* line 33, ../sass/edit/_editor.scss */ height: 15px; }
/* line 35, ../sass/edit/_editor.scss */
.edit-main .edit-corner.edit-resize-nw {
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: nw-resize;
top: 0;
left: 0; }
/* line 40, ../sass/edit/_editor.scss */
.edit-main .edit-corner.edit-resize-se {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
cursor: se-resize;
bottom: 0;
right: 0; }
/* line 45, ../sass/edit/_editor.scss */
.edit-main .edit-corner.edit-resize-sw {
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
cursor: sw-resize;
bottom: 0;
left: 0; }
/* line 53, ../sass/edit/_editor.scss */
.edit-main .edit-handle {
top: 15px;
right: 15px;
bottom: 15px;
left: 15px; }
/* line 55, ../sass/edit/_editor.scss */
.edit-main .edit-handle.edit-move { .edit-main .edit-handle.edit-move {
cursor: move; cursor: move;
left: 30%; left: 0;
right: 30%; right: 0;
top: 30%; top: 0;
bottom: 30%; } bottom: 0;
/* line 42, ../sass/edit/_editor.scss */ z-index: 1; }
/* line 65, ../sass/edit/_editor.scss */
.edit-main .edit-handle.edit-resize-n { .edit-main .edit-handle.edit-resize-n {
top: 0px; top: 0px;
bottom: auto; bottom: auto;
height: 15px; height: 15px;
cursor: n-resize; } cursor: n-resize; }
/* line 47, ../sass/edit/_editor.scss */ /* line 70, ../sass/edit/_editor.scss */
.edit-main .edit-handle.edit-resize-e { .edit-main .edit-handle.edit-resize-e {
right: 0px; right: 0px;
left: auto; left: auto;
width: 15px; width: 15px;
cursor: e-resize; } cursor: e-resize; }
/* line 52, ../sass/edit/_editor.scss */ /* line 75, ../sass/edit/_editor.scss */
.edit-main .edit-handle.edit-resize-s { .edit-main .edit-handle.edit-resize-s {
bottom: 0px; bottom: 0px;
top: auto; top: auto;
height: 15px; height: 15px;
cursor: s-resize; } cursor: s-resize; }
/* line 57, ../sass/edit/_editor.scss */ /* line 80, ../sass/edit/_editor.scss */
.edit-main .edit-handle.edit-resize-w { .edit-main .edit-handle.edit-resize-w {
left: 0px; left: 0px;
right: auto; right: auto;
width: 15px; width: 15px;
cursor: w-resize; } cursor: w-resize; }
/* line 66, ../sass/edit/_editor.scss */ /* line 89, ../sass/edit/_editor.scss */
.edit-main .frame.child-frame.panel:hover { .edit-main .frame.child-frame.panel:hover {
border-color: #0099cc;
-moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px; -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-webkit-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; } box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
/* line 69, ../sass/edit/_editor.scss */ border-color: #0099cc;
.edit-main .frame.child-frame.panel:hover .edit-handle { z-index: 2; }
background-color: rgba(0, 153, 204, 0.3); } /* line 93, ../sass/edit/_editor.scss */
.edit-main .frame.child-frame.panel:hover .view-switcher {
opacity: 1; }
/* line 96, ../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 */
.edit-main .frame.child-frame.panel:hover .edit-corner:hover {
background-color: #0099cc; }
/* line 1, ../sass/features/_imagery.scss */ /* line 1, ../sass/features/_imagery.scss */
.l-image-main-wrapper, .l-image-main-wrapper,
@@ -4061,11 +4101,12 @@ input[type="text"] {
left: 5px; } left: 5px; }
/* line 54, ../sass/user-environ/_frame.scss */ /* line 54, ../sass/user-environ/_frame.scss */
.frame.frame-template .view-switcher { .frame.frame-template .view-switcher {
opacity: 0; } opacity: 0;
/* line 58, ../sass/user-environ/_frame.scss */ z-index: 10; }
/* line 59, ../sass/user-environ/_frame.scss */
.frame.frame-template:hover .view-switcher { .frame.frame-template:hover .view-switcher {
opacity: 1; } opacity: 1; }
/* line 66, ../sass/user-environ/_frame.scss */ /* line 67, ../sass/user-environ/_frame.scss */
.frame .view-switcher .name { .frame .view-switcher .name {
display: none; } display: none; }

58
platform/commonUI/general/res/sass/edit/_editor.scss
View File

@@ -21,42 +21,65 @@
*****************************************************************************/ *****************************************************************************/
.edit-main { .edit-main {
$handleD: 15px;
$cr: 5px;
.edit-corner,
.edit-handle {
position: absolute;
z-index: 2;
}
.edit-corner {
width: $handleD;
height: $handleD;
&.edit-resize-nw {
@include border-bottom-right-radius($cr);
cursor: nw-resize;
top: 0; left: 0;
}
&.edit-resize-se {
@include border-top-left-radius($cr);
cursor: se-resize;
bottom: 0; right: 0;
}
&.edit-resize-sw {
@include border-top-right-radius($cr);
cursor: sw-resize;
bottom: 0; left: 0;
}
}
.edit-handle { .edit-handle {
$edgeHandleD: 15px; top: $handleD; right: $handleD; bottom: $handleD; left: $handleD;
$cornerM: 50px;
//@include border-radius(0.5em);
//display: none;
position: absolute;
top: $cornerM; right: $cornerM; bottom: $cornerM; left: $cornerM;
&.edit-move { &.edit-move {
$m: 30%; $m: 0; //$handleD;
cursor: move; cursor: move;
left: $m; left: $m;
right: $m; right: $m;
top: $m; top: $m;
bottom: $m; bottom: $m;
z-index: 1;
} }
&.edit-resize-n { &.edit-resize-n {
top: 0px; bottom: auto; top: 0px; bottom: auto;
height: $edgeHandleD; height: $handleD;
cursor: n-resize; cursor: n-resize;
} }
&.edit-resize-e { &.edit-resize-e {
right: 0px; left: auto; right: 0px; left: auto;
width: $edgeHandleD; width: $handleD;
cursor: e-resize; cursor: e-resize;
} }
&.edit-resize-s { &.edit-resize-s {
bottom: 0px; top: auto; bottom: 0px; top: auto;
height: $edgeHandleD; height: $handleD;
cursor: s-resize; cursor: s-resize;
} }
&.edit-resize-w { &.edit-resize-w {
left: 0px; right: auto; left: 0px; right: auto;
width: $edgeHandleD; width: $handleD;
cursor: w-resize; cursor: w-resize;
} }
} }
@@ -64,10 +87,17 @@
.frame.child-frame.panel { .frame.child-frame.panel {
&:hover { &:hover {
border-color: $colorKey;
@include boxShdwLarge(); @include boxShdwLarge();
.edit-handle { border-color: $colorKey;
background-color: rgba($colorKey, 0.3); z-index: 2;
.view-switcher {
opacity: 1;
}
.edit-corner {
background-color: rgba($colorKey, 0.8);
&:hover {
background-color: rgba($colorKey, 1);
}
} }
} }
} }

1
platform/commonUI/general/res/sass/user-environ/_frame.scss
View File

@@ -54,6 +54,7 @@
.view-switcher { .view-switcher {
//display: none; //display: none;
opacity: 0; opacity: 0;
z-index: 10;
} }
&:hover .view-switcher { &:hover .view-switcher {
// Show the view switcher on frame hover // Show the view switcher on frame hover

19
platform/features/layout/res/templates/layout.html
View File

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