Overlay Service re-written in Vue (#2186)

* working overlayService

* wire to snapshot, and add onDestroy Callback

* increment overlayId

* New branch from topic-core-refactor to use as central point for common
CSS work

- Manually migrated changes from vue-toolbar, expect conflicts there and
 in vue-layout;

* Manually update constants-snow from vue-toolbar branch

* Update markup to use latest button classnames

- c-menu-button > c-button--menu;
- c-icon-button > c-click-icon;

* Various from vue-conductor-style

- Mods to input styling;
- Input[] styles moved to _controls;
- New/revised constants vals;

* Resolve bizarre merge conflict when applying stash

* Code cleanup

* remove duplicate div

* Alias and type-icon fixes

- More robust approach to alias indicators;
- Added alias indication to tree-item.vue;
- TODO: wire up alias indication tree-item.vue;

* Accessibility mods, convert elements to <button>

- Better reset styles for htmlInputReset mixin to allow use of <button>
without browser default styling;
- Create button;
- BrowseBar action buttons;
- c-click-icons;
- Removed Preview button from BrowseBar.vue;

* Overlay styling WIP

- Base markup pretty solid;
- Stubbed in temp values for overlayTypeCssClass in overlayService.js;
- TODO: styling for contents area;

* add options object, scope variables to show function, add destroy callback to active Overlay Object (for easier retrieval

src/plugins/notebook/res/templates/snapshotTemplate.html

@@ -0,0 +1,29 @@
+<div class="u-contents">
+
+    <div class="t-snapshot abs l-view-header">
+        <div class="abs object-browse-bar l-flex-row">
+            <div class="left flex-elem l-flex-row grows">
+                <div class="object-header flex-elem l-flex-row grows">
+                    <div class="type-icon flex-elem embed-icon holder" v-bind:class="embed.cssClass"></div>
+                    <div class="title-label flex-elem holder flex-can-shrink">{{embed.name}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="btn-bar right l-flex-row flex-elem flex-justify-end flex-fixed">
+        <div class="flex-elem holder flex-can-shrink s-snapshot-datetime">
+            SNAPSHOT {{formatTime(embed.createdOn, 'YYYY-MM-DD HH:mm:ss')}}
+        </div>
+        <a class="s-button icon-pencil" title="Annotate">
+            <span class="title-label">Annotate</span>
+        </a>
+    </div>
+
+    <div class="abs object-holder t-image-holder s-image-holder">
+        <div 
+            class="image-main s-image-main"
+            v-bind:style="{ backgroundImage: 'url(' + embed.snapshot.src + ')' }">
+        </div>
+    </div>
+</div>

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

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