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

Use multipane instead of splitter

Browse Source
This commit is contained in:
Pete Richards
2018-08-15 13:52:34 -07:00
parent f67f03af47
commit 43f978e185
4 changed files with 168 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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>