[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.
2025-03-10 22:43:55 +00:00 · 2015-07-08 14:27:59 -07:00 · 2015-07-08 14:27:59 -07:00 · 07ef4dfe8a
commit 07ef4dfe8a
parent 342be0822f
8 changed files with 84 additions and 21 deletions
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/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'>
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/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>
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/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>
--- a/platform/commonUI/general/bundle.json
+++ b/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",
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/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;
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/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 {
--- a/platform/commonUI/general/src/controllers/ClickAwayController.js
+++ b/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();
                }
            };

--- a/platform/commonUI/general/src/controllers/TreeMenuController.js
+++ b/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;
+    }
+);