From 503c8e2f03c071c1307da000081ad4a1735e8f70 Mon Sep 17 00:00:00 2001
From: slhale <sarah.hale@nasa.gov>
Date: Thu, 20 Aug 2015 13:02:40 -0700
Subject: [PATCH] [Treeview] Collapse button styling

Changed color to better match topbar buttons.
Icon changes direction when pane is open vs
closed.
---
 .../browse/res/templates/browse-object.html   |  4 +-
 .../general/res/css/theme-espresso.css        | 39 +++++++++++--------
 .../commonUI/general/res/sass/tree/_pane.scss | 20 +++++++---
 3 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 148686b42d..068e51ce0b 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -24,9 +24,9 @@
     <div class="object-browse-bar bar abs">
         
         <div class="ui-symbol left-pane-tabs"
-             ng-class="{inactivePane: !ngModel.leftPane}"
+             ng-class="{inactivePane: !ngModel.leftPane, activePane: ngModel.leftPane}"
              ng-click="ngModel.leftPane = !ngModel.leftPane">
-            <
+            
         </div>
         
         <div class="items-select left abs">
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 910d1f4640..c83232d45b 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -5130,27 +5130,30 @@ input[type="text"] {
 .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 39, ../sass/tree/_pane.scss */
+/* line 44, ../sass/tree/_pane.scss */
 .splitter-bar.left {
   opacity: 1;
   transition: opacity 0.35s, visibility 0.35s;
   top: 0; }
-  /* line 46, ../sass/tree/_pane.scss */
+  /* line 51, ../sass/tree/_pane.scss */
   .splitter-bar.left.inactive {
     visibility: hidden;
     opacity: 0;
     transition: opacity 0s, visibility 0s; }
-    /* line 52, ../sass/tree/_pane.scss */
+    /* line 57, ../sass/tree/_pane.scss */
     .splitter-bar.left.inactive:before {
       border-width: 0; }
 
-/* line 59, ../sass/tree/_pane.scss */
+/* line 64, ../sass/tree/_pane.scss */
 .create-btn.major {
   top: 0;
   left: 0;
   transition: all 0.35s; }
-  /* line 64, ../sass/tree/_pane.scss */
+  /* line 69, ../sass/tree/_pane.scss */
   .create-btn.major.inactivePane {
     top: 0;
     left: 0;
@@ -5163,22 +5166,22 @@ input[type="text"] {
     line-height: 14px;
     left: -11px;
     top: 20px; }
-    /* line 82, ../sass/tree/_pane.scss */
+    /* line 87, ../sass/tree/_pane.scss */
     .create-btn.major.inactivePane span {
       display: none; }
 
-/* line 89, ../sass/tree/_pane.scss */
+/* line 94, ../sass/tree/_pane.scss */
 .items.pane {
   transition: left 0.35s;
   transition-timing-function: ease-out; }
-  /* line 93, ../sass/tree/_pane.scss */
+  /* line 98, ../sass/tree/_pane.scss */
   .items.pane.leftInactive {
     left: 0 !important; }
 
-/* line 99, ../sass/tree/_pane.scss */
+/* line 104, ../sass/tree/_pane.scss */
 .object-browse-bar {
   position: relative; }
-  /* line 102, ../sass/tree/_pane.scss */
+  /* line 107, ../sass/tree/_pane.scss */
   .object-browse-bar .left-pane-tabs {
     position: relative;
     cursor: pointer;
@@ -5190,12 +5193,16 @@ input[type="text"] {
     top: 3px;
     border-top-right-radius: 2px;
     border-bottom-right-radius: 2px;
-    background-color: lightgrey;
-    border: 1px solid grey;
-    border-left-width: 0; }
-    /* line 121, ../sass/tree/_pane.scss */
+    background-color: #595959; }
+    /* line 124, ../sass/tree/_pane.scss */
     .object-browse-bar .left-pane-tabs.inactivePane {
-      left: -16px; }
-  /* line 126, ../sass/tree/_pane.scss */
+      left: -15px; }
+      /* line 127, ../sass/tree/_pane.scss */
+      .object-browse-bar .left-pane-tabs.inactivePane:after {
+        content: '>'; }
+    /* line 131, ../sass/tree/_pane.scss */
+    .object-browse-bar .left-pane-tabs.activePane:after {
+      content: '<'; }
+  /* line 136, ../sass/tree/_pane.scss */
   .object-browse-bar .items-select {
     margin-left: 10px; }
diff --git a/platform/commonUI/general/res/sass/tree/_pane.scss b/platform/commonUI/general/res/sass/tree/_pane.scss
index 94b67a88bf..47028aac06 100644
--- a/platform/commonUI/general/res/sass/tree/_pane.scss
+++ b/platform/commonUI/general/res/sass/tree/_pane.scss
@@ -30,6 +30,11 @@ $transitionTime: 0.35s;
     &.inactive {
         width: 0 !important;
         min-width: 0 !important;
+        
+        // Undo the tree-holder's right padding when tree closed
+        .tree-holder {
+            padding-right: 0;
+        }
     }
 }
 
@@ -113,13 +118,18 @@ $transitionTime: 0.35s;
         //border-radius: 2px;
         border-top-right-radius: 2px;
         border-bottom-right-radius: 2px;
-        background-color: lightgrey;
-        border: 1px solid grey;
-        border-left-width: 0;
+        background-color: darken($colorBodyFg, 25%);
         
-        // Move button closer 
+        // Change button icon depending on state
         &.inactivePane {
-            left: -16px;
+            left: -15px;
+            
+            &:after {
+                content: '>';//'F';
+            }
+        }
+        &.activePane:after {
+            content: '<';
         }
     }