[Mobile] Merge 1

Part 1 of merge, sliding menu not
working, however right representation
works and the left tree is expanded.
This commit is contained in:
Shivam Dave 2015-08-28 10:38:45 -07:00
commit 2a288cd740
17 changed files with 977 additions and 26 deletions

View File

@ -21,7 +21,7 @@
{
"key": "BrowseObjectController",
"implementation": "BrowseObjectController.js",
"depends": [ "$scope", "$location", "$route" ]
"depends": [ "$scope", "$location", "$route", "$window" ]
},
{
"key": "CreateMenuController",

View File

@ -21,11 +21,21 @@
-->
<span ng-controller="BrowseObjectController">
<div class="object-browse-bar bar l-flex">
<div class="pane-tabs left mobile-hide"
ng-class="{inactivePane: !ngModel.leftPane, activePane: ngModel.leftPane}"
ng-click="ngModel.leftPane = !ngModel.leftPane">
</div>
<div class="items-select left">
<mct-representation key="'back-arrow'" class="l-back"></mct-representation>
<mct-representation key="'object-header'" mct-object="domainObject">
<mct-representation key="'back-arrow'"
class="l-back">
</mct-representation>
<mct-representation key="'object-header'"
mct-object="domainObject">
</mct-representation>
</div>
<div class="btn-bar right">
<mct-representation key="'switcher'"
mct-object="domainObject"
@ -38,6 +48,12 @@
class="mobile-hide">
</mct-representation>
</div>
<div class="pane-tabs right"
ng-class="{inactivePane: !ngModel.rightPane, activePane: ngModel.rightPane}"
ng-click="ngModel.rightPane = !ngModel.rightPane">
</div>
</div>
<div class='object-holder abs vscroll'>
@ -45,4 +61,5 @@
mct-object="representation.selected.key && domainObject">
</mct-representation>
</div>
</span>

View File

@ -20,14 +20,30 @@
at runtime from the About dialog for additional information.
-->
<div class="abs holder-all browse-mode" ng-controller="BrowseController">
<div content="jquery-wrapper"
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'">
<mct-split-pane class='contents abs' anchor='left'>
<div class='split-pane-component treeview pane left'>
<div class="holder browse-area s-browse-area abs browse-wrapper">
<!--ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">-->
<mct-split-pane
class='contents abs'
anchor='left'>
<!-- PANE TREE-->
<div class='split-pane-component treeview pane left'
ng-class='{inactive: !paneModel.leftPane}'>
<div class="holder abs l-mobile">
<mct-representation key="'create-button'" mct-object="navigatedObject">
<mct-representation key="'create-button'"
mct-object="navigatedObject"
ng-model="paneModel">
</mct-representation>
<div class='holder search-holder abs'
ng-class="{active: treeModel.search}">
<mct-representation key="'search'"
@ -35,6 +51,7 @@
ng-model="treeModel">
</mct-representation>
</div>
<div class='tree-holder abs mobile-tree-holder'
ng-hide="treeModel.search">
<mct-representation key="'tree'"
@ -44,18 +61,59 @@
</div>
</div>
</div>
<!-- PANE TREE-->
<mct-splitter class="mobile-hide"></mct-splitter>
<div class='split-pane-component items pane right-repr'>
<div class='holder abs l-mobile' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'">
<!-- SPLITTER LEFT-->
<mct-splitter class="mobile-hide"
class="splitter-bar left"
ng-class="{inactive: !paneModel.leftPane}">
</mct-splitter>
<!-- SPLITTER LEFT-->
<!-- PANE RIGHT-->
<div class='split-pane-component items secondary-split pane right slide'
ng-class='{leftInactive: !paneModel.leftPane}'>
<!--<mct-split-pane class='contents abs'-->
<!--anchor='right'>-->
<!--<div class='split-pane-component items pane slide'-->
<!--ng-class='{rightInactive: !paneModel.rightPane}'>-->
<div class='holder abs l-mobile'
id='content-area'>
<mct-representation mct-object="navigatedObject"
key="'browse-object'"
ng-model="paneModel">>
</mct-representation>
</div>
<div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
<!--</div>-->
<!--<mct-splitter class="splitter-bar right"-->
<!--ng-class="{inactive: !paneModel.rightPane}">-->
<!--</mct-splitter>-->
<!--<div class='split-pane-component object-inspector pane right'-->
<!--ng-class='{inactive: !paneModel.rightPane}'>-->
<!--<div class='holder inspector-holder abs'>-->
<!--<mct-representation key="'object-inspector'"-->
<!--mct-object="domainObject"-->
<!--ng-model="treeModel">-->
<!--</mct-representation>-->
<!--</div>-->
<!--</div>-->
<!--</mct-split-pane>-->
</div>
<!-- PANE RIGHT-->
</mct-split-pane>
</div>
<mct-include key="'bottombar'"></mct-include>
<mct-include key="'bottombar'">
</mct-include>
</div>

View File

@ -20,8 +20,10 @@
at runtime from the About dialog for additional information.
-->
<div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
<div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
Create
<div class="btn btn-menu create-btn major"
ng-class="{inactivePane: !ngModel.leftPane}"
ng-click="createController.toggle()">
<span>Create</span>
</div>
<div class="menu dropdown super-menu" ng-show="createController.isActive()">
<mct-representation mct-object="domainObject" key="'create-menu'">

View File

@ -213,13 +213,18 @@ define(
$scope.treeModel = {
selectedObject: navigationService.getNavigation()
};
// SlideMenu boolean used to hide and show
// tree menu
$scope.treeSlide = function () {
$scope.treeClass = !$scope.treeClass;
};
// Provide a model for the left pane
$scope.paneModel = {
selectedObject: navigationService.getNavigation()
};
// Listen for changes in navigation state.
navigationService.addListener(setNavigation);
@ -236,11 +241,10 @@ define(
$scope.$on("select-obj", function () {
$scope.treeSlide();
});
$scope.backArrow = navigateToParent;
$scope.checkRoot = checkRoot;
}
return BrowseController;

View File

@ -32,7 +32,7 @@ define(
* @memberof platform/commonUI/browse
* @constructor
*/
function BrowseObjectController($scope, $location, $route) {
function BrowseObjectController($scope, $location, $route, $window) {
function setViewForDomainObject(domainObject) {
var locationViewKey = $location.search().view;
@ -65,6 +65,19 @@ define(
}
}
// If there is a defined opener, assume that the window was opened
// by choosing 'Open in a new tab'
if ($window.opener) {
// The desired default for this is to have a closed left pane
$scope.ngModel.leftPane = false;
} else {
// Otherwise, start the application with an open left pane
$scope.ngModel.leftPane = true;
}
// The object inspector by default always starts closed
$scope.ngModel.rightPane = false;
$scope.$watch('domainObject', setViewForDomainObject);
$scope.$watch('representation.selected.key', updateQueryParam);
}

View File

@ -57,6 +57,7 @@ define(
"$scope",
[ "$on", "$watch", "treeSlide", "backArrow" ]
);
mockScope.ngModel = {};
mockRoute = { current: { params: {} } };
mockLocation = jasmine.createSpyObj(
"$location",

View File

@ -31,6 +31,7 @@ define(
var mockScope,
mockLocation,
mockRoute,
mockWindow,
mockUnlisten,
controller;
@ -48,7 +49,9 @@ define(
"$scope",
[ "$on", "$watch" ]
);
mockScope.ngModel = {};
mockRoute = { current: { params: {} } };
mockWindow = {};
mockLocation = jasmine.createSpyObj(
"$location",
[ "path", "search" ]
@ -60,7 +63,8 @@ define(
controller = new BrowseObjectController(
mockScope,
mockLocation,
mockRoute
mockRoute,
mockWindow
);
});
@ -97,7 +101,23 @@ define(
expect(mockScope.representation.selected)
.toEqual(testViews[1]);
});
it("sets ngModel properties on initialization", function () {
// Left pane open status depends on how the window was opened
// Case 1: undefined opener
expect(mockWindow.opener).not.toBeDefined();
expect(mockScope.ngModel.leftPane).toBeTruthy();
// Case 2: defined opener
mockWindow.opener = {};
controller = new BrowseObjectController(
mockScope,
mockLocation,
mockRoute,
mockWindow
);
expect(mockScope.ngModel.leftPane).toBeFalsy();
});
});
}
);

View File

@ -108,6 +108,11 @@
"key": "SelectorController",
"implementation": "controllers/SelectorController.js",
"depends": [ "objectService", "$scope" ]
},
{
"key": "ObjectInspectorController",
"implementation": "controllers/ObjectInspectorController.js",
"depends": [ "$scope", "objectService" ]
}
],
"directives": [
@ -223,6 +228,10 @@
"key": "switcher",
"templateUrl": "templates/controls/switcher.html",
"uses": [ "view" ]
},
{
"key": "object-inspector",
"templateUrl": "templates/object-inspector.html"
}
],
"controls": [

View File

@ -5701,3 +5701,215 @@ input[type="text"] {
.l-view-section label,
.l-view-section .inline-block {
display: inline-block; }
/*****************************************************************************
* 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.
*****************************************************************************/
/* line 31, ../sass/tree/_pane.scss */
.pane.left.inactive {
width: 0 !important;
min-width: 0 !important; }
/* line 36, ../sass/tree/_pane.scss */
.pane.left.inactive .tree-holder {
padding-right: 0; }
/* line 41, ../sass/tree/_pane.scss */
.pane.left.inactive .search-holder {
display: none; }
/* line 47, ../sass/tree/_pane.scss */
.pane.left .create-btn.major {
top: 0;
left: 0;
transition: all 0.35s; }
/* line 52, ../sass/tree/_pane.scss */
.pane.left .create-btn.major.inactivePane {
top: 0;
left: 0;
position: relative;
padding: 0;
text-align: center;
font-size: 12px;
width: 13px;
height: 16px;
line-height: 14px;
left: -11px;
top: 20px; }
/* line 70, ../sass/tree/_pane.scss */
.pane.left .create-btn.major.inactivePane span {
display: none; }
/* line 78, ../sass/tree/_pane.scss */
.splitter-bar.splitter {
opacity: 1;
transition: opacity 0.35s, visibility 0.35s;
top: 0; }
/* line 85, ../sass/tree/_pane.scss */
.splitter-bar.splitter.inactive {
visibility: hidden;
opacity: 0; }
/* line 89, ../sass/tree/_pane.scss */
.splitter-bar.splitter.inactive:before {
border-width: 0; }
/* line 97, ../sass/tree/_pane.scss */
.splitter-bar.left.splitter.inactive {
transition: opacity 0s, visibility 0s; }
/* line 106, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right.leftInactive {
left: 0 !important; }
/* line 109, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right.slide {
transition: left 0.35s; }
/* line 116, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane.rightInactive {
right: 0 !important; }
/* line 119, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane.slide {
transition: right 0.35s; }
/* line 124, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar {
position: relative; }
/* line 127, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs {
position: relative;
cursor: pointer;
font-family: symbolsfont;
background-color: #595959;
width: 13px !important;
height: 16px;
line-height: 16px;
font-size: 10px;
text-align: center; }
/* line 141, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left {
left: -12px;
top: 3px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px; }
/* line 149, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane {
left: -15px; }
/* line 151, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.inactivePane:after {
content: 'F'; }
/* line 155, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.left.activePane:after {
content: '<'; }
/* line 161, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right {
float: right;
right: -9px;
top: -13px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px; }
/* line 170, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane {
right: -12px; }
/* line 172, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.inactivePane:after {
content: '\e608'; }
/* line 176, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .pane-tabs.right.activePane:after {
content: '>'; }
/* line 184, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .items-select {
margin-left: 10px; }
/* line 188, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.items.pane .object-browse-bar .btn-bar.right {
margin-right: 10px; }
/* line 194, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right {
min-width: 150px;
opacity: 1;
transition: opacity 0.175s;
transition-delay: 0.175s; }
/* line 200, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right.inactive {
min-width: 0 !important;
width: 0 !important;
visibility: hidden;
opacity: 0; }
/* line 207, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder {
overflow-y: auto;
overflow-x: hidden; }
/* line 211, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder .info-icon {
color: #0099cc; }
/* line 215, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li {
font-size: 0.9em;
padding: 2px 0px;
margin: 2px 0px;
border-top: solid 1px grey; }
/* line 222, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li:first-child {
border-top-width: 0px; }
/* line 227, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em {
font-weight: bold;
line-height: 1.25em; }
/* line 231, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li em:after {
content: '\A';
white-space: pre; }
/* line 238, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location {
display: inline-block;
max-width: 100%; }
/* line 242, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label {
cursor: pointer;
display: inline-block;
white-space: nowrap;
transition: background-color 0.2s;
border-radius: 4px;
padding: 3px;
margin: 2px;
max-width: 100%;
text-overflow: ellipsis;
overflow-x: hidden; }
/* line 249, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label:hover {
background-color: #404040; }
/* line 263, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon {
font-size: 14px; }
/* line 266, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location .label .icon.type-icon .l-icon-link {
color: #49dedb;
font-size: 6px;
margin-left: -22px;
margin-right: 9px;
text-shadow: black 0 1px 2px;
z-index: 2; }
/* line 280, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:after {
content: '>';
font-family: symbolsfont;
font-size: 8px;
position: relative;
top: -8px;
left: -4px; }
/* line 290, ../sass/tree/_pane.scss */
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li .inspector-location:last-child:after {
content: '';
display: inline-block; }

View File

@ -80,3 +80,4 @@
@import "initialization";
@import "hide-non-functional";
@import "views";
@import "tree/pane";

View File

@ -0,0 +1,298 @@
/*****************************************************************************
* 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.
*****************************************************************************/
// Added by shale on 08/19/2015. Styling for the collapsible tree view.
$transitionTime: 0.35s; // For the pane open/close
// Set the left pane (which contains the tree) to have no width to close
// (not display:none because we still need to have access to the create button)
.pane.left {
&.inactive {
width: 0 !important;
min-width: 0 !important;
// Undo the tree-holder's right padding when tree closed
.tree-holder {
padding-right: 0;
}
// Hide the search bar when the pane is closed
.search-holder {
display: none;
}
}
// When the pane is closed, move and resize the create button
.create-btn.major {
top: 0;
left: 0;
transition: all $transitionTime;
&.inactivePane {
top: 0;
left: 0;
position: relative;
padding: 0;
text-align: center;
font-size: 12px;
width: 13px;
height: 16px;
line-height: 14px;
left: -11px;
top: 20px;
// Remove 'Create' text from the button when in small mode
span {
display: none;
}
}
}
}
// Hide a splitter bar when the corresponding pane is inactive
.splitter-bar.splitter {
opacity: 1;
transition: opacity $transitionTime, visibility $transitionTime;
// Make the splitter bar vertically span to the top
top: 0;
&.inactive {
visibility: hidden;
opacity: 0;
&:before {
border-width: 0;
}
}
}
// Fade the splitter bar in when opening treeview, but immediately fade
// out when closing treeview
.splitter-bar.left.splitter {
&.inactive {
transition: opacity 0s, visibility 0s;
}
}
// The main view needs to align left when the left pane is moving around
.split-pane-component.secondary-split.pane.right {
// Sliding transition for open/close of left pane
&.leftInactive {
left: 0 !important;
}
&.slide {
transition: left $transitionTime;
}
.split-pane-component.items.pane {
// Sliding transition for open/close of right pane
&.rightInactive {
right: 0 !important;
}
&.slide {
transition: right $transitionTime;
}
// Tab buttons close to the splitter bars
.object-browse-bar {
position: relative;
.pane-tabs {
position: relative;
cursor: pointer;
font-family: symbolsfont;
background-color: darken($colorBodyFg, 25%);
width: 13px !important;
height: 16px;
line-height: 16px;
font-size: 10px;
text-align: center;
// Open and closes treeview
&.left {
left: -12px;
top: 3px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
// Change button icon depending on state
&.inactivePane {
left: -15px;
&:after {
content: 'F';//'>';
}
}
&.activePane:after {
content: '<';
}
}
// Open and closes object inspector
&.right {
float: right;
right: -9px;
top: -13px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
// Change button icon depending on state
&.inactivePane {
right: -12px;
&:after {
content: '\e608';//'G';//'<';
}
}
&.activePane:after {
content: '>';
}
}
}
// Move domain object title to the right some to make room
// for treeview collapser button
.items-select {
margin-left: 10px;
}
// Similarly move the top button bar for the object inspector
.btn-bar.right {
margin-right: 10px;
}
}
}
.split-pane-component.object-inspector.pane.right {
min-width: 150px;
opacity: 1;
transition: opacity $transitionTime/2;
transition-delay: $transitionTime/2;
&.inactive {
min-width: 0 !important;
width: 0 !important;
visibility: hidden;
opacity: 0;
}
.holder.inspector-holder {
overflow-y: auto;
overflow-x: hidden;
.info-icon {
color: $colorKey;
}
ul li {
font-size: 0.9em;
// Add spacing between items
padding: 2px 0px;
margin: 2px 0px;
border-top: solid 1px grey;
&:first-child {
border-top-width: 0px;
}
// Style the titles
em {
font-weight: bold;
line-height: 1.25em;
&:after {
content: '\A';
white-space: pre;
}
}
// Style object labels
.inspector-location {
display: inline-block;
max-width: 100%;
.label {
cursor: pointer;
display: inline-block;
white-space: nowrap;
// Colors
transition: background-color 0.2s;
&:hover {
background-color: lighten($colorBodyBg, 5%);
}
// Sizing and spacing
border-radius: 4px;
padding: 3px;
margin: 2px;
// Horizontal overflow
max-width: 100%;
text-overflow: ellipsis;
overflow-x: hidden;
.icon.type-icon {
font-size: 14px;
.l-icon-link {
color: $colorIconLink;
font-size: 6px;
margin-left: -22px;
margin-right: 9px;
@include txtShdwSubtle(1);
z-index: 2;
}
}
}
// Add arrows to indicate tree heirarchy
&:after {
content: '>';
font-family: symbolsfont;
font-size: 8px;
//margin-left: -6px;
position: relative;
top: -8px;
left: -4px;
}
&:last-child:after {
content: '';
display: inline-block;
}
}
}
}
}
}

View File

@ -0,0 +1,59 @@
<!--
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.
-->
<span ng-controller="ObjectInspectorController as controller">
<span class="ui-symbol info-icon">
&#xe608;
</span>
<ul>
<li ng-repeat="data in metadata">
<em>{{ data.name }}</em>
{{ data.value }}
</li>
<li ng-if="contextutalParents.length > 0">
<em title="The location of this linked object.">
Contextual Location
</em>
<span class="inspector-location"
ng-repeat="parent in contextutalParents">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent">
</mct-representation>
</span>
</li>
<li ng-if="primaryParents.length > 0">
<em title="The location of the object that this was linked from.">
Primary Location
</em>
<span class="inspector-location"
ng-repeat="parent in primaryParents">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent">
</mct-representation>
</span>
</li>
</ul>
</span>

View File

@ -0,0 +1,117 @@
/*****************************************************************************
* 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*/
/**
* Module defining ObjectInspectorController. Created by shale on 08/21/2015.
*/
define(
[],
function () {
"use strict";
/**
* The ObjectInspectorController gets and formats the data for
* the inspector display
*
* @constructor
*/
function ObjectInspectorController($scope, objectService) {
$scope.primaryParents = [];
$scope.contextutalParents = [];
//$scope.isLink = false;
// Gets an array of the contextual parents/anscestors of the selected object
function getContextualPath() {
var currentObj = $scope.ngModel.selectedObject,
currentParent,
parents = [];
currentParent = currentObj &&
currentObj.hasCapability('context') &&
currentObj.getCapability('context').getParent();
while (currentParent && currentParent.getModel().type !== 'root' &&
currentParent.hasCapability('context')) {
// Record this object
parents.unshift(currentParent);
// Get the next one up the tree
currentObj = currentParent;
currentParent = currentObj.getCapability('context').getParent();
}
$scope.contextutalParents = parents;
}
// Gets an array of the parents/anscestors of the selected object's
// primary location (locational of original non-link)
function getPrimaryPath(current) {
var location;
// If this the the initial call of this recursive function
if (!current) {
current = $scope.ngModel.selectedObject;
$scope.primaryParents = [];
}
location = current.getModel().location;
if (location && location !== 'root') {
objectService.getObjects([location]).then(function (obj) {
var next = obj[location];
$scope.primaryParents.unshift(next);
getPrimaryPath(next);
});
}
}
// Gets the metadata for the selected object
function getMetadata() {
$scope.metadata = $scope.ngModel.selectedObject &&
$scope.ngModel.selectedObject.hasCapability('metadata') &&
$scope.ngModel.selectedObject.useCapability('metadata');
}
// Set scope variables when the selected object changes
$scope.$watch('ngModel.selectedObject', function () {
$scope.isLink = $scope.ngModel.selectedObject &&
$scope.ngModel.selectedObject.hasCapability('location') &&
$scope.ngModel.selectedObject.getCapability('location').isLink();
if ($scope.isLink) {
getPrimaryPath();
getContextualPath();
} else {
$scope.primaryParents = [];
getContextualPath();
}
getMetadata();
});
}
return ObjectInspectorController;
}
);

View File

@ -29,7 +29,8 @@ define(
// Pixel width to allocate for the splitter itself
var SPLITTER_TEMPLATE = "<div class='abs'" +
"mct-drag-down=\"splitter.startMove()\" " +
"mct-drag=\"splitter.move(delta)\"></div>",
"mct-drag=\"splitter.move(delta)\" " +
"mct-drag-up=\"splitter.endMove()\"></div>",
OFFSETS_BY_EDGE = {
left: "offsetLeft",
right: "offsetRight",
@ -44,7 +45,8 @@ define(
*/
function MCTSplitter() {
function link(scope, element, attrs, mctSplitPane) {
var initialPosition;
var initialPosition,
slideElement;
element.addClass("splitter");
@ -55,8 +57,27 @@ define(
scope.splitter = {
// Begin moving this splitter
startMove: function () {
var splitter = element[0];
var splitter = element[0],
children = element.parent().children(),
i, j;
// Set initial position
initialPosition = mctSplitPane.position();
// Remove sliding class from sibling element so no delay in pane movement
for (i = 0; i < children.length; i += 1) {
// undefined check
if (children[i].classList) {
for (j = 0; j < children[i].classList.length; j += 1) {
if (children[i].classList[j] === 'slide') {
// Store the element that had the sliding class so
// we can replace it later
slideElement = children[i];
children[i].classList.remove('slide');
}
}
}
}
},
// Handle user changes to splitter position
move: function (delta) {
@ -64,9 +85,15 @@ define(
index = anchor.orientation === "vertical" ? 0 : 1,
pixelDelta = delta[index] *
(anchor.reversed ? -1 : 1);
// Update the position of this splitter
mctSplitPane.position(initialPosition + pixelDelta);
},
// Replace sliding class
endMove: function () {
if (slideElement && slideElement.classList) {
slideElement.classList.add('slide');
}
}
};
}

View File

@ -0,0 +1,112 @@
/*****************************************************************************
* 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,describe,it,expect,beforeEach,waitsFor,jasmine*/
/**
* Created by shale on 08/24/2015.
*/
define(
["../../src/controllers/ObjectInspectorController"],
function (ObjectInspectorController) {
"use strict";
describe("The object inspector controller ", function () {
var mockScope,
mockObjectService,
mockPromise,
mockDomainObject,
mockContextCapability,
mockLocationCapability,
controller;
beforeEach(function () {
mockScope = jasmine.createSpyObj(
"$scope",
[ "$watch" ]
);
mockScope.ngModel = {};
mockScope.ngModel.selectedObject = 'mock selected object';
mockObjectService = jasmine.createSpyObj(
"objectService",
[ "getObjects" ]
);
mockPromise = jasmine.createSpyObj(
"promise",
[ "then" ]
);
mockObjectService.getObjects.andReturn(mockPromise);
mockDomainObject = jasmine.createSpyObj(
"selectedObject",
[ "hasCapability", "getCapability", "useCapability", "getModel" ]
);
mockDomainObject.getModel.andReturn({location: 'somewhere'});
mockDomainObject.hasCapability.andReturn(true);
mockContextCapability = jasmine.createSpyObj(
"context capability",
[ "getParent" ]
);
mockLocationCapability = jasmine.createSpyObj(
"location capability",
[ "isLink" ]
);
mockDomainObject.getCapability.andCallFake(function (param) {
if (param === 'location') {
return mockLocationCapability;
} else if (param === 'context') {
return mockContextCapability;
}
});
controller = new ObjectInspectorController(mockScope, mockObjectService);
// Change the selected object to trigger the watch call
mockScope.ngModel.selectedObject = mockDomainObject;
});
it("watches for changes to the selected object", function () {
expect(mockScope.$watch).toHaveBeenCalledWith('ngModel.selectedObject', jasmine.any(Function));
});
it("looks for contextual parent objects", function () {
mockScope.$watch.mostRecentCall.args[1]();
expect(mockContextCapability.getParent).toHaveBeenCalled();
});
it("if link, looks for primary parent objects", function () {
mockLocationCapability.isLink.andReturn(true);
mockScope.$watch.mostRecentCall.args[1]();
expect(mockDomainObject.getModel).toHaveBeenCalled();
expect(mockObjectService.getObjects).toHaveBeenCalled();
mockPromise.then.mostRecentCall.args[0]({'somewhere': mockDomainObject});
});
it("gets metadata", function () {
mockScope.$watch.mostRecentCall.args[1]();
expect(mockDomainObject.useCapability).toHaveBeenCalledWith('metadata');
});
});
}
);

View File

@ -4,6 +4,7 @@
"controllers/ClickAwayController",
"controllers/ContextMenuController",
"controllers/GetterSetterController",
"controllers/ObjectInspectorController",
"controllers/SelectorController",
"controllers/SplitPaneController",
"controllers/ToggleController",