mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
Significant changes to splitter handle and button approach
- WIP!; - WIP on drag to collapse;
This commit is contained in:
charlesh88
parent
a1d9c11e82
commit
f9b764bb64
@ -240,9 +240,10 @@ $splitterCollapseBtnD: (10px, 35px);
|
||||
$splitterHandleD: 2px;
|
||||
$splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
|
||||
$colorSplitterBaseBg: $colorBodyBg;
|
||||
$colorSplitterBg: pullForward($colorSplitterBaseBg, 10%);
|
||||
$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
|
||||
$colorSplitterFg: $colorBodyBg;
|
||||
$colorSplitterButtonBg: pullForward($colorSplitterBaseBg, 20%);
|
||||
$colorSplitterButtonBg: rgba($colorBodyFg, 0.1); //pullForward($colorSplitterBaseBg, 20%);
|
||||
$colorSplitterButtonFg: $colorBodyFg;
|
||||
$colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
|
||||
$splitterShdw: none;
|
||||
$splitterEndCr: none;
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
// TODO: integrate approach at https://codepen.io/charlesh88/pen/KxpvOP
|
||||
|
||||
$hitMargin: 4px;
|
||||
$hitMargin: 2px;
|
||||
/**************************** BASE - MOBILE AND DESKTOP */
|
||||
.l-pane {
|
||||
opacity: 1;
|
||||
@ -43,15 +43,13 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0; right: 0; // Default
|
||||
z-index: 3;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&[class*="--horizontal"] {
|
||||
&.l-pane--collapsed {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
width: 0px;
|
||||
min-width: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,8 +57,6 @@
|
||||
&.l-pane--collapsed {
|
||||
padding-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
height: 0px;
|
||||
min-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,6 +72,9 @@
|
||||
|
||||
/************************ COLLAPSED STATE */
|
||||
&--collapsed {
|
||||
flex-basis: 0px;
|
||||
min-width: 0px !important;
|
||||
min-height: 0px !important;
|
||||
transition: all 350ms ease;
|
||||
|
||||
.l-pane__contents {
|
||||
@ -93,9 +92,10 @@
|
||||
//@include test(blue, 0.1);
|
||||
|
||||
&__handle {
|
||||
z-index: 1;
|
||||
background: $colorSplitterBg;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
@ -107,20 +107,46 @@
|
||||
|
||||
&__collapse-button {
|
||||
background: $colorSplitterButtonBg;
|
||||
color: $colorSplitterFg;
|
||||
color: $colorSplitterButtonFg;
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-right;
|
||||
font-family: symbolsfont;
|
||||
font-size: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
$d: nth($splitterCollapseBtnD, 1);
|
||||
flex-basis: $d;
|
||||
min-width: $d !important;
|
||||
min-height: $d !important;
|
||||
|
||||
> .l-pane__handle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--horizontal"] {
|
||||
$splitterHorzPad: nth($splitterCollapseBtnD, 1) + $interiorMargin;
|
||||
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__handle {
|
||||
//background: $colorSplitterButtonBg;
|
||||
//width: nth($splitterCollapseBtnD, 1) + 1;
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
bottom: 0; height: auto;
|
||||
border-radius: unset;
|
||||
|
||||
&:before {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .l-pane__handle {
|
||||
cursor: col-resize;
|
||||
top: 0;
|
||||
@ -137,18 +163,15 @@
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
border-bottom-right-radius: $controlCr;
|
||||
height: nth($splitterCollapseBtnD, 2);
|
||||
//border-bottom-right-radius: $controlCr;
|
||||
bottom: 0;
|
||||
height: auto; //nth($splitterCollapseBtnD, 2);
|
||||
width: nth($splitterCollapseBtnD, 1);
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-right;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Splitter Before */
|
||||
&[class*="-before"] {
|
||||
padding-left: nth($splitterCollapseBtnD, 1) + $interiorMargin;
|
||||
padding-left: $splitterHorzPad;
|
||||
|
||||
> .l-pane__handle,
|
||||
> .l-pane__collapse-button {
|
||||
@ -156,19 +179,16 @@
|
||||
transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__collapse-button {
|
||||
transform: translateX(-100%) scaleX(-1);
|
||||
// transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Splitter After */
|
||||
&[class*="-after"] {
|
||||
padding-right: nth($splitterCollapseBtnD, 1) + $interiorMargin;
|
||||
padding-right: $splitterHorzPad;
|
||||
|
||||
> .l-pane__handle,
|
||||
> .l-pane__collapse-button {
|
||||
@ -182,7 +202,7 @@
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__collapse-button {
|
||||
transform: translateX(100%) scaleX(1);
|
||||
// transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -210,254 +230,10 @@
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
} // Ends .body.desktop
|
||||
} // Ends .l-pane
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.l-pane {
|
||||
/************************ PANES */
|
||||
&--horizontal {
|
||||
// Pane adjusts size horizontally, handles run vertically
|
||||
// Selectors here
|
||||
|
||||
> .l-pane__handle {
|
||||
/* top: 0;
|
||||
bottom: 0;
|
||||
|
||||
&--before {
|
||||
left: 0;
|
||||
[class*="collapse-button"] {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--after {
|
||||
right: 0;
|
||||
[class*="collapse-button"] {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
body.desktop & {
|
||||
cursor: col-resize;
|
||||
width: $splitterHandleD;
|
||||
|
||||
&:before {
|
||||
// Extended hit area
|
||||
top: 0;
|
||||
right: $hitMargin * -1;
|
||||
bottom: 0;
|
||||
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 {
|
||||
// Handle at left edge of containing pane
|
||||
// left: 0;
|
||||
|
||||
[class*="collapse-button"] {
|
||||
// left: 0;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
&--after {
|
||||
// Handle at right edge of containing pane
|
||||
// right: 0;
|
||||
|
||||
/*[class*="collapse-button"] {
|
||||
right: 0;
|
||||
}*/
|
||||
}
|
||||
|
||||
[class*="collapse-button"] {
|
||||
background: $colorSplitterGrippy;
|
||||
color: $colorSplitterFg;
|
||||
font-size: 0.6em;
|
||||
height: nth($splitterCollapseBtnD, 2);
|
||||
width: nth($splitterCollapseBtnD, 1);
|
||||
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-left;
|
||||
}
|
||||
}
|
||||
|
||||
&.l-pane--collapsed {
|
||||
> .l-pane__handle {
|
||||
&--before {
|
||||
transform: translateX($splitterHandleD * -1) scaleX(-1);
|
||||
}
|
||||
|
||||
&--after {
|
||||
transform: translateX($splitterHandleD) scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* &.l-pane--collapsed {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
width: 0px;
|
||||
min-width: 0px;
|
||||
}*/
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
// Pane adjusts size vertically, handles run horizontally
|
||||
// Selectors here
|
||||
|
||||
> .l-pane__handle {
|
||||
//background: green;
|
||||
cursor: row-resize;
|
||||
height: $splitterHandleD;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
&:before {
|
||||
top: $hitMargin * -1;
|
||||
right: 0;
|
||||
bottom: $hitMargin * -1;
|
||||
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 {
|
||||
// Handle at top edge of containing pane
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&--after {
|
||||
// Handle at bottom edge of containing pane
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="collapse-button"] {
|
||||
height: nth($splitterCollapseBtnD, 1);
|
||||
width: nth($splitterCollapseBtnD, 2);
|
||||
}
|
||||
|
||||
&.l-pane--collapsed {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
height: 0px;
|
||||
min-height: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/************************ HANDLES */
|
||||
&__handle {
|
||||
// Selectors for handle in any context
|
||||
/* z-index: 1;
|
||||
display: block;
|
||||
position: absolute;*/
|
||||
|
||||
|
||||
body.desktop & {
|
||||
background: $colorSplitterBg;
|
||||
transition: $transOut;
|
||||
&:before {
|
||||
// Extended hit area
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:after {
|
||||
// Grippy affordance
|
||||
content: '';
|
||||
background: $colorSplitterGrippy;
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:active, &:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $colorSplitterActive; // Not really working with drag
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************************ COLLAPSE BUTTONS */
|
||||
&__collapse-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
|
||||
body.desktop & {
|
||||
transition: $transOut;
|
||||
|
||||
&:active, &:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $colorSplitterActive;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
// Glyph holder
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
@ -484,12 +260,16 @@ export default {
|
||||
}*/
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse: function () {
|
||||
toggleCollapse: function (restoreSize) {
|
||||
this.collapsed = !this.collapsed;
|
||||
// console.log("rs " + restoreSize);
|
||||
if (!restoreSize) { restoreSize = this.$el.style[this.styleProp]; }
|
||||
if (this.collapsed) {
|
||||
// Pane is expanded and is being collapsed
|
||||
this.currentSize = this.$el.style[this.styleProp];
|
||||
this.$el.style[this.styleProp] = '';
|
||||
} else {
|
||||
// Pane is collapsed and is being expanded
|
||||
this.$el.style[this.styleProp] = this.currentSize;
|
||||
delete this.currentSize;
|
||||
}
|
||||
@ -518,6 +298,18 @@ export default {
|
||||
updatePosition: function (event) {
|
||||
let size = this.getNewSize(event);
|
||||
this.$el.style[this.styleProp] = size;
|
||||
/*
|
||||
let intSize = parseInt(size.substr(0, size.length - 2));
|
||||
// console.log(this.initial);
|
||||
if (intSize < 50) {
|
||||
// this.currentSize = this.initial;
|
||||
console.log("initial: " + this.initial);
|
||||
// this.toggleCollapse("initial: " + this.initial);
|
||||
document.body.removeEventListener('mousemove', this.updatePosition);
|
||||
document.body.removeEventListener('mouseup', this.end);
|
||||
} else {
|
||||
this.$el.style[this.styleProp] = size;
|
||||
}*/
|
||||
},
|
||||
start: function (event) {
|
||||
this.startPosition = this.getPosition(event);
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
<pane class="l-shell__pane-main">
|
||||
<div class="l-shell__main-container" ref="mainContainer"></div>
|
||||
</pane>
|
||||
<pane class="l-shell__pane-inspector"
|
||||
<pane class="l-shell__pane-inspector l-pane--holds-multipane"
|
||||
handle="before"
|
||||
collapsable>
|
||||
<MctInspector ref="inspector"></MctInspector>
|
||||
@ -97,6 +97,7 @@
|
||||
|
||||
&__pane-inspector {
|
||||
display: flex;
|
||||
padding: $m;
|
||||
|
||||
body.mobile & {
|
||||
display: none;
|
||||
@ -169,12 +170,16 @@
|
||||
&__pane-tree,
|
||||
&__pane-inspector {
|
||||
max-width: 30%;
|
||||
min-width: 5%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__pane-tree {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
&__pane-inspector {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user