mirror of
https://github.com/nasa/openmct.git
synced 2025-01-29 15:43:52 +00:00
Beginning of new layout code.
Really basic 5 component setup.
This commit is contained in:
parent
0d53898af9
commit
279e0bf29d
@ -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;
|
||||
|
29
src/MCT.js
29
src/MCT.js
@ -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');
|
||||
};
|
||||
|
||||
|
||||
|
@ -23,7 +23,7 @@
|
||||
define([
|
||||
'./AutoflowTabularController',
|
||||
'./AutoflowTabularConstants',
|
||||
'../../ui/VueView',
|
||||
'./VueView',
|
||||
'./autoflow-tabular.html'
|
||||
], function (
|
||||
AutoflowTabularController,
|
||||
|
39
src/ui/components/layout/Layout.vue
Normal file
39
src/ui/components/layout/Layout.vue
Normal 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>
|
19
src/ui/components/layout/MctInspector.vue
Normal file
19
src/ui/components/layout/MctInspector.vue
Normal 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>
|
21
src/ui/components/layout/MctMain.vue
Normal file
21
src/ui/components/layout/MctMain.vue
Normal 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>
|
||||
|
||||
|
19
src/ui/components/layout/MctStatus.vue
Normal file
19
src/ui/components/layout/MctStatus.vue
Normal 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>
|
19
src/ui/components/layout/MctTree.vue
Normal file
19
src/ui/components/layout/MctTree.vue
Normal 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>
|
Loading…
x
Reference in New Issue
Block a user