ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-18 20:57:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Recursive tree items

Browse Source
This commit is contained in:
Pete Richards 2018-08-17 17:31:12 -07:00
parent 5aa2be9761
commit 8378dfa613
4 changed files with 169 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/ui/components/controls/viewControl.vue
View File

@ -53,8 +53,9 @@
}
},
methods: {
toggle() {
toggle(event) {
this.expanded = !this.expanded;
this.$emit('click', event);
}
}
}

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

@ -13,7 +13,7 @@
<search class="c-search--major" ref="shell-search"></search>
</div>
<div class="l-shell__tree">
<MctTree ref="shell-tree"></MctTree>
<mct-tree :nodes="treeRoots"></mct-tree>
</div>
</pane>
<pane class="l-pane l-shell__pane-main">
@ -133,7 +133,7 @@
import MctInspector from './MctInspector.vue';
import MctMain from './MctMain.vue';
import MctStatus from './MctStatus.vue';
import MctTree from './MctTree.vue';
import MctTree from './mct-tree.vue';
import search from '../controls/search.vue';
import multipane from '../controls/multipane.vue';
import pane from '../controls/pane.vue';
@ -141,7 +141,44 @@
export default {
data () {
return {
msg: 'Hello world!'
treeRoots: [
{
id: 'r1',
name: 'Root 1',
children: [
{
id: 'r1c1',
name: 'r1c1'
},
{
id: 'r1c2',
name: 'r1c2'
},
{
id: 'r1c3',
name: 'r1c3'
},
]
},{
id: 'r2',
name: 'Root 2',
children: [
{
id: 'r2c1',
name: 'r2c1',
children: [
{
id: 'r2c1c1',
name: 'r2c1c1'
}
]
}
]
},{
id: 'r3',
name: 'Root 3'
}
]
}
},
methods: {

83
src/ui/components/layout/mct-tree.vue Normal file
View File

@ -0,0 +1,83 @@
<template>
<ul class="c-tree">
<tree-item v-for="node in nodes"
:key="node.id"
:node="node">
</tree-item>
</ul>
</template>
<style lang="scss">
@import "~styles/sass-base";
.c-tree {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
.c-tree {
margin-left: 20px;
}
&__item {
border-radius: $controlCr;
color: $colorItemTreeFg;
display: flex;
align-items: stretch;
cursor: pointer;
padding: 5px;
transition: background 150ms ease;
&:hover {
background: $colorItemTreeHoverBg;
.c-tree__item__name:before {
// Type icon
color: $colorItemTreeIconHover;
}
}
.c-tree__item__view-control {
color: $colorItemTreeVC;
margin-right: $interiorMarginSm;
}
&__name {
&:before {
color: $colorItemTreeIcon;
width: $treeTypeIconW;
}
}
}
}
.c-object-name {
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap;
&:before {
// Type icon
display: inline-block;
font-size: 1.3em;
margin-right: $interiorMarginSm;
}
&__name {
@include ellipsize();
display: inline;
}
}
</style>
<script>
import treeItem from './tree-item.vue'
export default {
props: ['nodes'],
name: 'mct-tree',
components: {
treeItem
}
}
</script>

44
src/ui/components/layout/tree-item.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<li class="c-tree__item-h">
<div class="c-tree__item">
<view-control class="c-tree__item__view-control"
:expanded="expanded"
@click="toggleChildren">
</view-control>
<span class="c-tree__item__name c-object-name icon-folder"
:class="node.cssClass">
<span class="c-object-name__name">{{ node.name }}</span>
</span>
</div>
<ul v-if="expanded" class="c-tree">
<tree-item v-for="child in node.children"
:key="child.id"
:node="child"
>
</tree-item>
</ul>
</li>
</template>
<script>
import viewControl from '../controls/viewControl.vue'
export default {
name: 'tree-item',
props: {
node: Object
},
data() {
return {
expanded: false
}
},
methods: {
toggleChildren: function () {
this.expanded = !this.expanded;
}
},
components: {
viewControl
}
}
</script>