ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-28 08:58: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>
<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'
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'
id='content-area'>
<mct-representation key="'browse-object'"

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

@ -5174,95 +5174,100 @@ input[type="text"] {
/* line 97, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right {
transition: left 0.35s, right 0.35s;
transition: left 0.35s;
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 {
left: 0 !important; }
/* 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 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;
font-family: symbolsfont;
background-color: #595959;
width: 11px !important;
height: 16px;
line-height: 16px;
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; }
/* 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 106, ../sass/tree/_pane.scss */
.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; }
/* line 116, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar {
position: relative; }
/* line 119, ../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;
font-family: symbolsfont;
background-color: #595959;
width: 11px !important;
height: 16px;
line-height: 16px;
font-size: 10px; }
/* line 132, ../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; }
/* 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 {
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane {
left: -15px; }
/* 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 {
content: '>'; }
/* 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 {
content: '<'; }
/* line 152, ../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 {
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 {
content: '<'; }
/* 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 {
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 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 */
/* line 175, ../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 179, ../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 185, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right {
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 {
min-width: 0 !important;
width: 0 !important;
visibility: hidden; }
/* line 194, ../sass/tree/_pane.scss */
visibility: hidden;
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 {
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 {
font-size: 0.9em;
padding: 2px 0px;
margin: 2px 0px;
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 {
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 {
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 {
content: '\A';
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 {
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 {
cursor: pointer;
display: inline-block;
@ -5273,13 +5278,13 @@ input[type="text"] {
padding-bottom: 0;
margin: 2px;
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 {
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 {
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 {
color: #49dedb;
font-size: 6px;
@ -5287,13 +5292,13 @@ input[type="text"] {
margin-right: 4px;
text-shadow: black 0 1px 2px;
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 {
content: '>';
font-family: symbolsfont;
font-size: 8px;
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 {
content: '';
display: inline-block; }

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