remove create dialog from mobile

- Font files and CSS updates for Elements pool sorting styling;

platform/commonUI/edit/res/templates/elements.html

@@ -25,9 +25,15 @@
                  ng-model="filterBy">
     </mct-include>
     <div class="flex-elem grows vscroll">
-        <ul class="tree" ng-if="composition.length > 0">
+        <ul class="tree" id="inspector-elements-tree" ng-if="composition.length > 0">
             <li ng-repeat="containedObject in composition | filter:searchElements">
                 <span class="tree-item">
+                    <span class="grippy-sm"
+                          data-id="{{ containedObject.id }}"
+                          mct-drag-down="dragDown($event)"
+                          mct-drag="drag($event)"
+                          mct-drag-up="dragUp($event)">
+                    </span>
                     <mct-representation
                             class="rep-object-label"
                             key="'label'"

platform/commonUI/edit/src/controllers/ElementsController.js

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 define(
-    [],
-    function () {
+    ['zepto'],
+    function ($) {
 
         /**
          * The ElementsController prepares the elements view for display
@@ -32,6 +32,10 @@ define(
         function ElementsController($scope, openmct) {
             this.scope = $scope;
             this.scope.composition = [];
+            this.openmct = openmct;
+            this.dragDown = this.dragDown.bind(this);
+            this.dragUp = this.dragUp.bind(this);
+
             var self = this;
 
             function filterBy(text) {
@@ -65,6 +69,7 @@ define(
                 self.refreshComposition(domainObject);
 
                 if (domainObject) {
+
                     self.mutationListener = domainObject.getCapability('mutation')
                         .listen(self.refreshComposition.bind(self, domainObject));
                 }
@@ -76,11 +81,80 @@ define(
             openmct.selection.on('change', setSelection);
             setSelection(openmct.selection.get());
 
+            $scope.dragDown = this.dragDown;
+            $scope.drag = this.drag;
+            $scope.dragUp = this.dragUp;
+
             $scope.$on("$destroy", function () {
                 openmct.selection.off("change", setSelection);
             });
         }
 
+        /**
+         * Invoked on DragStart - Adds reordering class to parent UL element
+         * Sets selected object ID, to be used on Drag End
+         *
+         * @param {object} event | Mouse Event
+         */
+        ElementsController.prototype.dragDown = function (event) {
+            if (!this.parentUL) {
+                this.parentUL = $(document).find('#inspector-elements-tree');
+            }
+
+            this.selectedTreeItem = $(event.target).parent();
+            this.selectedObjectId = event.target.getAttribute('data-id');
+
+            this.parentUL.addClass('reordering');
+            this.selectedTreeItem.addClass('reorder-actor');
+        };
+
+        /**
+         * Invoked on dragEnd - Removes selected object from position in composition
+         * and replaces it at the target position. Composition is then updated with current
+         * scope
+         *
+         * @param {object} event - Mouse Event
+         */
+        ElementsController.prototype.dragUp = function (event) {
+            this.targetObjectId = event.target.getAttribute('data-id');
+
+            if (this.targetObjectId && this.selectedObjectId) {
+                var selectedObjectPosition,
+                    targetObjectPosition;
+
+                selectedObjectPosition = findObjectInCompositionFromId(this.selectedObjectId, this.scope.composition);
+                targetObjectPosition = findObjectInCompositionFromId(this.targetObjectId, this.scope.composition);
+
+                if ((selectedObjectPosition !== -1) && (targetObjectPosition !== -1)) {
+                    var selectedObject = this.scope.composition.splice(selectedObjectPosition, 1),
+                        selection = this.openmct.selection.get(),
+                        domainObject = selection ? selection[0].context.oldItem : undefined;
+
+                    this.scope.composition.splice(targetObjectPosition, 0, selectedObject[0]);
+
+                    if (domainObject) {
+                        domainObject.getCapability('mutation').mutate(function (model) {
+                            model.composition = this.scope.composition.map(function (dObject) {
+                                return dObject.id;
+                            });
+                        }.bind(this));
+                    }
+                }
+            }
+
+            if (this.parentUL) {
+                this.parentUL.removeClass('reordering');
+            }
+
+            if (this.selectedTreeItem) {
+                this.selectedTreeItem.removeClass('reorder-actor');
+            }
+        };
+
+        ElementsController.prototype.drag = function (event) {
+
+        };
+
         /**
          * Gets the composition for the selected object and populates the scope with it.
          *
@@ -103,6 +177,21 @@ define(
             }
         };
 
+        /**
+         * Finds position of object with given ID in Composition
+         *
+         * @param {String} id
+         * @param {Array} composition
+         * @private
+         */
+        function findObjectInCompositionFromId(id, composition) {
+            var mapped = composition.map(function (element) {
+                return element.id;
+            });
+
+            return mapped.indexOf(id);
+        }
+
         return ElementsController;
     }
 );

platform/commonUI/general/res/fonts/symbols/icomoon-project-openmct-symbols-12px.json

@@ -2,7 +2,7 @@
   "metadata": {
     "name": "openmct-symbols-12px",
     "lastOpened": 0,
-    "created": 1502213994889
+    "created": 1527031065005
   },
   "iconSets": [
     {
@@ -15,20 +15,36 @@
           "code": 59696,
           "tempChar": ""
         },
+        {
+          "order": 11,
+          "id": 8,
+          "name": "icon12-grippy",
+          "prevSize": 12,
+          "code": 59697,
+          "tempChar": ""
+        },
+        {
+          "order": 10,
+          "id": 7,
+          "name": "icon12-list-view",
+          "prevSize": 12,
+          "code": 921666,
+          "tempChar": ""
+        },
         {
           "order": 6,
           "id": 3,
           "prevSize": 12,
           "code": 921865,
           "name": "icon12-folder",
-          "tempChar": ""
+          "tempChar": ""
         }
       ],
       "id": 0,
       "metadata": {
         "name": "openmct-symbols-12px",
         "importSize": {
-          "width": 384,
+          "width": 279,
           "height": 384
         },
         "designer": "Charles Hacskaylo"
@@ -65,6 +81,80 @@
             ]
           }
         },
