ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-22 09:08:43 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

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

Browse Source 
open #90
Major work on new .mini-tab elements, used
as controls to expand/collapse panes;
Cleaned up splitter hover behavior;
Changed mixin controlGrippy to not be tied
to :before;
This commit is contained in:
Charles Hacskaylo
2015-10-22 18:28:25 -07:00
parent 4f27104663
commit 536d5616d4
12 changed files with 855 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
platform/commonUI/general/res/sass/_global.scss
View File

@ -34,10 +34,6 @@
font-style: normal;
}
.ui-symbol {
font-family: 'symbolsfont';
}
/************************** HTML ENTITIES */
a {
color: $colorA;

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

@ -29,6 +29,7 @@
}
.ui-symbol {
font-family: 'symbolsfont';
&.type-icon {
color: $colorObjHdrIc;
}

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

@ -156,32 +156,34 @@
}
@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
&:before {
@include trans-prop-nice("border-color", 0.75s);
content: '';
display: block;
height: auto;
pointer-events: none;
position: absolute;
z-index: 2;
//&:before {
@include trans-prop-nice("border-color", 25ms);
content: '';
display: block;
//height: auto;
pointer-events: none;
position: absolute;
z-index: 2;
@if $direction == "horizontal" {
border-top: $w $style darken($b, 15%);
top: 2px;
left: 5px;
right: 5px;
@if $direction == "horizontal" {
border-top: $w $style darken($b, 15%);
top: 2px;
left: 5px;
right: 5px;
height: 1px;
} @else if $direction == "vertical" {
border-left: $w $style darken($b, 15%);
left: 2px;
bottom: 5px;
top: 5px;
}
}
&:not(.disabled):hover:before {
@include trans-prop-nice("border-color", 25ms);
border-color: $colorGrippyInteriorHover;
} @else if $direction == "vertical" {
border-left: $w $style darken($b, 15%);
left: 2px;
bottom: 5px;
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) {

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

@ -22,13 +22,17 @@
$baseRatio: 1.5;
$pad: $interiorMargin * $baseRatio;
.s-btn {
@include box-sizing(border-box);
.s-btn,
.s-icon-btn {
@include user-select(none);
cursor: pointer;
text-decoration: none;
height: $btnStdH;
line-height: $btnStdH;
}
.s-btn {
@include box-sizing(border-box);
padding: 0 $pad;
font-size: 0.7rem;
@ -89,6 +93,78 @@ $pad: $interiorMargin * $baseRatio;
}
}
.s-icon-btn {
@extend .ui-symbol;
color: $colorBtnIcon;
&:hover {
color: lighten($colorBtnIcon, $ltGamma);
}
}
.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 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; }
}
}
.l-btn-set {
// Buttons that have a very tight conceptual grouping - no internal space between them.
// Structure: .btn-set > mct-representation class=first|last > .s-btn

2
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -306,8 +306,6 @@ label.checkbox.custom {
left: 0;
}
.knob {
//@include btnSubtle();
//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
@include trans-prop-nice-fade(.25s);
background-color: $sliderColorKnob;
&:hover {

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

@ -26,14 +26,16 @@
background-color: $b;
@include border-radius($splitterEndCr);
@include boxShdw($splitterShdw);
overflow: hidden;
//overflow: hidden;
position: absolute;
z-index: 1;
//@if $colorSplitterHover != 'none' {
&:hover {
background-color: $colorSplitterHover;
}
//}
&:hover {
background-color: $colorSplitterHover;
&:after {
//@include trans-prop-nice("border-color", 25ms);
border-color: $colorGrippyInteriorHover !important;
}
}
}
&.horizontal {
// Slides vertically up and down, splitting the element horizontally
@ -49,7 +51,9 @@
}
}
>.splitter {
@include controlGrippy($colorSplitterInterior, horizontal);
&:after {
@include controlGrippy($colorSplitterInterior, horizontal);
}
cursor: row-resize;
left: 0; right: 0;
width: auto;
@ -69,16 +73,18 @@
}
}
>.splitter {
@include controlGrippy($colorBodyBg, vertical);
bottom: 0;
cursor: col-resize;
width: $splitterW;
&:after {
@include controlGrippy($colorBodyBg, vertical);
}
}
}
}
.browse-area .splitter {
top: $ueTopBarH + $interiorMarginLg;
top: 0; //$ueTopBarH + $interiorMarginLg;
}
.edit-area .splitter {

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

@ -94,11 +94,14 @@
}
}
.mobile-menu-icon {
.toggle-tree {
font-size: 110%;
position: absolute;
top: $bodyMargin + 2;
left: $bodyMargin;
&:before {
content:'m' !important;
}
}
.object-browse-bar {

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

@ -252,6 +252,36 @@
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';
}
}
&.toggle-inspect.anchor-right {
$xpos: $paneOffset + $interiorMargin;
right: $xpos;
/* &:hover {
right: $xpos - 2;
}*/
&:after {
content:'F'; //\e612
}
}
}
&.items {
.object-browse-bar {
.left.abs,
@ -289,7 +319,6 @@
}
}
}
}
}
@ -358,46 +387,20 @@
// right representation.
.browse-hidetree {
@include user-select(none);
// Sets the left tree menu when the tree
// is hidden.
// Sets the left tree menu when the tree is hidden.
.pane.left.treeview {
opacity: 0;
//right: 100% !important;
//width: auto !important;
//overflow-y: hidden;
//overflow-x: hidden;
}
// Sets the right represenation when
// the tree is hidden.
// Sets the right represenation when the tree is hidden.
.pane.right-repr {
left: 0 !important;
}
}
.browse-showtree {
// NOTE: DISABLED SELECTION
// Selection disabled in both panes
// causing cut/copy/paste menu to
// not appear. Should me moved in
// future to properly work
//@include user-select(none);
// 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;
//width: $proporMenuWithView;
}
// Sets the right representation when the tree is shown.
.pane.right-repr {
//left: $proporMenuWithView;
//width: auto !important;
//left: 0 !important;
//transform: translateX($proporMenuWithView);
}
}