mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
New design for pane collapse buttons
- Pane padding normalized;
This commit is contained in:
charlesh88
parent
7cfbfe3d96
commit
c6ff381cf0
@ -236,7 +236,7 @@ $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
|
||||
|
||||
// Splitter
|
||||
$splitterD: 7px;
|
||||
$splitterCollapseBtnD: (10px, 35px);
|
||||
$splitterCollapseBtnD: (15px, 35px);
|
||||
$splitterHandleD: 2px;
|
||||
$splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
|
||||
$colorSplitterBaseBg: $colorBodyBg;
|
||||
@ -244,9 +244,9 @@ $colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
|
||||
$colorSplitterFg: $colorBodyBg;
|
||||
$colorSplitterHover: $colorKey; // pullForward($colorSplitterBg, $hoverRatioPercent * 2);
|
||||
$colorSplitterActive: $colorKey;
|
||||
$colorSplitterButtonBg: rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%);
|
||||
$colorSplitterButtonFg: $colorBodyFg;
|
||||
$colorSplitterButtonHoverBg: rgba($colorKey, 0.5);
|
||||
$colorSplitterButtonBg: $colorSplitterBg; //rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%);
|
||||
$colorSplitterButtonFg: $colorBodyBg; //rgba($colorBodyFg, 0.6);
|
||||
$colorSplitterButtonHoverBg: rgba($colorKey, 1);
|
||||
$colorSplitterButtonHoverFg: $colorBodyBg;
|
||||
$colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
|
||||
$splitterShdw: none;
|
||||
|
||||
@ -14,7 +14,9 @@
|
||||
</div>
|
||||
<a class="l-pane__collapse-button"
|
||||
@click="toggleCollapse"
|
||||
v-if="collapsable"></a>
|
||||
v-if="collapsable">
|
||||
<span class="l-pane__label">{{ label }}</span>
|
||||
</a>
|
||||
<div class="l-pane__contents">
|
||||
<slot></slot>
|
||||
</div>
|
||||
@ -31,12 +33,14 @@
|
||||
pointer-events: inherit;
|
||||
transition: transOut;
|
||||
|
||||
&__handle {
|
||||
// __handle doesn't appear in mobile
|
||||
&__handle,
|
||||
&__label {
|
||||
// __handle and __label don't appear in mobile
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__collapse-button {
|
||||
// Mobile-first
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -62,6 +66,7 @@
|
||||
/************************ CONTENTS */
|
||||
&__contents {
|
||||
opacity: 1;
|
||||
padding: $interiorMargin;
|
||||
pointer-events: inherit;
|
||||
transition: opacity 250ms ease 250ms;
|
||||
height: 100%;
|
||||
@ -91,6 +96,7 @@
|
||||
transition: $transOut;
|
||||
|
||||
&:before {
|
||||
// Extended hit area
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -106,12 +112,16 @@
|
||||
&__collapse-button {
|
||||
background: $colorSplitterButtonBg;
|
||||
color: $colorSplitterButtonFg;
|
||||
font-size: nth($splitterCollapseBtnD, 1) * .7;
|
||||
position: relative;
|
||||
justify-content: start;
|
||||
transition: $transOut;
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-right;
|
||||
&:after {
|
||||
// Close icon
|
||||
content: $glyph-icon-x;
|
||||
font-family: symbolsfont;
|
||||
font-size: .5rem;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -121,6 +131,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
// Name of the pane
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
transform-origin: top left;
|
||||
flex: 1 0 90%;
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
$d: nth($splitterCollapseBtnD, 1);
|
||||
flex-basis: $d;
|
||||
@ -135,21 +153,6 @@
|
||||
&[class*="--horizontal"] {
|
||||
$splitterHorzPad: nth($splitterCollapseBtnD, 1) + $interiorMargin;
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__handle {
|
||||
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
bottom: 0; height: auto;
|
||||
border-radius: unset;
|
||||
|
||||
&:before {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .l-pane__handle {
|
||||
cursor: col-resize;
|
||||
top: 0;
|
||||
@ -166,56 +169,45 @@
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
//border-bottom-right-radius: $controlCr;
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
width: nth($splitterCollapseBtnD, 1);
|
||||
height: nth($splitterCollapseBtnD, 1);
|
||||
padding: $interiorMarginSm $interiorMarginSm;
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__collapse-button {
|
||||
position: absolute;
|
||||
bottom: 0; left: 0;
|
||||
height: auto;
|
||||
|
||||
[class*="label"] {
|
||||
position: absolute;
|
||||
transform: translate($interiorMarginLg, 15px) rotate(90deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: $glyph-icon-plus;
|
||||
position: absolute;
|
||||
top: $interiorMarginSm;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Horizontal Splitter Before */
|
||||
&[class*="-before"] {
|
||||
padding-left: $splitterHorzPad;
|
||||
|
||||
&.l-pane--holds-multipane {
|
||||
padding-left: nth($splitterCollapseBtnD, 1);
|
||||
}
|
||||
|
||||
> .l-pane__handle,
|
||||
> .l-pane__collapse-button {
|
||||
> .l-pane__handle {
|
||||
left: 0;
|
||||
transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__collapse-button {
|
||||
// transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Horizontal Splitter After */
|
||||
&[class*="-after"] {
|
||||
padding-right: $splitterHorzPad;
|
||||
|
||||
&.l-pane--holds-multipane {
|
||||
padding-right: nth($splitterCollapseBtnD, 1);
|
||||
}
|
||||
|
||||
> .l-pane__handle,
|
||||
> .l-pane__collapse-button {
|
||||
> .l-pane__handle {
|
||||
right: 0;
|
||||
transform: translateX(floor($splitterHandleD / 2));
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__collapse-button {
|
||||
// transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -235,11 +227,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
width: nth($splitterCollapseBtnD, 2);
|
||||
height: nth($splitterCollapseBtnD, 1);
|
||||
}
|
||||
|
||||
}
|
||||
} // Ends .body.desktop
|
||||
} // Ends .l-pane
|
||||
@ -254,7 +241,8 @@ export default {
|
||||
return ['before', 'after'].indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
collapsable: Boolean
|
||||
collapsable: Boolean,
|
||||
label: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -264,11 +252,6 @@ export default {
|
||||
beforeMount() {
|
||||
this.type = this.$parent.type;
|
||||
this.styleProp = 'flex-basis';
|
||||
/* if (this.type === 'horizontal') {
|
||||
this.styleProp = 'width';
|
||||
} else {
|
||||
this.styleProp = 'height';
|
||||
}*/
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse: function () {
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
type="horizontal">
|
||||
<pane class="l-shell__pane-tree"
|
||||
handle="after"
|
||||
label="Browse"
|
||||
collapsable>
|
||||
<div class="l-shell__search">
|
||||
<search class="c-search--major" ref="shell-search"></search>
|
||||
@ -21,6 +22,7 @@
|
||||
</pane>
|
||||
<pane class="l-shell__pane-inspector l-pane--holds-multipane"
|
||||
handle="before"
|
||||
label="Inspect"
|
||||
collapsable>
|
||||
<MctInspector ref="inspector"></MctInspector>
|
||||
</pane>
|
||||
@ -70,7 +72,7 @@
|
||||
|
||||
&__pane-tree {
|
||||
background: $colorTreeBg;
|
||||
padding: $m;
|
||||
//padding: $m;
|
||||
backface-visibility: hidden;
|
||||
flex-basis: 40%;
|
||||
|
||||
@ -107,7 +109,7 @@
|
||||
|
||||
&__pane-inspector {
|
||||
display: flex;
|
||||
padding: $m;
|
||||
//padding: $m;
|
||||
|
||||
body.mobile & {
|
||||
display: none;
|
||||
@ -156,7 +158,7 @@
|
||||
|
||||
&__object-view {
|
||||
flex: 1 1 auto;
|
||||
padding: $interiorMarginLg;
|
||||
//padding: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&__time-conductor {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user