ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-08 20:04:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Common UI] Use mct-split-pane in Browse

Browse Source 
WTD-1363.
This commit is contained in:
Victor Woeltjen 2015-06-26 16:21:20 -07:00
parent 0ee76421e0
commit 39372ea9ca
3 changed files with 26 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
platform/commonUI/browse/res/templates/browse.html
View File

@ -22,10 +22,10 @@
<div content="jquery-wrapper" class="abs holder-all browse-mode">
<mct-include key="'topbar-browse'"></mct-include>
<div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
<div class='split-layout vertical contents abs'
ng-controller="SplitPaneController as splitter">
<div class='split-pane-component treeview pane'
ng-style="{ width: splitter.state() + 'px'}">
<mct-split-pane class='split-layout vertical contents abs'
anchor='left'
initial="25%">
<div class='split-pane-component treeview pane'>
<mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation>
<div class='holder tree-holder abs'>
@ -35,18 +35,14 @@
</mct-representation>
</div>
</div>
<div class="splitter"
ng-style="{ left: splitter.state() + 'px'}"
mct-drag-down="splitter.startMove()"
mct-drag="splitter.move(delta[0])"></div>
<div class='split-pane-component items pane'
ng-style="{ left: (splitter.state()+4) + 'px', right: '0px' }">
<mct-splitter></mct-splitter>
<div class='split-pane-component items pane'>
<div class='holder abs' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation>
</div>
</div>
</div>
</mct-split-pane>
</div>
<mct-include key="'bottombar'"></mct-include>
</div>
</div>

31
platform/commonUI/general/src/directives/MCTSplitPane.js
View File

@ -97,11 +97,11 @@ define(
bottom: true
};
function controller(scope, element, attrs) {
var anchorKey = attrs.anchor || DEFAULT_ANCHOR,
function controller($scope, $element, $attrs) {
var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
anchor,
styleValue = attrs.initial,
positionParsed = $parse(attrs.position),
styleValue = $attrs.initial,
positionParsed = $parse($attrs.position),
position; // Start undefined, until explicitly set
// Convert a pixel offset to a calc expression
@ -119,29 +119,28 @@ define(
function updateChildren(children) {
// Pick out correct elements to update, flowing from
// selected anchor edge.
var first = children.eq(anchor.reversed ? 0 : 2),
var first = children.eq(anchor.reversed ? 2 : 0),
splitter = children.eq(1),
last = children.eq(anchor.reversed ? 2 : 0),
last = children.eq(anchor.reversed ? 0 : 2),
splitterSize = getSize(splitter[0]),
halfSize = splitterSize / 2;
offsetSize = splitterSize / 2;
first.css(anchor.edge, "0px");
first.css(anchor.dimension, calc(-halfSize));
first.css(anchor.dimension, calc(-offsetSize));
splitter.css(anchor.edge, calc(-halfSize));
splitter.css(anchor.dimension, splitterSize + "px");
splitter.css(anchor.edge, styleValue);
last.css(anchor.edge, calc(halfSize));
last.css(anchor.edge, calc(offsetSize));
last.css(anchor.opposite, "0px");
}
// Update positioning of contained elements
function updateElementPositions() {
var children = element.children();
var children = $element.children();
// Check to make sure contents are well-formed
if (children.length !== 3 ||
children[1].nodeName !== 'mct-splitter') {
children[1].nodeName.toLowerCase() !== 'mct-splitter') {
$log.warn(CHILDREN_WARNING_MESSAGE);
return;
}
@ -156,7 +155,7 @@ define(
position = value;
// Pass change up so this state can be shared
if (positionParsed.assign) {
positionParsed.assign(scope, value);
positionParsed.assign($scope, value);
}
styleValue = position + 'px';
updateElementPositions();
@ -171,7 +170,7 @@ define(
}
anchor = ANCHORS[anchorKey];
scope.$watch(attrs.position, getSetPosition);
$scope.$watch($attrs.position, getSetPosition);
// Initialize positions
updateElementPositions();
@ -187,7 +186,7 @@ define(
return {
// Restrict to attributes
restrict: "A",
restrict: "E",
// Expose its controller
controller: controller
};

4
platform/commonUI/general/src/directives/MCTSplitter.js
View File

@ -27,7 +27,7 @@ define(
'use strict';
// Pixel width to allocate for the splitter itself
var SPLITTER_TEMPLATE = "<div class=\"splitter\" " +
var SPLITTER_TEMPLATE = "<div class='abs'" +
"mct-drag-down=\"splitter.startMove()\" " +
"mct-drag=\"splitter.move(delta)\"></div>",
OFFSETS_BY_EDGE = {
@ -45,6 +45,8 @@ define(
function link(scope, element, attrs, mctSplitPane) {
var initialPosition;
element.addClass("splitter");
scope.splitter = {
// Begin moving this splitter
startMove: function () {