Merge latest, resolve conflicts.

Need to just apply these changes to Deep's branch and push

index.html

@@ -78,6 +78,7 @@
         openmct.install(openmct.plugins.Notebook());
         openmct.install(openmct.plugins.FolderView());
         openmct.install(openmct.plugins.Tabs());
+        openmct.install(openmct.plugins.FlexibleLayout());
         openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
         openmct.time.timeSystem('utc');
         openmct.start();

src/plugins/flexibleLayout/components/container.vue

@@ -0,0 +1,99 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+<template>
+    <div class="c-fl-container"
+         :style="[{'min-width': minWidth}]">
+
+        <frame-component
+            v-for="(frame, index) in frames"
+            :key="index"
+            :style="{ 
+                'min-height': frame.height || `${100/frames.length}%`
+                }"
+            :frame="frame"
+            :index="index"
+            :isEditing="isEditing"
+            @object-drag-from="dragFrom"
+            @object-drop-to="dropTo">
+        </frame-component>
+    </div>
+</template>
+
+<style lang="scss">
+
+.flex-container{
+    min-height: 100%;
+    min-width: 100%;
+
+    .add{
+        display: flex;
+        flex-direction: columm;
+        font-size: 100%;
+        align-items: center;
+        justify-content: center;
+        min-width: 100%;
+        background: #009bd140;
+        border: 3px solid #009bd1;
+        border-width: 3px 1.5px;
+        cursor: pointer;
+
+        .large{
+            min-height: 100%;
+        }
+    }
+
+    &:hover{
+        .allow-drop {
+            background: red;
+        }
+    }
+}
+
+</style>
+
+<script>
+import FrameComponent from './frame.vue';
+import Frame from '../utils/frame'
+
+export default {
+    props: ['minWidth', 'frames', 'index', 'isEditing'],
+    components: {
+        FrameComponent
+    },
+    methods: {
+        dragFrom(frameIndex) {
+           this.$emit('object-drag-from', this.index, frameIndex);
+        },
+        dropTo(frameIndex, event) {
+            let domainObject = event.dataTransfer.getData('domainObject'),
+                frameObject;
+
+            if (domainObject) {
+                frameObject = new Frame(JSON.parse(domainObject));
+            }
+
+            this.$emit('object-drop-to', this.index, frameIndex, frameObject);
+        }
+    }
+}
+</script>

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="flexible-layout-container">
+        <div class="header" 
+             v-if="isEditing"
+             @click="addContainer">
+            Add a new Container
+        </div>
+
+        <div class="body">
+            <container-component
+                 v-for="(container, index) in containers"
+                 :key="index"
+                 :index="index"
+                 :minWidth="container.width || `${100/containers.length}%`"
+                 :frames="container.frames"
+                 :isEditing="isEditing"
+                 @addFrame="addFrame"
+                 @object-drag-from="dragFromHandler"
+                 @object-drop-to="dropToHandler">
+            </container-component>
+        </div> 
+    </div>
+</template>
+
+<style lang="scss">
+    @import '~styles/sass-base';
+
+    .l-fl {
+        @include abs();
+        display: flex;
+        flex-direction: column;
+        .header {
+            font-size: 22px;
+            text-align: center;
+            min-height: 30px;
+            min-width: 100%;
+            background: rgb(66, 96, 96);
+        }
+
+        > * + * {
+            margin-top: $interiorMargin;
+        }
+
+        .temp-toolbar {
+            flex: 0 0 auto;
+        }
+
+        &__container-holder {
+            // Holds containers
+            display: flex;
+            flex: 1 1 auto;
+
+            &[class*='-column'] {
+               // @include test(blue);
+                flex-direction: column;
+
+                > * + * {
+                    margin-top: 1px;
+                }
+            }
+
+            &[class*='-row'] {
+               // @include test(red);
+                flex-direction: row;
+
+                > * + * {
+                    margin-left: 1px;
+                }
+            }
+        }
+
+        &__container {
+            background: $editColorBg;
+            flex: 1 1 auto;
+        }
+    }
+</style>
+
+<script>
+import ContainerComponent  from '../components/container.vue';
+import Container from '../utils/container';
+
+export default {
+    inject: ['openmct', 'domainObject'],
+    components: {
+        ContainerComponent
+    },
+    data() {
+        let containers = this.domainObject.configuration.containers;
+
+        return {
+            containers: containers,
+            dragFrom: [],
+            isEditing: false
+        }
+    },
+    methods: {
+        addContainer() {
+            let container = new Container()
+
+            this.containers.push(container);
+        },
+        addFrame(frame, index) {
+            this.containers[index].addFrame(frame);
+        },
+        dragFromHandler(containerIndex, frameIndex) {
+            this.dragFrom = [containerIndex, frameIndex];
+        },
+        dropToHandler(containerIndex, frameIndex, frameObject) {
+            if (!frameObject) {
+                frameObject = this.containers[this.dragFrom[0]].frames.splice(this.dragFrom[1], 1)[0];
+            }
+
+            this.containers[containerIndex].frames.splice((frameIndex + 1), 0, frameObject);
+
+            this.persist();
+        },
+        persist(){
+            this.openmct.objects.mutate(this.domainObject, '.configuration.containers', this.containers);
+        },
+        isEditingHandler(isEditing) {
+            this.isEditing = isEditing;
+        }
+    },
+    mounted() {
+        this.openmct.editor.on('isEditing', this.isEditingHandler);
+    }
+}
+</script>

src/plugins/flexibleLayout/components/frame.vue

