Reorganize components, create ObjectFrame

src/MCT.js

@@ -40,7 +40,7 @@ define([
     '../platform/framework/src/Main',
     './styles-new/core.scss',
     './styles-new/notebook.scss',
-    './ui/components/layout/Layout.vue',
+    './ui/layout/Layout.vue',
     '../platform/core/src/objects/DomainObjectImpl',
     '../platform/core/src/capabilities/ContextualDomainObject',
     'vue'

src/plugins/displayLayout/components/SubobjectView.vue

@@ -24,90 +24,16 @@
                   :grid-size="gridSize"
                   @endDrag="(item, updates) => $emit('endDrag', item, updates)"
                   @drilledIn="item => $emit('drilledIn', item)">
-        <div class="u-contents">
+        <object-frame v-if="domainObject"
-            <div class="c-so-view__header">
+                      :domain-object="domainObject"
-                <div class="c-so-view__header__start">
+                      :object-path="objectPath"
-                    <div class="c-so-view__header__name"
+                      :has-frame="item.hasFrame">
-                         :class="cssClass">
+        </object-frame>
-                        {{ domainObject && domainObject.name }}
-                    </div>
-                    <context-menu-drop-down
-                        :object-path="objectPath">
-                    </context-menu-drop-down>
-                </div>
-                <div class="c-so-view__header__end">
-                    <div class="c-button icon-expand local-controls--hidden"></div>
-                </div>
-            </div>
-            <object-view class="c-so-view__object-view"
-                         :object="domainObject"></object-view>
-        </div>
     </layout-frame>
 </template>
 
-<style lang="scss">
-    @import "~styles/sass-base";
-
-    .c-so-view {
-        /*************************** HEADER */
-        &__header {
-            display: flex;
-            align-items: center;
-
-            &__start,
-            &__end {
-                display: flex;
-                flex: 1 1 auto;
-            }
-
-            &__end {
-                justify-content: flex-end;
-            }
-
-            &__name {
-                @include headerFont(1em);
-                display: flex;
-                &:before {
-                    margin-right: $interiorMarginSm;
-                }
-            }
-
-            .no-frame & {
-                display: none;
-            }
-        }
-
-        &__name {
-            @include ellipsize();
-            @include headerFont(1.2em);
-            flex: 0 1 auto;
-
-            &:before {
-                // Object type icon
-                flex: 0 0 auto;
-                margin-right: $interiorMarginSm;
-                opacity: 0.5;
-            }
-        }
-
-        /*************************** OBJECT VIEW */
-        &__object-view {
-            flex: 1 1 auto;
-            overflow: auto;
-
-            .c-object-view {
-                .u-fills-container {
-                    // Expand component types that fill a container
-                    @include abs();
-                }
-            }
-        }
-    }
-</style>
-
 <script>
-    import ObjectView from '../../../ui/components/layout/ObjectView.vue'
+    import ObjectFrame from '../../../ui/components/ObjectFrame.vue'
-    import ContextMenuDropDown from '../../../ui/components/controls/contextMenuDropDown.vue';
     import LayoutFrame from './LayoutFrame.vue'
 
     const MINIMUM_FRAME_SIZE = [320, 180],
@@ -152,20 +78,17 @@
         data() {
             return {
                 domainObject: undefined,
-                cssClass: undefined,
                 objectPath: []
             }
         },
         components: {
-            ObjectView,
+            ObjectFrame,
-            ContextMenuDropDown,
             LayoutFrame
         },
         methods: {
             setObject(domainObject) {
                 this.domainObject = domainObject;
                 this.objectPath = [this.domainObject].concat(this.openmct.router.path);
-                this.cssClass = this.openmct.types.get(this.domainObject.type).definition.cssClass;
                 let context = {
                     item: domainObject,
                     layoutItem: this.item,
@@ -176,6 +99,7 @@
             }
         },
         mounted() {
+            console.log(this.item);
             this.openmct.objects.get(this.item.identifier)
                 .then(this.setObject);
         },

src/plugins/flexibleLayout/components/frame.vue

@@ -27,15 +27,16 @@
         }">
 
         <div class="c-frame c-fl-frame__drag-wrapper is-selectable is-moveable"
-             :class="{'no-frame': noFrame}"
              draggable="true"
              @dragstart="initDrag"
              ref="frame">
 
-            <subobject-view
+            <object-frame
-                v-if="item.domainObject.identifier"
+                v-if="domainObject"
-                :item="item">
+                :domain-object="domainObject"
-            </subobject-view>
+                :object-path="objectPath"
+                :has-frame="hasFrame">
+            </object-frame>
 
             <div class="c-fl-frame__size-indicator"
                  v-if="isEditing"
@@ -48,7 +49,7 @@
 
 <script>
 import ResizeHandle from './resizeHandle.vue';
-import SubobjectView from '../../displayLayout/components/SubobjectView.vue';
+import ObjectFrame from '../../../ui/components/ObjectFrame.vue';
 import isEditingMixin from '../mixins/isEditing';
 
 export default {
@@ -57,26 +58,29 @@ export default {
     mixins: [isEditingMixin],
     data() {
         return {
-            item: {domainObject: {}}
+            domainObject: undefined,
+            objectPath: undefined
         }
     },
     components: {
         ResizeHandle,
-        SubobjectView
+        ObjectFrame
     },
     computed: {
-        noFrame() {
+        hasFrame() {
-            return this.frame.noFrame;
+            return !this.frame.noFrame;
         }
     },
     methods: {
         setDomainObject(object) {
-            this.item.domainObject = object;
+            console.log('setting object!');
+            this.domainObject = object;
+            this.objectPath = [object];
             this.setSelection();
         },
         setSelection() {
             let context = {
-                item: this.item.domainObject,
+                item: this.domainObject,
                 addContainer: this.addContainer,
                 type: 'frame',
                 frameId: this.frame.id

src/ui/components/COMPONENTS.md

@@ -0,0 +1,5 @@
+# Components
+
+Components in this folder are intended for reuse in other parts of the 
+application.  In order for components to be reused, they must not depend on 
+parent styling, and they should have minimum internal state.

src/ui/components/ObjectFrame.vue

@@ -0,0 +1,134 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+<template>
+    <div class="u-contents c-so-view"
+        :class="{
+            'c-so-view--no-frame': !hasFrame
+        }">
+        <div class="c-so-view__header">
+            <div class="c-so-view__header__start">
+                <div class="c-so-view__header__name"
+                     :class="cssClass">
+                    {{ domainObject && domainObject.name }}
+                </div>
+                <context-menu-drop-down
+                    :object-path="objectPath">
+                </context-menu-drop-down>
+            </div>
+            <div class="c-so-view__header__end">
+                <div class="c-button icon-expand local-controls--hidden"></div>
+            </div>
+        </div>
+        <object-view class="c-so-view__object-view"
+                     :object="domainObject"></object-view>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-so-view {
+        /*************************** HEADER */
+        &__header {
+            display: flex;
+            align-items: center;
+
+            &__start,
+            &__end {
+                display: flex;
+                flex: 1 1 auto;
+            }
+
+            &__end {
+                justify-content: flex-end;
+            }
+
+            &__name {
+                @include headerFont(1em);
+                display: flex;
+                &:before {
+                    margin-right: $interiorMarginSm;
+                }
+            }
+        }
+
+        &--no-frame .c-so-view__header {
+            display: none;
+        }
+
+        &__name {
+            @include ellipsize();
+            @include headerFont(1.2em);
+            flex: 0 1 auto;
+
+            &:before {
+                // Object type icon
+                flex: 0 0 auto;
+                margin-right: $interiorMarginSm;
+                opacity: 0.5;
+            }
+        }
+
+        /*************************** OBJECT VIEW */
+        &__object-view {
+            flex: 1 1 auto;
+            overflow: auto;
+
+            .c-object-view {
+                .u-fills-container {
+                    // Expand component types that fill a container
+                    @include abs();
+                }
+            }
+        }
+    }
+</style>
+
+<script>
+    import ObjectView from './ObjectView.vue'
+    import ContextMenuDropDown from './contextMenuDropDown.vue';
+
+    export default {
+        inject: ['openmct'],
+        props: {
+            domainObject: Object,
+            objectPath: Array,
+            hasFrame: Boolean,
+        },
+        computed: {
+            cssClass() {
+                if (!this.domainObject || !this.domainObject.type) {
+                    return;
+                }
+                let objectType = this.openmct.types.get(this.domainObject.type);
+                if (!objectType || !objectType.definition) {
+                    return; // TODO: return unknown icon type.
+                }
+                return objectType.definition.cssClass;
+            }
+        },
+        components: {
+            ObjectView,
+            ContextMenuDropDown,
+        }
+    }
+</script>

src/ui/inspector/Elements.vue

@@ -16,7 +16,7 @@
             </li>
             <li class="js-last-place" @drop="moveToIndex(elements.length)"></li>
         </ul>
-        <div v-if="elements.length === 0">No contained elements</div>    
+        <div v-if="elements.length === 0">No contained elements</div>
     </div>
 </div>
 </template>
@@ -55,8 +55,8 @@
     }
 </style>
 <script>
-import Search from '../controls/search.vue';
+import Search from '../components/search.vue';
-import ObjectLabel from '../controls/ObjectLabel.vue';
+import ObjectLabel from '../components/ObjectLabel.vue';
 
 export default {
     inject: ['openmct'],
@@ -147,7 +147,7 @@ export default {
                 composition.splice(deleteIndex, 1);
                 composition.splice(moveToIndex, 0, moveFromId);
             }
-            
+
             this.openmct.objects.mutate(this.parentObject, 'composition', composition);
         },
         moveFrom(index){

src/ui/inspector/Inspector.vue

@@ -179,8 +179,8 @@
 </style>
 
 <script>
-    import multipane from '../controls/multipane.vue';
+    import multipane from '../layout/multipane.vue';
-    import pane from '../controls/pane.vue';
+    import pane from '../layout/pane.vue';
     import Elements from './Elements.vue';
     import Location from './Location.vue';
     import Properties from './Properties.vue';

src/ui/layout/CreateButton.vue

@@ -62,8 +62,8 @@
 </style>
 
 <script>
-    import CreateAction from '../../../../platform/commonUI/edit/src/creation/CreateAction';
+    import CreateAction from '../../../platform/commonUI/edit/src/creation/CreateAction';
-    import objectUtils from '../../../api/objects/object-utils';
+    import objectUtils from '../../api/objects/object-utils';
 
     function convertToLegacyObject(domainObject) {
         let keyString = objectUtils.makeKeyString(domainObject.identifier);

src/ui/layout/Layout.vue

@@ -237,12 +237,12 @@
 <script>
     import Inspector from '../inspector/Inspector.vue';
     import MctTree from './mct-tree.vue';
-    import ObjectView from './ObjectView.vue';
+    import ObjectView from '../components/ObjectView.vue';
     import MctTemplate from '../legacy/mct-template.vue';
-    import CreateButton from '../controls/CreateButton.vue';
+    import CreateButton from './CreateButton.vue';
-    import search from '../controls/search.vue';
+    import search from '../components/search.vue';
-    import multipane from '../controls/multipane.vue';
+    import multipane from './multipane.vue';
-    import pane from '../controls/pane.vue';
+    import pane from './pane.vue';
     import BrowseBar from './BrowseBar.vue';
     import StatusBar from './status-bar/StatusBar.vue';
     import Toolbar from '../toolbar/Toolbar.vue';

src/ui/layout/tree-item.vue

@@ -21,8 +21,8 @@
 </template>
 
 <script>
-    import viewControl from '../controls/viewControl.vue';
+    import viewControl from '../components/viewControl.vue';
-    import ObjectLabel from '../controls/ObjectLabel.vue';
+    import ObjectLabel from '../components/ObjectLabel.vue';
 
     export default {
         name: 'tree-item',