1 files changed, 60 insertions, 21 deletions
diff --git a/web/src/js/components/EventLog.jsx b/web/src/js/components/EventLog.jsx
index 58cecd1a..169162ee 100644
--- a/web/src/js/components/EventLog.jsx
+++ b/web/src/js/components/EventLog.jsx
@@ -1,31 +1,70 @@
-import React, { PropTypes } from 'react'
+import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { toggleEventLogFilter, toggleEventLogVisibility } from '../ducks/eventLog'
-import { ToggleButton } from './common'
+import ToggleButton from './common/ToggleButton'
 import EventList from './EventLog/EventList'
 
-EventLog.propTypes = {
-    filters: PropTypes.object.isRequired,
-    events: PropTypes.array.isRequired,
-    onToggleFilter: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired
-}
+class EventLog extends Component {
+
+    static propTypes = {
+        filters: PropTypes.object.isRequired,
+        events: PropTypes.array.isRequired,
+        onToggleFilter: PropTypes.func.isRequired,
+        onClose: PropTypes.func.isRequired,
+        defaultHeight: PropTypes.number,
+    }
+
+    static defaultProps = {
+        defaultHeight: 200,
+    }
+
+    constructor(props, context) {
+        super(props, context)
+
+        this.state = { height: this.props.defaultHeight }
+
+        this.onDragStart = this.onDragStart.bind(this)
+        this.onDragMove = this.onDragMove.bind(this)
+        this.onDragStop = this.onDragStop.bind(this)
+    }
 
-function EventLog({ filters, events, onToggleFilter, onClose }) {
-    return (
-        <div className="eventlog">
-            <div>
-                Eventlog
-                <div className="pull-right">
-                    {['debug', 'info', 'web'].map(type => (
-                        <ToggleButton key={type} text={type} checked={filters[type]} onToggle={() => onToggleFilter(type)}/>
-                    ))}
-                    <i onClick={onClose} className="fa fa-close"></i>
+    onDragStart(event) {
+        event.preventDefault()
+        this.dragStart = this.state.height + event.pageY
+        window.addEventListener('mousemove', this.onDragMove)
+        window.addEventListener('mouseup', this.onDragStop)
+        window.addEventListener('dragend', this.onDragStop)
+    }
+
+    onDragMove(event) {
+        event.preventDefault()
+        this.setState({ height: this.dragStart - event.pageY })
+    }
+
+    onDragStop(event) {
+        event.preventDefault()
+        window.removeEventListener('mousemove', this.onDragMove)
+    }
+
+    render() {
+        const { height } = this.state
+        const { filters, events, onToggleFilter, onClose } = this.props
+
+        return (
+            <div className="eventlog" style={{ height }}>
+                <div onMouseDown={this.onDragStart}>
+                    Eventlog
+                    <div className="pull-right">
+                        {['debug', 'info', 'web'].map(type => (
+                            <ToggleButton key={type} text={type} checked={filters[type]} onToggle={() => onToggleFilter(type)}/>
+                        ))}
+                        <i onClick={onClose} className="fa fa-close"></i>
+                    </div>
                 </div>
+                <EventList events={events} />
             </div>
-            <EventList events={events} />
-        </div>
-    )
+        )
+    }
 }
 
 export default connect(