Merge branch 'topic-conditionals' of https://github.com/nasa/openmct into conditionals-refactor

src/plugins/condition/components/inspector/ConditionalStylesView.vue

@@ -0,0 +1,14 @@
+<template>
+<div>Conditional Styles inspector view</div>
+</template>
+
+<script>
+
+export default {
+    components: {
+    },
+    inject: [
+        'openmct'
+    ]
+}
+</script>

src/ui/inspector/Inspector.vue

@@ -1,22 +1,46 @@
 <template>
-<multipane
+<div class="c-inspector">
-    class="c-inspector"
+    <div class="c-inspector__tabs"
-    type="vertical"
->
-    <pane class="c-inspector__properties">
-        <properties />
-        <location />
-        <inspector-views />
-    </pane>
-    <pane
-        v-if="isEditing && hasComposition"
-        class="c-inspector__elements"
-        handle="before"
-        label="Elements"
     >
-        <elements />
+        <div v-if="showStyles"
-    </pane>
+             class="c-inspector__tabs__holder">
-</multipane>
+            <div v-for="tabbedView in tabbedViews"
+                 :key="tabbedView.key"
+                 class="c-inspector__tabs__header"
+                 @click="updateCurrentTab(tabbedView)"
+            >
+                <span class="c-inspector__tabs__label c-tab"
+                      :class="{'is-current': isCurrent(tabbedView)}"
+                >{{ tabbedView.name }}</span>
+            </div>
+        </div>
+        <div class="c-inspector__tabs__contents">
+            <multipane v-if="currentTabbedView.key === '__properties'"
+                       class="c-inspector"
+                       type="vertical"
+            >
+                <pane class="c-inspector__properties">
+                    <properties />
+                    <location />
+                    <inspector-views/>
+                </pane>
+                <pane
+                    v-if="isEditing && hasComposition"
+                    class="c-inspector__elements"
+                    handle="before"
+                    label="Elements"
+                >
+                    <elements />
+                </pane>
+            </multipane>
+            <pane v-else
+                  class="c-inspector__styles"
+            >
+                <styles-inspector-view/>
+            </pane>
+        </div>
+    </div>
+</div>
 </template>
 
 <script>
@@ -26,10 +50,14 @@ import Elements from './Elements.vue';
 import Location from './Location.vue';
 import Properties from './Properties.vue';
 import InspectorViews from './InspectorViews.vue';
+import _ from "lodash";
+import StylesInspectorView from "./StylesInspectorView.vue";
 
 export default {
     inject: ['openmct'],
     components: {
+        StylesInspectorView,
+        // StylesInspectorView,
         multipane,
         pane,
         Elements,
@@ -42,23 +70,56 @@ export default {
     },
     data() {
         return {
-            hasComposition: false
+            hasComposition: false,
+            showStyles: false,
+            tabbedViews: [{
+                key: '__properties',
+                name: 'Properties'
+            },{
+                key: '__styles',
+                name: 'Styles'
+            }],
+            currentTabbedView: {}
         }
     },
     mounted() {
-        this.openmct.selection.on('change', this.refreshComposition);
+        this.excludeObjectTypes = ['folder', 'webPage', 'conditionSet'];
-        this.refreshComposition(this.openmct.selection.get());
+        this.openmct.selection.on('change', this.updateInspectorViews);
     },
     destroyed() {
-        this.openmct.selection.off('change', this.refreshComposition);
+        this.openmct.selection.off('change', this.updateInspectorViews);
     },
     methods: {
+        updateInspectorViews(selection) {
+            this.refreshComposition(selection);
+            if (this.openmct.types.get('conditionSet')) {
+                this.refreshTabs(selection);
+            }
+        },
         refreshComposition(selection) {
             if (selection.length > 0 && selection[0].length > 0) {
                 let parentObject = selection[0][0].context.item;
 
                 this.hasComposition = !!(parentObject && this.openmct.composition.get(parentObject));
             }
+        },
+        refreshTabs(selection) {
+            if (selection.length > 0 && selection[0].length > 0) {
+                //layout items are not domain objects but should allow conditional styles
+                this.showStyles = selection[0][0].context.layoutItem;
+                let object = selection[0][0].context.item;
+                if (object) {
+                    let type = this.openmct.types.get(object.type);
+                    this.showStyles = (this.excludeObjectTypes.indexOf(object.type) < 0) && type.definition.creatable;
+                }
+                this.updateCurrentTab(this.tabbedViews[0]);
+            }
+        },
+        updateCurrentTab(view) {
+            this.currentTabbedView = view;
+        },
+        isCurrent(view) {
+            return _.isEqual(this.currentTabbedView, view)
         }
     }
 }

src/ui/inspector/InspectorViews.vue

@@ -30,11 +30,10 @@ export default {
                 });
                 this.$el.innerHTML = '';
             }
-
             this.selectedViews = this.openmct.inspectorViews.get(selection);
             this.selectedViews.forEach(selectedView => {
                 let viewContainer = document.createElement('div');
-                this.$el.append(viewContainer)
+                this.$el.append(viewContainer);
                 selectedView.show(viewContainer);
             });
         }

src/ui/inspector/StylesInspectorView.vue

@@ -0,0 +1,52 @@
+<template>
+<div></div>
+</template>
+
+<style>
+</style>
+
+<script>
+import ConditionalStylesView from '../../plugins/condition/components/inspector/ConditionalStylesView.vue';
+import Vue from 'vue';
+
+export default {
+    inject: ['openmct'],
+    data() {
+        return {
+            selection: []
+        }
+    },
+    mounted() {
+        this.openmct.selection.on('change', this.updateSelection);
+        this.updateSelection(this.openmct.selection.get());
+    },
+    destroyed() {
+        this.openmct.selection.off('change', this.updateSelection);
+    },
+    methods: {
+        updateSelection(selection) {
+            this.selection = selection;
+
+            if (this.component) {
+                this.component.$destroy();
+                this.component = undefined;
+                this.$el.innerHTML = '';
+            }
+
+            let viewContainer = document.createElement('div');
+            this.$el.append(viewContainer);
+            this.component = new Vue({
+                provide: {
+                    openmct: this.openmct
+                },
+                el: viewContainer,
+                components: {
+                    ConditionalStylesView
+                },
+                template: '<conditional-styles-view></conditional-styles-view>'
+            });
+
+        }
+    }
+}
+</script>

src/ui/inspector/inspector.scss

@@ -1,4 +1,6 @@
 .c-inspector {
+    height: 100%;
+
     > [class*="__"] {
         min-height: 50px;
 
@@ -55,6 +57,44 @@
     .c-tree .grid-properties {
         margin-left: $treeItemIndent;
     }
+
+    &__tabs {
+        $h: 20px;
+        @include abs();
+        display: flex;
+        flex-flow: column nowrap;
+
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+
+        &__holder {
+            display: flex;
+            min-height: $h;
+
+            &__header {
+
+                &:before {
+                    margin-right: $interiorMarginSm;
+                    opacity: 0.7;
+                }
+            }
+        }
+
+        &__contents {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: column;
+
+            &--hidden {
+                height: 1000px;
+                width: 1000px;
+                position: absolute;
+                left: -9999px;
+                top: -9999px;
+            }
+        }
+    }
 }
 
 .c-properties {