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

[Frontend] Fixed spacing of panes and mini-tabs

Browse Source 
open #90
Splitter spacing now being handled in CSS, so
modded calcs in MCTSplitPane to not add space;
CSS calcs adjusted; comments removed;
This commit is contained in:
Charles Hacskaylo
2015-10-24 18:43:13 -07:00
parent 99c977ce9d
commit 8ee4fc9b71
6 changed files with 182 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,6 +25,8 @@
// 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
//@include test(red);
display: block;
position: absolute;
z-index: 1;
@@ -40,9 +42,14 @@
@include border-radius($splitterEndCr);
}
}
&:not(:active) {
&:after {
@include trans-prop-nice(background-color, 250ms);
}
}
&:active {
&:after {
background: $colorSplitterActive;
background-color: $colorSplitterActive;
}
}

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

@@ -206,6 +206,7 @@
.browse-mode {
.split-layout {
.split-pane-component.pane {
//@include test(green);
&.treeview.left {
min-width: 150px;
max-width: 800px;
@@ -269,15 +270,15 @@
}
.mini-tab.toggle-pane {
//@include test(blue, 0.6);
$paneOffset: -2 * $splitterD;
//@include test(blue, 0.3);
$paneExpandedOffset: $splitterD + $uePaneMiniTabW - $splitterHandleInset;
$paneCollapsedOffset: $bodyMargin + $ueCollapsedPaneEdgeM;
z-index: 5;
@include desktop {
&.toggle-tree.anchor-left {
//@include test(green);
left: 0; //$ox;
@include transform(translateX($paneOffset));
@include transform(translateX(-1 * $paneExpandedOffset));
&:after { content: 'F'; }
&.collapsed {
@include transform(translateX(-1 * $paneCollapsedOffset));
@@ -286,7 +287,7 @@
&.toggle-inspect.anchor-right {
$oCx: -1 * $paneCollapsedOffset;
right: 0; //$ox;
@include transform(translateX(-1 * $paneOffset));
@include transform(translateX($paneExpandedOffset));
&:after { content: '\e608'; }
&.collapsed {
@include transform(translateX($paneCollapsedOffset));

4
platform/commonUI/general/src/directives/MCTSplitPane.js
View File

@@ -132,10 +132,10 @@ define(
// Get actual size (to obey min-width etc.)
firstSize = getSize(first[0]);
first.css(anchor.dimension, firstSize + 'px');
splitter.css(anchor.edge, (firstSize + splitterSize) + 'px');
splitter.css(anchor.edge, firstSize + 'px');
splitter.css(anchor.opposite, "auto");
last.css(anchor.edge, (firstSize + splitterSize * 2) + 'px');
last.css(anchor.edge, (firstSize + splitterSize) + 'px');
last.css(anchor.opposite, "0px");
position = firstSize + splitterSize;