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

[Inspector] Splitter drag temporarily removes transition

Browse Source 
Dragging mct-splitter will remove a 'slide'
class from the splitter's sibling while a
drag is in process, and then replace the
'slide' class. This allows the left and right
panes to have slide transitions for open/close,
but not when the splitter is being dragged. #73.
This commit is contained in:
slhale 2015-08-26 10:22:14 -07:00
parent 86d398d8ff
commit 7119f6f3a1
4 changed files with 182 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,12 +60,12 @@
ng-class="{inactive: !paneModel.leftPane}"> ng-class="{inactive: !paneModel.leftPane}">
</mct-splitter> </mct-splitter>
<div class='split-pane-component secondary-split pane right' <div class='split-pane-component secondary-split pane right slide'
ng-class='{leftInactive: !paneModel.leftPane}'> 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 slide'
ng-class='{rightInactive: !paneModel.rightPane}'> ng-class='{rightInactive: !paneModel.rightPane}'>
<div class='holder abs' <div class='holder abs'
id='content-area'> id='content-area'>

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

@ -5161,22 +5161,22 @@ input[type="text"] {
* 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.
*****************************************************************************/ *****************************************************************************/
/* line 30, ../sass/tree/_pane.scss */ /* line 31, ../sass/tree/_pane.scss */
.pane.left.inactive { .pane.left.inactive {
width: 0 !important; width: 0 !important;
min-width: 0 !important; } min-width: 0 !important; }
/* line 35, ../sass/tree/_pane.scss */ /* line 36, ../sass/tree/_pane.scss */
.pane.left.inactive .tree-holder { .pane.left.inactive .tree-holder {
padding-right: 0; } padding-right: 0; }
/* line 40, ../sass/tree/_pane.scss */ /* line 41, ../sass/tree/_pane.scss */
.pane.left.inactive .search-holder { .pane.left.inactive .search-holder {
display: none; } display: none; }
/* line 46, ../sass/tree/_pane.scss */ /* line 47, ../sass/tree/_pane.scss */
.pane.left .create-btn.major { .pane.left .create-btn.major {
top: 0; top: 0;
left: 0; left: 0;
transition: all 0.35s; } transition: all 0.35s; }
/* line 51, ../sass/tree/_pane.scss */ /* line 52, ../sass/tree/_pane.scss */
.pane.left .create-btn.major.inactivePane { .pane.left .create-btn.major.inactivePane {
top: 0; top: 0;
left: 0; left: 0;
@ -5189,164 +5189,162 @@ input[type="text"] {
line-height: 14px; line-height: 14px;
left: -11px; left: -11px;
top: 20px; } top: 20px; }
/* line 69, ../sass/tree/_pane.scss */ /* line 70, ../sass/tree/_pane.scss */
.pane.left .create-btn.major.inactivePane span { .pane.left .create-btn.major.inactivePane span {
display: none; } display: none; }
/* line 77, ../sass/tree/_pane.scss */ /* line 78, ../sass/tree/_pane.scss */
.splitter-bar.splitter { .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 84, ../sass/tree/_pane.scss */ /* line 85, ../sass/tree/_pane.scss */
.splitter-bar.splitter.inactive { .splitter-bar.splitter.inactive {
visibility: hidden; visibility: hidden;
opacity: 0; } opacity: 0; }
/* line 88, ../sass/tree/_pane.scss */ /* line 89, ../sass/tree/_pane.scss */
.splitter-bar.splitter.inactive:before { .splitter-bar.splitter.inactive:before {
border-width: 0; } border-width: 0; }
/* line 96, ../sass/tree/_pane.scss */ /* line 97, ../sass/tree/_pane.scss */
.splitter-bar.left.splitter.inactive { .splitter-bar.left.splitter.inactive {
transition: opacity 0s, visibility 0s; } transition: opacity 0s, visibility 0s; }
/* line 102, ../sass/tree/_pane.scss */ /* line 106, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right { .split-pane-component.secondary-split.pane.right.leftInactive {
transition: left 0.35s; left: 0 !important; }
transition-timing-function: ease-out; } /* line 109, ../sass/tree/_pane.scss */
/* line 107, ../sass/tree/_pane.scss */ .split-pane-component.secondary-split.pane.right.slide {
.split-pane-component.secondary-split.pane.right.leftInactive { transition: left 0.35s; }
left: 0 !important; } /* line 116, ../sass/tree/_pane.scss */
/* line 111, ../sass/tree/_pane.scss */ .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane.rightInactive {
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane { right: 0 !important; }
transition: right 0.35s; /* line 119, ../sass/tree/_pane.scss */
transition-timing-function: ease-out; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane.slide {
/* line 116, ../sass/tree/_pane.scss */ transition: right 0.35s; }
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane.rightInactive { /* line 124, ../sass/tree/_pane.scss */
right: 0 !important; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar {
/* line 121, ../sass/tree/_pane.scss */ position: relative; }
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar { /* line 127, ../sass/tree/_pane.scss */
position: relative; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs {
/* line 124, ../sass/tree/_pane.scss */ position: relative;
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs { cursor: pointer;
position: relative; font-family: symbolsfont;
cursor: pointer; background-color: #595959;
font-family: symbolsfont; width: 13px !important;
background-color: #595959; height: 16px;
width: 13px !important; line-height: 16px;
height: 16px; font-size: 10px;
line-height: 16px; text-align: center; }
font-size: 10px; /* line 141, ../sass/tree/_pane.scss */
text-align: center; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left {
/* line 138, ../sass/tree/_pane.scss */ left: -12px;
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left { top: 3px;
left: -12px; border-top-right-radius: 2px;
top: 3px; border-bottom-right-radius: 2px; }
border-top-right-radius: 2px; /* line 149, ../sass/tree/_pane.scss */
border-bottom-right-radius: 2px; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane {
/* line 146, ../sass/tree/_pane.scss */ left: -15px; }
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane { /* line 151, ../sass/tree/_pane.scss */
left: -15px; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane:after {
/* line 148, ../sass/tree/_pane.scss */ content: 'F'; }
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane:after { /* line 155, ../sass/tree/_pane.scss */
content: 'F'; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.activePane:after {
/* line 152, ../sass/tree/_pane.scss */ content: '<'; }
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.activePane:after { /* line 161, ../sass/tree/_pane.scss */
content: '<'; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right {
/* line 158, ../sass/tree/_pane.scss */ float: right;
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right { right: -9px;
float: right; top: -13px;
right: -9px; border-top-left-radius: 2px;
top: -13px; border-bottom-left-radius: 2px; }
border-top-left-radius: 2px; /* line 170, ../sass/tree/_pane.scss */
border-bottom-left-radius: 2px; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane {
/* line 167, ../sass/tree/_pane.scss */ right: -12px; }
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane { /* line 172, ../sass/tree/_pane.scss */
right: -12px; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane:after {
/* line 169, ../sass/tree/_pane.scss */ content: 'G'; }
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane:after { /* line 176, ../sass/tree/_pane.scss */
content: 'G'; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.activePane:after {
/* line 173, ../sass/tree/_pane.scss */ content: '>'; }
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.activePane:after { /* line 184, ../sass/tree/_pane.scss */
content: '>'; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .items-select {
/* line 181, ../sass/tree/_pane.scss */ margin-left: 10px; }
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .items-select { /* line 188, ../sass/tree/_pane.scss */
margin-left: 10px; } .split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .btn-bar.right {
/* line 185, ../sass/tree/_pane.scss */ margin-right: 10px; }
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .btn-bar.right { /* line 194, ../sass/tree/_pane.scss */
margin-right: 10px; } .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right {
/* line 191, ../sass/tree/_pane.scss */ min-width: 150px; }
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right { /* line 198, ../sass/tree/_pane.scss */
min-width: 150px; } .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right.inactive {
/* line 195, ../sass/tree/_pane.scss */ min-width: 0 !important;
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right.inactive { width: 0 !important;
min-width: 0 !important; visibility: hidden;
width: 0 !important; opacity: 0; }
visibility: hidden; /* line 205, ../sass/tree/_pane.scss */
opacity: 0; } .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder {
/* line 202, ../sass/tree/_pane.scss */ overflow-y: auto;
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder { overflow-x: hidden; }
overflow-y: auto; /* line 209, ../sass/tree/_pane.scss */
overflow-x: hidden; } .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder .info-icon {
/* line 206, ../sass/tree/_pane.scss */ color: #0099cc; }
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder .info-icon { /* line 213, ../sass/tree/_pane.scss */
color: #0099cc; } .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li {
/* line 210, ../sass/tree/_pane.scss */ font-size: 0.9em;
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li { padding: 2px 0px;
font-size: 0.9em; margin: 2px 0px;
padding: 2px 0px; border-top: solid 1px grey; }
margin: 2px 0px; /* line 220, ../sass/tree/_pane.scss */
border-top: solid 1px grey; } .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child {
/* line 217, ../sass/tree/_pane.scss */ border-top-width: 0px; }
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child { /* line 225, ../sass/tree/_pane.scss */
border-top-width: 0px; } .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em {
/* line 222, ../sass/tree/_pane.scss */ font-weight: bold;
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em { line-height: 1.25em; }
font-weight: bold; /* line 229, ../sass/tree/_pane.scss */
line-height: 1.25em; } .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em:after {
/* line 226, ../sass/tree/_pane.scss */ content: '\A';
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em:after { white-space: pre; }
content: '\A'; /* line 236, ../sass/tree/_pane.scss */
white-space: pre; } .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location {
/* line 233, ../sass/tree/_pane.scss */ display: inline-block;
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location { max-width: 100%; }
/* line 240, ../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; display: inline-block;
max-width: 100%; } white-space: nowrap;
/* line 237, ../sass/tree/_pane.scss */ transition: background-color 0.2s;
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label { border-radius: 4px;
cursor: pointer; padding: 3px;
display: inline-block; margin: 2px;
white-space: nowrap; max-width: 100%;
transition: background-color 0.2s; text-overflow: ellipsis;
border-radius: 4px; overflow-x: hidden; }
padding: 3px; /* line 247, ../sass/tree/_pane.scss */
margin: 2px; .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label:hover {
max-width: 100%; background-color: #404040; }
text-overflow: ellipsis; /* line 261, ../sass/tree/_pane.scss */
overflow-x: hidden; } .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 {
/* line 244, ../sass/tree/_pane.scss */ font-size: 14px; }
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label:hover { /* line 264, ../sass/tree/_pane.scss */
background-color: #404040; } .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 {
/* line 258, ../sass/tree/_pane.scss */ color: #49dedb;
.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: 6px;
font-size: 14px; } margin-left: -22px;
/* line 261, ../sass/tree/_pane.scss */ margin-right: 9px;
.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 { text-shadow: black 0 1px 2px;
color: #49dedb; z-index: 2; }
font-size: 6px; /* line 278, ../sass/tree/_pane.scss */
margin-left: -22px; .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:after {
margin-right: 9px; content: '>';
text-shadow: black 0 1px 2px; font-family: symbolsfont;
z-index: 2; } font-size: 8px;
/* line 275, ../sass/tree/_pane.scss */ position: relative;
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:after { top: -8px;
content: '>'; left: -4px; }
font-family: symbolsfont; /* line 288, ../sass/tree/_pane.scss */
font-size: 8px; .split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:last-child:after {
position: relative; content: '';
top: -8px; display: inline-block; }
left: -4px; }
/* line 285, ../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; }

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

@ -24,6 +24,7 @@
$transitionTime: 0.35s; // For the left menu open/close $transitionTime: 0.35s; // For the left menu open/close
// Set the left pane (which contains the tree) to have no width to close // Set the left pane (which contains the tree) to have no width to close
// (not display:none because we still need to have access to the create button) // (not display:none because we still need to have access to the create button)
.pane.left { .pane.left {
@ -102,20 +103,22 @@ $transitionTime: 0.35s; // For the left menu open/close
.split-pane-component.secondary-split.pane.right { .split-pane-component.secondary-split.pane.right {
// Sliding transition for open/close of left pane // Sliding transition for open/close of left pane
transition: left $transitionTime;
transition-timing-function: ease-out;
&.leftInactive { &.leftInactive {
left: 0 !important; left: 0 !important;
} }
&.slide {
transition: left $transitionTime;
}
.split-pane-component.items.pane { .split-pane-component.items.pane {
// Sliding transition for open/close of right 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;
} }
&.slide {
transition: right $transitionTime;
}
// Tab buttons close to the splitter bars // Tab buttons close to the splitter bars
.object-browse-bar { .object-browse-bar {

28
platform/commonUI/general/src/directives/MCTSplitter.js
View File

@ -29,7 +29,8 @@ define(
// Pixel width to allocate for the splitter itself // Pixel width to allocate for the splitter itself
var SPLITTER_TEMPLATE = "<div class='abs'" + var SPLITTER_TEMPLATE = "<div class='abs'" +
"mct-drag-down=\"splitter.startMove()\" " + "mct-drag-down=\"splitter.startMove()\" " +
"mct-drag=\"splitter.move(delta)\"></div>", "mct-drag=\"splitter.move(delta)\" " +
"mct-drag-up=\"splitter.endMove()\"></div>",
OFFSETS_BY_EDGE = { OFFSETS_BY_EDGE = {
left: "offsetLeft", left: "offsetLeft",
right: "offsetRight", right: "offsetRight",
@ -44,7 +45,8 @@ define(
*/ */
function MCTSplitter() { function MCTSplitter() {
function link(scope, element, attrs, mctSplitPane) { function link(scope, element, attrs, mctSplitPane) {
var initialPosition; var initialPosition,
slideElement;
element.addClass("splitter"); element.addClass("splitter");
@ -55,8 +57,24 @@ define(
scope.splitter = { scope.splitter = {
// Begin moving this splitter // Begin moving this splitter
startMove: function () { startMove: function () {
var splitter = element[0]; var splitter = element[0],
children = element.parent().children(),
i, j;
// Set initial position
initialPosition = mctSplitPane.position(); initialPosition = mctSplitPane.position();
// Remove sliding class from sibling element so no delay in pane movement
for (i = 0; i < children.length; i += 1) {
for (j = 0; j < children[i].classList.length; j += 1) {
if (children[i].classList[j] === 'slide') {
// Store the element that had the sliding class so
// we can replace it later
slideElement = children[i];
children[i].classList.remove('slide');
}
}
}
}, },
// Handle user changes to splitter position // Handle user changes to splitter position
move: function (delta) { move: function (delta) {
@ -67,6 +85,10 @@ define(
// Update the position of this splitter // Update the position of this splitter
mctSplitPane.position(initialPosition + pixelDelta); mctSplitPane.position(initialPosition + pixelDelta);
},
// Replace sliding class
endMove: function () {
slideElement.classList.add('slide');
} }
}; };
} }