From 2bb2bb6a1ba7df4dfac322202f4cc76535200218 Mon Sep 17 00:00:00 2001
From: Shefali Joshi <simplyrender@gmail.com>
Date: Tue, 25 Feb 2020 10:41:58 -0800
Subject: [PATCH] Adds conditional style inspector provider (#2655)

* resolved conflicts

* Revert "Condition reorder"

* Adds conditional style inspector provider
Adds condition style tabbed view (this needs to be extended to allow more than one pane per tab in a separate issue)

* Fixes linting issues

* Merge from topic-conditionals

* In order to accomodate two tab layout for the Conditionals feature, rename the following:
- openmct.inspectorViews registry to openmct.propertiesInspector
- InspectorViewRegistry.prototype.addProvider to InspectorViewRegistry.prototype.addViewProvider.
Replace occurances of the same to the new names.

In a subsequent commit expect a new view registry for the styles inspector view registry.

* Use 'styles' property on domain objects to indicate that they should have a styles inspector tab - Note that this will not show up on existing objects but only ones that are created after this feature is added.
Use 'styles' property on domain objects to determine if a styles view can be viewed
Removed the TabbedInspectorView and repurposed the InspectorViews to show both a properties or a styles registry.
Simplified markup in Inspector.vue

* Addresses review comments:
1. Go back to using inspectorViews
2. Remove stylesInspector registry
3. Hardcode Styles Inspector component view
4. Styles tab can be viewed for all creatable objects except for the folders, webPages and conditionSets
5. ConditionalStylesInspectorViewProvider is no longer needed because we are hardcoding the styles view component.

Co-authored-by: Joel McKinnon <JoelMcKinnon@users.noreply.github.com>
---
 .../inspector/ConditionalStylesView.vue       |  14 +++
 src/plugins/condition/event                   |   0
 src/ui/inspector/Inspector.vue                | 103 ++++++++++++++----
 src/ui/inspector/InspectorViews.vue           |   3 +-
 src/ui/inspector/StylesInspectorView.vue      |  52 +++++++++
 src/ui/inspector/inspector.scss               |  40 +++++++
 6 files changed, 189 insertions(+), 23 deletions(-)
 create mode 100644 src/plugins/condition/components/inspector/ConditionalStylesView.vue
 delete mode 100644 src/plugins/condition/event
 create mode 100644 src/ui/inspector/StylesInspectorView.vue

diff --git a/src/plugins/condition/components/inspector/ConditionalStylesView.vue b/src/plugins/condition/components/inspector/ConditionalStylesView.vue
new file mode 100644
index 0000000000..5a96b8a3d4
--- /dev/null
+++ b/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>
diff --git a/src/plugins/condition/event b/src/plugins/condition/event
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/ui/inspector/Inspector.vue b/src/ui/inspector/Inspector.vue
index ad05a2674d..ff3a8d36e5 100644
--- a/src/ui/inspector/Inspector.vue
+++ b/src/ui/inspector/Inspector.vue
@@ -1,22 +1,46 @@
 <template>
-<multipane
-    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"
+<div class="c-inspector">
+    <div class="c-inspector__tabs"
     >
-        <elements />
-    </pane>
-</multipane>
+        <div v-if="showStyles"
+             class="c-inspector__tabs__holder">
+            <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.refreshComposition(this.openmct.selection.get());
+        this.excludeObjectTypes = ['folder', 'webPage', 'conditionSet'];
+        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)
         }
     }
 }
diff --git a/src/ui/inspector/InspectorViews.vue b/src/ui/inspector/InspectorViews.vue
index bdc3f28c10..d1c4c3ccfd 100644
--- a/src/ui/inspector/InspectorViews.vue
+++ b/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);
             });
         }
diff --git a/src/ui/inspector/StylesInspectorView.vue b/src/ui/inspector/StylesInspectorView.vue
new file mode 100644
index 0000000000..b39506c9a6
--- /dev/null
+++ b/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>
diff --git a/src/ui/inspector/inspector.scss b/src/ui/inspector/inspector.scss
index 73e9316fd5..b6f9edb890 100644
--- a/src/ui/inspector/inspector.scss
+++ b/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 {