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
Fixed broken mobile styles;
Removed commented out scss;
This commit is contained in:
Charles Hacskaylo
2015-10-22 18:45:47 -07:00
parent bf17b77e82
commit 3687cc5edd
6 changed files with 327 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -179,11 +179,6 @@
top: 5px;
width: 1px;
}
//}
//&:not(.disabled):hover:before {
// @include trans-prop-nice("border-color", 25ms);
// border-color: $colorGrippyInteriorHover;
//}
}
@mixin boxIncised($sVal: 0.6, $inset: 5px) {

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

@@ -104,64 +104,66 @@ $pad: $interiorMargin * $baseRatio;
.mini-tab {
// Meant to be used as pane hide/show control elements in concert with mct-splitter
@extend .ui-symbol;
@include trans-prop-nice(left, 150ms);
//@include test(green);
$iconD: 12px;
$arwD: 7px;
$c: pullForward($colorBodyBg, 15%);
color: $c;
cursor: pointer;
display: block;
position: absolute;
font-size: $iconD;
line-height: $iconD;
height: $iconD; width: $iconD;
&:hover {
color: pullForward($c, 20%);
&:after {
color: $colorKey;
}
}
&:before,
&:after {
@include trans-prop-nice(color, 200ms);
display: block;
position: absolute;
}
&:before {
// Always the arrow icon
@include desktop {
@include trans-prop-nice(left, 150ms);
//@include test(green);
font-size: $arwD;
height: 100%; width: $arwD;
}
&:after {
// Representative icon
//@include test(red);
width: 100%;
height: 100%;
}
$iconD: 12px;
$arwD: 7px;
$c: pullForward($colorBodyBg, 15%);
color: $c;
cursor: pointer;
display: block;
position: absolute;
font-size: $iconD;
line-height: $iconD;
height: $iconD; width: $iconD;
&.anchor-left {
// < []
$xpos: (1px + $arwD) * -1;
&:before {
content:'\3c';
left: $xpos;
&:hover {
color: pullForward($c, 20%);
&:after {
color: $colorKey;
}
}
&:hover:before { left: $xpos - 3; }
}
&.anchor-right {
// [] >
$xpos: $iconD + 2px;
&:before {
content:'\3e';
left: $xpos;
&:before,
&:after {
@include trans-prop-nice(color, 200ms);
display: block;
position: absolute;
}
&:before {
// Always the arrow icon
@include trans-prop-nice(left, 150ms);
//@include test(green);
font-size: $arwD;
height: 100%; width: $arwD;
}
&:after {
// Representative icon
//@include test(red);
width: 100%;
height: 100%;
}
&.anchor-left {
// < []
$xpos: (1px + $arwD) * -1;
&:before {
content:'\3c';
left: $xpos;
}
&:hover:before { left: $xpos - 3; }
}
&.anchor-right {
// [] >
$xpos: $iconD + 2px;
&:before {
content:'\3e';
left: $xpos;
}
&:hover:before { left: $xpos + 3; }
}
&:hover:before { left: $xpos + 3; }
}
}

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

@@ -80,11 +80,7 @@
// Sets the left tree menu when the tree is shown.
.pane.left.treeview {
//@include trans-prop-nice(opacity, .4s);
@include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
//opacity: 1;
//display: block !important;
//width: auto !important; // CH CO
right: auto !important;
width: $proporMenuWithView !important;
}
@@ -95,11 +91,12 @@
}
.toggle-tree {
color: $colorKey !important;
font-size: 110%;
position: absolute;
top: $bodyMargin + 2;
left: $bodyMargin;
&:before {
&:after {
content:'m' !important;
}
}

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

@@ -252,36 +252,30 @@
top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
}
}
.mini-tab.toggle-pane {
$h: $ueTopBarH;
$paneOffset: $interiorMarginLg * -3;
//font-size: 0.7rem;
//position: absolute;
//height: $h;
//line-height: $h;
top: 5px;
z-index: 2;
&.toggle-tree.anchor-left {
//@include test(green);
left: $paneOffset;
/* &:hover {
left: $paneOffset - 2;
}*/
&:after {
content:'F';
@include desktop {
top: 5px;
&.toggle-tree.anchor-left {
//@include test(green);
left: $paneOffset;
&:after {
content: 'F';
}
}
}
&.toggle-inspect.anchor-right {
$xpos: $paneOffset + $interiorMargin;
right: $xpos;
/* &:hover {
right: $xpos - 2;
}*/
&:after {
content:'F'; //\e612
&.toggle-inspect.anchor-right {
$xpos: $paneOffset + $interiorMargin;
right: $xpos;
&:after {
content: '\e608';
}
}
}
}
&.items {
.object-browse-bar {
.left.abs,