ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-20 21:53:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #2793 from nasa/new-widget

Browse Source 
Add Condition Widget
This commit is contained in:
Charles Hacskaylo 2020-03-26 13:26:47 -07:00 committed by GitHub
commit 4413c29abb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 210 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -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());

1
src/MCT.js
View File

@ -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);

64
src/plugins/conditionWidget/ConditionWidgetViewProvider.js Normal file
View File

@ -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;
}
};
}

33
src/plugins/conditionWidget/components/ConditionWidget.vue Normal file
View File

@ -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>

17
src/plugins/conditionWidget/components/condition-widget.scss Normal file
View File

@ -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;
}

52
src/plugins/conditionWidget/plugin.js Normal file
View File

@ -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"
}
]
});
};
}

2
src/plugins/displayLayout/components/SubobjectView.vue
View File

@ -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) => {

4
src/plugins/flexibleLayout/components/flexible-layout.scss
View File

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

3
src/plugins/plugins.js
View File

@ -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;
});

4
src/plugins/tabs/components/tabs.scss
View File

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

4
src/plugins/tabs/components/tabs.vue
View File

@ -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>

1
src/styles/vue-styles.scss
View File

@ -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";

15
src/ui/components/ObjectFrame.vue
View File

@ -28,12 +28,12 @@
}"
>
<div class="c-so-view__header">
<div
class="c-so-view__header__icon"
:class="cssClass"
></div>
<div class="c-so-view__header__name">
{{ domainObject && domainObject.name }}
<div class="c-object-label"
:class="cssClass"
>
<div class="c-object-label__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 {

29
src/ui/components/ObjectView.vue
View File

@ -102,17 +102,20 @@ export default {
}
let keys = Object.keys(styleObj);
keys.forEach(key => {
if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('transparent') > -1)) {
if (this.$el.style[key]) {
this.$el.style[key] = '';
let firstChild = this.$el.querySelector(':first-child');
if (firstChild) {
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) {

11
src/ui/components/object-frame.scss
View File

@ -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;
}

2
src/ui/preview/Preview.vue
View File

@ -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);