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

[Frontend] Splitter re-styling

Browse Source 
open #90
Significant redo of splitter styling;
This commit is contained in:
Charles Hacskaylo
2015-10-23 20:06:38 -07:00
parent aa3cf70b22
commit 94649b12fd
9 changed files with 301 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,39 +41,39 @@
width: $d;
}
@mixin trans-prop-nice($prop, $t: 500ms, $delay: 0) {
// This only works for a single property right now
@if $t == 0 {
@mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
// Multiple $props must be in parans like this: (left, right)
@if $dur == 0 {
@include transition-property(none);
} @else {
@include transition-property($prop);
@include transition-duration($t);
@include transition-property($props);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
}
@mixin trans-prop-nice-fade($t: 500ms, $delay: 0) {
@if $t == 0 {
@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
@if $dur == 0 {
@include transition-property(none);
} @else {
@include transition-property(opacity, background-color, border-color, color);
@include transition-duration($t);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
}
@mixin trans-prop-nice-resize-h($t: 500ms, $delay: 0) {
@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
@include transition-property(height, bottom, top);
@include transition-duration($t);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
@mixin trans-prop-nice-resize-w($t: 500ms, $delay: 0) {
@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
@include transition-property(width, left, right);
@include transition-duration($t);
@include transition-duration($dur);
@include transition-timing-function(ease-in-out);
@include transition-delay($delay);
}
@@ -162,7 +162,7 @@
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
//&:before {
@include trans-prop-nice("border-color", 25ms);
//@include trans-prop-nice("border-color", 25ms);
content: '';
display: block;
//height: auto;

134
platform/commonUI/general/res/sass/helpers/_splitter.scss
View File

@@ -19,71 +19,87 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
.split-layout {
$b: pullForward($colorBodyBg, $contrastRatioPercent);
.splitter {
background-color: $b;
@include border-radius($splitterEndCr);
@include boxShdw($splitterShdw);
//overflow: hidden;
position: absolute;
z-index: 1;
.splitter {
// Redo the splitter.
// New look is a simple line.
// Main width is used to provide a good click area, and is always transparent
// :after will be a positioned and colored element that is the handle
display: block;
position: absolute;
z-index: 1;
&:after {
// The handle
content:"";
pointer-events: none;
@include absPosDefault(0);
background: $colorSplitterBg;
display: block;
@if $splitterEndCr != 'none' {
@include border-radius($splitterEndCr);
}
}
&:active {
&:after {
background: $colorSplitterActive;
}
}
@if $colorSplitterHover != 'none' {
&:hover {
background-color: $colorSplitterHover;
&:after {
//@include trans-prop-nice("border-color", 25ms);
border-color: $colorGrippyInteriorHover !important;
}
background: $colorSplitterHover;
}
&:active {
background-color: pullForward($b, 5%);
}
}
&.horizontal {
// Slides vertically up and down, splitting the element horizontally
}
}
.split-layout {
&.horizontal {
// Slides vertically up and down, splitting the element horizontally
overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
.pane {
left: 0;
right: 0;
&.top {
bottom: auto;
}
&.bottom {
top: auto;
}
}
>.splitter {
&:after {
@include controlGrippy($colorSplitterInterior, horizontal);
.pane {
left: 0;
right: 0;
&.top {
bottom: auto;
}
cursor: row-resize;
left: 0; right: 0;
width: auto;
height: $splitterW;
}
}
&.vertical {
// Slides horizontally left to right, splitting the element vertically
.pane {
top: 0;
bottom: 0;
&.left {
right: auto;
}
&.right {
left: auto;
}
}
>.splitter {
bottom: 0;
cursor: col-resize;
width: $splitterW;
&:after {
@include controlGrippy($colorBodyBg, vertical);
&.bottom {
top: auto;
}
}
}
}
>.splitter {
cursor: row-resize;
left: 0;
right: 0;
height: $splitterD;
&:after {
top: $splitterHandleInset; bottom: $splitterHandleInset;
}
}
}
&.vertical {
// Slides horizontally left to right, splitting the element vertically
.pane {
top: 0;
bottom: 0;
&.left {
right: auto;
}
&.right {
left: auto;
}
}
>.splitter {
cursor: col-resize;
top: 0;
bottom: 0;
width: $splitterD;
&:after {
left: $splitterHandleInset; right: $splitterHandleInset;
}
}
}
}
.browse-area .splitter {

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

@@ -244,6 +244,11 @@
margin-bottom: $interiorMargin;
}
.primary-pane {
// Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
z-index: 5;
}
&.treeview.left {
.create-btn-holder {
bottom: auto;
@@ -264,7 +269,8 @@
}
.mini-tab.toggle-pane {
$paneOffset: -1 * ($uePaneMiniTabW + $interiorMargin + $splitterW);
//@include test(blue, 0.6);
$paneOffset: -2 * $splitterD;
$paneCollapsedOffset: $bodyMargin + $ueCollapsedPaneEdgeM;
z-index: 2;
@include desktop {
@@ -406,7 +412,7 @@
// Sets the left tree menu when the tree is shown.
.pane.left.treeview,
.splitter-treeview {
@include trans-prop-nice-fade(250ms, 250ms);
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
opacity: 1;
}
}
@@ -415,7 +421,7 @@
.l-object-and-inspector {
.pane.right,
.splitter-inspect {
@include trans-prop-nice-fade(250ms, 250ms);
@include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
opacity: 1;
}
}