ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-04 13:09:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Inspector] Right pane opens and closes

Browse Source 
Added collapser button to open and close
the right pane holding the object inspector.
This commit is contained in:
slhale 2015-08-24 10:24:35 -07:00
parent e53c419e87
commit 7715acd4d4
5 changed files with 270 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
platform/commonUI/browse/res/templates/browse-object.html
View File

@ -23,10 +23,9 @@
<div class="object-browse-bar bar abs"> <div class="object-browse-bar bar abs">
<div class="ui-symbol left-pane-tabs" <div class="pane-tabs left"
ng-class="{inactivePane: !ngModel.leftPane, activePane: ngModel.leftPane}" ng-class="{inactivePane: !ngModel.leftPane, activePane: ngModel.leftPane}"
ng-click="ngModel.leftPane = !ngModel.leftPane"> ng-click="ngModel.leftPane = !ngModel.leftPane">
</div> </div>
<div class="items-select left abs"> <div class="items-select left abs">
@ -46,6 +45,11 @@
</mct-representation> </mct-representation>
</div> </div>
<div class="pane-tabs right"
ng-class="{inactivePane: !ngModel.rightPane, activePane: ngModel.rightPane}"
ng-click="ngModel.rightPane = !ngModel.rightPane">
</div>
</div> </div>
<div class='object-holder abs vscroll'> <div class='object-holder abs vscroll'>

7
platform/commonUI/browse/res/templates/browse.html
View File

@ -52,7 +52,7 @@
</mct-splitter> </mct-splitter>
<div class='split-pane-component secondary-split pane right' <div class='split-pane-component secondary-split pane right'
ng-class='{leftInactive: !paneModel.leftPane}'> ng-class='{leftInactive: !paneModel.leftPane, rightInactive: !paneModel.rightPane}'>
<mct-split-pane class='contents abs' <mct-split-pane class='contents abs'
anchor='right'> anchor='right'>
@ -67,10 +67,11 @@
</div> </div>
<mct-splitter class="splitter-bar right" <mct-splitter class="splitter-bar right"
ng-class="{inactive: !paneModel.leftPane}"> ng-class="{inactive: !paneModel.rightPane}">
</mct-splitter> </mct-splitter>
<div class='split-pane-component object-inspector pane right'> <div class='split-pane-component object-inspector pane right'
ng-class='{inactive: !paneModel.rightPane}'>
<div class='holder inspector-holder abs'> <div class='holder inspector-holder abs'>
<mct-representation key="'object-inspector'" <mct-representation key="'object-inspector'"
mct-object="domainObject" mct-object="domainObject"

3
platform/commonUI/browse/src/BrowseObjectController.js
View File

@ -74,6 +74,9 @@ define(
$scope.ngModel.leftPane = true; $scope.ngModel.leftPane = true;
} }
// The object inspector by default always starts closed
$scope.ngModel.rightPane = false;
$scope.$watch('domainObject', setViewForDomainObject); $scope.$watch('domainObject', setViewForDomainObject);
$scope.$watch('representation.selected.key', updateQueryParam); $scope.$watch('representation.selected.key', updateQueryParam);
} }

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

