mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
Pane cleanup
This commit is contained in:
Pete Richards
parent
5deff887fc
commit
91eefbfa7b
@ -8,148 +8,6 @@
|
||||
</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: {
|
||||
|
||||
@ -1,17 +1,24 @@
|
||||
<template>
|
||||
<div class="multipane__pane"
|
||||
<div class="pane"
|
||||
:class="{
|
||||
'multipane__pane--collapsed': collapsed
|
||||
'pane--horizontal': type === 'horizontal',
|
||||
'pane--vertical': type === 'vertical',
|
||||
'pane--collapsed': collapsed
|
||||
}">
|
||||
<div v-if="splitter"
|
||||
class="multipane__splitter"
|
||||
|
||||
<div v-if="handle"
|
||||
class="pane__resize-handle"
|
||||
:class="{
|
||||
'multipane__splitter--before': splitter === 'before',
|
||||
'multipane__splitter--after': splitter === 'after'
|
||||
'pane__resize-handle--before': handle === 'before',
|
||||
'pane__resize-handle--after': handle === 'after'
|
||||
}"
|
||||
@mousedown="start"
|
||||
>
|
||||
<a class="multipane__splitter__button"
|
||||
<a class="pane__collapse-button"
|
||||
:class="{
|
||||
'pane__collapse-button--before': handle === 'before',
|
||||
'pane__collapse-button--after': handle === 'after'
|
||||
}"
|
||||
@click="toggleCollapse"
|
||||
v-if="collapsable"></a>
|
||||
</div>
|
||||
@ -19,10 +26,154 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/constants";
|
||||
@import "~styles/constants-snow";
|
||||
@import "~styles/mixins";
|
||||
@import "~styles/glyphs";
|
||||
|
||||
$hitMargin: 4px;
|
||||
|
||||
.pane {
|
||||
& > .pane__resize-handle {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
background: $colorSplitterBg;
|
||||
position: absolute;
|
||||
|
||||
transition: $transOut;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
&:active, &:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $colorSplitterActive;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
}
|
||||
|
||||
&--horizontal {
|
||||
& > .pane__resize-handle {
|
||||
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 {
|
||||
> .pane__resize-handle {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
& > .pane__resize-handle > .pane__collapse-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
|
||||
background: $colorSplitterBg;
|
||||
transition: $transOut;
|
||||
|
||||
&:active, &:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $colorSplitterActive;
|
||||
}
|
||||
|
||||
&:before {
|
||||
color: $colorSplitterFg;
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
}
|
||||
|
||||
&--horizontal > .pane__resize-handle > .pane__collapse-button {
|
||||
width: $splitterD;
|
||||
height: 40px;
|
||||
|
||||
&--before {
|
||||
border-bottom-right-radius: $controlCr;
|
||||
left: 0;
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-right;
|
||||
}
|
||||
}
|
||||
&--after {
|
||||
border-bottom-left-radius: $controlCr;
|
||||
right: 0;
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--vertical > .pane__resize-handle > .pane__collapse-button {
|
||||
/* TODO: style buttons for vertical collapse. */
|
||||
}
|
||||
}
|
||||
|
||||
.pane--horizontal.pane--collapsed {
|
||||
width: 0px;
|
||||
min-width: 0px;
|
||||
}
|
||||
.pane--vertical.pane--collapsed {
|
||||
height: 0px;
|
||||
min-height: 0px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
splitter: {
|
||||
handle: {
|
||||
type: String,
|
||||
validator: function (value) {
|
||||
return ['before', 'after'].indexOf(value) !== -1;
|
||||
@ -35,6 +186,10 @@ export default {
|
||||
collapsed: false
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
console.log('this.$parent', this.$parent, this.$parent.type);
|
||||
this.type = this.$parent.type;
|
||||
},
|
||||
mounted() {
|
||||
this.type = this.$parent.type;
|
||||
if (this.type === 'horizontal') {
|
||||
@ -69,10 +224,10 @@ export default {
|
||||
},
|
||||
getNewSize: function (event) {
|
||||
let delta = this.startPosition - this.getPosition(event);
|
||||
if (this.splitter === "before") {
|
||||
if (this.handle === "before") {
|
||||
return `${this.initial + delta}px`;
|
||||
}
|
||||
if (this.splitter === "after") {
|
||||
if (this.handle === "after") {
|
||||
return `${this.initial - delta}px`;
|
||||
}
|
||||
},
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<multipane class="l-shell__main"
|
||||
type="horizontal">
|
||||
<pane class="l-pane l-shell__pane-tree"
|
||||
splitter="after"
|
||||
handle="after"
|
||||
collapsable>
|
||||
<div class="l-shell__search">
|
||||
<search class="c-search--major" ref="shell-search"></search>
|
||||
@ -17,7 +17,7 @@
|
||||
<div class="l-shell__time-conductor">c-time-conductor</div>
|
||||
</pane>
|
||||
<pane class="l-pane l-shell__pane-inspector"
|
||||
splitter="before"
|
||||
handle="before"
|
||||
collapsable>
|
||||
<MctInspector></MctInspector>
|
||||
</pane>
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
c-inspector__properties
|
||||
</pane>
|
||||
<pane class="l-pane c-inspector__elements"
|
||||
splitter="before">
|
||||
handle="before">
|
||||
c-inspector__elements
|
||||
</pane>
|
||||
</multipane>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user