[Plots] #638 New plot display options

This commit is contained in:
Henry
2016-01-27 13:52:31 -08:00
parent 2dd9a16bf3
commit 6fb6761abf
16 changed files with 782 additions and 42 deletions

View File

@@ -25,15 +25,45 @@ define([
"./src/LayoutController",
"./src/FixedController",
"./src/LayoutCompositionPolicy",
"../../commonUI/browse/src/InspectorRegion",
"./src/PlotOptionsController",
'legacyRegistry'
], function (
LayoutController,
FixedController,
LayoutCompositionPolicy,
InspectorRegion,
PlotOptionsController,
legacyRegistry
) {
"use strict";
/**
* Customize and extend the default 'Inspector' region for the panel
* type, to add display options for plots. This should be moved to a
* dedicated type.
* @type {InspectorRegion}
*/
var plotInspector = new InspectorRegion(),
plotOptionsBrowsePart = {
name: "plot-options",
title: "Plot Options",
modes: ['browse'],
content: {
key: "plot-options-browse"
}
},
plotOptionsEditPart = {
name: "plot-options",
title: "Plot Options",
modes: ['edit'],
content: {
key: "plot-options-browse"
}
};
plotInspector.addPart(plotOptionsBrowsePart);
plotInspector.addPart(plotOptionsEditPart);
legacyRegistry.register("platform/features/layout", {
"name": "Layout components.",
"description": "Plug in adding Layout capabilities.",
@@ -192,6 +222,10 @@ define([
{
"key": "frame",
"templateUrl": "templates/frame.html"
},
{
"key": "plot-options-browse",
"templateUrl": "templates/plot-options-browse.html"
}
],
"controllers": [
@@ -213,6 +247,13 @@ define([
"telemetryFormatter",
"throttle"
]
},
{
"key": "PlotOptionsController",
"implementation": PlotOptionsController,
"depends": [
"$scope"
]
}
],
"templates": [
@@ -312,7 +353,12 @@ define([
"property": "layoutGrid",
"conversion": "number[]"
}
]
],
"regions": {
"inspector": plotInspector
}
}
]
}

View File

@@ -0,0 +1,57 @@
<style>
.l-inspect .inspector-plot-options .plot-options-form .label {
text-transform: none;
}
.l-inspect .inspector-plot-options .plot-options-form .form .controls {
width: 50%;
}
.l-inspect .inspector-plot-options .plot-options-form .form .label {
width: 50%;
min-width: 50px;
color: #bfbfbf;
}
.l-inspect .inspector-plot-options .plot-options-form {
padding-left: 20px;
}
.l-inspect .inspector-plot-options .plot-options-form .form-row {
border-top: none;
}
.l-inspect .inspector-plot-options .plot-options-form .form .form-row.first {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
<div ng-controller="PlotOptionsController" class="inspector-plot-options">
<em>Display</em>
<ul class="first flex-elem grows vscroll">
<ul class="tree">
<li ng-repeat="child in children">
<span ng-controller="ToggleController as toggle">
<span ng-controller="TreeNodeController as treeNode">
<span class="tree-item menus-to-left">
<span
class='ui-symbol view-control flex-elem'
ng-class="{ 'has-children': model.composition !== undefined, expanded: toggle.isActive() }"
ng-click="toggle.toggle(); treeNode.trackExpansion()">
</span>
<mct-representation
class="rep-object-label"
key="'label'"
mct-object="child">
</mct-representation>
</span>
</span>
<div class="plot-options-form">
<mct-form
ng-class="{hidden: !toggle.isActive()}"
ng-model="plotOptionsModel"
structure="plotOptionsStructure"
name="plotOptionsState"
class="flex-elem">
</mct-form>
</div>
</span>
</li>
</ul>
</ul>
</div>

View File

@@ -0,0 +1,87 @@
/*****************************************************************************
* 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*/
/**
* This bundle implements object types and associated views for
* display-building.
* @namespace platform/features/layout
*/
define(
[],
function () {
"use strict";
/**
* The LayoutController is responsible for supporting the
* Layout view. It arranges frames according to saved configuration
* and provides methods for updating these based on mouse
* movement.
* @memberof platform/features/layout
* @constructor
* @param {Scope} $scope the controller's Angular scope
*/
function PlotOptionsController($scope) {
var self = this,
plotOptionsStructure = {
'name':'Plot Options',
'sections': [{
'rows':[
{
'name': 'Markers',
'control': 'checkbox',
'key': 'markers'
},
{
'name': 'No Line',
'control': 'checkbox',
'key': 'noLine'
},
{
'name': 'Step Line',
'control': 'checkbox',
'key': 'stepLine'
},
{
'name': 'Linear Line',
'control': 'checkbox',
'key': 'linearLine'
}
]
}]},
plotOptionsModel = {};
$scope.plotOptionsStructure = plotOptionsStructure;
$scope.plotOptionsModel = plotOptionsModel;
$scope.domainObject.useCapability('composition').then(function(children){
$scope.children = children;
});
}
return PlotOptionsController;
}
);