diff --git a/src/MCT.js b/src/MCT.js index af53e8076e..2930b03c37 100644 --- a/src/MCT.js +++ b/src/MCT.js @@ -40,6 +40,7 @@ define([ './styles-new/core.scss', './styles-new/notebook.scss', './ui/components/layout/Layout.vue', + './ui/overlayService/overlayService', 'vue' ], function ( EventEmitter, @@ -61,6 +62,7 @@ define([ coreStyles, NotebookStyles, Layout, + OverlayService, Vue ) { /** @@ -225,6 +227,8 @@ define([ this.editor = new api.EditorAPI.default(this); + this.OverlayService = new OverlayService(); + this.legacyRegistry = defaultRegistry; this.install(this.plugins.Plot()); this.install(this.plugins.TelemetryTable()); diff --git a/src/plugins/notebook/res/templates/snapshotTemplate.html b/src/plugins/notebook/res/templates/snapshotTemplate.html new file mode 100644 index 0000000000..9c9daee0ee --- /dev/null +++ b/src/plugins/notebook/res/templates/snapshotTemplate.html @@ -0,0 +1,29 @@ +
+ +
+
+
+
+
+
{{embed.name}}
+
+
+
+
+ +
+
+ SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}} +
+ + Annotate + +
+ +
+
+
+
+
\ No newline at end of file diff --git a/src/plugins/notebook/src/controllers/EmbedController.js b/src/plugins/notebook/src/controllers/EmbedController.js index 5080206e15..2417942c97 100644 --- a/src/plugins/notebook/src/controllers/EmbedController.js +++ b/src/plugins/notebook/src/controllers/EmbedController.js @@ -24,11 +24,15 @@ define([ 'moment', 'zepto', '../utils/SnapshotOverlay', + '../../res/templates/snapshotTemplate.html', + 'vue' ], function ( Moment, $, - SnapshotOverlay + SnapshotOverlay, + SnapshotTemplate, + Vue ) { function EmbedController (openmct, domainObject) { this.openmct = openmct; @@ -53,11 +57,24 @@ function ( }; EmbedController.prototype.openSnapshot = function () { - if (!this.snapshotOverlay) { - this.snapShotOverlay = new SnapshotOverlay(this.embed, this.formatTime); - } else { - this.snapShotOverlay = undefined; + var self = this, + snapshot = new Vue({ + template: SnapshotTemplate, + data: function () { + return { + embed: self.embed + }; + }, + methods: { + formatTime: self.formatTime + } + }); + + function onDestroyCallback() { + snapshot.$destroy(true); } + + this.openmct.OverlayService.show(snapshot.$mount().$el, {onDestroy: onDestroyCallback, cssClass: 'l-large-view'}); }; EmbedController.prototype.formatTime = function (unixTime, timeFormat) { diff --git a/src/plugins/notebook/src/controllers/NotebookController.js b/src/plugins/notebook/src/controllers/NotebookController.js index 727e4bce53..5805f541c3 100644 --- a/src/plugins/notebook/src/controllers/NotebookController.js +++ b/src/plugins/notebook/src/controllers/NotebookController.js @@ -60,6 +60,7 @@ function ( this.container = container; var notebookEmbed = { + inject:['openmct'], props:['embed', 'entry'], template: EmbedTemplate, data: embedController.exposedData, @@ -80,6 +81,7 @@ function ( var notebookVue = Vue.extend({ template: NotebookTemplate, + provide: {openmct: self.openmct}, components: { 'notebook-entry': entryComponent, 'search': search.default diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss index 715487f0a1..fe198f5579 100644 --- a/src/styles-new/_constants-snow.scss +++ b/src/styles-new/_constants-snow.scss @@ -224,9 +224,9 @@ $colorThumbsBubbleFg: pullForward($colorBodyFg, 10%); $colorThumbsBubbleBg: pullForward($colorBodyBg, 10%); // Overlay -$colorOvrBlocker: rgba(black, 0.7);// -$colorOvrBg: $colorBodyBg; -$colorOvrFg: $colorBodyFg; +$colorOvrBlocker: rgba(black, 0.7); // Used +$colorOvrBg: $colorBodyBg; // Used +$colorOvrFg: $colorBodyFg; // Used $colorOvrBtnBg: pullForward($colorOvrBg, 40%); $colorOvrBtnFg: #fff; $colorFieldHintOverlay: pullForward($colorOvrBg, 40%); diff --git a/src/styles-new/_constants.scss b/src/styles-new/_constants.scss index 2fb9f0baaf..e6a317b1fa 100644 --- a/src/styles-new/_constants.scss +++ b/src/styles-new/_constants.scss @@ -40,6 +40,8 @@ $inputTextP: $inputTextPTopBtm $inputTextPLeftRight; $menuLineH: 1.5rem; $treeItemIndent: 16px; $treeTypeIconW: 18px; +$overlayOuterMargin: 5%; +$overlayInnerMargin: 25px; /*************** Items */ $itemPadLR: 5px; diff --git a/src/styles-new/_mixins.scss b/src/styles-new/_mixins.scss index 46b87e3c01..39fdadd0f5 100644 --- a/src/styles-new/_mixins.scss +++ b/src/styles-new/_mixins.scss @@ -20,6 +20,8 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ +// VERSION MANUALLY MIGRATED FROM VUE-TOOLBAR + /************************** VISUALS */ @mixin ancillaryIcon($d, $c) { // Used for small icons used in combination with larger icons, diff --git a/src/ui/components/layout/tree-item.vue b/src/ui/components/layout/tree-item.vue index 8346f63a71..f6feed3910 100644 --- a/src/ui/components/layout/tree-item.vue +++ b/src/ui/components/layout/tree-item.vue @@ -30,7 +30,7 @@ import viewControl from '../controls/viewControl.vue' export default { name: 'tree-item', - inject: ['openmct'], + inject: ['openmct', 'domainObject'], props: { node: Object }, diff --git a/src/ui/overlayService/overlay.vue b/src/ui/overlayService/overlay.vue new file mode 100644 index 0000000000..d98265f55e --- /dev/null +++ b/src/ui/overlayService/overlay.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/src/ui/overlayService/overlayService.js b/src/ui/overlayService/overlayService.js new file mode 100644 index 0000000000..dfea579145 --- /dev/null +++ b/src/ui/overlayService/overlayService.js @@ -0,0 +1,87 @@ +/***************************************************************************** + * 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. + *****************************************************************************/ + +define([ + './overlay.vue', + 'vue' +], function ( + OverlayComponent, + Vue +) { + + function OverlayService() { + this.activeOverlays = []; + this.overlayId = 0; + } + + OverlayService.prototype.show = function (element, options) { + if(this.activeOverlays.length) { + this.activeOverlays[this.activeOverlays.length - 1].overlay.classList.add('invisible'); + } + + let overlayTypeCssClass = options.cssClass, // Values could be l-large-view, l-dialog, l-message + overlay = document.createElement('div'), + component = new Vue({ + provide: { + destroy: this.destroy.bind(this), + element: element + }, + components: { + OverlayComponent: OverlayComponent.default + }, + template: '' + }); + + overlay.classList.add('l-overlay-wrapper', overlayTypeCssClass); + document.body.appendChild(overlay); + + overlay.appendChild(component.$mount().$el); + + this.activeOverlays.push({ + overlay: overlay, + component: component, + onDestroy: options.onDestroy, + id: this.overlayId + }); + + this.overlayId++; + }; + + OverlayService.prototype.destroy = function () { + var lastActiveOverlayObject = this.activeOverlays.pop(), + lastActiveOverlay = lastActiveOverlayObject.overlay, + lastActiveComponent = lastActiveOverlayObject.component; + + if (lastActiveOverlayObject.onDestroy && typeof lastActiveOverlayObject.onDestroy === 'function') { + lastActiveOverlayObject.onDestroy(); + } + + lastActiveComponent.$destroy(true); + document.body.removeChild(lastActiveOverlay); + + if (this.activeOverlays.length) { + this.activeOverlays[this.activeOverlays.length - 1].overlay.classList.remove('invisible'); + } + }; + + return OverlayService; +});