+        {
+          "id": 8,
+          "paths": [
+            "M186.347 232.64c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
+            "M186.347 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
+            "M186.347 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
+            "M465.573 93.173c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
+            "M465.573 372.4c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
+            "M379.028 558.728c51.328 3.652 89.978 48.223 86.325 99.551s-48.223 89.978-99.551 86.325c-51.328-3.652-89.978-48.223-86.325-99.551s48.223-89.978 99.551-86.325z",
+            "M379.017 837.96c51.328 3.652 89.978 48.223 86.325 99.551s-48.223 89.978-99.551 86.325c-51.328-3.652-89.978-48.223-86.325-99.551s48.223-89.978 99.551-86.325z",
+            "M744.773 232.64c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
+            "M744.773 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
+            "M744.773 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z"
+          ],
+          "attrs": [
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {},
+            {}
+          ],
+          "width": 745,
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "icon12-grippy"
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {},
+              {},
+              {},
+              {},
+              {},
+              {},
+              {},
+              {},
+              {},
+              {}
+            ]
+          }
+        },
+        {
+          "id": 7,
+          "paths": [
+            "M0 0h1024v170.667h-1024v-170.667z",
+            "M0 426.667h1024v170.667h-1024v-170.667z",
+            "M0 853.333h1024v170.667h-1024v-170.667z"
+          ],
+          "attrs": [
+            {},
+            {},
+            {}
+          ],
+          "isMulticolor": false,
+          "isMulticolor2": false,
+          "grid": 0,
+          "tags": [
+            "icon12-list-view"
+          ],
+          "colorPermutations": {
+            "1161751": [
+              {},
+              {},
+              {}
+            ]
+          }
+        },
         {
           "id": 3,
           "paths": [
@@ -139,6 +229,5 @@
     "historySize": 100,
     "gridSize": 16
   },
-  "uid": -1,
-  "time": 1502216581486
+  "uid": -1
 }

platform/commonUI/general/res/fonts/symbols/openmct-symbols-12px.svg

@@ -8,5 +8,7 @@
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
 <glyph unicode="&#xe930;" glyph-name="icon12-crosshair" d="M597.333 938.667h-170.667v-256h170.667v256zM1024 512h-256v-170.667h256v170.667zM597.333 170.667h-170.667v-256h170.667v256zM256 512h-256v-170.667h256v170.667z" />
