From 9c8f543ffe3ab5da351ecb967ad5c625ab2db21b Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 2 May 2017 18:02:06 -0700 Subject: [PATCH] Make resizer great again MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Doesn’t matter what is inside it, it just works. --- ui/src/shared/components/ResizeContainer.js | 75 ++++++++++----------- ui/src/shared/components/ResizeHandle.js | 2 +- ui/src/style/components/resizer.scss | 60 +++++++---------- 3 files changed, 60 insertions(+), 77 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index ce2f344cf8..9bc527ecf7 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -1,11 +1,22 @@ import React, {PropTypes} from 'react' import ResizeHandle from 'shared/components/ResizeHandle' +import classNames from 'classnames' -const {node, string} = PropTypes +const {node, number, string} = PropTypes const ResizeContainer = React.createClass({ propTypes: { children: node.isRequired, + containerClass: string.isRequired, + minTopHeight: number, + minBottomHeight: number, + }, + + getDefaultProps() { + return { + minTopHeight: 200, + minBottomHeight: 200, + } }, getInitialState() { @@ -33,17 +44,18 @@ const ResizeContainer = React.createClass({ return } - const appHeight = parseInt( + const {minTopHeight, minBottomHeight} = this.props + const oneHundred = 100 + const containerHeight = parseInt( getComputedStyle(this.refs.resizeContainer).height, 10 ) - // headingOffset moves the resize handle as many pixels as the page-heading is taking up. - const headingOffset = window.innerHeight - appHeight - const turnToPercent = 100 + // verticalOffset moves the resize handle as many pixels as the page-heading is taking up. + const verticalOffset = window.innerHeight - containerHeight const newTopPanelPercent = Math.ceil( - (e.pageY - headingOffset) / appHeight * turnToPercent + (e.pageY - verticalOffset) / containerHeight * oneHundred ) - const newBottomPanelPercent = turnToPercent - newTopPanelPercent + const newBottomPanelPercent = oneHundred - newTopPanelPercent // Don't trigger a resize unless the change in size is greater than minResizePercentage const minResizePercentage = 0.5 @@ -54,15 +66,13 @@ const ResizeContainer = React.createClass({ return } - // Don't trigger a resize if the new sizes are too small - const minTopPanelHeight = 200 - const minBottomPanelHeight = 200 - const topHeightPixels = newTopPanelPercent / turnToPercent * appHeight - const bottomHeightPixels = newBottomPanelPercent / turnToPercent * appHeight + const topHeightPixels = newTopPanelPercent / oneHundred * containerHeight + const bottomHeightPixels = newBottomPanelPercent / oneHundred * containerHeight + // Don't trigger a resize if the new sizes are too small if ( - topHeightPixels < minTopPanelHeight || - bottomHeightPixels < minBottomPanelHeight + topHeightPixels < minTopHeight || + bottomHeightPixels < minBottomHeight ) { return } @@ -70,8 +80,6 @@ const ResizeContainer = React.createClass({ this.setState({ topHeight: `${newTopPanelPercent}%`, bottomHeight: `${newBottomPanelPercent}%`, - topHeightPixels, - bottomHeightPixels, }) }, @@ -87,42 +95,27 @@ const ResizeContainer = React.createClass({ }, render() { - const {topHeight, topHeightPixels, bottomHeightPixels} = this.state - const top = React.cloneElement(this.props.children[0], { - height: topHeight, - heightPixels: topHeightPixels, - }) - const bottom = React.cloneElement(this.props.children[1], { - height: `${bottomHeightPixels}px`, - }) + const {topHeight, bottomHeight, isDragging} = this.state + const {containerClass, children} = this.props + return (
- {top} +
+ {React.cloneElement(children[0])} +
{this.renderHandle()} - {bottom} +
+ {React.cloneElement(children[1])} +
) }, }) -export const ResizeBottom = ({height, children}) => { - const child = React.cloneElement(children, {height}) - return ( -
- {child} -
- ) -} - -ResizeBottom.propTypes = { - children: node.isRequired, - height: string, -} - export default ResizeContainer diff --git a/ui/src/shared/components/ResizeHandle.js b/ui/src/shared/components/ResizeHandle.js index afccf9dbab..352f33a158 100644 --- a/ui/src/shared/components/ResizeHandle.js +++ b/ui/src/shared/components/ResizeHandle.js @@ -14,7 +14,7 @@ const ResizeHandle = React.createClass({ return (
diff --git a/ui/src/style/components/resizer.scss b/ui/src/style/components/resizer.scss index 84a60ca6a3..4b1bc0f2d1 100644 --- a/ui/src/style/components/resizer.scss +++ b/ui/src/style/components/resizer.scss @@ -1,3 +1,8 @@ +/* + Resizable Container + ---------------------------------------------- +*/ + $resizer-line-width: 2px; $resizer-line-z: 2; $resizer-handle-width: 10px; @@ -9,7 +14,25 @@ $resizer-color: $g5-pepper; $resizer-color-hover: $g8-storm; $resizer-color-active: $c-pool; -.resizer__handle { +.resize--container { + overflow: hidden !important; + + &.resize--dragging * { + @include no-user-select(); + } +} +.resize--top, +.resize--bottom { + position: absolute; + width: 100%; + left: 0; +} + +/* + Resizable Container Handle + ---------------------------------------------- +*/ +.resizer--handle { top: 60%; left: 0; height: $resizer-click-area; @@ -78,37 +101,4 @@ $resizer-color-active: $c-pool; box-shadow: 0 0 $resizer-glow $resizer-color-active; } } -} - -.resize-container.page-contents { - overflow: hidden; - display: flex; - flex-direction: row; - align-items: stretch; -} - -.resize-container { - .resize-top { - display: flex; - flex-direction: column; - position: absolute; - top: 0; - left: 0; - height: 60%; - width: 100%; - } - .resize-bottom { - display: flex; - flex-direction: column; - position: absolute; - height: 40%; - bottom: 0; - left: 0; - width: 100%; - } -} - -/* Special rule for when a graph is in the bottom of resizer */ -.resize-bottom .graph { - height: 100%; -} +} \ No newline at end of file