Reorganize components, create ObjectFrame

2018-12-13 09:16:42 -08:00
parent 18a94d938f
commit afa1589cb5
41 changed files with 179 additions and 112 deletions
--- a/src/ui/layout/CreateButton.vue
+++ b/src/ui/layout/CreateButton.vue
@@ -0,0 +1,150 @@
+<template>
+    <div class="c-create-button--w">
+        <button class="c-create-button c-button--menu c-button--major icon-plus"
+             @click="open">
+            <span class="c-button__label">Create</span>
+        </button>
+        <div class="c-create-menu c-super-menu"
+             v-if="opened">
+            <div class="c-super-menu__menu">
+                <ul>
+                    <li v-for="(item, index) in items"
+                        :key="index"
+                        :class="item.class"
+                        :title="item.title"
+                        @mouseover="showItemDescription(item)"
+                        @click="create(item)">
+                        {{ item.name }}
+                    </li>
+                </ul>
+            </div>
+            <div class="c-super-menu__item-description">
+                <div :class="['l-item-description__icon', 'bg-' + selectedMenuItem.class]"></div>
+                <div class="l-item-description__name">{{selectedMenuItem.name}}</div>
+                <div class="l-item-description__description">{{selectedMenuItem.title}}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+    @import "~styles/sass-base";
+
+    .c-create-button,
+    .c-create-menu {
+        font-size: 1.1em;
+    }
+
+    .c-create-button {
+        .is-editing & {
+            @include disabled();
+        }
+
+        .c-button__label {
+            text-transform: $createBtnTextTransform;
+        }
+    }
+
+    .c-create-menu {
+        max-height: 80vh;
+        max-width: 500px;
+        min-height: 250px;
+        z-index: 70;
+
+        [class*="__icon"] {
+            filter: $colorKeyFilter;
+        }
+
+        [class*="__item-description"] {
+            min-width: 200px;
+        }
+    }
+</style>
+
+<script>
+    import CreateAction from '../../../platform/commonUI/edit/src/creation/CreateAction';
+    import objectUtils from '../../api/objects/object-utils';
+
+    function convertToLegacyObject(domainObject) {
+        let keyString = objectUtils.makeKeyString(domainObject.identifier);
+        let oldModel = objectUtils.toOldFormat(domainObject);
+        return instantiate(oldModel, keyString);
+    }
+    export default {
+        inject: ['openmct'],
+        methods: {
+            open: function () {
+                if (this.opened) {
+                    return;
+                }
+                this.opened = true;
+                setTimeout(() => document.addEventListener('click', this.close));
+            },
+            close: function () {
+                if (!this.opened) {
+                    return;
+                }
+                this.opened = false;
+                document.removeEventListener('click', this.close);
+            },
+            showItemDescription: function (menuItem) {
+                this.selectedMenuItem = menuItem;
+            },
+            create: function (item) {
+                // Hack for support.  TODO: rewrite create action.
+                // 1. Get contextual object from navigation
+                // 2. Get legacy type from legacy api
+                // 3. Instantiate create action with type, parent, context
+                // 4. perform action.
+                return this.openmct.objects.get(openmct.router.path[0].identifier)
+                    .then((currentObject) => {
+                        let legacyContextualParent = this.convertToLegacy(currentObject);
+                        let legacyType = openmct.$injector.get('typeService').getType(item.key);
+                        let context = {
+                            key: "create",
+                            domainObject: legacyContextualParent // should be same as parent object.
+                        };
+                        let action = new CreateAction(
+                            legacyType,
+                            legacyContextualParent,
+                            context,
+                            this.openmct
+                        );
+                        return action.perform();
+                    });
+            },
+            convertToLegacy (domainObject) {
+                let keyString = objectUtils.makeKeyString(domainObject.identifier);
+                let oldModel = objectUtils.toOldFormat(domainObject);
+                return openmct.$injector.get('instantiate')(oldModel, keyString);
+            }
+        },
+        destroyed () {
+            document.removeEventListener('click', this.close);
+        },
+        data: function() {
+            let items = [];
+
+            this.openmct.types.listKeys().forEach(key => {
+                let menuItem = openmct.types.get(key).definition;
+
+                if (menuItem.creatable) {
+                    let menuItemTemplate = {
+                        key: key,
+                        name: menuItem.name,
+                        class: menuItem.cssClass,
+                        title: menuItem.description
+                    };
+
+                    items.push(menuItemTemplate);
+                }
+            });
+
+            return {
+                items: items,
+                selectedMenuItem: {},
+                opened: false
+            }
+        }
+    }
+</script>