ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-13 04:38:15 +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
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"> <div content="jquery-wrapper" class="abs holder-all browse-mode">
<mct-include key="'topbar-browse'"></mct-include> <mct-include key="'topbar-browse'"></mct-include>
<div class="holder browse-area s-browse-area abs" ng-controller="BrowseController"> <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
<div class='split-layout vertical contents abs' <mct-split-pane class='split-layout vertical contents abs'
ng-controller="SplitPaneController as splitter"> anchor='left'
<div class='split-pane-component treeview pane' initial="25%">
ng-style="{ width: splitter.state() + 'px'}"> <div class='split-pane-component treeview pane'>
<mct-representation key="'create-button'" mct-object="navigatedObject"> <mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation> </mct-representation>
<div class='holder tree-holder abs'> <div class='holder tree-holder abs'>
@ -35,18 +35,14 @@
</mct-representation> </mct-representation>
</div> </div>
</div> </div>
<div class="splitter" <mct-splitter></mct-splitter>
ng-style="{ left: splitter.state() + 'px'}" <div class='split-pane-component items pane'>
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' }">
<div class='holder abs' id='content-area'> <div class='holder abs' id='content-area'>
<mct-representation mct-object="navigatedObject" key="'browse-object'"> <mct-representation mct-object="navigatedObject" key="'browse-object'">
</mct-representation> </mct-representation>
</div> </div>
</div> </div>
</div> </mct-split-pane>
</div> </div>
<mct-include key="'bottombar'"></mct-include> <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 bottom: true
}; };
function controller(scope, element, attrs) { function controller($scope, $element, $attrs) {
var anchorKey = attrs.anchor || DEFAULT_ANCHOR, var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
anchor, anchor,
styleValue = attrs.initial, styleValue = $attrs.initial,
positionParsed = $parse(attrs.position), positionParsed = $parse($attrs.position),
position; // Start undefined, until explicitly set position; // Start undefined, until explicitly set
// Convert a pixel offset to a calc expression // Convert a pixel offset to a calc expression
@ -119,29 +119,28 @@ define(
function updateChildren(children) { function updateChildren(children) {
// Pick out correct elements to update, flowing from // Pick out correct elements to update, flowing from
// selected anchor edge. // selected anchor edge.
var first = children.eq(anchor.reversed ? 0 : 2), var first = children.eq(anchor.reversed ? 2 : 0),
splitter = children.eq(1), splitter = children.eq(1),
last = children.eq(anchor.reversed ? 2 : 0), last = children.eq(anchor.reversed ? 0 : 2),
splitterSize = getSize(splitter[0]), splitterSize = getSize(splitter[0]),
halfSize = splitterSize / 2; offsetSize = splitterSize / 2;
first.css(anchor.edge, "0px"); 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.edge, styleValue);
splitter.css(anchor.dimension, splitterSize + "px");
last.css(anchor.edge, calc(halfSize)); last.css(anchor.edge, calc(offsetSize));
last.css(anchor.opposite, "0px"); last.css(anchor.opposite, "0px");
} }
// Update positioning of contained elements // Update positioning of contained elements
function updateElementPositions() { function updateElementPositions() {
var children = element.children(); var children = $element.children();
// Check to make sure contents are well-formed // Check to make sure contents are well-formed
if (children.length !== 3 || if (children.length !== 3 ||
children[1].nodeName !== 'mct-splitter') { children[1].nodeName.toLowerCase() !== 'mct-splitter') {
$log.warn(CHILDREN_WARNING_MESSAGE); $log.warn(CHILDREN_WARNING_MESSAGE);
return; return;
} }
@ -156,7 +155,7 @@ define(
position = value; position = value;
// Pass change up so this state can be shared // Pass change up so this state can be shared
if (positionParsed.assign) { if (positionParsed.assign) {
positionParsed.assign(scope, value); positionParsed.assign($scope, value);
} }
styleValue = position + 'px'; styleValue = position + 'px';
updateElementPositions(); updateElementPositions();
@ -171,7 +170,7 @@ define(
} }
anchor = ANCHORS[anchorKey]; anchor = ANCHORS[anchorKey];
scope.$watch(attrs.position, getSetPosition); $scope.$watch($attrs.position, getSetPosition);
// Initialize positions // Initialize positions
updateElementPositions(); updateElementPositions();
@ -187,7 +186,7 @@ define(
return { return {
// Restrict to attributes // Restrict to attributes
restrict: "A", restrict: "E",
// Expose its controller // Expose its controller
controller: controller controller: controller
}; };

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

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