mirror of
https://github.com/nasa/openmct.git
synced 2025-06-16 14:18:16 +00:00
Merge branch 'core-vue-bootstrap' of https://github.com/nasa/openmct into core-vue-bootstrap
This commit is contained in:
charlesh88
164
src/ui/components/controls/multipane.vue
Normal file
164
src/ui/components/controls/multipane.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="multipane"
|
||||
:class="{
|
||||
'multipane--vertical': type === 'vertical',
|
||||
'multipane--horizontal': type === 'horizontal'
|
||||
}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.multipane {
|
||||
@import "~styles/constants";
|
||||
@import "~styles/constants-snow";
|
||||
@import "~styles/mixins";
|
||||
@import "~styles/glyphs";
|
||||
|
||||
$hitMargin: 4px;
|
||||
|
||||
& > .multipane__pane > .multipane__splitter {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
background: $colorSplitterBg;
|
||||
position: absolute;
|
||||
|
||||
transition: $transOut;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:active, &:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $colorSplitterActive;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
}
|
||||
|
||||
&--horizontal > .multipane__pane > .multipane__splitter {
|
||||
cursor: col-resize;
|
||||
width: $splitterHandleD;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
&--before {
|
||||
left: 0;
|
||||
}
|
||||
&--after {
|
||||
right: 0;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
right: $hitMargin * -1;
|
||||
bottom: 0;
|
||||
left: $hitMargin * -1;
|
||||
}
|
||||
}
|
||||
|
||||
&--vertical > .multipane__pane > .multipane__splitter {
|
||||
cursor: row-resize;
|
||||
height: $splitterHandleD;
|
||||
left: 0;
|
||||
right: 0;
|
||||
&--before {
|
||||
top: 0
|
||||
}
|
||||
&--after {
|
||||
bottom: 0;
|
||||
}
|
||||
&:before {
|
||||
top: $hitMargin * -1;
|
||||
right: 0;
|
||||
bottom: $hitMargin * -1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* collapsed panes */
|
||||
&--horizontal > .multipane__pane--collapsed {
|
||||
// TODO: make it fully collapse
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
&--vertical > .multipane__pane--collapsed {
|
||||
// TODO: make it fully collapse
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
/* Collapse button styling */
|
||||
|
||||
& > .multipane__pane > .multipane__splitter .multipane__splitter__button {
|
||||
background: $colorSplitterBg;
|
||||
transition: $transOut;
|
||||
|
||||
&:active, &:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $colorSplitterActive;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
&:before {
|
||||
color: $colorSplitterFg;
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
}
|
||||
|
||||
&--horizontal > .multipane__pane > .multipane__splitter {
|
||||
& > .multipane__splitter__button {
|
||||
width: $splitterD;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&--before .multipane__splitter__button {
|
||||
border-bottom-right-radius: $controlCr;
|
||||
left: 0;
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-right;
|
||||
}
|
||||
}
|
||||
&--after .multipane__splitter__button {
|
||||
border-bottom-left-radius: $controlCr;
|
||||
right: 0;
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--vertical > .multipane__pane > .multipane__splitter__button {
|
||||
/* TODO: style buttons for vertical collapse. */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
validator: function (value) {
|
||||
return ['vertical', 'horizontal'].indexOf(value) !== -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
96
src/ui/components/controls/pane.vue
Normal file
96
src/ui/components/controls/pane.vue
Normal file
@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="multipane__pane"
|
||||
:class="{
|
||||
'multipane__pane--collapsed': collapsed
|
||||
}">
|
||||
<div v-if="splitter"
|
||||
class="multipane__splitter"
|
||||
:class="{
|
||||
'multipane__splitter--before': splitter === 'before',
|
||||
'multipane__splitter--after': splitter === 'after'
|
||||
}"
|
||||
@mousedown="start"
|
||||
>
|
||||
<a class="multipane__splitter__button"
|
||||
@click="toggleCollapse"
|
||||
v-if="collapsable"></a>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
splitter: {
|
||||
type: String,
|
||||
validator: function (value) {
|
||||
return ['before', 'after'].indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
collapsable: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.type = this.$parent.type;
|
||||
if (this.type === 'horizontal') {
|
||||
this.styleProp = 'width';
|
||||
} else {
|
||||
this.styleProp = 'height';
|
||||
}
|
||||
this.trackSize();
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse: function () {
|
||||
this.collapsed = !this.collapsed;
|
||||
if (this.collapsed) {
|
||||
this.currentSize = this.$el.style[this.styleProp];
|
||||
this.$el.style[this.styleProp] = '';
|
||||
} else {
|
||||
this.$el.style[this.styleProp] = this.currentSize;
|
||||
delete this.currentSize;
|
||||
}
|
||||
},
|
||||
trackSize: function() {
|
||||
if (this.type === 'vertical') {
|
||||
this.initial = this.$el.offsetHeight;
|
||||
} else if (this.type === 'horizontal') {
|
||||
this.initial = this.$el.offsetWidth;
|
||||
}
|
||||
},
|
||||
getPosition: function (event) {
|
||||
return this.type === 'horizontal' ?
|
||||
event.pageX :
|
||||
event.pageY;
|
||||
},
|
||||
getNewSize: function (event) {
|
||||
let delta = this.startPosition - this.getPosition(event);
|
||||
if (this.splitter === "before") {
|
||||
return `${this.initial + delta}px`;
|
||||
}
|
||||
if (this.splitter === "after") {
|
||||
return `${this.initial - delta}px`;
|
||||
}
|
||||
},
|
||||
updatePosition: function (event) {
|
||||
let size = this.getNewSize(event);
|
||||
this.$el.style[this.styleProp] = size;
|
||||
},
|
||||
start: function (event) {
|
||||
this.startPosition = this.getPosition(event);
|
||||
this.trackSize();
|
||||
document.body.addEventListener('mousemove', this.updatePosition);
|
||||
document.body.addEventListener('mouseup', this.end);
|
||||
},
|
||||
end: function (event) {
|
||||
document.body.removeEventListener('mousemove', this.updatePosition);
|
||||
document.body.removeEventListener('mouseup', this.end);
|
||||
this.trackSize();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,27 +1,31 @@
|
||||
<template>
|
||||
<div class="l-shell">
|
||||
<div class="l-shell__main">
|
||||
<div class="l-pane l-shell__pane-tree" ref="shell-pane-tree">
|
||||
<multipane class="l-shell__main"
|
||||
type="horizontal">
|
||||
<pane class="l-pane l-shell__pane-tree"
|
||||
splitter="after"
|
||||
collapsable>
|
||||
<div class="l-shell__search">
|
||||
<search ref="shell-search"></search>
|
||||
</div>
|
||||
<div class="l-shell__tree">
|
||||
<MctTree ref="shell-tree"></MctTree>
|
||||
</div>
|
||||
</div>
|
||||
<splitter align="vertical" target="shell-pane-tree" collapse="to-left"></splitter>
|
||||
<div class="l-pane l-shell__pane-main" ref="shell-pane-main">
|
||||
</pane>
|
||||
<pane class="l-pane l-shell__pane-main" >
|
||||
<div class="l-shell__object-view">c-object-view</div>
|
||||
<div class="l-shell__time-conductor">c-time-conductor</div>
|
||||
</div>
|
||||
</pane>
|
||||
<splitter align="vertical" target="shell-pane-main" collapse="to-right"></splitter>
|
||||
<div class="l-pane l-shell__pane-inspector">
|
||||
<MctInspector ref="shell-inspector"></MctInspector>
|
||||
</div>
|
||||
</div>
|
||||
<pane class="l-pane l-shell__pane-inspector"
|
||||
splitter="before"
|
||||
collapsable>
|
||||
<MctInspector></MctInspector>
|
||||
</pane>
|
||||
</multipane>
|
||||
<div class="l-shell__status">
|
||||
[ Create Button ]
|
||||
<MctStatus ref="shell-status"></MctStatus>
|
||||
<MctStatus></MctStatus>
|
||||
[ App Logo ]
|
||||
</div>
|
||||
</div>
|
||||
@ -102,7 +106,8 @@
|
||||
import MctStatus from './MctStatus.vue';
|
||||
import MctTree from './MctTree.vue';
|
||||
import search from '../controls/search.vue';
|
||||
import splitter from '../controls/splitter.vue';
|
||||
import multipane from '../controls/multipane.vue';
|
||||
import pane from '../controls/pane.vue';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
@ -116,7 +121,8 @@
|
||||
MctStatus,
|
||||
MctTree,
|
||||
search,
|
||||
splitter
|
||||
multipane,
|
||||
pane
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<div class="c-inspector">
|
||||
<div class="c-inspector__properties">
|
||||
<multipane class="c-inspector"
|
||||
type="vertical">
|
||||
<pane class="c-inspector__properties">
|
||||
c-inspector__properties
|
||||
</div>
|
||||
<splitter align="horizontal"></splitter>
|
||||
<div class="l-pane c-inspector__elements">
|
||||
</pane>
|
||||
<pane class="l-pane c-inspector__elements"
|
||||
splitter="before">
|
||||
c-inspector__elements
|
||||
</div>
|
||||
</div>
|
||||
</pane>
|
||||
</multipane>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@ -36,10 +37,12 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import splitter from '../controls/splitter.vue'
|
||||
import multipane from '../controls/multipane.vue';
|
||||
import pane from '../controls/pane.vue';
|
||||
export default {
|
||||
components: {
|
||||
splitter
|
||||
multipane,
|
||||
pane
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user