[Treeview] Compatability with search

Update to hide search bar when the pane is
closed. #72.

platform/commonUI/browse/bundle.json

@@ -21,7 +21,7 @@
             {
                 "key": "BrowseObjectController",
                 "implementation": "BrowseObjectController.js",
-                "depends": [ "$scope", "$location", "$route" ]
+                "depends": [ "$scope", "$location", "$route", "$window" ]
             },
             {
                 "key": "CreateMenuController",

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

@@ -20,7 +20,15 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="BrowseObjectController">
+    
     <div class="object-browse-bar bar abs">
+        
+        <div class="ui-symbol left-pane-tabs"
+             ng-class="{inactivePane: !ngModel.leftPane, activePane: ngModel.leftPane}"
+             ng-click="ngModel.leftPane = !ngModel.leftPane">
+            
+        </div>
+        
         <div class="items-select left abs">
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
@@ -37,6 +45,7 @@
                                 ng-model="representation">
             </mct-representation>
         </div>
+        
     </div>
 
     <div class='object-holder abs vscroll'>
@@ -44,4 +53,5 @@
                             mct-object="representation.selected.key && domainObject">
         </mct-representation>
     </div>
+    
 </span>

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

@@ -19,15 +19,26 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<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">
-        <mct-split-pane class='contents abs' anchor='left'>
-            <div
-                class='split-pane-component treeview pane left'
-                >
-                <mct-representation key="'create-button'" mct-object="navigatedObject">
+
+<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">
+        
+        <mct-split-pane class='contents abs'
+                        anchor='left'>
+            <div class='split-pane-component treeview pane left'
+                 ng-class='{inactive: !paneModel.leftPane}'>
+                
+                <mct-representation key="'create-button'"
+                                    mct-object="navigatedObject"
+                                    ng-model="paneModel">
                 </mct-representation>
+                
                 <div class='holder search-holder abs'
                      ng-class="{active: treeModel.search}">
                     <mct-representation key="'search'"
@@ -35,6 +46,7 @@
                                  ng-model="treeModel">
                     </mct-representation>
                 </div>
+                
                 <div class='holder tree-holder abs'
                      ng-hide="treeModel.search">
                     <mct-representation key="'tree'"
@@ -43,14 +55,26 @@
                     </mct-representation>
                 </div>
             </div>
-            <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-splitter class="splitter-bar left"
+                          ng-class="{inactive: !paneModel.leftPane}">
+            </mct-splitter>
+            
+            <div class='split-pane-component items pane'
+                 ng-class='{leftInactive: !paneModel.leftPane}'>
+                <div class='holder abs'
+                     id='content-area'>
+                    <mct-representation key="'browse-object'"
+                                        mct-object="navigatedObject"
+                                        ng-model="paneModel">
                     </mct-representation>
                 </div>
             </div>
+            
         </mct-split-pane>
+        
     </div>
-    <mct-include key="'bottombar'"></mct-include>
+    
+    <mct-include key="'bottombar'">
+    </mct-include>
 </div>

platform/commonUI/browse/res/templates/create/create-button.html

@@ -20,8 +20,10 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
-    <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
-	    Create
+    <div class="btn btn-menu create-btn major"
+         ng-class="{inactivePane: !ngModel.leftPane}"
+         ng-click="createController.toggle()">
+	    <span>Create</span>
     </div>
     <div class="menu dropdown super-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">

platform/commonUI/browse/src/BrowseController.js

@@ -142,7 +142,12 @@ define(
             $scope.treeModel = {
                 selectedObject: navigationService.getNavigation()
             };
-
+            
+            // Provide a model for the left pane
+            $scope.paneModel = {
+                selectedObject: navigationService.getNavigation()
+            };
+            
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 

platform/commonUI/browse/src/BrowseObjectController.js

@@ -32,7 +32,7 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function BrowseObjectController($scope, $location, $route) {
+        function BrowseObjectController($scope, $location, $route, $window) {
             function setViewForDomainObject(domainObject) {
                 var locationViewKey = $location.search().view;
 
@@ -65,6 +65,16 @@ define(
                 }
             }
 
+            // If there is a defined opener, assume that the window was opened 
+            //   by choosing 'Open in a new tab'
+            if ($window.opener) {
+                // The desired default for this is to have a closed left pane
+                $scope.ngModel.leftPane = false;
+            } else {
+                // Otherwise, start the application with an open left pane 
+                $scope.ngModel.leftPane = true;
+            }
+            
             $scope.$watch('domainObject', setViewForDomainObject);
             $scope.$watch('representation.selected.key', updateQueryParam);
         }

platform/commonUI/browse/test/BrowseControllerSpec.js

@@ -54,6 +54,7 @@ define(
                     "$scope",
                     [ "$on", "$watch" ]
                 );
+                mockScope.ngModel = {};
                 mockRoute = { current: { params: {} } };
                 mockLocation = jasmine.createSpyObj(
                     "$location",

platform/commonUI/browse/test/BrowseObjectControllerSpec.js

@@ -31,6 +31,7 @@ define(
             var mockScope,
                 mockLocation,
                 mockRoute,
+                mockWindow,
                 mockUnlisten,
                 controller;
 
@@ -48,7 +49,9 @@ define(
                     "$scope",
                     [ "$on", "$watch" ]
                 );
+                mockScope.ngModel = {};
                 mockRoute = { current: { params: {} } };
+                mockWindow = {};
                 mockLocation = jasmine.createSpyObj(
                     "$location",
                     [ "path", "search" ]
@@ -60,7 +63,8 @@ define(
                 controller = new BrowseObjectController(
                     mockScope,
                     mockLocation,
-                    mockRoute
+                    mockRoute,
+                    mockWindow
                 );
             });
 

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

@@ -5139,3 +5139,106 @@ input[type="text"] {
   .l-view-section label,
   .l-view-section .inline-block {
     display: inline-block; }
+
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+/* line 30, ../sass/tree/_pane.scss */
+.pane.left.inactive {
+  width: 0 !important;
+  min-width: 0 !important; }
+  /* line 35, ../sass/tree/_pane.scss */
+  .pane.left.inactive .tree-holder {
+    padding-right: 0; }
+  /* line 40, ../sass/tree/_pane.scss */
+  .pane.left.inactive .search-holder {
+    display: none; }
+/* line 46, ../sass/tree/_pane.scss */
+.pane.left .create-btn.major {
+  top: 0;
+  left: 0;
+  transition: all 0.35s; }
+  /* line 51, ../sass/tree/_pane.scss */
+  .pane.left .create-btn.major.inactivePane {
+    top: 0;
+    left: 0;
+    position: relative;
+    padding: 0;
+    text-align: center;
+    font-size: 12px;
+    width: 13px;
+    height: 16px;
+    line-height: 14px;
+    left: -11px;
+    top: 20px; }
+    /* line 69, ../sass/tree/_pane.scss */
+    .pane.left .create-btn.major.inactivePane span {
+      display: none; }
+
+/* line 79, ../sass/tree/_pane.scss */
+.splitter-bar.left {
+  opacity: 1;
+  transition: opacity 0.35s, visibility 0.35s;
+  top: 0; }
+  /* line 86, ../sass/tree/_pane.scss */
+  .splitter-bar.left.inactive {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0s, visibility 0s; }
+    /* line 92, ../sass/tree/_pane.scss */
+    .splitter-bar.left.inactive:before {
+      border-width: 0; }
+
+/* line 99, ../sass/tree/_pane.scss */
+.items.pane {
+  transition: left 0.35s;
+  transition-timing-function: ease-out; }
+  /* line 103, ../sass/tree/_pane.scss */
+  .items.pane.leftInactive {
+    left: 0 !important; }
+  /* line 108, ../sass/tree/_pane.scss */
+  .items.pane .object-browse-bar {
+    position: relative; }
+    /* line 111, ../sass/tree/_pane.scss */
+    .items.pane .object-browse-bar .left-pane-tabs {
+      position: relative;
+      cursor: pointer;
+      left: -10px;
+      width: 11px;
+      height: 16px;
+      line-height: 16px;
+      font-size: 10px;
+      top: 3px;
+      border-top-right-radius: 2px;
+      border-bottom-right-radius: 2px;
+      background-color: #595959; }
+      /* line 128, ../sass/tree/_pane.scss */
+      .items.pane .object-browse-bar .left-pane-tabs.inactivePane {
+        left: -15px; }
+        /* line 131, ../sass/tree/_pane.scss */
+        .items.pane .object-browse-bar .left-pane-tabs.inactivePane:after {
+          content: '>'; }
+      /* line 135, ../sass/tree/_pane.scss */
+      .items.pane .object-browse-bar .left-pane-tabs.activePane:after {
+        content: '<'; }
+    /* line 140, ../sass/tree/_pane.scss */
+    .items.pane .object-browse-bar .items-select {
+      margin-left: 10px; }

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

@@ -74,3 +74,4 @@
 @import "initialization";
 @import "hide-non-functional";
 @import "views";
+@import "tree/pane";

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

@@ -0,0 +1,144 @@
+/*****************************************************************************
+ * 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.
+ *****************************************************************************/
+
+// Added by shale on 08/19/2015. Styling for the collapsible tree view. 
+
+$transitionTime: 0.35s;
+
+// Set the left pane (which contains the tree) to have no width to close
+// (not display:none because we still need to have access to the create button)
+.pane.left {
+    &.inactive {
+        width: 0 !important;
+        min-width: 0 !important;
+        
+        // Undo the tree-holder's right padding when tree closed
+        .tree-holder {
+            padding-right: 0;
+        }
+        
+        // Hide the search bar when the pane is closed
+        .search-holder {
+            display: none;
+        }
+    }
+    
+    // When the pane is closed, move and resize the create button
+    .create-btn.major {
+        top: 0;
+        left: 0;
+        transition: all $transitionTime;
+
+        &.inactivePane {
+            top: 0;
+            left: 0;
+
+            position: relative;
+            padding: 0;
+
+            text-align: center;
+            font-size: 12px;
+
+            width: 13px;
+            height: 16px;
+            line-height: 14px;
+
+            left: -11px;
+            top: 20px;
+
+            // Remove 'Create' text from the button when in small mode
+            span {
+                display: none;
+            }
+        }
+    }
+}
+
+// Hide the splitter bar when the left pane is closed
+// Fade the splitter bar in when opening menu, but immediately fade
+//   out when closing menu 
+.splitter-bar.left {
+    opacity: 1;
+    transition: opacity $transitionTime, visibility $transitionTime;
+    
+    // Make the splitter bar vertically span to the top
+    top: 0;
+    
+    &.inactive {
+        visibility: hidden;
+        opacity: 0;
+        
+        transition: opacity 0s, visibility 0s;
+        
+        &:before {
+            border-width: 0;
+        }
+    }
+}
+
+// The main view needs to align left when the panes are moving around
+.items.pane {
+    transition: left $transitionTime;
+    transition-timing-function: ease-out;
+    
+    &.leftInactive {
+        left: 0 !important;
+    }
+    
+    // Move buttons close to the splitter bar 
+    .object-browse-bar {
+        position: relative;
+
+        .left-pane-tabs {
+            position: relative;
+            cursor: pointer;
+
+            left: -10px;
+            width: 11px;
+            height: 16px;
+            line-height: 16px;
+            font-size: 10px;
+            top: 3px;
+
+            //border-radius: 2px;
+            border-top-right-radius: 2px;
+            border-bottom-right-radius: 2px;
+            background-color: darken($colorBodyFg, 25%);
+
+            // Change button icon depending on state
+            &.inactivePane {
+                left: -15px;
+
+                &:after {
+                    content: '>';//'F';
+                }
+            }
+            &.activePane:after {
+                content: '<';
+            }
+        }
+
+        .items-select {
+            margin-left: 10px;
+        }
+    }
+}