[Mobile] Menu Slide

Menu slides, but not transition
css slides out on click. Currently
uses document, which needs to be
replaced with angular version using
 and/or  and/or
ng-class and/or ng-click.

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

@@ -19,11 +19,11 @@
  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">
+<div id="myElement" content="jquery-wrapper" class="abs holder-all browse-mode holder-hide">
     <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 browse-manage'>
+            <div class='split-pane-component treeview pane browse-manage createtreebtns'>
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>

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

@@ -19,7 +19,10 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='object-header'>
+<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>
 	<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>

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

@@ -27,7 +27,4 @@
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>
-    <div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="createController.showtree()">
-    T
-    </div>
 </div>

platform/commonUI/general/bundle.json

@@ -85,6 +85,11 @@
                 "implementation": "controllers/ClickAwayController.js",
                 "depends": [ "$scope", "$document" ]
             },
+            {
+                "key": "TreeMenuController",
+                "implementation": "controllers/TreeMenuController.js",
+                "depends": [ "$element", "$document" ]
+            },            
             {
                 "key": "ViewSwitcherController",
                 "implementation": "controllers/ViewSwitcherController.js",

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

@@ -731,16 +731,26 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@media screen and (max-width: 800px) {
+  /* line 26, ../sass/mobile/_layout.scss */
+  .holder-hide {
+    left: -150px; } }
+
+@media screen and (max-width: 800px) {
+  /* line 32, ../sass/mobile/_layout.scss */
+  .holder-show {
+    left: -150px; } }
+
 @media screen and (max-width: 514px) {
-  /* line 31, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 31, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 31, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;

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

@@ -22,11 +22,18 @@
 
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 // NOTE: Added to adjust the browse folder tree list view
-//.hider-check {
+
-//    @include phoneandtablet {
+.holder-hide {
-//        
+    @include phoneandtablet {
-//    } 
+        left: -150px;
-//}
+    }
+}
+
+.holder-show {
+    @include phoneandtablet {
+        left: 0px;
+    } 
+}
 
 .browse-manage {
     @include phone {

platform/commonUI/general/src/controllers/ClickAwayController.js

@@ -58,9 +58,6 @@ define(
                     activate();
                 }
             }
-            function changeTree() {
-                console.log("WWWWW");
-            }
             
             
 
@@ -96,10 +93,6 @@ define(
                  */
                 toggle: function () {
                     changeState();
-                },
-                
-                showtree: function () {
-                    changeTree();
                 }
             };
 

platform/commonUI/general/src/controllers/TreeMenuController.js

@@ -0,0 +1,48 @@
+/*****************************************************************************
+ * 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,Promise*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        function TreeMenuController($scope, $document) {
+            return {
+                toggle: function () {
+                    if (document.getElementById("myElement").
+                            className.match(/(?:^|\s)holder-hide(?!\S)/)) {
+                        document.getElementById("myElement").className =
+                            document.getElementById("myElement")
+                            .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
+                    } else {
+                        document.getElementById("myElement").className += " holder-hide";
+                    }
+                    
+                }
+            };
+
+        }
+
+        return TreeMenuController;
+    }
+);