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 
- Markup and components corrected;
- Stubbed in snow theme file;
This commit is contained in:
charlesh88
2018-08-10 14:53:16 -07:00
parent f811318d18
commit 32cdecebce
7 changed files with 55 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,22 +1,22 @@
<template>
<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 -->
<div class="l-pane l-shell__pane-tree" ref="shell-pane-tree">
<div class="l-shell__search">
<!-- Change to search component -->
<input placeholder="Search"/>
</div>
<div class="l-pane__elem l-shell__tree">
<div class="l-shell__tree">
<MctTree ref="shell-tree"></MctTree>
</div>
</div>
<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>
<splitter align="vertical" target="shell-pane-tree"></splitter>
<div class="l-pane l-shell__pane-main" ref="shell-pane-main">
<div class="l-shell__object-view">c-object-view</div>
<div class="l-shell__time-conductor">c-time-conductor</div>
</div>
<splitter align="vertical" target="shell-main-pane"></splitter>
<div class="l-pane l-inspector-pane">
<splitter align="vertical" target="shell-pane-main"></splitter>
<div class="l-pane l-shell__pane-inspector">
<MctInspector ref="shell-inspector"></MctInspector>
</div>
</div>
@ -68,48 +68,34 @@
padding: $interiorMarginLg;
}
/******************************* OBJECT VIEW */
&__main-pane {
/********** MAIN AREA PANES */
&__pane-tree,
&__pane-main,
&__pane-inspector {
display: flex;
flex-flow: column nowrap;
}
&__object-view {
background: #cc0;
flex: 1 1 auto;
padding: $interiorMarginLg;
}
&__time-conductor {
background: #cac;
min-height: 50px;
padding: $interiorMarginLg;
}
&__tree-pane,
&__inspector-pane {
&__pane-tree,
&__pane-inspector {
max-width: 30%;
min-width: 5%;
}
&__tree-pane {
&__pane-tree {
background: #f90;
display: flex;
flex-flow: column nowrap;
padding: $interiorMarginLg;
width: 300px
}
&__main-pane {
&__pane-main {
flex: 1 1 auto;
}
&__inspector-pane {
background: #f9c;
&__pane-inspector {
width: 200px
}
}
</style>
<script>