[Browse] Separate tree expand/collapser

This commit is contained in:
Victor Woeltjen 2015-09-17 17:03:35 -07:00
parent 411a4ebfbf
commit 2090b1a958
4 changed files with 82 additions and 32 deletions

View File

@ -25,6 +25,10 @@
"urlService"
]
},
{
"key": "BrowseTreeController",
"implementation": "BrowseTreeController.js"
},
{
"key": "BrowseObjectController",
"implementation": "BrowseObjectController.js",

View File

@ -22,27 +22,29 @@
<div class="abs holder-all browse-mode" ng-controller="BrowseController">
<mct-include key="'topbar-browse'"></mct-include>
<div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
<div class="holder browse-area s-browse-area abs browse-wrapper"
ng-controller="BrowseTreeController as tree"
ng-class="tree.visible() ? 'browse-showtree' : 'browse-hidetree'">
<mct-split-pane class='contents abs' anchor='left'>
<div class='split-pane-component treeview pane left'>
<div class="holder abs l-mobile">
<mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation>
<div class='holder search-holder abs'
ng-class="{active: treeModel.search}">
<mct-representation key="'search'"
mct-object="domainObject"
ng-model="treeModel">
</mct-representation>
</div>
<div class='tree-holder abs mobile-tree-holder'
ng-hide="treeModel.search">
<mct-representation key="'tree'"
mct-object="domainObject"
ng-model="treeModel">
</mct-representation>
</div>
</div>
<div class="holder abs l-mobile">
<mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation>
<div class='holder search-holder abs'
ng-class="{active: treeModel.search}">
<mct-representation key="'search'"
mct-object="domainObject"
ng-model="treeModel">
</mct-representation>
</div>
<div class='tree-holder abs mobile-tree-holder'
ng-hide="treeModel.search">
<mct-representation key="'tree'"
mct-object="domainObject"
ng-model="treeModel">
</mct-representation>
</div>
</div>
</div>
<mct-splitter class="mobile-hide"></mct-splitter>
@ -52,7 +54,8 @@
<mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation>
</div>
<div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
<div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
ng-click="tree.toggle()">m</div>
</div>
</mct-split-pane>
</div>

View File

@ -142,12 +142,6 @@ define(
selectedObject: navigationService.getNavigation()
};
// SlideMenu boolean used to hide and show
// tree menu
$scope.treeSlide = function () {
$scope.treeClass = !$scope.treeClass;
};
// Listen for changes in navigation state.
navigationService.addListener(setNavigation);
@ -158,12 +152,6 @@ define(
$scope.$on("$destroy", function () {
navigationService.removeListener(setNavigation);
});
// If the user has selected an object (and is portrait
// on a phone), then hide the tree menu
$scope.$on("select-obj", function () {
$scope.treeSlide();
});
}
return BrowseController;

View File

@ -0,0 +1,55 @@
/*****************************************************************************
* 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*/
/**
* This bundle implements Browse mode.
* @namespace platform/commonUI/browse
*/
define(
[],
function () {
"use strict";
function BrowseTreeController() {
this.state = true;
}
BrowseTreeController.prototype.toggle = function () {
this.state = !this.state;
};
BrowseTreeController.prototype.hide = function () {
this.state = false;
};
BrowseTreeController.prototype.show = function () {
this.state = true;
};
BrowseTreeController.prototype.visible = function () {
return this.state;
};
return BrowseTreeController;
}
);