ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-19 19:27:07 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Allow Inspector to utilize split pane during editing

Browse Source 
open #279
IN-PROGRESS
Split pane markup added to object-inspector.html;
Tweaks to layout CSS;
This commit is contained in:
Charles Hacskaylo 2015-11-10 14:40:14 -08:00
parent 62e7adc0b0
commit d712a79ba4
6 changed files with 439 additions and 7403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
platform/commonUI/general/res/sass/_inspector.scss
View File

@ -44,6 +44,16 @@
} }
} }
.split-layout {
.split-pane-component.pane {
&.bottom {
height: 30%;
min-height: 20%;
max-height: 80%;
}
}
}
ul { ul {
@include box-sizing(border-box); @include box-sizing(border-box);
padding-right: $interiorMargin; padding-right: $interiorMargin;
@ -109,4 +119,10 @@
width: 4px; width: 4px;
} }
} }
.holder-elements {
.current-elements {
position: relative;
}
}
} }

9
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@ -309,12 +309,17 @@
top: $bodyMargin; top: $bodyMargin;
bottom: $bodyMargin; bottom: $bodyMargin;
} }
.holder-inspector-elements { .holder-inspector {
top: $bodyMargin; top: $bodyMargin;
bottom: $bodyMargin; bottom: $bodyMargin;
left: $bodyMargin; left: $bodyMargin;
right: $bodyMargin; right: $bodyMargin;
}
.holder-elements {
top: 0;
bottom: $bodyMargin;
left: $bodyMargin;
right: $bodyMargin;
} }
} }
} }

21
platform/commonUI/general/res/templates/object-inspector.html
View File

@ -19,8 +19,12 @@
this source code distribution or the Licensing information page available this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div ng-init="editMode = true;"></div>
<span class="l-inspect" ng-controller="ObjectInspectorController as controller"> <span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div class="abs holder holder-inspector-elements l-flex-col"> <div ng-controller="PaneController as modelPaneEdit">
<mct-split-pane class='abs contents split-layout' anchor='bottom'>
<div class="split-pane-component pane top">
<div class="abs holder holder-inspector l-flex-col">
<div class="pane-header flex-elem">Inspection</div> <div class="pane-header flex-elem">Inspection</div>
<ul class="flex-elem grows vscroll"> <ul class="flex-elem grows vscroll">
<li> <li>
@ -59,5 +63,20 @@
</span> </span>
</li> </li>
</ul> </ul>
</div><!--/ holder-inspector -->
</div><!--/ split-pane-component -->
<mct-splitter class="splitter-inspect mobile-hide" ng-show="editMode"></mct-splitter>
<div class="split-pane-component pane bottom" ng-show="editMode">
<div class="abs holder holder-elements l-flex-col">
<em class="flex-elem">Elements</em>
<div class="filter flex-elem"><input type="text"></div>
<mct-representation
key="'edit-elements'"
mct-object="domainObject"
class="flex-elem current-elements grows vscroll">
</mct-representation>
</div> </div>
</div>
</mct-split-pane>
</div><!--/ PaneController -->
</span> </span>

