Merge pull request #2793 from nasa/new-widget

Add Condition Widget

index.html

@@ -43,7 +43,7 @@
             openmct.legacyRegistry.enable.bind(openmct.legacyRegistry)
         );
 
-        openmct.install(openmct.plugins.Snow());
+        openmct.install(openmct.plugins.Espresso());
         openmct.install(openmct.plugins.MyItems());
         openmct.install(openmct.plugins.LocalStorage());
         openmct.install(openmct.plugins.Generator());

src/MCT.js

@@ -265,6 +265,7 @@ define([
         this.install(this.plugins.ImportExport());
         this.install(this.plugins.WebPage());
         this.install(this.plugins.Condition());
+        this.install(this.plugins.ConditionWidget());
     }
 
     MCT.prototype = Object.create(EventEmitter.prototype);

src/plugins/conditionWidget/ConditionWidgetViewProvider.js

@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2019, 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.
+ *****************************************************************************/
+
+import ConditionWidgetComponent from './components/ConditionWidget.vue';
+import Vue from 'vue';
+
+export default function ConditionWidget(openmct) {
+    return {
+        key: 'conditionWidget',
+        name: 'Condition Widget',
+        cssClass: 'icon-asterisk',
+        canView: function (domainObject) {
+            return domainObject.type === 'conditionWidget';
+        },
+        canEdit: function (domainObject) {
+            return domainObject.type === 'conditionWidget';
+        },
+        view: function (domainObject) {
+            let component;
+
+            return {
+                show: function (element) {
+                    component =  new Vue({
+                        el: element,
+                        components: {
+                            ConditionWidgetComponent: ConditionWidgetComponent
+                        },
+                        provide: {
+                            openmct,
+                            domainObject
+                        },
+                        template: '<condition-widget-component></condition-widget-component>'
+                    });
+                },
+                destroy: function (element) {
+                    component.$destroy();
+                    component = undefined;
+                }
+            };
+        },
+        priority: function () {
+            return 1;
+        }
+    };
+}

src/plugins/conditionWidget/components/ConditionWidget.vue

@@ -0,0 +1,33 @@
+<template>
+<a class="c-condition-widget"
+   :href="internalDomainObject.url"
+>
+    <div class="c-condition-widget__label">
+        {{ internalDomainObject.label }}
+    </div>
+</a>
+</template>
+
+<script>
+export default {
+    inject: ['openmct', 'domainObject'],
+    data: function () {
+        return {
+            internalDomainObject: this.domainObject
+        }
+    },
+    mounted() {
+        this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', this.updateInternalDomainObject);
+    },
+    beforeDestroy() {
+        if (this.unlisten) {
+            this.unlisten();
+        }
+    },
+    methods: {
+        updateInternalDomainObject(domainObject) {
+            this.internalDomainObject = domainObject;
+        }
+    }
+}
+</script>

src/plugins/conditionWidget/components/condition-widget.scss

@@ -0,0 +1,17 @@
+.c-condition-widget {
+    $shdwSize: 3px;
+    @include userSelectNone();
+    background-color: rgba($colorBodyFg, 0.1); // Give a little presence if the user hasn't defined a fill color
+    border-radius: $basicCr;
+    border: 1px solid transparent;
+    display: inline-block;
+    padding: $interiorMarginLg $interiorMarginLg * 2;
+}
+
+.c-so-view--no-frame > .c-so-view__object-view > .c-condition-widget {
+    @include abs();
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}

src/plugins/conditionWidget/plugin.js

@@ -0,0 +1,52 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+import ConditionWidgetViewProvider from './ConditionWidgetViewProvider.js';
+
+export default function plugin() {
+    return function install(openmct) {
+        openmct.objectViews.addProvider(new ConditionWidgetViewProvider(openmct));
+
+        openmct.types.addType('conditionWidget', {
+            name: "Condition Widget",
+            description: "Condition Widget description TBD",
+            creatable: true,
+            cssClass: 'icon-asterisk',
+            form: [
+                {
+                    "key": "label",
+                    "name": "Label",
+                    "control": "textfield",
+                    "required": true,
+                    "cssClass": "l-input"
+                },
+                {
+                    "key": "url",
+                    "name": "URL",
+                    "control": "textfield",
+                    "required": false,
+                    "cssClass": "l-input-lg"
+                }
+            ]
+        });
+    };
+}

src/plugins/displayLayout/components/SubobjectView.vue

@@ -45,7 +45,7 @@ import LayoutFrame from './LayoutFrame.vue'
 const MINIMUM_FRAME_SIZE = [320, 180],
     DEFAULT_DIMENSIONS = [10, 10],
     DEFAULT_POSITION = [1, 1],
-    DEFAULT_HIDDEN_FRAME_TYPES = ['hyperlink', 'summary-widget'];
+    DEFAULT_HIDDEN_FRAME_TYPES = ['hyperlink', 'summary-widget', 'conditionWidget'];
 
 function getDefaultDimensions(gridSize) {
     return MINIMUM_FRAME_SIZE.map((min, index) => {

src/plugins/flexibleLayout/components/flexible-layout.scss

@@ -313,8 +313,4 @@
             margin: 0;
         }
     }
-
-    .c-object-view {
-        display: contents;
-    }
 }

src/plugins/plugins.js

@@ -48,6 +48,7 @@ define([
     './clearData/plugin',
     './webPage/plugin',
     './condition/plugin',
+    './conditionWidget/plugin',
     './themes/espresso',
     './themes/maelstrom',
     './themes/snow'
@@ -79,6 +80,7 @@ define([
     ClearData,
     WebPagePlugin,
     ConditionPlugin,
+    ConditionWidgetPlugin,
     Espresso,
     Maelstrom,
     Snow
@@ -188,6 +190,7 @@ define([
     plugins.Maelstrom = Maelstrom.default;
     plugins.Snow = Snow.default;
     plugins.Condition = ConditionPlugin.default;
+    plugins.ConditionWidget = ConditionWidgetPlugin.default;
 
     return plugins;
 });

src/plugins/tabs/components/tabs.scss

@@ -34,9 +34,7 @@
     }
 
     &__object-name {
-        flex: 0 0 auto;
+        font-size: 1em;
-        @include headerFont();
-        font-size: 1.2em !important;
         margin: $interiorMargin 0 $interiorMarginLg 0;
     }
 

src/plugins/tabs/components/tabs.vue

@@ -40,10 +40,10 @@
     >
         <div
             v-if="currentTab"
-            class="c-tabs-view__object-name l-browse-bar__object-name--w"
+            class="c-tabs-view__object-name c-object-label l-browse-bar__object-name--w"
             :class="currentTab.type.definition.cssClass"
         >
-            <div class="l-browse-bar__object-name">
+            <div class="l-browse-bar__object-name c-object-label__name">
                 {{ currentTab.domainObject.name }}
             </div>
         </div>

src/styles/vue-styles.scss

@@ -2,6 +2,7 @@
 @import "../api/overlays/components/overlay-component.scss";
 @import "../plugins/condition/components/condition.scss";
 @import "../plugins/condition/components/condition-set.scss";
+@import "../plugins/conditionWidget/components/condition-widget.scss";
 @import "../plugins/condition/components/inspector/conditional-styles.scss";
 @import "../plugins/displayLayout/components/box-view.scss";
 @import "../plugins/displayLayout/components/display-layout.scss";

src/ui/components/ObjectFrame.vue

@@ -28,12 +28,12 @@
     }"
 >
     <div class="c-so-view__header">
-        <div
+        <div class="c-object-label"
-            class="c-so-view__header__icon"
+             :class="cssClass"
-            :class="cssClass"
+        >
-        ></div>
+            <div class="c-object-label__name">
-        <div class="c-so-view__header__name">
+                {{ domainObject && domainObject.name }}
-            {{ domainObject && domainObject.name }}
+            </div>
         </div>
         <context-menu-drop-down
             :object-path="objectPath"
@@ -64,7 +64,8 @@ const SIMPLE_CONTENT_TYPES = [
     'clock',
     'timer',
     'summary-widget',
-    'hyperlink'
+    'hyperlink',
+    'conditionWidget'
 ];
 
 export default {

src/ui/components/ObjectView.vue

@@ -102,17 +102,20 @@ export default {
             }
             let keys = Object.keys(styleObj);
             keys.forEach(key => {
-                if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('transparent') > -1)) {
+                let firstChild = this.$el.querySelector(':first-child');
-                    if (this.$el.style[key]) {
+                if (firstChild) {
-                        this.$el.style[key] = '';
+                    if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('transparent') > -1)) {
+                        if (firstChild.style[key]) {
+                            firstChild.style[key] = '';
+                        }
+                    } else {
+                        if (!styleObj.isStyleInvisible && firstChild.classList.contains(STYLE_CONSTANTS.isStyleInvisible)) {
+                            firstChild.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
+                        } else if (styleObj.isStyleInvisible && !firstChild.classList.contains(styleObj.isStyleInvisible)) {
+                            firstChild.classList.add(styleObj.isStyleInvisible);
+                        }
+                        firstChild.style[key] = styleObj[key];
                     }
-                } else {
-                    if (!styleObj.isStyleInvisible && this.$el.classList.contains(STYLE_CONSTANTS.isStyleInvisible)) {
-                        this.$el.classList.remove(STYLE_CONSTANTS.isStyleInvisible);
-                    } else if (styleObj.isStyleInvisible && !this.$el.classList.contains(styleObj.isStyleInvisible)) {
-                        this.$el.classList.add(styleObj.isStyleInvisible);
-                    }
-                    this.$el.style[key] = styleObj[key];
                 }
             });
         },
@@ -129,7 +132,7 @@ export default {
             }
 
             this.viewContainer = document.createElement('div');
-            this.viewContainer.classList.add('c-object-view','u-contents');
+            this.viewContainer.classList.add('u-angular-object-view-wrapper');
             this.$el.append(this.viewContainer);
             let provider = this.getViewProvider();
             if (!provider) {
@@ -192,9 +195,9 @@ export default {
 
             this.viewKey = viewKey;
 
-            this.initObjectStyles();
-
             this.updateView(immediatelySelect);
+
+            this.initObjectStyles();
         },
         initObjectStyles() {
             if (!this.styleRuleManager) {

src/ui/components/object-frame.scss

@@ -58,7 +58,7 @@
         height: 0; // Chrome 73 overflow bug fix
         overflow: auto;
 
-        .c-object-view {
+        .u-angular-object-view-wrapper {
             .u-fills-container {
                 // Expand component types that fill a container
                 @include abs();
@@ -69,7 +69,14 @@
     .c-click-icon,
     .c-button {
         // Shrink buttons a bit when they appear in a frame
-        font-size: 0.85em;
+        font-size: 0.9em;
         padding: 3px 5px;
     }
 }
+
+.u-angular-object-view-wrapper {
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}

src/ui/preview/Preview.vue

@@ -121,7 +121,7 @@ export default {
 
             this.viewKey = view.key;
             this.viewContainer = document.createElement('div');
-            this.viewContainer.classList.add('c-object-view','u-contents');
+            this.viewContainer.classList.add('u-angular-object-view-wrapper');
             this.$refs.objectView.append(this.viewContainer);
 
             this.view = this.currentView.view(this.domainObject, this.objectPath);