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

Splitter refinement

Browse Source 
- Arrow icons;
- Code cleanup;
This commit is contained in:
charlesh88 2018-09-05 13:29:14 -07:00
parent 01a39f4fb7
commit e2e0cf17db
3 changed files with 47 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles-new/_constants-snow.scss
View File

@ -238,6 +238,7 @@ $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
// Splitter
$splitterD: 7px;
$splitterHandleD: 2px;
$splitterHandleHitMargin: 4px;
$splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
$colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);

2
src/styles-new/_constants.scss
View File

@ -17,6 +17,7 @@ $inputTextPLeftRight: 5px;
$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
$treeItemIndent: 16px;
$treeTypeIconW: 18px;
/*************** Items */
$ueBrowseGridItemLg: 200px;
@ -106,6 +107,7 @@ $glyph-icon-frame-show: '\e1045';
$glyph-icon-frame-hide: '\e1046';
$glyph-icon-import: '\e1047';
$glyph-icon-export: '\e1048';
$glyph-icon-minimize: '\e1049'; // 12px only
$glyph-icon-activity: '\e1100';
$glyph-icon-activity-mode: '\e1101';
$glyph-icon-autoflow-tabular: '\e1102';

65
src/ui/components/controls/pane.vue
View File

@ -28,7 +28,6 @@
<style lang="scss">
@import "~styles/sass-base";
$hitMargin: 4px;
/**************************** BASE - MOBILE AND DESKTOP */
.l-multipane {
display: flex;
@ -149,7 +148,7 @@
&__collapse-button {
$m: 2px;
$h: nth($splitterBtnD, 1) - ($m * 2);
$h: 12px; //nth($splitterBtnD, 1) - ($m * 2);
color: $splitterBtnColorFg;
flex: 0 0 nth($splitterBtnD, 1);
font-size: $h * .9;
@ -160,26 +159,23 @@
&:after {
// Close icon
background: $splitterBtnColorFg;
border-radius: 2px;
border-radius: $smallCr;
color: $splitterBtnColorBg;
content: $glyph-icon-minus;
content: $glyph-icon-arrow-right-equilateral;
display: block;
font-family: symbolsfont;
font-size: .8em;
height: $h;
line-height: $h;
padding: 0 7px;
font-size: 6px;
height: 6.5px;
padding: 2px 7px;
position: absolute;
right: $m;
top: $m;
text-align: right;
transition: $transOut;
z-index: -1;
}
&:hover {
background: rgba(black, 0.1);
//color: $splitterBtnColorHoverFg;
&:after {
background: $splitterBtnColorHoverBg;
color: $splitterBtnColorHoverFg;
@ -216,10 +212,6 @@
background: $splitterBtnColorFg;
color: $splitterBtnColorBg;
&:after {
content: $glyph-icon-plus;
}
&:hover {
background: $splitterBtnColorHoverBg !important;
}
@ -241,9 +233,9 @@
&:before {
// Extended hit area
top: 0;
right: $hitMargin * -1;
right: $splitterHandleHitMargin * -1;
bottom: 0;
left: $hitMargin * -1;
left: $splitterHandleHitMargin * -1;
}
}
@ -267,7 +259,6 @@
right: auto;
transform: translateX(-50%);
width: auto;
}
}
}
@ -278,6 +269,14 @@
left: 0;
transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
}
&[class*="--collapsed"] {
> .l-pane__collapse-button {
&:after {
transform: translateX(-50%) scaleX(-1);
}
}
}
}
/************************** Horizontal Splitter After */
@ -286,6 +285,12 @@
right: 0;
transform: translateX(floor($splitterHandleD / 2));
}
&:not([class*="--collapsed"]) {
> .l-pane__collapse-button:after {
transform: scaleX(-1);
}
}
}
}
@ -299,25 +304,43 @@
&:before {
// Extended hit area
left: 0;
top: $hitMargin * -1;
top: $splitterHandleHitMargin * -1;
right: 0;
bottom: $hitMargin * -1;
bottom: $splitterHandleHitMargin * -1;
}
}
/************************** Vertical Splitter Before */
// Pane collapses downward
&[class*="-before"] {
> .l-pane__handle {
top: 0;
transform: translateY(floor($splitterHandleD / -2)); // Center over the pane edge
transform: translateY(floor($splitterHandleD / -1));
}
> .l-pane__collapse-button:after {
content: $glyph-icon-arrow-down;
}
&.l-pane--collapsed {
> .l-pane__collapse-button:after {
transform: scaleY(-1);
}
}
}
/************************** Vertical Splitter After */
// Pane collapses upward. Not sure we'll ever use this...
&[class*="-after"] {
> .l-pane__handle {
bottom: 0;
transform: translateY(floor($splitterHandleD / 2)); // Center over the pane edge
transform: translateY(floor($splitterHandleD / 1));
}
&:not(.l-pane--collapsed) > .l-pane__collapse-button {
&:after {
transform: scaleY(-1);
}
}
}
}