ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-13 12:48:14 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Splitter refinements / mixin fix

Browse Source 
- Splitter with resize grippy;
- Fixed @background-image mixins;
This commit is contained in:
charlesh88
2018-08-17 13:51:53 -07:00
parent 5a07f0d2b5
commit e6be02fb8d
4 changed files with 42 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -235,14 +235,16 @@ $scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%); $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
// Splitter // Splitter
$splitterD: 10px; $splitterD: 7px;
$splitterCollapseBtnD: ($splitterD, 30px); $splitterCollapseBtnD: ($splitterD, 30px);
$splitterDSm: 8px; // Smaller splitter, used inside elements like a Timeline view $splitterDSm: 8px; // Smaller splitter, used inside elements like a Timeline view
$splitterHandleD: 3px; $splitterHandleD: 7px;
$splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
$colorSplitterBaseBg: $colorBodyBg; $colorSplitterBaseBg: $colorBodyBg;
$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%); $colorSplitterBg: pullForward($colorSplitterBaseBg, 10%);
$colorSplitterFg: $colorBodyBg; $colorSplitterFg: $colorBodyBg;
$colorSplitterButtonBg: pullForward($colorSplitterBaseBg, 20%); $colorSplitterButtonBg: pullForward($colorSplitterBaseBg, 20%);
$colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
$splitterShdw: none; $splitterShdw: none;
$splitterEndCr: none; $splitterEndCr: none;
$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2); $colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);

8
src/styles-new/_mixins.scss
View File

@ -32,23 +32,23 @@
} }
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) { @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
@include background-image(linear-gradient(-45deg, background-image: linear-gradient(-45deg,
rgba($c, $a) 25%, transparent 25%, rgba($c, $a) 25%, transparent 25%,
transparent 50%, rgba($c, $a) 50%, transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%, rgba($c, $a) 75%, transparent 75%,
transparent 100% transparent 100%
)); );
background-repeat: repeat; background-repeat: repeat;
background-size: $d $d; background-size: $d $d;
} }
@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) { @mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
@include background-image(linear-gradient($angle, background-image: linear-gradient($angle,
rgba($c, $a) 25%, transparent 25%, rgba($c, $a) 25%, transparent 25%,
transparent 50%, rgba($c, $a) 50%, transparent 50%, rgba($c, $a) 50%,
rgba($c, $a) 75%, transparent 75%, rgba($c, $a) 75%, transparent 75%,
transparent 100% transparent 100%
)); );
background-repeat: repeat; background-repeat: repeat;
background-size: $bgsize $bgsize; background-size: $bgsize $bgsize;
} }

6
src/ui/components/controls/multipane.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="multipane" <div class="l-multipane"
:class="{ :class="{
'multipane--vertical': type === 'vertical', 'l-multipane--vertical': type === 'vertical',
'multipane--horizontal': type === 'horizontal' 'l-multipane--horizontal': type === 'horizontal'
}"> }">
<slot></slot> <slot></slot>
</div> </div>

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

@ -53,6 +53,15 @@
left: $hitMargin * -1; left: $hitMargin * -1;
} }
&:after {
// Grippy
min-height: nth($splitterGrippyD, 3);
height: nth($splitterGrippyD, 2);
width: nth($splitterGrippyD, 1);
top: 50%; left: ($splitterHandleD - nth($splitterGrippyD, 1)) / 2;
transform: translateY(-50%);
}
&--before { &--before {
// Handle at left edge of containing pane // Handle at left edge of containing pane
left: 0; left: 0;
@ -74,7 +83,6 @@
} }
[class*="collapse-button"] { [class*="collapse-button"] {
border-bottom-left-radius: $controlCr;
height: nth($splitterCollapseBtnD, 2); height: nth($splitterCollapseBtnD, 2);
width: nth($splitterCollapseBtnD, 1); width: nth($splitterCollapseBtnD, 1);
@ -119,6 +127,15 @@
left: 0; left: 0;
} }
&:after {
// Grippy
min-width: nth($splitterGrippyD, 3);
width: nth($splitterGrippyD, 2);
height: nth($splitterGrippyD, 1);
left: 50%; top: ($splitterHandleD - nth($splitterGrippyD, 1)) / 2;
transform: translateX(-50%);
}
&--before { &--before {
// Handle at top edge of containing pane // Handle at top edge of containing pane
top: 0; top: 0;
@ -160,6 +177,16 @@
z-index: -1; z-index: -1;
} }
&:after {
// Grippy affordance
content: '';
background: $colorSplitterGrippy;
border-radius: 5px;
display: block;
position: absolute;
z-index: 1;
}
&:active, &:hover { &:active, &:hover {
transition: $transIn; transition: $transIn;
} }
@ -180,7 +207,7 @@
justify-content: center; justify-content: center;
position: absolute; position: absolute;
z-index: 3; z-index: 3;
background: $colorSplitterButtonBg; background: $colorSplitterGrippy;
transition: $transOut; transition: $transOut;
&:active, &:hover { &:active, &:hover {
@ -198,7 +225,7 @@
&:before { &:before {
color: $colorSplitterFg; color: $colorSplitterFg;
display: block; display: block;
font-size: 0.7em; font-size: 0.6em;
font-family: symbolsfont; font-family: symbolsfont;
} }
} }