From b9371ea03dfa7f0826af5ef9a9f16025de8f81dc Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 10:28:45 -0700
Subject: [PATCH] [Mobile] Moved Button

Button moved to the Browse.html
and BrowseController handles the
tree slide.
---
 .../commonUI/browse/res/templates/browse.html |  2 +
 .../res/templates/browse/object-header.html   |  5 +--
 .../commonUI/browse/src/BrowseController.js   | 16 ++++++++
 .../general/res/css/theme-espresso.css        | 40 +++++++++++++++++--
 .../general/res/sass/mobile/_layout.scss      | 29 +++++++++++++-
 5 files changed, 82 insertions(+), 10 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index a8f25caa7d..081785c491 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -41,6 +41,8 @@
                 </div>
             </div>
         </mct-split-pane>
+        <div class="btn s-btn s-icon-btn s-very-subtle key-properties button-hide" 
+                        ng-click="treeSlide()">T</div>        
     </div>
     <mct-include key="'bottombar'"></mct-include>
 </div>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 91f6df04d2..583940aaab 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -19,10 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='object-header' ng-controller="TreeMenuController as treeController">
-    <div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="treeController.toggle()">
-    T
-    </div>
+<div class='object-header object-header-mobile'>
 	<span class="label s-label">
 	    <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
 	    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 3ec38057fc..fd18e385ab 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -140,6 +140,22 @@ define(
             $scope.treeModel = {
                 selectedObject: navigationService.getNavigation()
             };
+            
+            $scope.treeSlide = function () {
+                console.log("Clicked");
+                if (document.getElementById("myElement").
+                        className.match(/(?:^|\s)holder-hide(?!\S)/)) {
+                    document.getElementById("myElement").className =
+                        document.getElementById("myElement")
+                        .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
+                    document.getElementById("myElement").className += " holder-show";
+                } else {
+                    document.getElementById("myElement").className =
+                        document.getElementById("myElement")
+                        .className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
+                    document.getElementById("myElement").className += " holder-hide";
+                }
+            };
 
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index a8942f1d28..24bc9d9ad2 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -748,7 +748,15 @@ mct-container {
     transition-duration: 0.2s;
     left: -150px; } }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 514px) {
+  /* line 37, ../sass/mobile/_layout.scss */
+  .holder-show {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 0px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -757,16 +765,40 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
+/* line 48, ../sass/mobile/_layout.scss */
+.button-hide {
+  position: absolute; }
+  @media screen and (max-width: 514px) {
+    /* line 48, ../sass/mobile/_layout.scss */
+    .button-hide {
+      left: 108px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) {
+    /* line 48, ../sass/mobile/_layout.scss */
+    .button-hide {
+      left: 150px; } }
+
+/* line 59, ../sass/mobile/_layout.scss */
+.object-header-mobile {
+  position: relative; }
+  @media screen and (max-width: 514px) {
+    /* line 59, ../sass/mobile/_layout.scss */
+    .object-header-mobile {
+      left: 17px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) {
+    /* line 59, ../sass/mobile/_layout.scss */
+    .object-header-mobile {
+      left: 15px; } }
+
 @media screen and (max-width: 514px) {
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index b7bb8e8297..80c2807772 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -35,10 +35,35 @@
 }
 
 .holder-show {
-    @include phoneandtablet {
+    @include phone {
         @include transition-duration(.2s);
         left: 0px;
-    } 
+    }
+    @include tablet {
+        @include transition-duration(.2s);
+        left: 0px;
+    }     
+}
+
+.button-hide {
+    position: absolute;
+//    @include transition-duration(.2s);
+    @include phone {
+        left: 108px;
+    }
+    @include tablet {
+        left: 150px;
+    }     
+}
+
+.object-header-mobile {
+    position: relative;
+    @include phone {
+        left: 23px;
+    }
+    @include tablet {
+        left: 15px;
+    }
 }
 
 .browse-manage {