Beginning of new layout code.

Really basic 5 component setup.
This commit is contained in:
Pete Richards 2018-08-07 14:59:04 -07:00
parent 0d53898af9
commit 279e0bf29d
12 changed files with 137 additions and 14 deletions

View File

@ -34,9 +34,6 @@
<link rel="shortcut icon" href="dist/favicons/favicon.ico">
</head>
<body>
<div class="l-splash-holder s-splash-holder">
<div class="l-splash s-splash"></div>
</div>
</body>
<script>
var THIRTY_MINUTES = 30 * 60 * 1000;

View File

@ -28,11 +28,13 @@ define([
'./selection/Selection',
'./api/objects/object-utils',
'./plugins/plugins',
'./ui/ViewRegistry',
'./ui/InspectorViewRegistry',
'./ui/ToolbarRegistry',
'./ui/registries/ViewRegistry',
'./ui/registries/InspectorViewRegistry',
'./ui/registries/ToolbarRegistry',
'./adapter/indicators/legacy-indicators-plugin',
'./styles/core.scss'
'./styles/core.scss',
'./ui/components/layout/Layout.vue',
'vue'
], function (
EventEmitter,
legacyRegistry,
@ -45,7 +47,9 @@ define([
InspectorViewRegistry,
ToolbarRegistry,
LegacyIndicatorsPlugin,
coreStyles
coreStyles,
Layout,
Vue
) {
/**
* Open MCT is an extensible web application for building mission
@ -245,10 +249,15 @@ define([
domElement = document.body;
}
var appDiv = document.createElement('div');
appDiv.setAttribute('ng-view', '');
appDiv.className = 'user-environ';
domElement.appendChild(appDiv);
var appLayout = new Vue(Layout.default);
domElement.appendChild(appLayout.$mount().$el);
// var appDiv = document.createElement('div');
// domElement.appendChild(appDiv);
// var appLayout = new Vue(Layout)
// appDiv.setAttribute('ng-view', '');
// appDiv.className = 'user-environ';
this.legacyExtension('runs', {
depends: ['navigationService'],
@ -288,7 +297,7 @@ define([
* @event start
* @memberof module:openmct.MCT~
*/
this.emit('start');
// this.emit('start');
};

View File

@ -23,7 +23,7 @@
define([
'./AutoflowTabularController',
'./AutoflowTabularConstants',
'../../ui/VueView',
'./VueView',
'./autoflow-tabular.html'
], function (
AutoflowTabularController,

View File

@ -0,0 +1,39 @@
<template>
<div class="Layout">
<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>
<style lang="scss">
.Layout {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute
}
</style>
<script>
import MctTree from './MctTree.vue'
import MctMain from './MctMain.vue'
import MctInspector from './MctInspector.vue'
import MctStatus from './MctStatus.vue'
export default {
data () {
return {
msg: 'Hello world!'
}
},
components: {
MctTree,
MctMain,
MctInspector,
MctStatus
}
}
</script>

View File

@ -0,0 +1,19 @@
<template>
<div class="MCT_Inspector">I'm an inspector</div>
</template>
<style lang="scss">
.MCT_Inspector {
position: absolute;
right: 0px;
top: 0px;
bottom: 20px;
width: 100px;
background: orange;
}
</style>
<script>
export default {
}
</script>

View File

@ -0,0 +1,21 @@
<template>
<div class="MCT_Main">I'm the main region</div>
</template>
<style lang="scss">
.MCT_Main {
position: absolute;
right: 100px;
top: 0px;
bottom: 20px;
left: 100px;
background: green;
}
</style>
<script>
export default {
}
</script>

View File

@ -0,0 +1,19 @@
<template>
<div class="MCT_Status">I'm the status bar</div>
</template>
<style lang="scss">
.MCT_Status {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 20px;
background: black;
}
</style>
<script>
export default {
}
</script>

View File

@ -0,0 +1,19 @@
<template>
<div class="MCT_Tree">I'm a tree</div>
</template>
<style lang="scss">
.MCT_Tree {
position: absolute;
width: 100px;
left: 0px;
top: 0px;
bottom: 20px;
background: red;
}
</style>
<script>
export default {
}
</script>