Three Dot Menu Prototype (#3325)

* Three dot menu implementation

Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov>

src/plugins/notebook/components/Notebook.vue

@@ -111,7 +111,7 @@ import Search from '@/ui/components/search.vue';
 import SearchResults from './SearchResults.vue';
 import Sidebar from './Sidebar.vue';
 import { clearDefaultNotebook, getDefaultNotebook, setDefaultNotebook, setDefaultNotebookSection, setDefaultNotebookPage } from '../utils/notebook-storage';
-import { DEFAULT_CLASS, addNotebookEntry, createNewEmbed, getNotebookEntries, mutateObject } from '../utils/notebook-entries';
+import { addNotebookEntry, createNewEmbed, getNotebookEntries, mutateObject } from '../utils/notebook-entries';
 import objectUtils from 'objectUtils';
 
 import { throttle } from 'lodash';
@@ -431,14 +431,7 @@ export default {
                 return;
             }
 
-            const classList = domainObject.classList || [];
-            const index = classList.indexOf(DEFAULT_CLASS);
-            if (!classList.length || index < 0) {
-                return;
-            }
-
-            classList.splice(index, 1);
-            mutateObject(this.openmct, domainObject, 'classList', classList);
+            this.openmct.status.delete(domainObject.identifier);
         },
         searchItem(input) {
             this.search = input;

src/plugins/notebook/components/NotebookMenuSwitcher.vue

@@ -1,29 +1,17 @@
 <template>
 <div class="c-menu-button c-ctrl-wrapper c-ctrl-wrapper--menus-left">
     <button
-        class="c-button--menu icon-notebook"
+        class="c-icon-button c-button--menu icon-camera"
         title="Take a Notebook Snapshot"
-        @click="setNotebookTypes"
-        @click.stop="toggleMenu"
+        @click.stop.prevent="showMenu"
     >
-        <span class="c-button__label"></span>
+        <span
+            title="Take Notebook Snapshot"
+            class="c-icon-button__label"
+        >
+            Snapshot
+        </span>
     </button>
-    <div
-        v-show="showMenu"
-        class="c-menu"
-    >
-        <ul>
-            <li
-                v-for="(type, index) in notebookTypes"
-                :key="index"
-                :class="type.cssClass"
-                :title="type.name"
-                @click="snapshot(type)"
-            >
-                {{ type.name }}
-            </li>
-        </ul>
-    </div>
 </div>
 </template>
 
@@ -57,22 +45,20 @@ export default {
     data() {
         return {
             notebookSnapshot: null,
-            notebookTypes: [],
-            showMenu: false
+            notebookTypes: []
         };
     },
     mounted() {
         this.notebookSnapshot = new Snapshot(this.openmct);
-
-        document.addEventListener('click', this.hideMenu);
-    },
-    destroyed() {
-        document.removeEventListener('click', this.hideMenu);
+        this.setDefaultNotebookStatus();
     },
     methods: {
-        setNotebookTypes() {
+        showMenu(event) {
             const notebookTypes = [];
             const defaultNotebook = getDefaultNotebook();
+            const elementBoundingClientRect = this.$el.getBoundingClientRect();
+            const x = elementBoundingClientRect.x;
+            const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
 
             if (defaultNotebook) {
                 const domainObject = defaultNotebook.domainObject;
@@ -83,28 +69,24 @@ export default {
                     notebookTypes.push({
                         cssClass: 'icon-notebook',
                         name: `Save to Notebook ${defaultPath}`,
-                        type: NOTEBOOK_DEFAULT
+                        callBack: () => {
+                            return this.snapshot(NOTEBOOK_DEFAULT);
+                        }
                     });
                 }
             }
 
             notebookTypes.push({
-                cssClass: 'icon-notebook',
+                cssClass: 'icon-camera',
                 name: 'Save to Notebook Snapshots',
-                type: NOTEBOOK_SNAPSHOT
+                callBack: () => {
+                    return this.snapshot(NOTEBOOK_SNAPSHOT);
+                }
             });
 
-            this.notebookTypes = notebookTypes;
-        },
-        toggleMenu() {
-            this.showMenu = !this.showMenu;
-        },
-        hideMenu() {
-            this.showMenu = false;
+            this.openmct.menus.showMenu(x, y, notebookTypes);
         },
         snapshot(notebook) {
-            this.hideMenu();
-
             this.$nextTick(() => {
                 const element = document.querySelector('.c-overlay__contents')
                     || document.getElementsByClassName('l-shell__main-container')[0];
@@ -124,6 +106,15 @@ export default {
 
                 this.notebookSnapshot.capture(snapshotMeta, notebook.type, element);
             });
+        },
+        setDefaultNotebookStatus() {
+            let defaultNotebookObject = getDefaultNotebook();
+
+            if (defaultNotebookObject && defaultNotebookObject.notebookMeta) {
+                let notebookIdentifier = defaultNotebookObject.notebookMeta.identifier;
+
+                this.openmct.status.set(notebookIdentifier, 'notebook-default');
+            }
         }
     }
 };

src/plugins/notebook/components/NotebookSnapshotContainer.vue

@@ -4,7 +4,7 @@
         <div class="l-browse-bar__start">
             <div class="l-browse-bar__object-name--w">
                 <div class="l-browse-bar__object-name c-object-label">
-                    <div class="c-object-label__type-icon icon-notebook"></div>
+                    <div class="c-object-label__type-icon icon-camera"></div>
                     <div class="c-object-label__name">
                         Notebook Snapshots
                         <span v-if="snapshots.length"

src/plugins/notebook/components/NotebookSnapshotIndicator.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="c-indicator c-indicator--clickable icon-notebook"
+<div class="c-indicator c-indicator--clickable icon-camera"
      :class="[
          { 's-status-off': snapshotCount === 0 },
          { 's-status-on': snapshotCount > 0 },