mirror of
https://github.com/nasa/openmct.git
synced 2024-12-28 08:58:52 +00:00
[Inspector] Location in tree
Added a 'location' section for the inspector panel. Its elements are clickable labels. #73.
This commit is contained in:
slhale
parent
7b5f07ae45
commit
bbcb0e15c9
@ -104,6 +104,11 @@
|
||||
"key": "SelectorController",
|
||||
"implementation": "controllers/SelectorController.js",
|
||||
"depends": [ "objectService", "$scope" ]
|
||||
},
|
||||
{
|
||||
"key": "ObjectInspectorController",
|
||||
"implementation": "controllers/ObjectInspectorController.js",
|
||||
"depends": [ "$scope", "objectService" ]
|
||||
}
|
||||
],
|
||||
"directives": [
|
||||
|
||||
@ -5221,19 +5221,52 @@ input[type="text"] {
|
||||
font-size: 0.9em; }
|
||||
/* line 161, ../sass/tree/_pane.scss */
|
||||
.split-pane-component.secondary-split.pane.right .split-pane-component.object-inspector.pane.right .holder.inspector-holder ul li {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 2px 0px;
|
||||
margin: 2px 0px;
|
||||
border-top: solid 1px grey; }
|
||||
/* line 167, ../sass/tree/_pane.scss */
|
||||
/* line 166, ../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 171, ../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 170, ../sass/tree/_pane.scss */
|
||||
/* line 174, ../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 180, ../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 181, ../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; }
|
||||
/* line 184, ../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;
|
||||
background-color: #4d4d4d;
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
padding-bottom: 0;
|
||||
margin: 2px;
|
||||
line-height: 15px; }
|
||||
/* line 192, ../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: #595959; }
|
||||
/* line 203, ../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 206, ../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: 4px; }
|
||||
/* line 217, ../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: 10px;
|
||||
margin-left: -4px; }
|
||||
/* line 223, ../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: ''; }
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
// Added by shale on 08/19/2015. Styling for the collapsible tree view.
|
||||
|
||||
$transitionTime: 0.35s;
|
||||
$transitionTime: 0.35s; // For the left menu 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)
|
||||
@ -159,9 +159,13 @@ $transitionTime: 0.35s;
|
||||
font-size: 0.9em;
|
||||
|
||||
li {
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
// 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 {
|
||||
@ -173,12 +177,52 @@ $transitionTime: 0.35s;
|
||||
}
|
||||
}
|
||||
|
||||
// Add spacing between items
|
||||
padding: 2px 0px;
|
||||
margin: 2px 0px;
|
||||
border-top: solid 1px grey;
|
||||
&:first-child {
|
||||
border-top-width: 0px;
|
||||
// Style object labels
|
||||
.inspector-location {
|
||||
display: inline-block;
|
||||
|
||||
.label {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
|
||||
// Colors
|
||||
transition: background-color 0.2s;
|
||||
background-color: lighten($colorBodyBg, 10%);
|
||||
&:hover {
|
||||
background-color: lighten($colorBodyBg, 15%);
|
||||
}
|
||||
|
||||
// Sizing and spacing
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
padding-bottom: 0;
|
||||
margin: 2px;
|
||||
line-height: 15px;
|
||||
|
||||
.icon.type-icon {
|
||||
font-size: 14px;
|
||||
|
||||
.l-icon-link {
|
||||
color: $colorIconLink;
|
||||
|
||||
font-size: 6px;
|
||||
margin-left: -22px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add arrows to indicate tree heirarchy
|
||||
&:after {
|
||||
content: '>';
|
||||
font-family: symbolsfont;
|
||||
font-size: 10px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
&:last-child:after {
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,22 +19,35 @@
|
||||
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">
|
||||
G
|
||||
</span>
|
||||
|
||||
<span class="ui-symbol info-icon">
|
||||
G
|
||||
<ul>
|
||||
<li>
|
||||
<em>Name </em>
|
||||
{{ ngModel.selectedObject.getModel().name }}
|
||||
</li>
|
||||
<li ng-if='ngModel.selectedObject.getModel().modified !== undefined'>
|
||||
<em>Last modified </em>
|
||||
{{ ngModel.selectedObject.getModel().modified }}
|
||||
</li>
|
||||
<li>
|
||||
<em>ID </em>
|
||||
{{ ngModel.selectedObject.getId() }}
|
||||
</li>
|
||||
<li>
|
||||
<em>Location </em>
|
||||
{{ controller.getPath() }}
|
||||
<span class="inspector-location"
|
||||
ng-repeat="parent in parents">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="parent"
|
||||
ng-model="ngModel"
|
||||
ng-click="ngModel.selectedObject = parent">
|
||||
</mct-representation>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<em>Name </em>
|
||||
{{ ngModel.selectedObject.getModel().name }}
|
||||
</li>
|
||||
<li>
|
||||
<em>Last modified </em>
|
||||
{{ ngModel.selectedObject.getModel().modified }}
|
||||
</li>
|
||||
<li>
|
||||
<em>ID </em>
|
||||
{{ ngModel.selectedObject.getId() }}
|
||||
</li>
|
||||
</ul>
|
||||
@ -0,0 +1,84 @@
|
||||
/*****************************************************************************
|
||||
* 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.pathString = '';
|
||||
$scope.parents = [];
|
||||
|
||||
function getPath() {
|
||||
var currentObj = $scope.ngModel.selectedObject,
|
||||
currentParent,
|
||||
parents = [],
|
||||
pathString = '';
|
||||
|
||||
while (currentObj && currentObj.getModel().type !== 'root' && currentObj.hasCapability('context')) {
|
||||
// Record this object
|
||||
pathString = currentObj.getModel().name + ', ' + pathString;
|
||||
parents.unshift(currentObj);
|
||||
|
||||
// Get the next one up the tree
|
||||
currentParent = currentObj.getCapability('context').getParent();
|
||||
currentObj = currentParent;
|
||||
}
|
||||
pathString = pathString.substring(0, pathString.length - 2);
|
||||
|
||||
$scope.parents = parents;
|
||||
$scope.pathString = pathString;
|
||||
|
||||
return [pathString, parents];
|
||||
}
|
||||
|
||||
return {
|
||||
// Sets scope variables, but does not return anything
|
||||
getPath: function () {
|
||||
getPath();
|
||||
},
|
||||
|
||||
getPathString: function () {
|
||||
return getPath()[0];
|
||||
},
|
||||
|
||||
getParents: function () {
|
||||
return getPath()[1];
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
return ObjectInspectorController;
|
||||
}
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user