[Frontend] Manual re-do of collapse/expand panes

open #90
Added code to MCTSplitter and MCTSplitPane to allow
toggling of CSS class 'resizing' on pane elements when
the user is actively using the splitter;
Added resize transition animation to split pane elements
when user not actively resizing;
This commit is contained in:
Charles Hacskaylo 2015-10-23 09:18:59 -07:00
parent 57f11a9767
commit 827e1af581
6 changed files with 152 additions and 93 deletions

View File

@ -36,6 +36,9 @@
border-color: $colorGrippyInteriorHover !important; border-color: $colorGrippyInteriorHover !important;
} }
} }
&:active {
background-color: pullForward($b, 5%);
}
} }
&.horizontal { &.horizontal {
// Slides vertically up and down, splitting the element horizontally // Slides vertically up and down, splitting the element horizontally

View File

@ -232,6 +232,11 @@
} }
} }
.pane:not(.resizing) {
// Add transition CSS
@include trans-prop-nice-resize-w(250ms);
}
.pane { .pane {
position: absolute; position: absolute;
&.treeview.left { &.treeview.left {

View File

@ -178,6 +178,14 @@ define(
return position; return position;
} }
// Dynamically apply a CSS class to elements when the user is actively resizing
function splitterState(state) {
var children = $element.children();
for (var i = 0; i < children.length; i++) {
children.eq(i).toggleClass('resizing');
}
}
// Make sure anchor parameter is something we know // Make sure anchor parameter is something we know
if (!ANCHORS[anchorKey]) { if (!ANCHORS[anchorKey]) {
$log.warn(ANCHOR_WARNING_MESSAGE); $log.warn(ANCHOR_WARNING_MESSAGE);
@ -208,6 +216,7 @@ define(
// Interface exposed by controller, for mct-splitter to user // Interface exposed by controller, for mct-splitter to user
return { return {
position: getSetPosition, position: getSetPosition,
action: splitterState,
anchor: function () { anchor: function () {
return anchor; return anchor;
} }

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",
@ -53,6 +54,7 @@ define(
startMove: function () { startMove: function () {
var splitter = element[0]; var splitter = element[0];
initialPosition = mctSplitPane.position(); initialPosition = mctSplitPane.position();
mctSplitPane.action('startMove');
}, },
// Handle user changes to splitter position // Handle user changes to splitter position
move: function (delta) { move: function (delta) {
@ -63,6 +65,10 @@ define(
// Update the position of this splitter // Update the position of this splitter
mctSplitPane.position(initialPosition + pixelDelta); mctSplitPane.position(initialPosition + pixelDelta);
},
// Grab the event when the user is done moving the splitter and pass it on
endMove: function() {
mctSplitPane.action('endMove');
} }
}; };
} }

View File

@ -917,27 +917,30 @@ mct-container {
/* line 34, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 34, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter:hover:after { .split-layout .splitter:hover:after {
border-color: #0099cc !important; } border-color: #0099cc !important; }
/* line 40, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 39, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter:active {
background-color: #525252; }
/* line 43, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal { .split-layout.horizontal {
overflow: hidden; } overflow: hidden; }
/* line 43, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 46, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane { .split-layout.horizontal .pane {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 46, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 49, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.top { .split-layout.horizontal .pane.top {
bottom: auto; } bottom: auto; }
/* line 49, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 52, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.bottom { .split-layout.horizontal .pane.bottom {
top: auto; } top: auto; }
/* line 53, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 56, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal > .splitter { .split-layout.horizontal > .splitter {
cursor: row-resize; cursor: row-resize;
left: 0; left: 0;
right: 0; right: 0;
width: auto; width: auto;
height: 5px; } height: 5px; }
/* line 54, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 57, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal > .splitter:after { .split-layout.horizontal > .splitter:after {
-moz-transition-property: "border-color"; -moz-transition-property: "border-color";
-o-transition-property: "border-color"; -o-transition-property: "border-color";
@ -961,22 +964,22 @@ mct-container {
left: 5px; left: 5px;
right: 5px; right: 5px;
height: 1px; } height: 1px; }
/* line 65, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 68, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane { .split-layout.vertical .pane {
top: 0; top: 0;
bottom: 0; } bottom: 0; }
/* line 68, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 71, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.left { .split-layout.vertical .pane.left {
right: auto; } right: auto; }
/* line 71, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 74, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.right { .split-layout.vertical .pane.right {
left: auto; } left: auto; }
/* line 75, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 78, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter { .split-layout.vertical > .splitter {
bottom: 0; bottom: 0;
cursor: col-resize; cursor: col-resize;
width: 5px; } width: 5px; }
/* line 79, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 82, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter:after { .split-layout.vertical > .splitter:after {
-moz-transition-property: "border-color"; -moz-transition-property: "border-color";
-o-transition-property: "border-color"; -o-transition-property: "border-color";
@ -1001,11 +1004,11 @@ mct-container {
top: 5px; top: 5px;
width: 1px; } width: 1px; }
/* line 86, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 89, ../../../../general/res/sass/helpers/_splitter.scss */
.browse-area .splitter { .browse-area .splitter {
top: 0; } top: 0; }
/* line 90, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 93, ../../../../general/res/sass/helpers/_splitter.scss */
.edit-area .splitter { .edit-area .splitter {
top: 0; } top: 0; }
@ -3620,50 +3623,65 @@ span.req {
height: 30%; } height: 30%; }
/* line 235, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) {
-moz-transition-property: width, left, right;
-o-transition-property: width, left, right;
-webkit-transition-property: width, left, right;
transition-property: width, left, right;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
/* line 240, ../../../../general/res/sass/user-environ/_layout.scss */
.pane { .pane {
position: absolute; } position: absolute; }
/* line 238, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 243, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder { .pane.treeview.left .create-btn-holder {
bottom: auto; bottom: auto;
top: 0; top: 0;
height: 24px; } height: 24px; }
/* line 242, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder .wrapper.menu-element { .pane.treeview.left .create-btn-holder .wrapper.menu-element {
position: absolute; position: absolute;
bottom: 5px; } bottom: 5px; }
/* line 247, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 252, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .search-holder { .pane.treeview.left .search-holder {
top: 34px; } top: 34px; }
/* line 250, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 255, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder { .pane.treeview.left .tree-holder {
overflow: auto; overflow: auto;
top: 64px; } top: 64px; }
/* line 256, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane { .pane .mini-tab.toggle-pane {
z-index: 2; } z-index: 2; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 256, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane { .pane .mini-tab.toggle-pane {
top: 5px; } top: 5px; }
/* line 262, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 267, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-tree.anchor-left { .pane .mini-tab.toggle-pane.toggle-tree.anchor-left {
left: -30px; } left: -30px; }
/* line 265, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 270, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-tree.anchor-left:after { .pane .mini-tab.toggle-pane.toggle-tree.anchor-left:after {
content: 'F'; } content: 'F'; }
/* line 268, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 273, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-tree.anchor-left.collapsed { .pane .mini-tab.toggle-pane.toggle-tree.anchor-left.collapsed {
left: -10px; } left: -10px; }
/* line 272, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-inspect.anchor-right { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right {
right: -25px; } right: -25px; }
/* line 275, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-inspect.anchor-right:after { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right:after {
content: '\e608'; } content: '\e608'; }
/* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 283, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-inspect.anchor-right.collapsed { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right.collapsed {
right: -5px; } } right: -5px; } }
/* line 287, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager, .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
.pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
.l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@ -3676,31 +3694,31 @@ span.req {
.s-menu-btn .pane.items .object-browse-bar span.right.l-click-area { .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
top: auto; } top: auto; }
/* line 298, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 303, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 306, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child { .split-layout.horizontal > .pane:first-child {
margin-top: 0; } margin-top: 0; }
/* line 308, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 313, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane { .split-layout.vertical > .pane {
margin-left: 5px; } margin-left: 5px; }
/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 316, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder { .split-layout.vertical > .pane > .holder {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child { .split-layout.vertical > .pane:first-child {
margin-left: 0; } margin-left: 0; }
/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder { .split-layout.vertical > .pane:first-child .holder {
right: 3px; } right: 3px; }
/* line 325, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
overflow: hidden; overflow: hidden;
top: 34px; } top: 34px; }
/* line 328, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 333, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder > ng-include { .object-holder > ng-include {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
@ -3710,11 +3728,11 @@ span.req {
left: 0; left: 0;
width: auto; width: auto;
height: auto; } height: auto; }
/* line 332, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder.l-controls-visible.l-time-controller-visible { .object-holder.l-controls-visible.l-time-controller-visible {
bottom: 88px; } bottom: 88px; }
/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 343, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn, .top-bar .buttons-main .s-menu-btn,
@ -3726,12 +3744,12 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 351, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 356, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher, .object-browse-bar .view-switcher,
.top-bar .view-switcher { .top-bar .view-switcher {
margin-right: 20px; } margin-right: 20px; }
/* line 356, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 361, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
@ -3747,41 +3765,41 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 364, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 369, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 20px; }
/* line 366, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 371, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back { .object-browse-bar .left .l-back {
display: inline-block; display: inline-block;
float: left; float: left;
margin-right: 10px; } margin-right: 10px; }
/* line 374, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex { .l-flex {
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
flex-flow: row nowrap; flex-flow: row nowrap;
-webkit-flex-flow: row nowrap; } -webkit-flex-flow: row nowrap; }
/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 382, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .left { .l-flex .left {
flex: 1 1 0; flex: 1 1 0;
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
padding-right: 10px; } padding-right: 10px; }
/* line 388, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 393, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden { .pane-tree-hidden {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none; }
/* line 391, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 396, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.left.treeview { .pane-tree-hidden .pane.left.treeview {
opacity: 0; } opacity: 0; }
/* line 395, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 400, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right-repr { .pane-tree-hidden .pane.right-repr {
left: 0 !important; } left: 0 !important; }
/* line 402, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 407, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .pane.left.treeview { .pane-tree-showing .pane.left.treeview {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;

View File

@ -914,27 +914,30 @@ mct-container {
/* line 34, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 34, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter:hover:after { .split-layout .splitter:hover:after {
border-color: #fcfcfc !important; } border-color: #fcfcfc !important; }
/* line 40, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 39, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout .splitter:active {
background-color: #898989; }
/* line 43, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal { .split-layout.horizontal {
overflow: hidden; } overflow: hidden; }
/* line 43, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 46, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane { .split-layout.horizontal .pane {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 46, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 49, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.top { .split-layout.horizontal .pane.top {
bottom: auto; } bottom: auto; }
/* line 49, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 52, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal .pane.bottom { .split-layout.horizontal .pane.bottom {
top: auto; } top: auto; }
/* line 53, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 56, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal > .splitter { .split-layout.horizontal > .splitter {
cursor: row-resize; cursor: row-resize;
left: 0; left: 0;
right: 0; right: 0;
width: auto; width: auto;
height: 5px; } height: 5px; }
/* line 54, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 57, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.horizontal > .splitter:after { .split-layout.horizontal > .splitter:after {
-moz-transition-property: "border-color"; -moz-transition-property: "border-color";
-o-transition-property: "border-color"; -o-transition-property: "border-color";
@ -958,22 +961,22 @@ mct-container {
left: 5px; left: 5px;
right: 5px; right: 5px;
height: 1px; } height: 1px; }
/* line 65, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 68, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane { .split-layout.vertical .pane {
top: 0; top: 0;
bottom: 0; } bottom: 0; }
/* line 68, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 71, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.left { .split-layout.vertical .pane.left {
right: auto; } right: auto; }
/* line 71, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 74, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical .pane.right { .split-layout.vertical .pane.right {
left: auto; } left: auto; }
/* line 75, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 78, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter { .split-layout.vertical > .splitter {
bottom: 0; bottom: 0;
cursor: col-resize; cursor: col-resize;
width: 5px; } width: 5px; }
/* line 79, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 82, ../../../../general/res/sass/helpers/_splitter.scss */
.split-layout.vertical > .splitter:after { .split-layout.vertical > .splitter:after {
-moz-transition-property: "border-color"; -moz-transition-property: "border-color";
-o-transition-property: "border-color"; -o-transition-property: "border-color";
@ -998,11 +1001,11 @@ mct-container {
top: 5px; top: 5px;
width: 1px; } width: 1px; }
/* line 86, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 89, ../../../../general/res/sass/helpers/_splitter.scss */
.browse-area .splitter { .browse-area .splitter {
top: 0; } top: 0; }
/* line 90, ../../../../general/res/sass/helpers/_splitter.scss */ /* line 93, ../../../../general/res/sass/helpers/_splitter.scss */
.edit-area .splitter { .edit-area .splitter {
top: 0; } top: 0; }
@ -3567,50 +3570,65 @@ span.req {
height: 30%; } height: 30%; }
/* line 235, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
.pane:not(.resizing) {
-moz-transition-property: width, left, right;
-o-transition-property: width, left, right;
-webkit-transition-property: width, left, right;
transition-property: width, left, right;
-moz-transition-duration: 250ms;
-o-transition-duration: 250ms;
-webkit-transition-duration: 250ms;
transition-duration: 250ms;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out; }
/* line 240, ../../../../general/res/sass/user-environ/_layout.scss */
.pane { .pane {
position: absolute; } position: absolute; }
/* line 238, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 243, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder { .pane.treeview.left .create-btn-holder {
bottom: auto; bottom: auto;
top: 0; top: 0;
height: 24px; } height: 24px; }
/* line 242, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 247, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .create-btn-holder .wrapper.menu-element { .pane.treeview.left .create-btn-holder .wrapper.menu-element {
position: absolute; position: absolute;
bottom: 5px; } bottom: 5px; }
/* line 247, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 252, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .search-holder { .pane.treeview.left .search-holder {
top: 34px; } top: 34px; }
/* line 250, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 255, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.treeview.left .tree-holder { .pane.treeview.left .tree-holder {
overflow: auto; overflow: auto;
top: 64px; } top: 64px; }
/* line 256, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane { .pane .mini-tab.toggle-pane {
z-index: 2; } z-index: 2; }
@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
/* line 256, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane { .pane .mini-tab.toggle-pane {
top: 5px; } top: 5px; }
/* line 262, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 267, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-tree.anchor-left { .pane .mini-tab.toggle-pane.toggle-tree.anchor-left {
left: -30px; } left: -30px; }
/* line 265, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 270, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-tree.anchor-left:after { .pane .mini-tab.toggle-pane.toggle-tree.anchor-left:after {
content: 'F'; } content: 'F'; }
/* line 268, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 273, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-tree.anchor-left.collapsed { .pane .mini-tab.toggle-pane.toggle-tree.anchor-left.collapsed {
left: -10px; } left: -10px; }
/* line 272, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-inspect.anchor-right { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right {
right: -25px; } right: -25px; }
/* line 275, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-inspect.anchor-right:after { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right:after {
content: '\e608'; } content: '\e608'; }
/* line 278, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 283, ../../../../general/res/sass/user-environ/_layout.scss */
.pane .mini-tab.toggle-pane.toggle-inspect.anchor-right.collapsed { .pane .mini-tab.toggle-pane.toggle-inspect.anchor-right.collapsed {
right: -5px; } } right: -5px; } }
/* line 287, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
.pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager, .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
.pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
.l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@ -3623,31 +3641,31 @@ span.req {
.s-menu-btn .pane.items .object-browse-bar span.right.l-click-area { .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
top: auto; } top: auto; }
/* line 298, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 303, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane { .split-layout.horizontal > .pane {
margin-top: 5px; } margin-top: 5px; }
/* line 301, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 306, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.horizontal > .pane:first-child { .split-layout.horizontal > .pane:first-child {
margin-top: 0; } margin-top: 0; }
/* line 308, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 313, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane { .split-layout.vertical > .pane {
margin-left: 5px; } margin-left: 5px; }
/* line 311, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 316, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane > .holder { .split-layout.vertical > .pane > .holder {
left: 0; left: 0;
right: 0; } right: 0; }
/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child { .split-layout.vertical > .pane:first-child {
margin-left: 0; } margin-left: 0; }
/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
.split-layout.vertical > .pane:first-child .holder { .split-layout.vertical > .pane:first-child .holder {
right: 3px; } right: 3px; }
/* line 325, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder { .object-holder {
overflow: hidden; overflow: hidden;
top: 34px; } top: 34px; }
/* line 328, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 333, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder > ng-include { .object-holder > ng-include {
overflow: auto; overflow: auto;
position: absolute; position: absolute;
@ -3657,11 +3675,11 @@ span.req {
left: 0; left: 0;
width: auto; width: auto;
height: auto; } height: auto; }
/* line 332, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 337, ../../../../general/res/sass/user-environ/_layout.scss */
.object-holder.l-controls-visible.l-time-controller-visible { .object-holder.l-controls-visible.l-time-controller-visible {
bottom: 88px; } bottom: 88px; }
/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 343, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn, .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
.top-bar .buttons-main .s-btn, .top-bar .buttons-main .s-btn,
.top-bar .buttons-main .s-menu-btn, .top-bar .buttons-main .s-menu-btn,
@ -3673,12 +3691,12 @@ span.req {
line-height: 25px; line-height: 25px;
vertical-align: top; } vertical-align: top; }
/* line 351, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 356, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .view-switcher, .object-browse-bar .view-switcher,
.top-bar .view-switcher { .top-bar .view-switcher {
margin-right: 20px; } margin-right: 20px; }
/* line 356, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 361, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar { .object-browse-bar {
overflow: visible; overflow: visible;
position: absolute; position: absolute;
@ -3694,41 +3712,41 @@ span.req {
height: 24px; height: 24px;
line-height: 24px; line-height: 24px;
white-space: nowrap; } white-space: nowrap; }
/* line 364, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 369, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left { .object-browse-bar .left {
padding-right: 20px; } padding-right: 20px; }
/* line 366, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 371, ../../../../general/res/sass/user-environ/_layout.scss */
.object-browse-bar .left .l-back { .object-browse-bar .left .l-back {
display: inline-block; display: inline-block;
float: left; float: left;
margin-right: 10px; } margin-right: 10px; }
/* line 374, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 379, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex { .l-flex {
display: flex; display: flex;
display: -webkit-flex; display: -webkit-flex;
flex-flow: row nowrap; flex-flow: row nowrap;
-webkit-flex-flow: row nowrap; } -webkit-flex-flow: row nowrap; }
/* line 377, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 382, ../../../../general/res/sass/user-environ/_layout.scss */
.l-flex .left { .l-flex .left {
flex: 1 1 0; flex: 1 1 0;
-webkit-flex: 1 1 0; -webkit-flex: 1 1 0;
padding-right: 10px; } padding-right: 10px; }
/* line 388, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 393, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden { .pane-tree-hidden {
-moz-user-select: -moz-none; -moz-user-select: -moz-none;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; } user-select: none; }
/* line 391, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 396, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.left.treeview { .pane-tree-hidden .pane.left.treeview {
opacity: 0; } opacity: 0; }
/* line 395, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 400, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-hidden .pane.right-repr { .pane-tree-hidden .pane.right-repr {
left: 0 !important; } left: 0 !important; }
/* line 402, ../../../../general/res/sass/user-environ/_layout.scss */ /* line 407, ../../../../general/res/sass/user-environ/_layout.scss */
.pane-tree-showing .pane.left.treeview { .pane-tree-showing .pane.left.treeview {
-moz-transition-property: opacity; -moz-transition-property: opacity;
-o-transition-property: opacity; -o-transition-property: opacity;