74
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -1069,7 +1069,7 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
left: 0; left: 0;
width: auto; width: auto;
height: auto; height: auto;
background: #404040; background: rgba(255, 255, 255, 0.1);
display: block; } display: block; }
/* line 47, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 47, ../../../../general/res/sass/helpers/_splitter.scss */
.splitter:active:after { .splitter:active:after {
@ -1411,21 +1411,26 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
font-family: symbolsfont; font-family: symbolsfont;
margin-right: 5px; margin-right: 5px;
vertical-align: bottom; } vertical-align: bottom; }
/* line 47, ../../../../general/res/sass/_inspector.scss */ /* line 49, ../../../../general/res/sass/_inspector.scss */
.l-inspect .split-layout .split-pane-component.pane.bottom {
height: 30%;
min-height: 20%;
max-height: 80%; }
/* line 57, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul { .l-inspect ul {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
padding-right: 5px; } padding-right: 5px; }
/* line 52, ../../../../general/res/sass/_inspector.scss */ /* line 62, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li, .l-inspect ul li,
.l-inspect em { .l-inspect em {
display: block; display: block;
position: relative; } position: relative; }
/* line 58, ../../../../general/res/sass/_inspector.scss */ /* line 68, ../../../../general/res/sass/_inspector.scss */
.l-inspect ul li { .l-inspect ul li {
margin-bottom: 10px; } margin-bottom: 10px; }
/* line 62, ../../../../general/res/sass/_inspector.scss */ /* line 72, ../../../../general/res/sass/_inspector.scss */
.l-inspect em { .l-inspect em {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@ -1435,34 +1440,34 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
margin-bottom: 5px; margin-bottom: 5px;
padding: 5px 5px; padding: 5px 5px;
text-transform: uppercase; } text-transform: uppercase; }
/* line 71, ../../../../general/res/sass/_inspector.scss */ /* line 81, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-properties { .l-inspect .inspector-properties {
padding: 3px 0; } padding: 3px 0; }
/* line 72, ../../../../general/res/sass/_inspector.scss */ /* line 82, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-properties:not(.first) { .l-inspect .inspector-properties:not(.first) {
border-top: 1px solid #474747; } border-top: 1px solid #474747; }
/* line 76, ../../../../general/res/sass/_inspector.scss */ /* line 86, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-properties .label { .l-inspect .inspector-properties .label {
color: #737373; color: #737373;
text-transform: uppercase; } text-transform: uppercase; }
/* line 80, ../../../../general/res/sass/_inspector.scss */ /* line 90, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-properties .value { .l-inspect .inspector-properties .value {
color: #bfbfbf; color: #bfbfbf;
word-break: break-all; } word-break: break-all; }
/* line 88, ../../../../general/res/sass/_inspector.scss */ /* line 98, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item { .l-inspect .inspector-location .location-item {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
position: relative; position: relative;
padding: 2px 4px; } padding: 2px 4px; }
/* line 93, ../../../../general/res/sass/_inspector.scss */ /* line 103, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover { .l-inspect .inspector-location .location-item:hover {
background: rgba(153, 153, 153, 0.1); background: rgba(153, 153, 153, 0.1);
color: #cccccc; } color: #cccccc; }
/* line 96, ../../../../general/res/sass/_inspector.scss */ /* line 106, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon { .l-inspect .inspector-location .location-item:hover .icon, .l-inspect .inspector-location .location-item:hover .t-item-icon {
color: #33ccff; } color: #33ccff; }
/* line 101, ../../../../general/res/sass/_inspector.scss */ /* line 111, ../../../../general/res/sass/_inspector.scss */
.l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after { .l-inspect .inspector-location:not(.last) .t-object-label .t-title-label:after {
color: #737373; color: #737373;
content: '\3e'; content: '\3e';
@ -1472,6 +1477,9 @@ tr[class*="s-limit"].s-limit-lwr td:first-child:before {
line-height: inherit; line-height: inherit;
margin-left: 3px; margin-left: 3px;
width: 4px; } width: 4px; }
/* line 123, ../../../../general/res/sass/_inspector.scss */
.l-inspect .holder-elements .current-elements {
position: relative; }
/********************************* CONTROLS */ /********************************* CONTROLS */
/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */ /* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
@ -4620,13 +4628,19 @@ span.req {
top: 10px; top: 10px;
bottom: 10px; } bottom: 10px; }
/* line 312, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 312, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-object-and-inspector .holder-inspector-elements { .split-layout .holder.holder-object-and-inspector .holder-inspector {
top: 10px; top: 10px;
bottom: 10px; bottom: 10px;
left: 10px; left: 10px;
right: 10px; } right: 10px; }
/* line 318, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout .holder.holder-object-and-inspector .holder-elements {
top: 0;
bottom: 10px;
left: 10px;
right: 10px; }
/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 327, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
@ -4637,11 +4651,11 @@ span.req {
width: auto; width: auto;
height: auto; height: auto;
top: 34px; } top: 34px; }
/* line 326, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 331, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder.l-controls-visible.l-time-controller-visible { .object-holder.l-controls-visible.l-time-controller-visible {
bottom: 88px; } bottom: 88px; }
/* line 332, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn, .top-bar .buttons-main .s-menu-btn,
@ -4653,12 +4667,12 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 345, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher, .object-browse-bar .view-switcher,
.top-bar .view-switcher { .top-bar .view-switcher {
margin-right: 20px; } margin-right: 20px; }
/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 355, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
@ -4674,22 +4688,22 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 358, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 363, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 20px; }
/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 365, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back { .object-browse-bar .left .l-back {
display: inline-block; display: inline-block;
float: left; float: left;
margin-right: 10px; } margin-right: 10px; }
/* line 374, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .tree-holder, .pane-tree-hidden .tree-holder,
.pane-tree-hidden .splitter-treeview, .pane-tree-hidden .splitter-treeview,
.pane-tree-hidden .holder-create-and-search { .pane-tree-hidden .holder-create-and-search {
opacity: 0; } opacity: 0; }
/* line 384, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 389, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .tree-holder, .pane-tree-showing .tree-holder,
.pane-tree-showing .splitter-treeview { .pane-tree-showing .splitter-treeview {
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -4709,7 +4723,7 @@ span.req {
-webkit-transition-delay: 250ms; -webkit-transition-delay: 250ms;
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 390, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 395, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .holder-create-and-search { .pane-tree-showing .holder-create-and-search {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;
@ -4728,7 +4742,7 @@ span.req {
-webkit-transition-delay: 200ms; -webkit-transition-delay: 200ms;
transition-delay: 200ms; } transition-delay: 200ms; }
/* line 397, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 402, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-showing .l-object-and-inspector .l-inspect, .pane-inspect-showing .l-object-and-inspector .l-inspect,
.pane-inspect-showing .l-object-and-inspector .splitter-inspect { .pane-inspect-showing .l-object-and-inspector .splitter-inspect {
-moz-transition-property: opacity; -moz-transition-property: opacity;
@ -4749,25 +4763,25 @@ span.req {
transition-delay: 250ms; transition-delay: 250ms;
opacity: 1; } opacity: 1; }
/* line 406, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 411, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .l-inspect, .pane-inspect-hidden .l-object-and-inspector .l-inspect,
.pane-inspect-hidden .l-object-and-inspector .splitter-inspect { .pane-inspect-hidden .l-object-and-inspector .splitter-inspect {
opacity: 0; } opacity: 0; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 414, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 419, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder { .pane.treeview.left .tree-holder {
padding-right: 5px; } padding-right: 5px; }
/* line 418, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 423, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right.primary-pane { .pane-tree-hidden .pane.right.primary-pane {
left: 22px !important; } left: 22px !important; }
/* line 421, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 426, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-inspect-hidden .l-object-and-inspector .pane.left { .pane-inspect-hidden .l-object-and-inspector .pane.left {
right: 22px !important; } right: 22px !important; }
/* line 424, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 429, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) { .pane:not(.resizing) {
-moz-transition-property: width, left, right; -moz-transition-property: width, left, right;
-o-transition-property: width, left, right; -o-transition-property: width, left, right;

2
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -171,7 +171,7 @@ $scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
// Splitter // Splitter
$splitterD: 25px; // splitterD and HandleD should both be odd, or even $splitterD: 25px; // splitterD and HandleD should both be odd, or even
$splitterHandleD: 1px; $splitterHandleD: 1px;
$colorSplitterBg: pullForward($colorBodyBg, 5%); $colorSplitterBg: rgba(#fff, 0.1); //pullForward($colorBodyBg, 5%);
$splitterShdw: rgba(black, 0.4) 0 0 3px; $splitterShdw: rgba(black, 0.4) 0 0 3px;
$splitterEndCr: none; $splitterEndCr: none;
$colorSplitterHover: pullForward($colorBodyBg, 15%); $colorSplitterHover: pullForward($colorBodyBg, 15%);

7642
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

File diff suppressed because it is too large Load Diff