+<glyph unicode="&#xe931;" glyph-name="icon12-grippy" horiz-adv-x="745" d="M186.347 706.027c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM186.347 426.8c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM186.347 147.307c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM465.573 845.494c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM465.573 566.267c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM379.028 379.939c51.328-3.652 89.978-48.223 86.325-99.551s-48.223-89.978-99.551-86.325c-51.328 3.652-89.978 48.223-86.325 99.551s48.223 89.978 99.551 86.325zM379.017 100.707c51.328-3.652 89.978-48.223 86.325-99.551s-48.223-89.978-99.551-86.325c-51.328 3.652-89.978 48.223-86.325 99.551s48.223 89.978 99.551 86.325zM744.773 706.027c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM744.773 426.8c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM744.773 147.307c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173z" />
+<glyph unicode="&#xe1042;" glyph-name="icon12-list-view" d="M0 938.667h1024v-170.667h-1024v170.667zM0 512h1024v-170.667h-1024v170.667zM0 85.334h1024v-170.667h-1024v170.667z" />
 <glyph unicode="&#xe1109;" glyph-name="icon12-folder" d="M938.667 768h-341.333l-110.32 110.32c-33.2 33.2-98.667 60.347-145.68 60.347h-256c-47.073-0.136-85.197-38.26-85.333-85.32v-341.346c0.136 47.073 38.26 85.197 85.32 85.333h853.346c47.073-0.136 85.197-38.26 85.333-85.32v170.654c-0.136 47.073-38.26 85.197-85.32 85.333zM85.333 512h853.333c47.128 0 85.333-38.205 85.333-85.333v-426.667c0-47.128-38.205-85.333-85.333-85.333h-853.333c-47.128 0-85.333 38.205-85.333 85.333v426.667c0 47.128 38.205 85.333 85.333 85.333z" />
 </font></defs></svg>

platform/commonUI/general/res/sass/_glyphs.scss

@@ -266,3 +266,5 @@ $glyph-icon-notebook: '\e1131';
 /************************** 12 PX CLASSES */
 .icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
 .icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
+.icon-list-view-12px {  @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }
+.icon-grippy-12px {  @include glyphBefore($glyph-icon-grippy,'symbolsfont-12px'); }

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -770,11 +770,31 @@ textarea {
     }
 }
 
