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

[Common UI] Change min/max width handling in splitter

Browse Source 
In split pane, obey the min-width and max-width style properties
of first element within the pane. WTD-1363.
This commit is contained in:
Victor Woeltjen 2015-06-27 10:35:49 -07:00
parent 72c812cdaa
commit a1eb15db77
2 changed files with 16 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,10 +24,9 @@
<div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
<mct-split-pane class='split-layout vertical contents abs'
anchor='left'
minimum="150"
maximum="800"
initial="25%">
<div class='split-pane-component treeview pane'>
<div class='split-pane-component treeview pane'
style="min-width: 150px; max-width: 800px;">
<mct-representation key="'create-button'" mct-object="navigatedObject">
</mct-representation>
<div class='holder tree-holder abs'>

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

@ -108,15 +108,16 @@ define(
positionParsed = $parse($attrs.position),
position; // Start undefined, until explicitly set
// Convert a pixel offset to a calc expression
function calc(offset) {
return "calc(" + styleValue + " + " + offset + "px)";
// Create a calc CSS expression
function calcSum(a, b) {
return "calc(" + a + " + " + b + ")";
}
// Get relevant size (height or width) of DOM element
function getSize(splitter) {
return anchor.orientation === 'vertical' ?
splitter.offsetWidth : splitter.offsetHeight;
function getSize(domElement) {
return (anchor.orientation === 'vertical' ?
domElement.offsetWidth : domElement.offsetHeight)
+ "px";
}
// Apply styles to child elements
@ -127,14 +128,17 @@ define(
splitter = children.eq(1),
last = children.eq(anchor.reversed ? 0 : 2),
splitterSize = getSize(splitter[0]),
offsetSize = splitterSize / 2;
firstSize;
first.css(anchor.edge, "0px");
first.css(anchor.dimension, calc(-offsetSize));
first.css(anchor.dimension, styleValue);
splitter.css(anchor.edge, styleValue);
// Get actual size (to obey min-width)
firstSize = getSize(first[0]);
last.css(anchor.edge, calc(offsetSize));
splitter.css(anchor.edge, firstSize);
last.css(anchor.edge, calcSum(firstSize, splitterSize));
last.css(anchor.opposite, "0px");
}