ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-29 09:28:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Inspector] Right pane transition

Browse Source 
Created the sliding transition for when the
object inspector pane opens or closes.
This commit is contained in:
slhale 2015-08-24 10:47:14 -07:00
parent 7715acd4d4
commit 67e57081f4
3 changed files with 91 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,11 +52,12 @@
</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, rightInactive: !paneModel.rightPane}'> ng-class='{leftInactive: !paneModel.leftPane}'>
<mct-split-pane class='contents abs' <mct-split-pane class='contents abs'
anchor='right'> anchor='right'>
<div class='split-pane-component items pane'> <div class='split-pane-component items pane'
ng-class='{rightInactive: !paneModel.rightPane}'>
<div class='holder abs' <div class='holder abs'
id='content-area'> id='content-area'>
<mct-representation key="'browse-object'" <mct-representation key="'browse-object'"

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

@ -5174,21 +5174,22 @@ input[type="text"] {
/* line 97, ../sass/tree/_pane.scss */ /* line 97, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right { .split-pane-component.secondary-split.pane.right {
transition: left 0.35s, right 0.35s; transition: left 0.35s;
transition-timing-function: ease-out; } transition-timing-function: ease-out; }
/* line 101, ../sass/tree/_pane.scss */ /* line 102, ../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 105, ../sass/tree/_pane.scss */ /* line 106, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right.rightInactive { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane {
transition: right 0.35s;
transition-timing-function: ease-out; }
/* line 111, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane.rightInactive {
right: 0 !important; } right: 0 !important; }
/* line 107, ../sass/tree/_pane.scss */ /* line 116, ../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 117, ../sass/tree/_pane.scss */ /* line 119, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .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;
@ -5198,22 +5199,22 @@ input[type="text"] {
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
font-size: 10px; } font-size: 10px; }
/* line 130, ../sass/tree/_pane.scss */ /* line 132, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left {
left: -10px; 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; }
/* line 138, ../sass/tree/_pane.scss */ /* 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 { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane {
left: -15px; } left: -15px; }
/* line 140, ../sass/tree/_pane.scss */ /* line 142, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane:after { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane:after {
content: '>'; } content: '>'; }
/* line 144, ../sass/tree/_pane.scss */ /* line 146, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.activePane:after { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.activePane:after {
content: '<'; } content: '<'; }
/* line 150, ../sass/tree/_pane.scss */ /* line 152, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right {
float: right; float: right;
right: -8px; right: -8px;
@ -5221,48 +5222,52 @@ input[type="text"] {
border-top-left-radius: 2px; border-top-left-radius: 2px;
border-bottom-left-radius: 2px; } border-bottom-left-radius: 2px; }
/* line 161, ../sass/tree/_pane.scss */ /* 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 {
right: -12px; }
/* line 163, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane:after { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane:after {
content: '<'; } content: '<'; }
/* line 165, ../sass/tree/_pane.scss */ /* line 167, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.activePane:after { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.activePane:after {
content: '>'; } content: '>'; }
/* line 173, ../sass/tree/_pane.scss */ /* line 175, ../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 177, ../sass/tree/_pane.scss */ /* line 179, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .btn-bar.right { .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .btn-bar.right {
margin-right: 10px; } margin-right: 10px; }
/* line 183, ../sass/tree/_pane.scss */ /* line 185, ../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 186, ../sass/tree/_pane.scss */ /* line 189, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right.inactive { .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right.inactive {
min-width: 0 !important; min-width: 0 !important;
width: 0 !important; width: 0 !important;
visibility: hidden; } visibility: hidden;
/* line 194, ../sass/tree/_pane.scss */ opacity: 0; }
/* line 197, ../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 198, ../sass/tree/_pane.scss */ /* line 201, ../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; 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 205, ../sass/tree/_pane.scss */ /* line 208, ../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 210, ../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 { .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 213, ../sass/tree/_pane.scss */ /* line 216, ../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 220, ../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 { .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 223, ../sass/tree/_pane.scss */ /* line 226, ../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;
@ -5273,13 +5278,13 @@ input[type="text"] {
padding-bottom: 0; padding-bottom: 0;
margin: 2px; margin: 2px;
line-height: 15px; } line-height: 15px; }
/* line 230, ../sass/tree/_pane.scss */ /* line 233, ../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 241, ../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 { .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 244, ../sass/tree/_pane.scss */ /* line 247, ../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;
@ -5287,13 +5292,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 258, ../sass/tree/_pane.scss */ /* line 261, ../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 264, ../sass/tree/_pane.scss */ /* line 267, ../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; }

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

@ -95,22 +95,24 @@ $transitionTime: 0.35s; // For the left menu open/close
// 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, right $transitionTime;
transition-timing-function: ease-out;
// Sliding transition for open/close of left pane
transition: left $transitionTime;
transition-timing-function: ease-out;
&.leftInactive { &.leftInactive {
left: 0 !important; left: 0 !important;
} }
.split-pane-component.items.pane {
// Sliding transition for open/close of right pane
transition: right $transitionTime;
transition-timing-function: ease-out;
&.rightInactive { &.rightInactive {
right: 0 !important; right: 0 !important;
.items.pane {
width: 100%;
}
} }
.split-pane-component.items.pane { // Tab buttons close to the splitter bars
// Move left tab buttons close to the left splitter bar
.object-browse-bar { .object-browse-bar {
position: relative; position: relative;
@ -157,7 +159,7 @@ $transitionTime: 0.35s; // For the left menu open/close
// Change button icon depending on state // Change button icon depending on state
&.inactivePane { &.inactivePane {
//left: -15px; right: -12px;
&:after { &:after {
content: '<'; content: '<';
} }
@ -183,11 +185,12 @@ $transitionTime: 0.35s; // For the left menu open/close
.split-pane-component.object-inspector.pane.right { .split-pane-component.object-inspector.pane.right {
min-width: 150px; min-width: 150px;
//transition: visibility $transitionTime, opacity $transitionTime;
&.inactive { &.inactive {
min-width: 0 !important; min-width: 0 !important;
width: 0 !important; width: 0 !important;
visibility: hidden; visibility: hidden;
opacity: 0;
} }
.holder.inspector-holder { .holder.inspector-holder {