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

Layout selection and show/hide frame

Browse Source 
Added ability to show/hide object frames via a toggle button in the
edit toolbar. All objects have frames by default except for ‘hyperlinks’.
Also, implemented object selection in the layout and added tests for new features.

Fixes #1658.
This commit is contained in:
Pegah Sarram
2017-08-18 16:28:41 -07:00
parent 019cdde1c6
commit cecd708dd1
14 changed files with 493 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
platform/commonUI/general/res/sass/_fixed-position.scss
View File

@@ -21,32 +21,11 @@
*****************************************************************************/
.t-fixed-position {
&.l-fixed-position {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
.l-grid-holder {
position: relative;
height: 100%;
width: 100%;
.l-grid {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
z-index: 0;
}
}
@extend .abs;
}
.l-fixed-position-item {
position: absolute;
border: 1px solid transparent;
&.s-not-selected {
opacity: 0.8;
}
@@ -105,37 +84,8 @@
}
}
}
.l-fixed-position-item-handle {
$brd: 1px solid $colorKey;
background: rgba($colorKey, 0.5);
cursor: crosshair;
border: $brd;
position: absolute;
}
}
.edit-mode .t-fixed-position {
&.l-fixed-position {
.l-grid-holder {
.l-grid {
&.l-grid-x {
@include bgTicks($colorGridLines, 'x');
}
&.l-grid-y {
@include bgTicks($colorGridLines, 'y');
}
}
}
}
.l-fixed-position-item {
&:not(.s-selected) {
border: 1px dotted rgba($colorKey, 0.75);
&:hover {
border: 1px dotted rgba($colorKey, 1.0);
}
}
}
.s-status-editing {
.l-fixed-position-item-handle.edit-corner { display: block; }
}

5
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@@ -704,11 +704,6 @@ textarea {
}
}
.view-switcher,
.t-btn-view-large {
@include trans-prop-nice-fade($controlFadeMs);
}
/******************************************************** BROWSER ELEMENTS */
body.desktop {
::-webkit-scrollbar {

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

@@ -19,12 +19,24 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.s-status-editing .l-object-wrapper,
.edit-main {
// .s-status-editing .l-object-wrapper is relevant to New Edit Mode;
// .edit-main is legacy for old edit mode.
$handleD: 15px;
$cr: 5px;
.t-edit-handle-holder { display: none; }
.l-grid-holder {
display: none;
position: relative;
height: 100%;
width: 100%;
.l-grid {
@extend .abs;
pointer-events: none;
z-index: 0;
&.l-grid-y { background-position: 0 1px; }
}
}
.s-status-editing {
$handleD: 5px;
.t-edit-handle-holder { display: block; }
.edit-corner,
.edit-handle {
position: absolute;
@@ -32,81 +44,59 @@
}
.edit-corner {
background: rgba($colorSelectableSelectedPrimary, 0.5);
cursor: crosshair;
display: none; // Hide by default
border: 1px solid $colorSelectableSelectedPrimary;
width: $handleD;
height: $handleD;
$o: (-1 * $handleD) + 1px;
&:hover {
z-index: 11;
}
&.edit-resize-nw {
border-bottom-right-radius: $cr;
cursor: nw-resize;
top: 0; left: 0;
}
&.edit-resize-ne {
border-bottom-left-radius: $cr;
cursor: ne-resize;
top: 0; right: 0;
}
&.edit-resize-se {
border-top-left-radius: $cr;
cursor: se-resize;
bottom: 0; right: 0;
}
&.edit-resize-sw {
border-top-right-radius: $cr;
cursor: sw-resize;
bottom: 0; left: 0;
}
&.edit-resize-nw { top: $o; left: $o; }
&.edit-resize-ne { top: $o; right: $o; }
&.edit-resize-se { bottom: $o; right: $o; }
&.edit-resize-sw { bottom: $o; left: $o; }
}
.edit-handle {
top: $handleD; right: $handleD; bottom: $handleD; left: $handleD;
&.edit-move {
$m: 0; //$handleD;
cursor: move;
left: $m;
right: $m;
top: $m;
bottom: $m;
z-index: 1;
}
&.edit-resize-n {
top: 0px; bottom: auto;
height: $handleD;
cursor: n-resize;
}
&.edit-resize-e {
right: 0px; left: auto;
width: $handleD;
cursor: e-resize;
}
&.edit-resize-s {
bottom: 0px; top: auto;
height: $handleD;
cursor: s-resize;
}
&.edit-resize-w {
left: 0px; right: auto;
width: $handleD;
cursor: w-resize;
}
.edit-handle.edit-move {
// main move box for the whole frame element
$m: 0;
left: $m;
right: $m;
top: $m;
bottom: $m;
z-index: 1;
}
.frame.child-frame.panel {
&:hover {
@include boxShdwLarge();
border-color: $colorSelectableSelectedPrimary;
.view-switcher {
opacity: 1;
}
.edit-corner {
background-color: rgba($colorKey, 0.8);
&:hover {
background-color: rgba($colorKey, 1);
}
}
}
}
// Editing Grids
.l-grid-holder {
display: block;
.l-grid {
&.l-grid-x { @include bgTicks($colorGridLines, 'x'); }
&.l-grid-y { @include bgTicks($colorGridLines, 'y'); }
}
}
// Prevent nested frames from showing their grids
.t-frame-outer .l-grid-holder { display: none !important; }
// Prevent nested elements from showing s-hover-border
.t-frame-outer .s-hover-border {
border: none !important;
}
// Prevent nested frames from being selectable until we have proper sub-object editing
.t-frame-outer .t-frame-outer {
pointer-events: none;
}
}

12
platform/commonUI/general/res/sass/overlay/_overlay.scss
View File

@@ -193,6 +193,7 @@
@include animToParams(overlayIn, $dur: $durLargeViewExpand, $delay: 0);
background: $colorBodyBg;
z-index: 101;
.abs.inner-holder {
opacity: 0;
@@ -203,10 +204,19 @@
@include animToParams(contentsIn, $dur: 50ms, $delay: $durLargeViewExpand * 1.25);
}
// Hide View Large button
.t-btn-view-large {
display: none;
}
z-index: 101;
// But show View Large button when it's nested inside a Layout
.t-frame-inner .t-frame-inner .t-btn-view-large { display: block; }
}
}
// When multiple Large Views are visible, hide the blocker for all but the first
& + .l-large-view {
.blocker {
display: none;
}
}
}

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

@@ -23,28 +23,43 @@
$ohH: $btnFrameH;
$bc: $colorInteriorBorder;
&.child-frame.panel {
background: $colorBodyBg;
border: 1px solid $bc;
z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
&:hover {
border-color: lighten($bc, 10%);
&:not(.no-frame) {
background: $colorBodyBg;
border: 1px solid $bc;
&:hover {
border-color: lighten($bc, 10%);
}
}
}
.object-browse-bar {
font-size: 0.75em;
height: $ohH;
line-height: $ohH;
.right {
@include trans-prop-nice-fade($controlFadeMs);
padding-left: $interiorMargin;
}
}
&.t-object-type-timer,
&.t-object-type-clock,
&.t-object-type-hyperlink {
// Hide the right side buttons for objects where they don't make sense
// Note that this will hide the view Switcher button if applied
// to an object that it.
.object-browse-bar .right { display: none; }
}
> .object-holder.abs {
top: $ohH + $interiorMargin;
}
.contents {
$myM: $interiorMargin;
top: $myM;
right: $myM;
bottom: $myM;
left: $myM;
$m: $interiorMargin;
top: $m;
right: $m;
bottom: $m;
left: $m;
}
&.frame-template {
.s-button,
@@ -67,15 +82,25 @@
}
}
.view-switcher {
margin-left: $interiorMargin; // Kick other top bar elements away when I'm present.
margin-right: $interiorMargin; // Kick other top bar elements away when I'm present.
// Hide the name when the view switcher is in a frame context
.title-label {
display: none;
}
}
&.no-frame {
background: transparent !important;
border: none !important;
.object-browse-bar .right {
$m: 0; // $interiorMarginSm;
background: rgba(black, 0.3);
border-radius: $basicCr;
padding: $interiorMarginSm;
position: absolute;
top: $m; right: $m;
z-index: 2;
}
&.t-frame-outer > .t-rep-frame {
&.contents {
$m: 2px;
@@ -85,7 +110,7 @@
left: $m;
}
> .t-frame-inner {
> .object-browse-bar {
> .object-browse-bar .left {
display: none;
}
> .object-holder.abs {
@@ -117,8 +142,7 @@
body.desktop .frame {
// Hide local controls initially and show it them on hover when they're in an element that's in a frame context
// Frame template is used because we need to target the lowest nested frame
.view-switcher,
.t-btn-view-large {
.right {
opacity: 0;
pointer-events: none;
}
@@ -126,8 +150,7 @@ body.desktop .frame {
// Target the first descendant so that we only show the elements in the outermost container.
// Handles the case where we have layouts in layouts.
&:hover > .object-browse-bar {
.view-switcher,
.t-btn-view-large {
.right {
opacity: 1;
pointer-events: inherit;
}

33
platform/commonUI/general/res/sass/user-environ/_selecting.scss
View File

@@ -19,21 +19,36 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.s-selectable {
border: 1px solid transparent;
.s-hover-border {
border: 1px dotted transparent;
}
&.s-hover {
// Styles when hovering over a selectable object
border-color: $colorSelectableHov !important;
.s-status-editing {
// Limit to editing mode until we have sub-object selection
.s-hover-border {
// Show a border by default so user can see object bounds and empty objects
border: 1px dotted rgba($colorSelectableSelectedPrimary, 0.3) !important;
&:hover {
border-color: rgba($colorSelectableSelectedPrimary, 0.7) !important;
}
}
&.s-selected {
.s-selected > .s-hover-border,
.s-selected.s-hover-border {
// Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
border-color: $colorSelectableSelectedPrimary !important;
@include boxShdwLarge();
// Show edit-corners if you got 'em
.edit-corner {
display: block;
&:hover {
background-color: rgba($colorKey, 1);
}
}
}
&.s-moveable {
@include boxShdwLarge();
.s-selected > .s-moveable,
.s-selected.s-moveable {
cursor: move;
}
}
}