alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Mobile] Menu Slide

Browse Source 
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.
This commit is contained in:
Dave
2015-07-08 14:27:59 -07:00
parent 342be0822f
commit 07ef4dfe8a
8 changed files with 84 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
platform/commonUI/general/bundle.json
View File

@@ -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",

16
platform/commonUI/general/res/css/theme-espresso.css
View File

@@ -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;

17
platform/commonUI/general/res/sass/mobile/_layout.scss
View File

@@ -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 {

7
platform/commonUI/general/src/controllers/ClickAwayController.js
View File

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

48
platform/commonUI/general/src/controllers/TreeMenuController.js Normal file
View File

@@ -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;
}
);