Fix handlebar interaction
This commit is contained in:
Jorik Schellekens
parent
1f94986c88
commit
d794e17d4d
4 changed files with 43 additions and 88 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>;
|
||||
|
|
|
|||
Loading…
Reference in a new issue