Merge branch 'open1363' into open-master

platform/commonUI/browse/res/templates/browse.html

@@ -22,10 +22,9 @@
 <div content="jquery-wrapper" class="abs holder-all browse-mode">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
-        <div class='split-layout vertical contents abs'
-             ng-controller="SplitPaneController as splitter">
+        <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane'
-                 ng-style="{ width: splitter.state() + 'px'}">
+                 style="min-width: 150px; max-width: 800px; width: 25%;">
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
@@ -35,18 +34,14 @@
                     </mct-representation>
                 </div>
             </div>
-            <div class="splitter"
-                 ng-style="{ left: splitter.state() + 'px'}"
-                 mct-drag-down="splitter.startMove()"
-                 mct-drag="splitter.move(delta[0])"></div>
-            <div class='split-pane-component items pane'
-                 ng-style="{ left: (splitter.state()+4) + 'px', right: '0px' }">
+            <mct-splitter></mct-splitter>
+            <div class='split-pane-component items pane'>
                 <div class='holder abs' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
             </div>
-        </div>
+        </mct-split-pane>
     </div>
     <mct-include key="'bottombar'"></mct-include>
-</div>
+</div>

platform/commonUI/general/bundle.json

@@ -8,8 +8,8 @@
                 "key": "urlService",
                 "implementation": "/services/UrlService.js",
                 "depends": [ "$location" ]
