ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-07 11:30:28 +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 // Splitter
$splitterD: 7px; $splitterD: 7px;
$splitterHandleD: 2px; $splitterHandleD: 2px;
$splitterHandleHitMargin: 4px;
$splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length $splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
$colorSplitterBaseBg: $colorBodyBg; $colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%); $colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);

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

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

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

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