ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-24 07:16:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Markup / scss refactor WIP

Browse Source 
Fixes #2140
- Add new splitter component with passed properties;
This commit is contained in:
charlesh88 2018-08-08 17:39:26 -07:00
parent 50be483421
commit 84430d34b1
2 changed files with 68 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/ui/components/controls/splitter.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<div class="c-splitter" :class="cssClass"></div>
</template>
<style lang="scss">
.c-splitter {
$c: #06f;
$s: 10px;
&:before {
content: '';
display: block;
background: #ccc;
position: absolute;
}
&:hover {
background: rgba($c, 0.3);
&:before {
background: $c;
}
}
&--horz {
cursor: col-resize;
width: $s;
&:before {
// Divider line
width: 1px;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
}
&--vert {
cursor: row-resize;
height: $s;
&:before {
// Divider line
width: 100%;
height: 1px;
top: 50%;
transform: translateY(-50%);
}
}
}
</style>
<script>
export default {
props: {
cssClass: String
}
}
</script>

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

@ -1,7 +1,7 @@
<template> <template>
<div class="l-shell"> <div class="l-shell">
<div class="l-shell__main"> <div class="l-shell__main">
<div class="l-shell__tree l-pane" style="width: 400px"> <div class="l-shell__tree l-pane" style="width: 400px" ref="shell-tree">
<div class="l-pane__elem c-search"> <div class="l-pane__elem c-search">
<input placeholder="Search" /> <input placeholder="Search" />
</div> </div>
@ -22,42 +22,31 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="c-splitter c-splitter--horz js-t-split-o"></div> <splitter cssClass="c-splitter--horz js-t-split-o"></splitter>
<div class="l-shell__object l-object-view"> <div class="l-shell__object l-object-view">
<div class="l-object-view__object-h">l-object-h</div> <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">c-time-conductor</div> <div class="l-object-view__time-conductor-h c-time-conductor" ref="shell-time-conductor">c-time-conductor</div>
</div> </div>
<div class="c-splitter c-splitter--horz js-o-split-i"></div> <splitter cssClass="c-splitter--horz js-o-split-i"></splitter>
<div class="l-shell__inspector l-inspector" style="width: 200px"> <div class="l-shell__inspector l-inspector" style="width: 200px" ref="shell-inspector">
<div class="l-inspector__properties" style="height: 300px"> <div class="l-inspector__properties" style="height: 300px">
l-inspector__properties l-inspector__properties
</div> </div>
<div class="c-splitter c-splitter--vert js-p-split-e"></div> <splitter cssClass="c-splitter--vert js-p-split-e"></splitter>
<div class="l-inspector__elements"> <div class="l-inspector__elements">
l-inspector__elements l-inspector__elements
</div> </div>
</div> </div>
</div> </div>
<div class="l-shell__status"> <div class="l-shell__status" ref="shell-status">
l-shell_status l-shell_status
</div> </div>
</div> </div>
<!--<div class="l-shell">
<mct-tree ref="tree"></mct-tree>
<mct-main ref="main"></mct-main>
<mct-inspector ref="inspector"></mct-inspector>
<mct-status ref="status"></mct-status>
</div>-->
</template> </template>
<style lang="scss"> <style lang="scss">
@import "~styles/constants"; @import "~styles/constants";
/******************************* SHELL */
.l-shell { .l-shell {
position: absolute; position: absolute;
top: 0; right: 0; bottom: 0; left: 0; top: 0; right: 0; bottom: 0; left: 0;
@ -106,10 +95,8 @@
</style> </style>
<script> <script>
import MctTree from './MctTree.vue' // import MctTree from './MctTree.vue'
import MctMain from './MctMain.vue' import splitter from '../controls/splitter.vue'
import MctInspector from './MctInspector.vue'
import MctStatus from './MctStatus.vue'
export default { export default {
data () { data () {
@ -118,10 +105,7 @@ export default {
} }
}, },
components: { components: {
MctTree, splitter
MctMain,
MctInspector,
MctStatus
} }
} }
</script> </script>