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

Markup / scss refactor WIP

Browse Source 
- Add normalize.min to styles-new;
- Factor components to be more standalone, very WIP;
This commit is contained in:
charlesh88
2018-08-09 16:02:22 -07:00
parent 4d9b7fe3e4
commit f811318d18
5 changed files with 181 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,82 +1,123 @@
<template>
<div class="l-shell">
<div class="l-shell__main">
<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-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-pane l-inspector" style="width: 200px" ref="shell-inspector">
<div class="l-inspector__properties" style="height: 300px">
l-inspector__properties
<div class="l-shell">
<div class="l-shell__main">
<div class="l-pane l-shell__tree-pane" style="width: 400px" ref="shell-tree-pane">
<div class="l-pane__elem l-shell__search">
<!-- Change to search compoonent -->
<input placeholder="Search"/>
</div>
<div class="l-pane__elem l-shell__tree">
<MctTree ref="shell-tree"></MctTree>
</div>
</div>
<splitter cssClass="c-splitter--vert js-p-split-e"></splitter>
<div class="l-inspector__elements">
l-inspector__elements
<splitter align="vertical" target="shell-tree-pane"></splitter>
<div class="l-pane l-shell__main-pane" ref="shell-main-pane">
<div class="l-shell__object-view c-object-view">c-object-view</div>
<div class="l-shell__time-conductor c-time-conductor">c-time-conductor</div>
</div>
<splitter align="vertical" target="shell-main-pane"></splitter>
<div class="l-pane l-inspector-pane">
<MctInspector ref="shell-inspector"></MctInspector>
</div>
</div>
<div class="l-shell__status">
[ Create Button ]
<MctStatus ref="shell-status"></MctStatus>
[ App Logo ]
</div>
</div>
<div class="l-shell__status" ref="shell-status">
l-shell_status
</div>
</div>
</template>
<style lang="scss">
@import "~styles/constants";
@import "~styles/constants";
.l-shell {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
/******************************* SHELL */
.l-shell {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
flex-flow: column nowrap;
/********** STATUS AREA */
&__status {
background: #666;
color: #ccc;
flex: 0 1 auto;
height: 40px;
order: 1;
padding: $interiorMarginLg;
}
/********** MAIN AREA */
&__main {
flex: 1 1 auto;
display: flex;
flex-flow: row nowrap;
order: 2;
}
&__object-view {
background: #cc0;
flex: 1 1 auto;
padding: $interiorMarginLg;
}
&__time-conductor {
background: #cac;
min-height: 50px;
padding: $interiorMarginLg;
}
/******************************* OBJECT VIEW */
&__main-pane {
display: flex;
flex-flow: column nowrap;
/********** STATUS AREA */
&__status {
background: #666;
color: #ccc;
flex: 0 1 auto;
height: 40px;
order: 1;
padding: $interiorMarginLg;
}
/********** MAIN AREA */
&__main {
flex: 1 1 auto;
display: flex;
flex-flow: row nowrap;
order: 2;
}
&__tree-pane,
&__inspector-pane {
max-width: 30%;
min-width: 5%;
}
&__tree-pane {
background: #f90;
display: flex;
flex-flow: column nowrap;
padding: $interiorMarginLg;
}
&__object-pane {
flex: 1 1 auto;
}
&__inspector-pane {
background: #f9c;
}
}
&__object-view {
background: #cc0;
flex: 1 1 auto;
padding: $interiorMarginLg;
}
&__time-conductor {
background: #cac;
min-height: 50px;
padding: $interiorMarginLg;
}
&__tree-pane,
&__inspector-pane {
max-width: 30%;
min-width: 5%;
}
&__tree-pane {
background: #f90;
display: flex;
flex-flow: column nowrap;
padding: $interiorMarginLg;
}
&__main-pane {
flex: 1 1 auto;
}
&__inspector-pane {
background: #f9c;
}
}
</style>
<script>
import MctTree from './MctTree.vue'
import splitter from '../controls/splitter.vue'
import MctInspector from './MctInspector.vue';
import MctMain from './MctMain.vue';
import MctStatus from './MctStatus.vue';
import MctTree from './MctTree.vue';
import splitter from '../controls/splitter.vue';
export default {
data () {
@ -85,6 +126,9 @@ export default {
}
},
components: {
MctInspector,
MctMain,
MctStatus,
MctTree,
splitter
}