-            }    
-        ],        
+            }
+        ],
         "runs": [
             {
                 "implementation": "StyleSheetLoader.js",
@@ -131,6 +131,15 @@
                 "key": "mctScrollY",
                 "implementation": "directives/MCTScroll.js",
                 "depends": [ "$parse", "MCT_SCROLL_Y_PROPERTY", "MCT_SCROLL_Y_ATTRIBUTE" ]
+            },
+            {
+                "key": "mctSplitPane",
+                "implementation": "directives/MCTSplitPane.js",
+                "depends": [ "$parse", "$log" ]
+            },
+            {
+                "key": "mctSplitter",
+                "implementation": "directives/MCTSplitter.js"
             }
         ],
         "constants": [

platform/commonUI/general/res/css/theme-espresso.css

@@ -2268,18 +2268,43 @@ label.checkbox.custom {
     color: #757575; }
   /* line 176, ../sass/_mixins.scss */
   .slider .knob:before {
+    -moz-transition-property: "border-color";
+    -o-transition-property: "border-color";
+    -webkit-transition-property: "border-color";
+    transition-property: "border-color";
+    -moz-transition-duration: 0.75s;
+    -o-transition-duration: 0.75s;
+    -webkit-transition-duration: 0.75s;
+    transition-duration: 0.75s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
     content: '';
     display: block;
     height: auto;
+    pointer-events: none;
     position: absolute;
     z-index: 2;
     border-left: 1px solid rgba(0, 0, 0, 0.3);
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 197, ../sass/_mixins.scss */
+  /* line 198, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
-    border-color: rgba(0, 153, 204, 0.9); }
+    -moz-transition-property: "border-color";
+    -o-transition-property: "border-color";
+    -webkit-transition-property: "border-color";
+    transition-property: "border-color";
+    -moz-transition-duration: 50ms;
+    -o-transition-duration: 50ms;
+    -webkit-transition-duration: 50ms;
+    transition-duration: 50ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    border-color: #0099cc; }
   /* line 409, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
@@ -2444,7 +2469,7 @@ label.checkbox.custom {
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 264, ../sass/_mixins.scss */
+      /* line 266, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -4523,18 +4548,43 @@ input[type="text"] {
     height: 5px; }
     /* line 176, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
+      -moz-transition-property: "border-color";
+      -o-transition-property: "border-color";
+      -webkit-transition-property: "border-color";
+      transition-property: "border-color";
+      -moz-transition-duration: 0.75s;
+      -o-transition-duration: 0.75s;
+      -webkit-transition-duration: 0.75s;
+      transition-duration: 0.75s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
       content: '';
       display: block;
       height: auto;
+      pointer-events: none;
       position: absolute;
       z-index: 2;
       border-top: 1px dotted #1a1a1a;
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 197, ../sass/_mixins.scss */
+    /* line 198, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
-      border-color: rgba(0, 153, 204, 0.9); }
+      -moz-transition-property: "border-color";
+      -o-transition-property: "border-color";
+      -webkit-transition-property: "border-color";
+      transition-property: "border-color";
+      -moz-transition-duration: 50ms;
+      -o-transition-duration: 50ms;
+      -webkit-transition-duration: 50ms;
+      transition-duration: 50ms;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      border-color: #0099cc; }
 /* line 63, ../sass/helpers/_splitter.scss */
 .split-layout.vertical .pane {
   top: 0;
@@ -4552,18 +4602,43 @@ input[type="text"] {
   width: 5px; }
   /* line 176, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
+    -moz-transition-property: "border-color";
+    -o-transition-property: "border-color";
+    -webkit-transition-property: "border-color";
+    transition-property: "border-color";
+    -moz-transition-duration: 0.75s;
+    -o-transition-duration: 0.75s;
+    -webkit-transition-duration: 0.75s;
+    transition-duration: 0.75s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
     content: '';
     display: block;
     height: auto;
+    pointer-events: none;
     position: absolute;
     z-index: 2;
     border-left: 1px dotted #1a1a1a;
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 197, ../sass/_mixins.scss */
+  /* line 198, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
-    border-color: rgba(0, 153, 204, 0.9); }
+    -moz-transition-property: "border-color";
+    -o-transition-property: "border-color";
+    -webkit-transition-property: "border-color";
+    transition-property: "border-color";
+    -moz-transition-duration: 50ms;
+    -o-transition-duration: 50ms;
+    -webkit-transition-duration: 50ms;
+    transition-duration: 50ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    border-color: #0099cc; }
 
 /* line 86, ../sass/helpers/_splitter.scss */
 .browse-area .splitter {

platform/commonUI/general/res/css/tree.css

@@ -95,7 +95,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 264, ../sass/_mixins.scss */
+  /* line 266, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;

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

@@ -174,10 +174,11 @@
 
 @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
 	&:before {
-		// Grippy
+		@include trans-prop-nice("border-color",0.75s);
 		content: '';
 		display: block;
 		height: auto;
+		pointer-events: none;
 		position: absolute;
 		z-index: 2;
 
@@ -195,7 +196,8 @@
 		}
 	}
 	&:not(.disabled):hover:before {
-		border-color: rgba($colorKey, 0.9);
+		@include trans-prop-nice("border-color",50ms);
+		border-color: $colorKey;
 	}
 }
 

platform/commonUI/general/src/directives/MCTSplitPane.js

@@ -0,0 +1,215 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        'use strict';
+
+        // Pixel width to allocate for the splitter itself
+        var DEFAULT_ANCHOR = 'left',
+            CHILDREN_WARNING_MESSAGE = [
+                "Invalid mct-split-pane contents.",
+                "This element should contain exactly three",
+                "child elements, where the middle-most element",
+                "is an mct-splitter."
+            ].join(" "),
+            ANCHOR_WARNING_MESSAGE = [
+                "Unknown anchor provided to mct-split-pane,",
+                "defaulting to",
+                DEFAULT_ANCHOR + "."
+            ].join(" "),
+            ANCHORS = {
+                left: {
+                    edge: "left",
+                    opposite: "right",
+                    dimension: "width",
+                    orientation: "vertical"
+                },
+                right: {
+                    edge: "right",
+                    opposite: "left",
+                    dimension: "width",
+                    orientation: "vertical",
+                    reversed: true
+                },
+                top: {
+                    edge: "top",
+                    opposite: "bottom",
+                    dimension: "height",
+                    orientation: "horizontal"
+                },
+                bottom: {
+                    edge: "bottom",
+                    opposite: "top",
+                    dimension: "height",
+                    orientation: "horizontal",
+                    reversed: true
+                }
+            };
+
+        /**
+         * Implements `mct-split-pane` directive.
+         *
+         * This takes the following attributes:
+         * * `position`: Two-way bound scope variable which will contain
+         *   the pixel position of the splitter, offset from the appropriate
+         *   edge.
+         * * `anchor`: Plain string, one of "left", "right", "top",
+         *    or "bottom".
+         *
+         * When used, an `mct-split-pane` element should contain exactly
+         * three child elements, where the middle is an `mct-splitter`
+         * element. These should be included in either left-to-right
+         * or top-to-bottom order (depending on anchoring.) If the contents
+         * do not match this form, `mct-split-pane` will issue a warning
+         * and its behavior will be undefined.
+         *
+         * This directive works by setting the width of the element
+         * nearest the anchor edge, and then positioning the other elements
+         * based on its observed width. As such, `min-width`, `max-width`,
+         * etc. can be set on that element to control the splitter's
+         * allowable positions.
+         *
+         * @constructor
+         */
+        function MCTSplitPane($parse, $log) {
+            var anchors = {
+                left: true,
+                right: true,
+                top: true,
+                bottom: true
+            };
+
+            function controller($scope, $element, $attrs) {
+                var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
+                    anchor,
+                    positionParsed = $parse($attrs.position),
+                    position; // Start undefined, until explicitly set
+
+                // Get relevant size (height or width) of DOM element
+                function getSize(domElement) {
+                    return (anchor.orientation === 'vertical' ?
+                            domElement.offsetWidth : domElement.offsetHeight);
+                }
+
+                // Apply styles to child elements
+                function updateChildren(children) {
+                    // Pick out correct elements to update, flowing from
+                    // selected anchor edge.
+                    var first = children.eq(anchor.reversed ? 2 : 0),
+                        splitter = children.eq(1),
+                        last = children.eq(anchor.reversed ? 0 : 2),
+                        splitterSize = getSize(splitter[0]),
+                        firstSize;
+
+                    first.css(anchor.edge, "0px");
+                    first.css(anchor.dimension, (position - splitterSize) + 'px');
+
+                    // Get actual size (to obey min-width etc.)
+                    firstSize = getSize(first[0]);
+                    first.css(anchor.dimension, firstSize + 'px');
+                    splitter.css(anchor.edge, (firstSize + splitterSize) + 'px');
+                    splitter.css(anchor.opposite, "auto");
+
+                    last.css(anchor.edge, (firstSize + splitterSize * 3) + 'px');
+                    last.css(anchor.opposite, "0px");
+
+                    position = firstSize + splitterSize;
+                }
+
+                // Update positioning of contained elements
+                function updateElementPositions() {
+                    var children = $element.children();
+
+                    // Check to make sure contents are well-formed
+                    if (children.length !== 3 ||
+                            children[1].nodeName.toLowerCase() !== 'mct-splitter') {
+                        $log.warn(CHILDREN_WARNING_MESSAGE);
+                        return;
+                    }
+
+                    updateChildren(children);
+                }
+
+                // Enforce minimum/maximum positions
+                function enforceExtrema() {
+                    position = Math.max(position, 0);
+                    position = Math.min(position, getSize($element[0]));
+                }
+
+                // Getter-setter for the pixel offset of the splitter,
+                // relative to the current edge.
+                function getSetPosition(value) {
+                    var min, max;
+                    if (typeof value === 'number') {
+                        position = value;
+                        enforceExtrema();
+                        updateElementPositions();
+
+                        // Pass change up so this state can be shared
+                        if (positionParsed.assign) {
+                            positionParsed.assign($scope, position);
+                        }
+                    }
+                    return position;
+                }
+
+                // Make sure anchor parameter is something we know
+                if (!ANCHORS[anchorKey]) {
+                    $log.warn(ANCHOR_WARNING_MESSAGE);
+                    anchorKey = DEFAULT_ANCHOR;
+                }
+                anchor = ANCHORS[anchorKey];
+
+                $scope.$watch($attrs.position, getSetPosition);
+
+                $element.addClass("split-layout");
+                $element.addClass(anchor.orientation);
+
+                // Initialize positions
+                getSetPosition(getSize(
+                    $element.children().eq(anchor.reversed ? 2 : 0)[0]
+                ));
+
+                // Interface exposed by controller, for mct-splitter to user
+                return {
+                    position: getSetPosition,
+                    anchor: function () {
+                        return anchor;
+                    }
+                };
+            }
+
+            return {
+                // Restrict to attributes
+                restrict: "E",
+                // Expose its controller
+                controller: ['$scope', '$element', '$attrs', controller]
+            };
+        }
+
+        return MCTSplitPane;
+
+    }
+);

platform/commonUI/general/src/directives/MCTSplitter.js

@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web 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 Web 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.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        'use strict';
+
+        // Pixel width to allocate for the splitter itself
+        var SPLITTER_TEMPLATE = "<div class='abs'" +
+                "mct-drag-down=\"splitter.startMove()\" " +
+                "mct-drag=\"splitter.move(delta)\"></div>",
+            OFFSETS_BY_EDGE = {
+                left: "offsetLeft",
+                right: "offsetRight",
+                top: "offsetTop",
+                bottom: "offsetBottom"
+            };
+
+        /**
+         * Implements `mct-splitter` directive.
+         * @constructor
+         */
+        function MCTSplitter() {
+            function link(scope, element, attrs, mctSplitPane) {
+                var initialPosition;
+
+                element.addClass("splitter");
+
+                // Now that we have the above class, the splitter width
+                // will have changed, so trigger a positioning update.
+                mctSplitPane.position(mctSplitPane.position());
+
+                scope.splitter = {
+                    // Begin moving this splitter
+                    startMove: function () {
+                        var splitter = element[0];
+                        initialPosition = mctSplitPane.position();
+                    },
+                    // Handle user changes to splitter position
+                    move: function (delta) {
+                        var anchor = mctSplitPane.anchor(),
+                            index = anchor.orientation === "vertical" ? 0 : 1,
+                            pixelDelta = delta[index] *
+                                (anchor.reversed ? -1 : 1);
+
+                        // Update the position of this splitter
+                        mctSplitPane.position(initialPosition + pixelDelta);
+                    }
+                };
+            }
+
+            return {
+                // Restrict to attributes
+                restrict: "E",
+                // Utilize the mct-split-pane controller
+                require: "^mctSplitPane",
+                // Expose its controller
+                link: link,
+                // Use the template defined above
+                template: SPLITTER_TEMPLATE,
+                // Create a new scope to put the splitter into
+                scope: true
+            };
+        }
+
+        return MCTSplitter;
+
+    }
+);