-.grippy {
-    @extend .icon-grippy;
+.grippy,
+.grippy-sm,
+.drag-vertical,
+.drag-vertical-sm {
     cursor: move;
 }
 
+.drag-vertical {
+    @extend .icon-list-view;
+}
+
+.drag-vertical-sm {
+    @extend .icon-list-view-12px;
+}
+
+.grippy {
+    // Used in Summary Widgets
+    @extend .icon-grippy;
+}
+
+.grippy-sm {
+    // Used in editor Elements pool
+    @extend .icon-grippy-12px;
+}
+
 /******************************************************** BROWSER ELEMENTS */
 body.desktop {
     ::-webkit-scrollbar {

platform/commonUI/general/res/sass/edit/_editor.scss

@@ -23,13 +23,11 @@
 
 .l-grid-holder {
     display: none;
-    position: relative;
-    height: 100%;
-    width: 100%;
+    @extend .abs;
+    pointer-events: none;
+    z-index: 0;
     .l-grid {
         @extend .abs;
-        pointer-events: none;
-        z-index: 0;
         &.l-grid-y { background-position: 0 1px; }
     }
 }

platform/commonUI/general/res/sass/tree/_tree.scss

@@ -25,7 +25,14 @@ ul.tree {
     @include user-select(none);
     > li {
         display: block;
+        align-content: flex-end;
         position: relative;
+        .grippy-sm {
+            font-size: 12px;
+            margin-right: $interiorMargin;
+            opacity: 0.5;
+            width: 1em;
+        }
     }
     ul.tree {
         margin-left: $treeVCW + $interiorMargin;
@@ -121,6 +128,17 @@ body.desktop {
     }
 }
 
+ul.tree.reordering {
+    // User is drag reordering a tree item in a container that allows the action
+    .tree-item:not(.reorder-actor):hover {
+        background: rgba($colorKey, 0.2);
+        border: 1px dashed rgba($colorKey, 1);
+        > * {
+            opacity: 0.25;
+        }
+    }
+}
+
 mct-representation {
     &.s-status-pending {
         .t-object-label {

platform/commonUI/general/res/sass/user-environ/_frame.scss

@@ -22,6 +22,9 @@
 .frame {
     $ohH: $btnFrameH;
     $bc: $colorInteriorBorder;
+
+    position: absolute;
+
     &.child-frame.panel {
         z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
         &:not(.no-frame) {
@@ -171,3 +174,76 @@ body.desktop .frame {
         }
     }
 }
+
+.holder-object:not(.s-status-editing) {
+    .l-layout {
+        &.fl-column,
+        &.fl-row,
+        &.fl-wrap,
+        &.fl-phone-best-fit,
+        &.fl-mobile-best-fit {
+            display: flex;
+            flex-wrap: nowrap;
+            align-content: stretch;
+            align-items: stretch;
+            > .frame {
+                display: block;
+                flex: 1 1 auto;
+                width: auto !important;
+                height: auto !important;
+                &.t-object-type-summary-widget {
+                    &.no-frame.t-frame-outer > .t-rep-frame {
+                        &.contents {
+                            // When frame is hidden, add a bit of margin to the contents
+                            $m: $interiorMargin;
+                            top: $m; right: $m; bottom: $m; left: $m;
+                        }
+                    }
+                }
+            }
+        }
+        &.fl-column {
+            flex-direction: column;
+            padding-right: $interiorMargin;
+        }
+        &.fl-row {
+            flex-direction: row;
+            padding-bottom: $interiorMargin;
+        }
+
+        &.fl-wrap {
+            align-content: flex-start;
+            align-items: flex-start;
+            flex-wrap: wrap;
+        }
+    }
+}
+
+.holder-object {
+    .l-layout {
+        &.fl-column,
+        &.fl-row,
+        &.fl-wrap,
+        &.fl-phone-best-fit,
+        &.fl-mobile-best-fit {
+            > .frame {
+                top: auto !important;
+                left: auto !important;
+                position: relative;
+            }
+        }
+    }
+}
+
+body.mobile {
+    .l-layout.fl-mobile-best-fit {
+        flex-wrap: wrap !important;
+        padding: 0 !important;
+    }
+    &.portrait .l-layout.fl-mobile-best-fit {
+        flex-direction: column !important;
+    }
+    &.landscape .l-layout.fl-mobile-best-fit {
+        flex-direction: row !important;
+    }
+}

platform/features/layout/bundle.js

@@ -335,6 +335,12 @@ define([
                             ],
                             "key": "layoutGrid",
                             "conversion": "number[]"
+                        },
+                        {
+                            "name": "Advanced",
+                            "control": "textfield",
+                            "key": "layoutAdvancedCss",
+                            "cssClass": "l-input-lg"
                         }
                     ]
                 }

platform/features/layout/res/templates/layout.html

@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div class="abs l-layout"
+<div class="abs l-layout {{ domainObject.getModel().layoutAdvancedCss }}"
      ng-controller="LayoutController as controller"
      ng-click="controller.bypassSelection($event)">
 
@@ -36,7 +36,7 @@
              ng-style="{ 'background-size': '100% ' + controller.getGridSize() [1] + 'px' }"></div>
     </div>
 
-    <div class="abs frame t-frame-outer child-frame panel s-selectable s-moveable s-hover-border t-object-type-{{ childObject.getModel().type }}"
+    <div class="frame t-frame-outer child-frame panel s-selectable s-moveable s-hover-border t-object-type-{{ childObject.getModel().type }}"
          data-layout-id="{{childObject.getId() + '-' + $id}}"
          ng-class="{ 'no-frame': !controller.hasFrame(childObject), 's-drilled-in': controller.isDrilledIn(childObject) }"
          ng-repeat="childObject in composition"

platform/features/layout/src/LayoutController.js

@@ -244,7 +244,9 @@ define(
                 left: (gridSize[0] * raw.position[0]) + 'px',
                 top: (gridSize[1] * raw.position[1]) + 'px',
                 width: (gridSize[0] * raw.dimensions[0]) + 'px',
-                height: (gridSize[1] * raw.dimensions[1]) + 'px'
+                height: (gridSize[1] * raw.dimensions[1]) + 'px',
+                minWidth: (gridSize[0] * raw.dimensions[0]) + 'px',
+                minHeight: (gridSize[1] * raw.dimensions[1]) + 'px'
             };
         };
 

platform/features/layout/test/LayoutControllerSpec.js

@@ -217,7 +217,9 @@ define(
                     top: "320px",
                     left: "640px",
                     width: "160px",
-                    height: "160px"
+                    height: "160px",
+                    minWidth : '160px',
+                    minHeight : '160px'
                 });
             });
 

src/plugins/plot/src/telemetry/StackedPlotController.js

@@ -106,7 +106,21 @@ define([
                     });
         }
 
+        function onCompositionChange(newComp, oldComp) {
+            if (newComp !== oldComp) {
+
+                $scope.telemetryObjects = [];
+
+                objectService.getObjects(newComp).then(function (objects) {
+                    newComp.forEach(function (id) {
+                        $scope.telemetryObjects.push(objects[id]);
+                    });
+                });
+            }
+        }
+
         $scope.$watch('domainObject', onDomainObjectChange);
+        $scope.$watch('domainObject.getModel().composition', onCompositionChange);
 
         $scope.$on('plot:tickWidth', function ($e, width) {
             var plotId = $e.targetScope.domainObject.getId();