ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-17 14:48:13 +00:00
Code Issues Actions 4 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
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"> <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
<mct-split-pane class='split-layout vertical contents abs' <mct-split-pane class='split-layout vertical contents abs'
anchor='left' anchor='left'
minimum="150"
maximum="800"
initial="25%"> 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 key="'create-button'" mct-object="navigatedObject">
</mct-representation> </mct-representation>
<div class='holder tree-holder abs'> <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), positionParsed = $parse($attrs.position),
position; // Start undefined, until explicitly set position; // Start undefined, until explicitly set
// Convert a pixel offset to a calc expression // Create a calc CSS expression
function calc(offset) { function calcSum(a, b) {
return "calc(" + styleValue + " + " + offset + "px)"; return "calc(" + a + " + " + b + ")";
} }
// Get relevant size (height or width) of DOM element // Get relevant size (height or width) of DOM element
function getSize(splitter) { function getSize(domElement) {
return anchor.orientation === 'vertical' ? return (anchor.orientation === 'vertical' ?
splitter.offsetWidth : splitter.offsetHeight; domElement.offsetWidth : domElement.offsetHeight)
+ "px";
} }
// Apply styles to child elements // Apply styles to child elements
@ -127,14 +128,17 @@ define(
splitter = children.eq(1), splitter = children.eq(1),
last = children.eq(anchor.reversed ? 0 : 2), last = children.eq(anchor.reversed ? 0 : 2),
splitterSize = getSize(splitter[0]), splitterSize = getSize(splitter[0]),
offsetSize = splitterSize / 2; firstSize;
first.css(anchor.edge, "0px"); 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"); last.css(anchor.opposite, "0px");
} }