Merge pull request #4989 from matrix-org/joriks/resize-handlebars-2.0

Fix handlebar interaction

res/css/structures/_MainSplit.scss

@@ -21,8 +21,20 @@ limitations under the License.
     height: 100%;
 }
 
-// move hit area 5px to the right so it doesn't overlap with the timeline scrollbar
-.mx_MainSplit > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
-    margin: 0 -10px 0 0;
-    padding: 0 10px 0 0;
+.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
+    padding: 5px;
+
+    &:hover .mx_RightPanel_ResizeHandle {
+        // Need to use important to override element style attributes
+        // set by re-resizable
+        top: 50% !important;
+        transform: translate(0, -50%);
+
+        height: 64px !important; // to match width of the ones on roomlist
+        width: 4px !important;
+        border-radius: 4px !important;
+
+        background-color: $primary-fg-color;
+        opacity: 0.8;
+    }
 }

res/css/structures/_MatrixChat.scss

@@ -78,3 +78,24 @@ limitations under the License.
     */
     height: 100%;
 }
+
+.mx_MatrixChat > .mx_LeftPanel2:hover + .mx_ResizeHandle_horizontal,
+.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
+    position: relative;
+
+    &::before {
+        position: absolute;
+        left: 6px;
+        top: 50%;
+        transform: translate(0, -50%);
+
+        height: 64px; // to match width of the ones on roomlist
+        width: 4px;
+        border-radius: 4px;
+
+        content: ' ';
+
+        background-color: $primary-fg-color;
+        opacity: 0.8;
+    }
+}

res/css/structures/_RightPanel.scss

@@ -19,13 +19,12 @@ limitations under the License.
     overflow-x: hidden;
     flex: 0 0 auto;
     position: relative;
-    min-width: 264px;
-    max-width: 50%;
     display: flex;
     flex-direction: column;
     border-radius: 8px;
-    margin: 5px;
     padding: 4px 0;
+    box-sizing: border-box;
+    height: 100%;
 
     .mx_RoomView_MessageList {
         padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above

res/css/views/elements/_ResizeHandle.scss

@@ -34,7 +34,7 @@ limitations under the License.
 
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
     margin: 0 -10px 0 0;
-    padding: 0 10px 0 0;
+    padding: 0 8px 0 0;
 }
 
 .mx_ResizeHandle > div {

src/components/structures/MainSplit.js

@@ -16,77 +16,24 @@ limitations under the License.
 */
 
 import React from 'react';
-import ResizeHandle from '../views/elements/ResizeHandle';
-import {Resizer, FixedDistributor} from '../../resizer';
+import { Resizable } from 're-resizable';
 
 export default class MainSplit extends React.Component {
-    constructor(props) {
-        super(props);
-        this._setResizeContainerRef = this._setResizeContainerRef.bind(this);
-        this._onResized = this._onResized.bind(this);
+    _onResized = (event, direction, refToElement, delta) => {
+        window.localStorage.setItem("mx_rhs_size", this._loadSidePanelSize().width + delta.width);
     }
 
-    _onResized(size) {
-        window.localStorage.setItem("mx_rhs_size", size);
-        if (this.props.resizeNotifier) {
-            this.props.resizeNotifier.notifyRightHandleResized();
-        }
-    }
+    _loadSidePanelSize() {
+        let rhsSize = parseInt(window.localStorage.getItem("mx_rhs_size"), 10);
 
-    _createResizer() {
-        const classNames = {
-            handle: "mx_ResizeHandle",
-            vertical: "mx_ResizeHandle_vertical",
-            reverse: "mx_ResizeHandle_reverse",
-        };
-        const resizer = new Resizer(
-            this.resizeContainer,
-            FixedDistributor,
-            {onResized: this._onResized},
-        );
-        resizer.setClassNames(classNames);
-        let rhsSize = window.localStorage.getItem("mx_rhs_size");
-        if (rhsSize !== null) {
-            rhsSize = parseInt(rhsSize, 10);
-        } else {
+        if (isNaN(rhsSize)) {
             rhsSize = 350;
         }
-        resizer.forHandleAt(0).resize(rhsSize);
 
-        resizer.attach();
-        this.resizer = resizer;
-    }
-
-    _setResizeContainerRef(div) {
-        this.resizeContainer = div;
-    }
-
-    componentDidMount() {
-        if (this.props.panel) {
-            this._createResizer();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.resizer) {
-            this.resizer.detach();
-            this.resizer = null;
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const wasPanelSet = this.props.panel && !prevProps.panel;
-        const wasPanelCleared = !this.props.panel && prevProps.panel;
-
-        if (this.resizeContainer && wasPanelSet) {
-            // The resizer can only be created when **both** expanded and the panel is
-            // set. Once both are true, the container ref will mount, which is required
-            // for the resizer to work.
-            this._createResizer();
-        } else if (this.resizer && wasPanelCleared) {
-            this.resizer.detach();
-            this.resizer = null;
-        }
+        return {
+            height: "100%",
+            width: rhsSize,
+        };
     }
 
     render() {
@@ -97,13 +44,29 @@ export default class MainSplit extends React.Component {
 
         let children;
         if (hasResizer) {
-            children = <React.Fragment>
-                <ResizeHandle reverse={true} />
+            children = <Resizable
+                defaultSize={this._loadSidePanelSize()}
+                minWidth={264}
+                maxWidth="50%"
+                enable={{
+                    top: false,
+                    right: false,
+                    bottom: false,
+                    left: true,
+                    topRight: false,
+                    bottomRight: false,
+                    bottomLeft: false,
+                    topLeft: false,
+                }}
+                onResizeStop={this._onResized}
+                className="mx_RightPanel_ResizeWrapper"
+                handleClasses={{left: "mx_RightPanel_ResizeHandle"}}
+            >
                 { panelView }
-            </React.Fragment>;
+            </Resizable>;
         }
 
-        return <div className="mx_MainSplit" ref={hasResizer ? this._setResizeContainerRef : undefined}>
+        return <div className="mx_MainSplit">
             { bodyView }
             { children }
         </div>;