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

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

@ -52,7 +52,7 @@
</mct-splitter>
<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'
anchor='right'>
@ -67,10 +67,11 @@
</div>
<mct-splitter class="splitter-bar right"
ng-class="{inactive: !paneModel.leftPane}">
ng-class="{inactive: !paneModel.rightPane}">
</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'>
<mct-representation key="'object-inspector'"
mct-object="domainObject"

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

@ -74,6 +74,9 @@ define(
$scope.ngModel.leftPane = true;
}
// The object inspector by default always starts closed
$scope.ngModel.rightPane = false;
$scope.$watch('domainObject', setViewForDomainObject);
$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 {
display: none; }
/* line 74, ../sass/tree/_pane.scss */
.splitter-bar.left {
/* line 72, ../sass/tree/_pane.scss */
.splitter-bar.splitter {
opacity: 1;
transition: opacity 0.35s, visibility 0.35s;
top: 0; }
/* line 81, ../sass/tree/_pane.scss */
.splitter-bar.left.inactive {
/* line 79, ../sass/tree/_pane.scss */
.splitter-bar.splitter.inactive {
visibility: hidden;
opacity: 0;
transition: opacity 0s, visibility 0s; }
/* line 87, ../sass/tree/_pane.scss */
.splitter-bar.left.inactive:before {
opacity: 0; }
/* line 83, ../sass/tree/_pane.scss */
.splitter-bar.splitter.inactive:before {
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 {
transition: left 0.35s;
transition: left 0.35s, right 0.35s;
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 {
left: 0 !important; }
/* line 102, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane {
right: auto; }
/* line 106, ../sass/tree/_pane.scss */
/* line 105, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right.rightInactive {
right: 0 !important; }
/* 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 {
position: relative; }
/* line 109, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .left-pane-tabs {
/* line 117, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs {
position: relative;
cursor: pointer;
left: -10px;
width: 11px;
font-family: symbolsfont;
background-color: #595959;
width: 11px !important;
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;
border-top-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: '<'; }
border-bottom-right-radius: 2px; }
/* 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 {
margin-left: 10px; }
/* line 144, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .splitter-bar.right {
top: 0; }
/* line 149, ../sass/tree/_pane.scss */
/* line 177, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .btn-bar.right {
margin-right: 10px; }
/* line 183, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right {
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 {
color: #0099cc; }
/* line 158, ../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 */
/* line 198, ../sass/tree/_pane.scss */
.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;
margin: 2px 0px;
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 {
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 {
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 {
content: '\A';
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 {
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 {
cursor: pointer;
display: inline-block;
@ -5248,13 +5273,13 @@ input[type="text"] {
padding-bottom: 0;
margin: 2px;
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 {
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 {
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 {
color: #49dedb;
font-size: 6px;
@ -5262,13 +5287,13 @@ input[type="text"] {
margin-right: 4px;
text-shadow: black 0 1px 2px;
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 {
content: '>';
font-family: symbolsfont;
font-size: 8px;
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 {
content: '';
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
// Fade the splitter bar in when opening menu, but immediately fade
// out when closing menu
.splitter-bar.left {
// Hide a splitter bar when the corresponding pane is inactive
.splitter-bar.splitter {
opacity: 1;
transition: opacity $transitionTime, visibility $transitionTime;
@ -82,50 +80,63 @@ $transitionTime: 0.35s; // For the left menu open/close
visibility: hidden;
opacity: 0;
transition: opacity 0s, visibility 0s;
&:before {
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
.split-pane-component.secondary-split.pane.right {
transition: left $transitionTime;
transition: left $transitionTime, right $transitionTime;
transition-timing-function: ease-out;
&.leftInactive {
left: 0 !important;
}
.split-pane-component.items.pane {
right: auto;
&.rightInactive {
right: 0 !important;
.items.pane {
width: 100%;
}
}
.split-pane-component.items.pane {
// Move left tab buttons close to the left splitter bar
.object-browse-bar {
position: relative;
.left-pane-tabs {
.pane-tabs {
position: relative;
cursor: pointer;
font-family: symbolsfont;
left: -10px;
width: 11px;
background-color: darken($colorBodyFg, 25%);
width: 11px !important;
height: 16px;
line-height: 16px;
font-size: 10px;
// Open and closes treeview
&.left {
left: -10px;
top: 3px;
//border-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
background-color: darken($colorBodyFg, 25%);
// Change button icon depending on state
&.inactivePane {
left: -15px;
&:after {
content: '>';//'F';
}
@ -135,30 +146,58 @@ $transitionTime: 0.35s; // For the left menu open/close
}
}
.items-select {
margin-left: 10px;
// Open and closes object inspector
&.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 {
// Make the splitter bar vertically span to the top
top: 0;
// Move domain object title to the right some to make room
// for treeview collapser button
.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 {
min-width: 150px;
.holder.inspector-holder {
&.inactive {
min-width: 0 !important;
width: 0 !important;
visibility: hidden;
}
.holder.inspector-holder {
.info-icon {
color: $colorKey;
}
ul {
ul li {
font-size: 0.9em;
li {
// Add spacing between items
padding: 2px 0px;
margin: 2px 0px;
@ -188,9 +227,7 @@ $transitionTime: 0.35s; // For the left menu open/close
// Colors
transition: background-color 0.2s;
//background-color: lighten($colorBodyBg, 10%);
&:hover {
//background-color: lighten($colorBodyBg, 15%);
background-color: lighten($colorBodyBg, 5%);
}
@ -233,4 +270,3 @@ $transitionTime: 0.35s; // For the left menu open/close
}
}
}
}