From d794e17d4d238978c1863ed4951265a2a32e20e7 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Thu, 16 Jul 2020 02:08:24 +0100 Subject: [PATCH 1/3] Fix handlebar interaction --- res/css/structures/_MainSplit.scss | 26 +++---- res/css/structures/_MatrixChat.scss | 3 +- res/css/structures/_RightPanel.scss | 5 +- src/components/structures/MainSplit.js | 97 ++++++++------------------ 4 files changed, 43 insertions(+), 88 deletions(-) diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss index 387879ea7b..dd817a04e4 100644 --- a/res/css/structures/_MainSplit.scss +++ b/res/css/structures/_MainSplit.scss @@ -21,26 +21,18 @@ 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; -.mx_MainSplit > .mx_ResizeHandle_horizontal:hover { - position: relative; - - &::before { - position: absolute; - left: 4px; - top: 50%; + &: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: 30%; - width: 4px; - border-radius: 4px; - - content: ' '; + height: 30% !important; + width: 4px !important; + border-radius: 4px !important; background-color: $primary-fg-color; opacity: 0.8; diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index 926d10ee04..ff2fe9a162 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -79,12 +79,13 @@ 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: -2px; + left: 5px; top: 50%; transform: translate(0, -50%); diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss index 77114954eb..326720ef0f 100644 --- a/res/css/structures/_RightPanel.scss +++ b/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 diff --git a/src/components/structures/MainSplit.js b/src/components/structures/MainSplit.js index 7c66f21a04..800ed76bb9 100644 --- a/src/components/structures/MainSplit.js +++ b/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 = - + children = { panelView } - ; + ; } - return
+ return
{ bodyView } { children }
; From 5e6f8b20bc88263a00a957dc08aabaee6b76312f Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Thu, 16 Jul 2020 14:54:48 +0100 Subject: [PATCH 2/3] Visual WIP Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/structures/_MainSplit.scss | 2 +- res/css/structures/_MatrixChat.scss | 4 ++-- res/css/views/elements/_ResizeHandle.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss index dd817a04e4..aee7b5a154 100644 --- a/res/css/structures/_MainSplit.scss +++ b/res/css/structures/_MainSplit.scss @@ -30,7 +30,7 @@ limitations under the License. top: 50% !important; transform: translate(0, -50%); - height: 30% !important; + height: 64px !important; // to match width of the ones on roomlist width: 4px !important; border-radius: 4px !important; diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index ff2fe9a162..2bb4a9c437 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -85,11 +85,11 @@ limitations under the License. &::before { position: absolute; - left: 5px; + left: 2px; top: 50%; transform: translate(0, -50%); - height: 30%; + height: 64px; // to match width of the ones on roomlist width: 4px; border-radius: 4px; diff --git a/res/css/views/elements/_ResizeHandle.scss b/res/css/views/elements/_ResizeHandle.scss index 5544799a34..5189f80b30 100644 --- a/res/css/views/elements/_ResizeHandle.scss +++ b/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 { From 84e3a0954cdfaf524026535f05b890bbe17393d0 Mon Sep 17 00:00:00 2001 From: Jorik Schellekens Date: Mon, 27 Jul 2020 15:04:09 +0100 Subject: [PATCH 3/3] Fix handle left align --- res/css/structures/_MatrixChat.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss index 2bb4a9c437..7f19c62615 100644 --- a/res/css/structures/_MatrixChat.scss +++ b/res/css/structures/_MatrixChat.scss @@ -85,7 +85,7 @@ limitations under the License. &::before { position: absolute; - left: 2px; + left: 6px; top: 50%; transform: translate(0, -50%);