Fix handlebar interaction

This commit is contained in:
Jorik Schellekens 2020-07-16 02:08:24 +01:00
parent 1f94986c88
commit d794e17d4d
4 changed files with 43 additions and 88 deletions

View file

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

View file

@ -79,12 +79,13 @@ limitations under the License.
height: 100%; height: 100%;
} }
.mx_MatrixChat > .mx_LeftPanel2:hover + .mx_ResizeHandle_horizontal,
.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover { .mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
position: relative; position: relative;
&::before { &::before {
position: absolute; position: absolute;
left: -2px; left: 5px;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);

View file

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

View file

@ -16,77 +16,24 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import ResizeHandle from '../views/elements/ResizeHandle'; import { Resizable } from 're-resizable';
import {Resizer, FixedDistributor} from '../../resizer';
export default class MainSplit extends React.Component { export default class MainSplit extends React.Component {
constructor(props) { _onResized = (event, direction, refToElement, delta) => {
super(props); window.localStorage.setItem("mx_rhs_size", this._loadSidePanelSize().width + delta.width);
this._setResizeContainerRef = this._setResizeContainerRef.bind(this);
this._onResized = this._onResized.bind(this);
} }
_onResized(size) { _loadSidePanelSize() {
window.localStorage.setItem("mx_rhs_size", size); let rhsSize = parseInt(window.localStorage.getItem("mx_rhs_size"), 10);
if (this.props.resizeNotifier) {
this.props.resizeNotifier.notifyRightHandleResized();
}
}
_createResizer() { if (isNaN(rhsSize)) {
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 {
rhsSize = 350; rhsSize = 350;
} }
resizer.forHandleAt(0).resize(rhsSize);
resizer.attach(); return {
this.resizer = resizer; height: "100%",
} width: rhsSize,
};
_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;
}
} }
render() { render() {
@ -97,13 +44,29 @@ export default class MainSplit extends React.Component {
let children; let children;
if (hasResizer) { if (hasResizer) {
children = <React.Fragment> children = <Resizable
<ResizeHandle reverse={true} /> 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 } { panelView }
</React.Fragment>; </Resizable>;
} }
return <div className="mx_MainSplit" ref={hasResizer ? this._setResizeContainerRef : undefined}> return <div className="mx_MainSplit">
{ bodyView } { bodyView }
{ children } { children }
</div>; </div>;