mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-05-10 12:26:02 +02:00
Code Issues Releases Wiki Activity

bring back console drag resizing. fixes #370

Browse Source
This commit is contained in:
Kushagra Gour 2019-07-18 19:15:25 +05:30
parent e9ed42965b
commit e955705bff
1 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/Console.jsx
View File

@ -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)}
>
<span class="code-wrap__header-label">
<Trans>Console</Trans>