From e955705bff8548d1dbd4bccdeabcb6956a97182f Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Thu, 18 Jul 2019 19:15:25 +0530 Subject: [PATCH] bring back console drag resizing. fixes #370 --- src/components/Console.jsx | 42 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/components/Console.jsx b/src/components/Console.jsx index e48811e..6929d25 100644 --- a/src/components/Console.jsx +++ b/src/components/Console.jsx @@ -25,6 +25,10 @@ class LogRow extends Component { } export class Console extends PureComponent { + constructor(props) { + super(props); + this.mouseMoveHandler = this.mouseMoveHandler.bind(this); + } componentDidUpdate(previousProps) { if (this.props.logs !== previousProps.logs) { // Scroll down after new log dom is inserted @@ -33,6 +37,42 @@ export class Console extends PureComponent { }, 1); } } + componentWillUnmount() { + this.endDragging(); + } + + endDragging() { + if (!this.isDragging) { + return; + } + + this.isDragging = false; + window.consoleEl.style.transition = this.savedTransition; + window.removeEventListener('mousemove', this.mouseMoveHandler); + window.removeEventListener('mouseup', this.mouseUpHandler); + } + mouseDownHandler(e) { + if (!this.props.isConsoleOpen) { + return true; + } + this.isDragging = true; + this.startY = e.pageY; + this.startHeight = window.consoleEl.getBoundingClientRect().height; + this.savedTransition = window.getComputedStyle(window.consoleEl).transition; + window.consoleEl.style.transition = 'none'; + + window.addEventListener('mousemove', this.mouseMoveHandler); + window.addEventListener('mouseup', this.mouseUpHandler); + } + mouseUpHandler() { + this.endDragging(); + } + + mouseMoveHandler(e) { + if (!this.isDragging) return true; + const newHeight = this.startHeight + (this.startY - e.pageY); + window.consoleEl.style.height = `${newHeight}px`; + } render() { const { @@ -56,6 +96,8 @@ export class Console extends PureComponent { class="js-console__header code-wrap__header" title={i18n._(t`Double click to toggle console`)} onDblClick={onConsoleHeaderDblClick} + onMouseDown={this.mouseDownHandler.bind(this)} + onMouseUp={this.mouseUpHandler.bind(this)} > Console