ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-18 02:39:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Markup / scss refactor WIP

Browse Source 
Fixes #2140
- Use MctTree component with passed properties;
- MctTree markup and CSS ported from codepen;
This commit is contained in:
charlesh88 2018-08-08 18:03:00 -07:00
parent 84430d34b1
commit dd93653306
2 changed files with 66 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,34 +1,14 @@
<template>
<div class="l-shell">
<div class="l-shell__main">
<div class="l-shell__tree l-pane" style="width: 400px" ref="shell-tree">
<div class="l-pane__elem c-search">
<input placeholder="Search" />
</div>
<ul class="l-pane__elem l-tree">
<li class="l-tree__item-h">
<div class="l-tree__item" onclick="alert('tree item click');">
<span class="c-view-control"></span><span class="c-object-name icon-folder">
Tree item x with a long name that forces ellipsis to occur
</span>
</div>
<ul class="l-tree">
<li class="l-tree__item-h">
<div class="l-tree__item" onclick="alert('tree item click');">
<span class="c-view-control"></span><span class="c-object-name icon-folder">Tree item y</span>
</div>
</li>
</ul>
</li>
</ul>
</div>
<MctTree cssClass="l-shell__tree-pane" cssStyle="width: 400px" ref="shell-tree"></MctTree>
<splitter cssClass="c-splitter--horz js-t-split-o"></splitter>
<div class="l-shell__object l-object-view">
<div class="l-shell__object-pane l-object-view">
<div class="l-object-view__object-h" ref="shell-status">l-object-h</div>
<div class="l-object-view__time-conductor-h c-time-conductor" ref="shell-time-conductor">c-time-conductor</div>
</div>
<splitter cssClass="c-splitter--horz js-o-split-i"></splitter>
<div class="l-shell__inspector l-inspector" style="width: 200px" ref="shell-inspector">
<div class="l-shell__inspector-pane l-inspector" style="width: 200px" ref="shell-inspector">
<div class="l-inspector__properties" style="height: 300px">
l-inspector__properties
</div>
@ -53,7 +33,7 @@
display: flex;
flex-flow: column nowrap;
/********** HEAD */
/********** STATUS AREA */
&__status {
background: #666;
color: #ccc;
@ -63,7 +43,7 @@
padding: $interiorMarginLg;
}
/********** MAIN */
/********** MAIN AREA */
&__main {
flex: 1 1 auto;
display: flex;
@ -71,31 +51,31 @@
order: 2;
}
&__tree,
&__inspector {
&__tree-pane,
&__inspector-pane {
max-width: 30%;
min-width: 5%;
}
&__tree {
&__tree-pane {
background: #f90;
display: flex;
flex-flow: column nowrap;
padding: $interiorMarginLg;
}
&__object {
&__object-pane {
flex: 1 1 auto;
}
&__inspector {
&__inspector-pane {
background: #f9c;
}
}
</style>
<script>
// import MctTree from './MctTree.vue'
import MctTree from './MctTree.vue'
import splitter from '../controls/splitter.vue'
export default {
@ -105,6 +85,7 @@ export default {
}
},
components: {
MctTree,
splitter
}
}

65
src/ui/components/layout/MctTree.vue
View File

@ -1,19 +1,62 @@
<template>
<div class="MCT_Tree">I'm a tree</div>
<div class="l-pane" :class="cssClass" :style="cssStyle">
<div class="l-pane__elem c-search">
<input placeholder="Search"/>
</div>
<ul class="l-pane__elem l-tree">
<li class="l-tree__item-h">
<div class="l-tree__item" onclick="alert('tree item click');">
<span class="c-view-control"></span><span class="c-object-name icon-folder">
Tree item x with a long name that forces ellipsis to occur
</span>
</div>
<ul class="l-tree">
<li class="l-tree__item-h">
<div class="l-tree__item" onclick="alert('tree item click');">
<span class="c-view-control"></span><span class="c-object-name icon-folder">Tree item y</span>
</div>
</li>
</ul>
</li>
</ul>
</div>
</template>
<style lang="scss">
.MCT_Tree {
position: absolute;
width: 100px;
left: 0px;
top: 0px;
bottom: 20px;
background: red;
}
.l-tree {
.l-tree {
margin-left: 20px;
}
&__item {
border-radius: 5px;
display: flex;
flex-flow: row nowrap;
align-items: center;
cursor: pointer;
padding: 5px;
&:hover {
background: rgba(white, 0.2);
}
.c-view-control {
$d: 11px;
background: rgba(red, 0.4);
display: inline-block;
flex: 0 0 auto;
height: $d; width: $d;
margin-right: 5px;
}
}
}
</style>
<script>
export default {
}
export default {
props: {
cssClass: String,
cssStyle: String
}
}
</script>