add resize handles between 3 main app columns

src/components/structures/LoggedInView.js

@@ -34,7 +34,8 @@ import RoomListStore from "../../stores/RoomListStore";
 
 import TagOrderActions from '../../actions/TagOrderActions';
 import RoomListActions from '../../actions/RoomListActions';
-
+import ResizeHandle from '../views/elements/ResizeHandle';
+import {makeResizeable, FixedDistributor} from '../../resizer'
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
 // NB. this is just for server notices rather than pinned messages in general.
@@ -91,6 +92,15 @@ const LoggedInView = React.createClass({
         };
     },
 
+    componentDidMount: function() {
+        const classNames = {
+            handle: "mx_ResizeHandle",
+            vertical: "mx_ResizeHandle_vertical",
+            reverse: "mx_ResizeHandle_reverse"
+        };
+        makeResizeable(this.resizeContainer, classNames, FixedDistributor);
+    },
+
     componentWillMount: function() {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
@@ -186,13 +196,13 @@ const LoggedInView = React.createClass({
     _updateServerNoticeEvents: async function() {
         const roomLists = RoomListStore.getRoomLists();
         if (!roomLists['m.server_notice']) return [];
-        
+
         const pinnedEvents = [];
         for (const room of roomLists['m.server_notice']) {
             const pinStateEvent = room.currentState.getStateEvents("m.room.pinned_events", "");
 
             if (!pinStateEvent || !pinStateEvent.getContent().pinned) continue;
-            
+
             const pinnedEventIds = pinStateEvent.getContent().pinned.slice(0, MAX_PINNED_NOTICES_PER_ROOM);
             for (const eventId of pinnedEventIds) {
                 const timeline = await this._matrixClient.getEventTimeline(room.getUnfilteredTimelineSet(), eventId, 0);
@@ -204,7 +214,7 @@ const LoggedInView = React.createClass({
             serverNoticeEvents: pinnedEvents,
         });
     },
-    
+
 
     _onKeyDown: function(ev) {
             /*
@@ -481,14 +491,16 @@ const LoggedInView = React.createClass({
             <div className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers} onClick={this._onClick}>
                 { topBar }
                 <DragDropContext onDragEnd={this._onDragEnd}>
-                    <div className={bodyClasses}>
+                    <div ref={(div) => this.resizeContainer = div} className={bodyClasses}>
                         <LeftPanel
                             collapsed={this.props.collapseLhs || false}
                             disabled={this.props.leftDisabled}
                         />
+                        <ResizeHandle/>
                         <main className='mx_MatrixChat_middlePanel'>
                             { page_element }
                         </main>
+                        <ResizeHandle reverse={true}/>
                         { right_panel }
                     </div>
                 </DragDropContext>

src/components/views/elements/ResizeHandle.js

@@ -0,0 +1,26 @@
+
+import React from 'react'; // eslint-disable-line no-unused-vars
+import PropTypes from 'prop-types';
+
+//see src/resizer for the actual resizing code, this is just the DOM for the resize handle
+const ResizeHandle = (props) => {
+    const classNames = ['mx_ResizeHandle'];
+    if (props.vertical) {
+        classNames.push('mx_ResizeHandle_vertical');
+    } else {
+        classNames.push('mx_ResizeHandle_horizontal');
+    }
+    if (props.reverse) {
+        classNames.push('mx_ResizeHandle_reverse');
+    }
+    return (
+        <div className={classNames.join(' ')}/>
+    );
+};
+
+ResizeHandle.propTypes = {
+    vertical: PropTypes.bool,
+    reverse: PropTypes.bool,
+};
+
+export default ResizeHandle;

src/components/views/rooms/RoomTile.js

@@ -243,6 +243,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        this.state.badgeHover = true;
         const isInvite = this.props.room.getMyMembership() === "invite";
         const notificationCount = this.state.notificationCount;
         // var highlightCount = this.props.room.getUnreadNotificationCount("highlight");
@@ -337,10 +338,8 @@ module.exports = React.createClass({
                     { dmIndicator }
                 </div>
             </div>
-            <div className="mx_RoomTile_nameContainer">
-                { label }
-                { badge }
-            </div>
+            { label }
+            { badge }
             { /* { incomingCallBox } */ }
             { tooltip }
         </AccessibleButton>;