@ -5155,89 +5155,114 @@ input[type="text"] {
.pane.left .create-btn.major.inactivePane span { .pane.left .create-btn.major.inactivePane span {
display: none; } display: none; }
/* line 74, ../sass/tree/_pane.scss */ /* line 72, ../sass/tree/_pane.scss */
.splitter-bar.left { .splitter-bar.splitter {
opacity: 1; opacity: 1;
transition: opacity 0.35s, visibility 0.35s; transition: opacity 0.35s, visibility 0.35s;
top: 0; } top: 0; }
/* line 81, ../sass/tree/_pane.scss */ /* line 79, ../sass/tree/_pane.scss */
.splitter-bar.left.inactive { .splitter-bar.splitter.inactive {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0; }
transition: opacity 0s, visibility 0s; } /* line 83, ../sass/tree/_pane.scss */
/* line 87, ../sass/tree/_pane.scss */ .splitter-bar.splitter.inactive:before {
.splitter-bar.left.inactive:before {
border-width: 0; } border-width: 0; }
/* line 94, ../sass/tree/_pane.scss */ /* line 91, ../sass/tree/_pane.scss */
.splitter-bar.left.splitter.inactive {
transition: opacity 0s, visibility 0s; }
/* line 97, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right { .split-pane-component.secondary-split.pane.right {
transition: left 0.35s; transition: left 0.35s, right 0.35s;
transition-timing-function: ease-out; } transition-timing-function: ease-out; }
/* line 98, ../sass/tree/_pane.scss */ /* line 101, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right.leftInactive { .split-pane-component.secondary-split.pane.right.leftInactive {
left: 0 !important; } left: 0 !important; }
/* line 102, ../sass/tree/_pane.scss */ /* line 105, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane { .split-pane-component.secondary-split.pane.right.rightInactive {
right: auto; } right: 0 !important; }
/* line 106, ../sass/tree/_pane.scss */ /* line 107, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right.rightInactive .items.pane {
width: 100%; }
/* line 114, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar {
position: relative; } position: relative; }
/* line 109, ../sass/tree/_pane.scss */ /* line 117, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .left-pane-tabs { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
left: -10px; font-family: symbolsfont;
width: 11px; background-color: #595959;
width: 11px !important;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
font-size: 10px; font-size: 10px; }
/* line 130, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left {
left: -10px;
top: 3px; top: 3px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }
background-color: #595959; }
/* line 126, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .left-pane-tabs.inactivePane {
left: -15px; }
/* line 129, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .left-pane-tabs.inactivePane:after {
content: '>'; }
/* line 133, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .left-pane-tabs.activePane:after {
content: '<'; }
/* line 138, ../sass/tree/_pane.scss */ /* line 138, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane {
left: -15px; }
/* line 140, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane:after {
content: '>'; }
/* line 144, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.activePane:after {
content: '<'; }
/* line 150, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right {
float: right;
right: -8px;
top: -13px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px; }
/* line 161, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane:after {
content: '<'; }
/* line 165, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.activePane:after {
content: '>'; }
/* line 173, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .items-select { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .items-select {
margin-left: 10px; } margin-left: 10px; }
/* line 144, ../sass/tree/_pane.scss */ /* line 177, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .splitter-bar.right { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .btn-bar.right {
top: 0; } margin-right: 10px; }
/* line 149, ../sass/tree/_pane.scss */ /* line 183, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right {
min-width: 150px; } min-width: 150px; }
/* line 154, ../sass/tree/_pane.scss */ /* line 186, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right.inactive {
min-width: 0 !important;
width: 0 !important;
visibility: hidden; }
/* line 194, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder .info-icon { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder .info-icon {
color: #0099cc; } color: #0099cc; }
/* line 158, ../sass/tree/_pane.scss */ /* line 198, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul {
font-size: 0.9em; }
/* line 161, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li {
font-size: 0.9em;
padding: 2px 0px; padding: 2px 0px;
margin: 2px 0px; margin: 2px 0px;
border-top: solid 1px grey; } border-top: solid 1px grey; }
/* line 166, ../sass/tree/_pane.scss */ /* line 205, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child {
border-top-width: 0px; } border-top-width: 0px; }
/* line 171, ../sass/tree/_pane.scss */ /* line 210, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em {
font-weight: bold; } font-weight: bold; }
/* line 174, ../sass/tree/_pane.scss */ /* line 213, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em:after { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em:after {
content: '\A'; content: '\A';
white-space: pre; } white-space: pre; }
/* line 181, ../sass/tree/_pane.scss */ /* line 220, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location {
display: inline-block; } display: inline-block; }
/* line 184, ../sass/tree/_pane.scss */ /* line 223, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@ -5248,13 +5273,13 @@ input[type="text"] {
padding-bottom: 0; padding-bottom: 0;
margin: 2px; margin: 2px;
line-height: 15px; } line-height: 15px; }
/* line 192, ../sass/tree/_pane.scss */ /* line 230, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label:hover { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label:hover {
background-color: #404040; } background-color: #404040; }
/* line 204, ../sass/tree/_pane.scss */ /* line 241, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon {
font-size: 14px; } font-size: 14px; }
/* line 207, ../sass/tree/_pane.scss */ /* line 244, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon .l-icon-link { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon .l-icon-link {
color: #49dedb; color: #49dedb;
font-size: 6px; font-size: 6px;
@ -5262,13 +5287,13 @@ input[type="text"] {
margin-right: 4px; margin-right: 4px;
text-shadow: black 0 1px 2px; text-shadow: black 0 1px 2px;
z-index: 2; } z-index: 2; }
/* line 221, ../sass/tree/_pane.scss */ /* line 258, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:after { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:after {
content: '>'; content: '>';
font-family: symbolsfont; font-family: symbolsfont;
font-size: 8px; font-size: 8px;
margin-left: -6px; } margin-left: -6px; }
/* line 227, ../sass/tree/_pane.scss */ /* line 264, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:last-child:after { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:last-child:after {
content: ''; content: '';
display: inline-block; } display: inline-block; }

88
platform/commonUI/general/res/sass/tree/_pane.scss
View File

@ -68,10 +68,8 @@ $transitionTime: 0.35s; // For the left menu open/close
} }
} }
// Hide the splitter bar when the left pane is closed // Hide a splitter bar when the corresponding pane is inactive
// Fade the splitter bar in when opening menu, but immediately fade .splitter-bar.splitter {
// out when closing menu
.splitter-bar.left {
opacity: 1; opacity: 1;
transition: opacity $transitionTime, visibility $transitionTime; transition: opacity $transitionTime, visibility $transitionTime;
@ -82,50 +80,63 @@ $transitionTime: 0.35s; // For the left menu open/close
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity 0s, visibility 0s;
&:before { &:before {
border-width: 0; border-width: 0;
} }
} }
} }
// Fade the splitter bar in when opening treeview, but immediately fade
// out when closing treeview
.splitter-bar.left.splitter {
&.inactive {
transition: opacity 0s, visibility 0s;
}
}
// The main view needs to align left when the left pane is moving around // The main view needs to align left when the left pane is moving around
.split-pane-component.secondary-split.pane.right { .split-pane-component.secondary-split.pane.right {
transition: left $transitionTime; transition: left $transitionTime, right $transitionTime;
transition-timing-function: ease-out; transition-timing-function: ease-out;
&.leftInactive { &.leftInactive {
left: 0 !important; left: 0 !important;
} }
.split-pane-component.items.pane { &.rightInactive {
right: auto; right: 0 !important;
.items.pane {
width: 100%;
}
}
.split-pane-component.items.pane {
// Move left tab buttons close to the left splitter bar // Move left tab buttons close to the left splitter bar
.object-browse-bar { .object-browse-bar {
position: relative; position: relative;
.left-pane-tabs { .pane-tabs {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
font-family: symbolsfont;
left: -10px; background-color: darken($colorBodyFg, 25%);
width: 11px;
width: 11px !important;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
font-size: 10px; font-size: 10px;
// Open and closes treeview
&.left {
left: -10px;
top: 3px; top: 3px;
//border-radius: 2px;
border-top-right-radius: 2px; border-top-right-radius: 2px;
border-bottom-right-radius: 2px; border-bottom-right-radius: 2px;
background-color: darken($colorBodyFg, 25%);
// Change button icon depending on state // Change button icon depending on state
&.inactivePane { &.inactivePane {
left: -15px; left: -15px;
&:after { &:after {
content: '>';//'F'; content: '>';//'F';
} }
@ -135,30 +146,58 @@ $transitionTime: 0.35s; // For the left menu open/close
} }
} }
.items-select { // Open and closes object inspector
margin-left: 10px; &.right {
float: right;
right: -8px;
top: -13px;// 14px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
// Change button icon depending on state
&.inactivePane {
//left: -15px;
&:after {
content: '<';
}
}
&.activePane:after {
content: '>';
} }
} }
} }
.splitter-bar.right { // Move domain object title to the right some to make room
// Make the splitter bar vertically span to the top // for treeview collapser button
top: 0; .items-select {
margin-left: 10px;
}
// Similarly move the top button bar for the object inspector
.btn-bar.right {
margin-right: 10px;
}
}
} }
.split-pane-component.object-inspector.pane.right { .split-pane-component.object-inspector.pane.right {
min-width: 150px; min-width: 150px;
.holder.inspector-holder { &.inactive {
min-width: 0 !important;
width: 0 !important;
visibility: hidden;
}
.holder.inspector-holder {
.info-icon { .info-icon {
color: $colorKey; color: $colorKey;
} }
ul { ul li {
font-size: 0.9em; font-size: 0.9em;
li {
// Add spacing between items // Add spacing between items
padding: 2px 0px; padding: 2px 0px;
margin: 2px 0px; margin: 2px 0px;
@ -188,9 +227,7 @@ $transitionTime: 0.35s; // For the left menu open/close
// Colors // Colors
transition: background-color 0.2s; transition: background-color 0.2s;
//background-color: lighten($colorBodyBg, 10%);
&:hover { &:hover {
//background-color: lighten($colorBodyBg, 15%);
background-color: lighten($colorBodyBg, 5%); background-color: lighten($colorBodyBg, 5%);
} }
@ -233,4 +270,3 @@ $transitionTime: 0.35s; // For the left menu open/close
} }
} }
} }
}