ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-06 11:09:21 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Beginning of new layout code.

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

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

29
src/MCT.js
View File

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

2
src/plugins/autoflow/AutoflowTabularView.js
View File

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

0
src/ui/VueView.js → src/plugins/autoflow/VueView.js
View File

39
src/ui/components/layout/Layout.vue Normal file
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>

19
src/ui/components/layout/MctInspector.vue Normal file
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>

21
src/ui/components/layout/MctMain.vue Normal file
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>

19
src/ui/components/layout/MctStatus.vue Normal file
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>

19
src/ui/components/layout/MctTree.vue Normal file
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>

0
src/ui/InspectorViewRegistry.js → src/ui/registries/InspectorViewRegistry.js
View File

0
src/ui/ToolbarRegistry.js → src/ui/registries/ToolbarRegistry.js
View File

0
src/ui/ViewRegistry.js → src/ui/registries/ViewRegistry.js
View File