alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
open #90
Animation, styles, hide-show added panes and splitters;
Finessed spacing;
trans-prop* mixins normalized and added delay arg;
This commit is contained in:
Charles Hacskaylo
2015-10-23 10:52:28 -07:00
parent 827e1af581
commit a283a2a0d3
9 changed files with 584 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
platform/commonUI/general/res/sass/_constants.scss
View File

@@ -47,6 +47,7 @@ $ueBrowseRightPaneInspectW: 10%;
$ueEditLeftPaneW: 75%;
$treeSearchInputBarH: 25px;
$ueTimeControlH: (33px, 20px, 20px);
$ueCollapsedEdgeMargin: 15px;
// Overlay
$ovrTopBarH: 60px;
$ovrFooterH: 30px;

17
platform/commonUI/general/res/sass/_mixins.scss
View File

@@ -41,36 +41,41 @@
width: $d;
}
@mixin trans-prop-nice($props, $t: 500ms) {
@mixin trans-prop-nice($prop, $t: 500ms, $delay: 0) {
// This only works for a single property right now
@if $t == 0 {
@include transition-property(none);
} @else {
@include transition-property($props);
@include transition-property($prop);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
}
@mixin trans-prop-nice-fade($t: 0.5s) {
@mixin trans-prop-nice-fade($t: 500ms, $delay: 0) {
@if $t == 0 {
@include transition-property(none);
} @else {
@include transition-property(visibility, opacity, background-color, border-color);
@include transition-property(opacity, background-color, border-color, color);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
}
@mixin trans-prop-nice-resize-h($t: 0.5s) {
@mixin trans-prop-nice-resize-h($t: 500ms, $delay: 0) {
@include transition-property(height, bottom, top);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
@mixin trans-prop-nice-resize-w($t: 0.5s) {
@mixin trans-prop-nice-resize-w($t: 500ms, $delay: 0) {
@include transition-property(width, left, right);
@include transition-duration($t);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
@mixin triangle-right($size, $color) {

4
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@@ -109,8 +109,8 @@ $pad: $interiorMargin * $baseRatio;
//@include test(green);
$iconD: 12px;
$arwD: 7px;
$arwOffsetX: 1px;
$arwAnimOffsetX: 3px;
$arwOffsetX: 0px;
$arwAnimOffsetX: 2px;
$arwToLeftAnimX: -1 * $arwAnimOffsetX;
$arwToRightAnimX: $arwAnimOffsetX;
$arwToLeftX: ($arwOffsetX + $arwD) * -1;

8
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@@ -32,7 +32,7 @@
background-color: $colorMobilePaneLeft;
}
.pane.right-repr {
.pane.right.items {
//@include test();
@include slMenuTransitions;
margin-left: 0 !important;
@@ -85,7 +85,7 @@
width: $proporMenuWithView !important;
}
// Sets the right representation when the tree is shown.
.pane.right-repr {
.pane.right.items {
left: $proporMenuWithView !important;
}
}
@@ -147,9 +147,9 @@
.pane.left.treeview {
width: $proporMenuOnly !important;
}
.pane.right-repr {
.pane.right.items {
left: 0 !important;
@include webkitProp(transform, translateX($proporMenuOnly));
@include transform(translateX($proporMenuOnly));
#content-area {
opacity: 0;
}

57
platform/commonUI/general/res/sass/user-environ/_layout.scss
View File

@@ -211,7 +211,7 @@
max-width: 800px;
width: $ueBrowseLeftPaneTreeW;
}
&.t-inspector.right {
&.t-inspect.right {
min-width: 150px;
max-width: 800px;
width: $ueBrowseRightPaneInspectW;
@@ -232,11 +232,6 @@
}
}
.pane:not(.resizing) {
// Add transition CSS
@include trans-prop-nice-resize-w(250ms);
}
.pane {
position: absolute;
&.treeview.left {
@@ -271,7 +266,7 @@
content: 'F';
}
&.collapsed {
left: -1 * $bodyMargin;
left: (-1 * $bodyMargin) - $ueCollapsedEdgeMargin;
}
}
&.toggle-inspect.anchor-right {
@@ -281,7 +276,7 @@
content: '\e608';
}
&.collapsed {
right: -1 * $interiorMargin;
right: -1 * $interiorMargin - $ueCollapsedEdgeMargin;
}
}
}
@@ -391,21 +386,53 @@
// classes used for the left menu and the
// right representation.
.pane-tree-hidden {
@include user-select(none);
// Sets the left tree menu when the tree is hidden.
.pane.left.treeview {
.pane.left.treeview,
.splitter-treeview {
opacity: 0;
}
// Sets the right represenation when the tree is hidden.
.pane.right-repr {
left: 0 !important;
// Sets the right representation when the tree is hidden.
.pane.right.items {
left: $ueCollapsedEdgeMargin !important;
}
}
.pane-tree-showing {
// Sets the left tree menu when the tree is shown.
.pane.left.treeview {
@include trans-prop-nice(opacity, .4s);
.pane.left.treeview,
.splitter-treeview {
@include trans-prop-nice-fade(250ms, 250ms);
opacity: 1;
}
}
.pane-inspect-showing {
.l-object-and-inspector {
.pane.right,
.splitter-inspect {
@include trans-prop-nice-fade(250ms, 250ms);
opacity: 1;
}
}
}
.pane-inspect-hidden {
.l-object-and-inspector {
.pane.right,
.splitter-inspect {
opacity: 0;
}
.pane.left {
right: $ueCollapsedEdgeMargin !important;
}
}
}
.pane.right.t-inspect {
@include test(orange, 0.3); // TEMP!
}
@include desktop {
.pane:not(.resizing) {
@include trans-prop-nice-resize-w(250ms);
}
}