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

WIP fixing vertical pane drag problem, still broken

Browse Source 
- Converting from flex-basis back to width / height;
- Make inspector-adapter target proper holder;
- Added --resizing class to allow user-select: none while dragging;
- Added mixins for browser prefixing;
This commit is contained in:
charlesh88
2018-08-28 19:07:23 -07:00
parent c6ff381cf0
commit 49cead8cc6
6 changed files with 94 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/adapter/vue-adapter/inspector-adapter.js
View File

@ -27,7 +27,7 @@ define([
this.templateLinker.link( this.templateLinker.link(
this.scope, this.scope,
angular.element(layout.$refs.inspector.$refs.properties.$el), angular.element(layout.$refs.inspector.$refs.properties),
this.templateMap["inspectorRegion"] this.templateMap["inspectorRegion"]
); );
this.$timeout(function () { this.$timeout(function () {

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

@ -30,9 +30,10 @@ $colorAHov: $colorKey;
$contrastRatioPercent: 40%; $contrastRatioPercent: 40%;
$hoverRatioPercent: 10%; $hoverRatioPercent: 10%;
$basicCr: 4px; $basicCr: 4px;
$controlCr: $basicCr; $controlCr: 3px;
$smallCr: 3px; $smallCr: 2px;
$overlayCr: 11px; $overlayCr: 11px;
$shdwTextSubtle: rgba(black, 0.2) 0 1px 2px;
// Buttons and Controls // Buttons and Controls
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);

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

@ -113,4 +113,16 @@
@function decimalToPercent($d) { @function decimalToPercent($d) {
@return percentage($d); @return percentage($d);
}
/************************** UTILITIES */
@mixin browserPrefix($prop, $val) {
#{$prop}: $val;
-ms-#{$prop}: $val;
-moz-#{$prop}: $val;
-webkit-#{$prop}: $val;
}
@mixin userSelectNone() {
@include browserPrefix(user-select, none);
} }

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

@ -5,16 +5,17 @@
'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after', 'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before', 'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after', 'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
'l-pane--collapsed': collapsed 'l-pane--collapsed': collapsed,
'l-pane--resizing': resizing === true
}"> }">
<!-- TODO: move resize-handle styling from handle into pane, so that padding can be handled --> <!-- TODO: move resize-handle styling from handle into pane, so that padding can be handled -->
<div v-if="handle" <div v-if="handle"
class="l-pane__handle" class="l-pane__handle"
@mousedown="start"> @mousedown="start">
</div> </div>
<a class="l-pane__collapse-button" <a v-if="collapsable"
@click="toggleCollapse" class="l-pane__collapse-button"
v-if="collapsable"> @click="toggleCollapse">
<span class="l-pane__label">{{ label }}</span> <span class="l-pane__label">{{ label }}</span>
</a> </a>
<div class="l-pane__contents"> <div class="l-pane__contents">
@ -26,7 +27,7 @@
<style lang="scss"> <style lang="scss">
@import "~styles/sass-base"; @import "~styles/sass-base";
$hitMargin: 2px; $hitMargin: 4px;
/**************************** BASE - MOBILE AND DESKTOP */ /**************************** BASE - MOBILE AND DESKTOP */
.l-pane { .l-pane {
opacity: 1; opacity: 1;
@ -92,7 +93,7 @@
background: $colorSplitterBg; background: $colorSplitterBg;
display: block; display: block;
position: absolute; position: absolute;
z-index: 20; z-index: 100;
transition: $transOut; transition: $transOut;
&:before { &:before {
@ -112,9 +113,11 @@
&__collapse-button { &__collapse-button {
background: $colorSplitterButtonBg; background: $colorSplitterButtonBg;
color: $colorSplitterButtonFg; color: $colorSplitterButtonFg;
flex: 1 0 auto;
font-size: nth($splitterCollapseBtnD, 1) * .7; font-size: nth($splitterCollapseBtnD, 1) * .7;
position: relative; position: relative;
justify-content: start; justify-content: start;
text-shadow: $shdwTextSubtle;
transition: $transOut; transition: $transOut;
&:after { &:after {
@ -133,12 +136,18 @@
&__label { &__label {
// Name of the pane // Name of the pane
@include ellipsize();
display: block; display: block;
text-transform: uppercase; text-transform: uppercase;
transform-origin: top left; transform-origin: top left;
flex: 1 0 90%; flex: 1 0 90%;
} }
&--resizing {
// User is dragging the handle and resizing a pane
@include userSelectNone();
}
&[class*="--collapsed"] { &[class*="--collapsed"] {
$d: nth($splitterCollapseBtnD, 1); $d: nth($splitterCollapseBtnD, 1);
flex-basis: $d; flex-basis: $d;
@ -151,8 +160,6 @@
} }
&[class*="--horizontal"] { &[class*="--horizontal"] {
$splitterHorzPad: nth($splitterCollapseBtnD, 1) + $interiorMargin;
> .l-pane__handle { > .l-pane__handle {
cursor: col-resize; cursor: col-resize;
top: 0; top: 0;
@ -227,12 +234,29 @@
} }
} }
/************************** Vertical Splitter Before */
&[class*="-before"] {
> .l-pane__handle {
top: 0;
//transform: translateY(floor($splitterHandleD / -2)); // Center over the pane edge
}
}
/************************** Vertical Splitter After */
&[class*="-after"] {
> .l-pane__handle {
bottom: 0;
//transform: translateY(floor($splitterHandleD / 2)); // Center over the pane edge
}
}
} }
} // Ends .body.desktop } // Ends .body.desktop
} // Ends .l-pane } // Ends .l-pane
</style> </style>
<script> <script>
const COLLAPSE_THRESHOLD_PX = 30;
export default { export default {
props: { props: {
handle: { handle: {
@ -241,23 +265,27 @@ export default {
return ['before', 'after'].indexOf(value) !== -1; return ['before', 'after'].indexOf(value) !== -1;
} }
}, },
collapsable: Boolean, collapsable: {
label: String type: Boolean,
default: false
},
label: String,
resizing: Boolean
}, },
data() { data() {
return { return {
collapsed: false collapsed: false
// styleProp: 'flexBasis'
//styleProp: (type === 'horizontal')? 'width' : 'height'
} }
}, },
beforeMount() { beforeMount() {
this.type = this.$parent.type; this.type = this.$parent.type;
this.styleProp = 'flex-basis'; this.styleProp = (this.type === 'horizontal') ? 'width' : 'height'
}, },
methods: { methods: {
toggleCollapse: function () { toggleCollapse: function () {
this.collapsed = !this.collapsed; this.collapsed = !this.collapsed;
// console.log("rs " + restoreSize);
// if (!restoreSize) { restoreSize = this.$el.style[this.styleProp]; }
if (this.collapsed) { if (this.collapsed) {
// Pane is expanded and is being collapsed // Pane is expanded and is being collapsed
this.currentSize = (this.dragCollapse === true)? this.initial : this.$el.style[this.styleProp]; this.currentSize = (this.dragCollapse === true)? this.initial : this.$el.style[this.styleProp];
@ -277,6 +305,7 @@ export default {
this.initial = this.$el.offsetWidth; this.initial = this.$el.offsetWidth;
} }
} }
console.log('size', this.initial)
}, },
getPosition: function (event) { getPosition: function (event) {
return this.type === 'horizontal' ? return this.type === 'horizontal' ?
@ -295,26 +324,29 @@ export default {
updatePosition: function (event) { updatePosition: function (event) {
let size = this.getNewSize(event); let size = this.getNewSize(event);
this.$el.style[this.styleProp] = size; this.$el.style[this.styleProp] = size;
let intSize = parseInt(size.substr(0, size.length - 2));
// console.log(this.initial); // let intSize = parseInt(size.substr(0, size.length - 2));
if (intSize < 50) { // if (intSize < COLLAPSE_THRESHOLD_PX && this.collapsable === true) {
console.log("initial: " + this.initial); // // console.log("initial: " + this.initial);
this.dragCollapse = true; // this.dragCollapse = true;
this.end(); // this.end();
this.toggleCollapse(); // // this.toggleCollapse();
} else { // } else {
this.$el.style[this.styleProp] = size; // this.$el.style[this.styleProp] = size;
} // }
}, },
start: function (event) { start: function (event) {
this.startPosition = this.getPosition(event); this.startPosition = this.getPosition(event);
// console.log(this.startPosition);
document.body.addEventListener('mousemove', this.updatePosition); document.body.addEventListener('mousemove', this.updatePosition);
document.body.addEventListener('mouseup', this.end); document.body.addEventListener('mouseup', this.end);
//this.resizing = true;
this.trackSize(); this.trackSize();
}, },
end: function (event) { end: function (event) {
document.body.removeEventListener('mousemove', this.updatePosition); document.body.removeEventListener('mousemove', this.updatePosition);
document.body.removeEventListener('mouseup', this.end); document.body.removeEventListener('mouseup', this.end);
this.resizing = false;
this.trackSize(); this.trackSize();
} }
} }

8
src/ui/components/layout/Layout.vue
View File

@ -74,7 +74,7 @@
background: $colorTreeBg; background: $colorTreeBg;
//padding: $m; //padding: $m;
backface-visibility: hidden; backface-visibility: hidden;
flex-basis: 40%; width: 40%;
.l-pane__contents { .l-pane__contents {
display: flex; display: flex;
@ -118,7 +118,7 @@
@include phonePortrait() { @include phonePortrait() {
&__pane-tree { &__pane-tree {
flex-basis: calc(100% - #{$mobileMenuIconD}); width: calc(100% - #{$mobileMenuIconD});
+ .l-pane { + .l-pane {
// Hide pane-main when this pane is expanded // Hide pane-main when this pane is expanded
@ -188,11 +188,11 @@
} }
&__pane-tree { &__pane-tree {
flex-basis: 300px; width: 300px;
} }
&__pane-inspector { &__pane-inspector {
flex-basis: 200px; width: 200px;
} }
} }
} }

30
src/ui/components/layout/MctInspector.vue
View File

@ -1,13 +1,14 @@
<template> <template>
<multipane class="c-inspector" <multipane class="c-inspector"
type="vertical"> type="vertical">
<pane class="c-inspector__properties" <pane class="c-inspector__properties">
ref="properties"> <div ref="properties">
</div>
</pane> </pane>
<pane class="l-pane c-inspector__elements" <pane class="l-pane c-inspector__elements"
handle="before" handle="before">
ref="elements"> <div ref="elements">c-inspector__elements</div>
c-inspector__elements
</pane> </pane>
</multipane> </multipane>
</template> </template>
@ -29,22 +30,29 @@
.c-inspector { .c-inspector {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: stretch;
height: 100%; height: 100%;
min-width: 150px; min-width: 150px;
> [class*="__"] { > [class*="__"] {
min-height: 50px; min-height: 50px;
padding: $interiorMargin; /*overflow: auto;*/
&:not(:last-child) {
margin-bottom: $interiorMargin;
}
} }
&__properties { &__properties {
@include userSelectNone();
//@include test(red);
height: auto;
flex: 1 1 auto; flex: 1 1 auto;
} }
&__elements { &__elements {
//@include test(blue); @include test(green);
height: 25%; height: 200px;
flex: 0 1 auto; flex: 1 1 auto;
} }
.l-inspector-part { .l-inspector-part {
@ -53,10 +61,10 @@
h2 { h2 {
@include grid-two-column-span-cols; @include grid-two-column-span-cols;
border-radius: $controlCr; border-radius: $smallCr;
background-color: $colorInspectorSectionHeaderBg; background-color: $colorInspectorSectionHeaderBg;
color: $colorInspectorSectionHeaderFg; color: $colorInspectorSectionHeaderFg;
font-size: 100%; font-size: .85em;
font-weight: normal; font-weight: normal;
margin: $interiorMarginLg 0 $interiorMarginSm 0; margin: $interiorMarginLg 0 $interiorMarginSm 0;
padding: $interiorMarginSm $interiorMargin; padding: $interiorMarginSm $interiorMargin;