[Treeview] Create button and slide transition

Made the create button visible when the left
pane is closed. Added a transition between
opening and closing the pane.

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

@@ -24,6 +24,7 @@
     <div class="object-browse-bar bar abs">
         
         <div class="ui-symbol left-pane-tabs"
+             ng-class="{inactivePane: !ngModel.leftPane}"
              ng-click="ngModel.leftPane = !ngModel.leftPane; log(ngModel.pane)">
             <
         </div>

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

@@ -35,7 +35,8 @@
                  ng-class='{inactive: !paneModel.leftPane}'>
                 
                 <mct-representation key="'create-button'"
-                                    mct-object="navigatedObject">
+                                    mct-object="navigatedObject"
+                                    ng-model="paneModel">
                 </mct-representation>
                 
                 <div class='holder tree-holder abs'>

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()">
+    <div class="btn btn-menu create-btn major"
-	    Create
+         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/general/res/css/theme-espresso.css

@@ -706,25 +706,61 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 27, ../sass/tree/_layout.scss */
+/* line 28, ../sass/tree/_layout.scss */
-.pane.left.inactive {
+.pane.left {
-  visibility: hidden;
+  transition: width 0.25s; }
-  width: 0 !important;
+  /* line 31, ../sass/tree/_layout.scss */
-  min-width: 0 !important; }
+  .pane.left.inactive {
+    width: 0 !important;
+    min-width: 0 !important; }
 
-/* line 36, ../sass/tree/_layout.scss */
+/* line 37, ../sass/tree/_layout.scss */
-.splitter-bar.left.inactive {
+.splitter-bar.left {
-  left: 0 !important;
+  opacity: 1;
-  visibility: hidden; }
+  transition: left 0.25s, opacity 0.25s, visibility 0.25s; }
+  /* line 41, ../sass/tree/_layout.scss */
+  .splitter-bar.left.inactive {
+    left: 0 !important;
+    visibility: hidden;
+    opacity: 0;
+    width: 0; }
+    /* line 48, ../sass/tree/_layout.scss */
+    .splitter-bar.left.inactive:before {
+      border-width: 0; }
 
-/* line 46, ../sass/tree/_layout.scss */
+/* line 55, ../sass/tree/_layout.scss */
-.items.pane.leftInactive {
+.create-btn.major {
-  left: 0 !important; }
+  top: 0;
+  left: 0;
+  transition: all 0.25s; }
+  /* line 60, ../sass/tree/_layout.scss */
+  .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 78, ../sass/tree/_layout.scss */
+    .create-btn.major.inactivePane span {
+      display: none; }
 
-/* line 52, ../sass/tree/_layout.scss */
+/* line 85, ../sass/tree/_layout.scss */
+.items.pane {
+  transition: left 0.25s; }
+  /* line 88, ../sass/tree/_layout.scss */
+  .items.pane.leftInactive {
+    left: 0 !important; }
+
+/* line 94, ../sass/tree/_layout.scss */
 .object-browse-bar {
   position: relative; }
-  /* line 55, ../sass/tree/_layout.scss */
+  /* line 97, ../sass/tree/_layout.scss */
   .object-browse-bar .left-pane-tabs {
     position: relative;
     cursor: pointer;
@@ -739,7 +775,10 @@ mct-container {
     background-color: lightgrey;
     border: 1px solid grey;
     border-left-width: 0; }
-  /* line 74, ../sass/tree/_layout.scss */
+    /* line 116, ../sass/tree/_layout.scss */
+    .object-browse-bar .left-pane-tabs.inactivePane {
+      left: -16px; }
+  /* line 121, ../sass/tree/_layout.scss */
   .object-browse-bar .items-select {
     margin-left: 10px; }
 

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

@@ -22,27 +22,69 @@
 
 // Added by shale on 08/19/2015. Styling for the collapsible tree view. 
 
+$transitionTime: 0.25s;
+
 //.pane.right,
 .pane.left {
+    transition: width $transitionTime;
+    
     &.inactive {
-        // Don't want visibility hidden later, because create button 
-        visibility: hidden;
         width: 0 !important;
         min-width: 0 !important;
     }
 }
 
 .splitter-bar.left {
+    opacity: 1;
+    transition: left $transitionTime, opacity $transitionTime, visibility $transitionTime;
+    
     &.inactive {
         left: 0 !important;
-        
+        //display: none;
         visibility: hidden;
-        //width: 0;
+        opacity: 0;
+        width: 0;
+        
+        &:before {
+            border-width: 0;
+        }
+    }
+}
+
+// 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;
+        }
     }
 }
 
 // The main view needs to align left when the panes are moving around
 .items.pane {
+    transition: left $transitionTime;
+    
     &.leftInactive {
         left: 0 !important;
     }
@@ -69,6 +111,11 @@
         background-color: lightgrey;
         border: 1px solid grey;
         border-left-width: 0;
+        
+        // Move button closer 
+        &.inactivePane {
+            left: -16px;
+        }
     }
     
     .items-select {