@@ -0,0 +1,75 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+<template>
+    <div class="flex-frame" draggable="true">
+        <object-view
+            class="c-object-view"
+            v-if="frame.domainObject"
+            ref="dragObject"
+            :object="frame.domainObject">
+        </object-view>
+        <div class="drop-container add"
+             v-if="isEditing"
+             @drop="dropHandler">
+            +
+        </div>
+    </div>
+</template>
+
+<style lang="scss">
+
+    .flex-frame{
+        min-width: 100%;
+        min-height: 100%;
+
+        .drop-container {
+            min-height: 40px;
+            min-width: 100%;
+        }
+    }
+</style>
+
+<script>
+import ObjectView from '../../../ui/components/layout/ObjectView.vue';
+
+export default {
+    props: ['frame', 'index', 'isEditing'],
+    components: {
+        ObjectView
+    },
+    methods: {
+        dragstart(event) {
+            console.log('dragging');
+            this.$emit('object-drag-from', this.index);
+        },
+        dropHandler(event){
+            event.stopPropagation();
+
+            this.$emit('object-drop-to', this.index, event);
+        }
+    },
+    mounted() {
+        this.$el.addEventListener('dragstart', this.dragstart);
+    }
+}
+</script>

src/plugins/flexibleLayout/flexibleLayout.js

@@ -0,0 +1,67 @@
+/*****************************************************************************
+ * 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([
+    './components/flexibleLayout.vue',
+    'vue'
+], function (
+    FlexibleLayoutComponent,
+    Vue
+) {
+    function FlexibleLayout(openmct) {
+        return {
+            key: 'flexible-layout',
+            name: 'FlexibleLayout',
+            cssClass: 'icon-layout-view',
+            canView: function (domainObject) {
+                return domainObject.type === 'flexible-layout';
+            },
+            view: function (domainObject) {
+                let component;
+
+                return {
+                    show: function (element) {
+                        component =  new Vue({
+                            components: {
+                                FlexibleLayoutComponent: FlexibleLayoutComponent.default
+                            },
+                            provide: {
+                                openmct,
+                                domainObject
+                            },
+                            el: element,
+                            template: '<flexible-layout-component></flexible-layout-component>'
+                        });
+                    },
+                    destroy: function (element) {
+                        component.$destroy();
+                        component = undefined;
+                    }
+                };
+            },
+            priority: function () {
+                return 1;
+            }
+        };
+    }
+    return FlexibleLayout;
+});

src/plugins/flexibleLayout/plugin.js

@@ -0,0 +1,45 @@
+/*****************************************************************************
+ * 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([
+    './flexibleLayout'
+], function (
+    FlexibleLayout
+) {
+    return function plugin() {
+        return function install(openmct) {
+            openmct.objectViews.addProvider(new FlexibleLayout(openmct));
+
+            openmct.types.addType('flexible-layout', {
+                name: "Flexible Layout",
+                creatable: true,
+                cssClass: 'icon-layout',
+                initialize: function (domainObject) {
+                    domainObject.composition = [];
+                    domainObject.configuration = {
+                        containers: []
+                    };
+                }
+            });
+        };
+    };
+});

src/plugins/flexibleLayout/utils/container.js

@@ -0,0 +1,14 @@
+import Frame from './frame';
+
+class Container {
+    constructor (width) {
+        this.frames = [new Frame({}, '5%')];
+        this.width = width;
+    }
+
+    addFrame(frameObject) {
+        this.frames.push(frameObject);
+    }
+}
+
+export default Container;

src/plugins/flexibleLayout/utils/frame.js

@@ -0,0 +1,8 @@
+class Frame {
+    constructor(domainObject, height) {
+        this.domainObject = domainObject;
+        this.height = height;
+    }
+}
+
+export default Frame;

src/plugins/plugins.js

@@ -37,6 +37,7 @@ define([
     './notebook/plugin',
     './displayLayout/plugin',
     './folderView/plugin',
+    './flexibleLayout/plugin',
     './tabs/plugin',
     '../../platform/features/fixed/plugin'
 ], function (
@@ -56,6 +57,7 @@ define([
     Notebook,
     DisplayLayoutPlugin,
     FolderView,
+    FlexibleLayout,
     Tabs,
     FixedView
 ) {
@@ -171,6 +173,7 @@ define([
     plugins.FolderView = FolderView;
     plugins.Tabs = Tabs;
     plugins.FixedView = FixedView;
+    plugins.FlexibleLayout = FlexibleLayout;
 
     return plugins;
 });

src/styles-new/_constants-espresso.scss

@@ -90,6 +90,7 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
 
 // Edit Colors
 $editColor: #00c7c3;
+$editColorBg: rgba($editColor, 0.1);
 $editColorFg: $colorBodyFg;
 $browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
 $browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;

src/styles-new/_constants-snow.scss

@@ -90,6 +90,7 @@ $colorTOIHov: $colorTime; // was $timeControllerToiLineColorHov
 
 // Edit Colors
 $editColor: #00c7c3;
+$editColorBg: rgba($editColor, 0.1);
 $editColorFg: $colorBodyFg;
 $browseBorderSelectableHov: 1px dotted rgba($colorBodyFg, 0.2);
 $browseShdwSelectableHov: rgba($colorBodyFg, 0.2) 0 0 3px;

src/styles-new/_global.scss

@@ -348,7 +348,7 @@ body.desktop .has-local-controls {
     .l-shell__main-container > .l-layout,
     .l-shell__main-container > .c-object-view .l-fixed-position {
         // Target the top-most layout container and color its background
-        background: rgba($editColor, 0.1);
+        background: $editColorBg;
     }
 
     // Layouts