mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-24 11:45:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Translate vertical scrolling to horizontal movement in breadcrumbs

Browse source 
Fixes https://github.com/vector-im/riot-web/issues/9314
This commit is contained in:
Travis Ralston 2019-04-04 16:43:04 -06:00
parent 37afa9fc0e
commit 138fd4ec87
3 changed files with 22 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/structures/AutoHideScrollbar.js
View file

@ -118,12 +118,19 @@ export default class AutoHideScrollbar extends React.Component {
return this.containerRef.scrollTop;
}
onWheel = (e) => {
if (this.props.onWheel) {
this.props.onWheel(e);
}
};
render() {
return (<div
ref={this._collectContainerRef}
style={this.props.style}
className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
onScroll={this.props.onScroll}
onWheel={this.onWheel}
>
<div className="mx_AutoHideScrollbar_offset">
{ this.props.children }

13
src/components/structures/IndicatorScrollbar.js
View file

@ -24,6 +24,11 @@ export default class IndicatorScrollbar extends React.Component {
// and mx_IndicatorScrollbar_rightOverflowIndicator elements to the list for positioning
// by the parent element.
trackHorizontalOverflow: PropTypes.bool,
// If true, when the user tries to use their mouse wheel in the component it will
// scroll horizontally rather than vertically. This should only be used on components
// with no vertical scroll opportunity.
verticalScrollsHorizontally: PropTypes.bool,
};
constructor(props) {
@ -106,6 +111,13 @@ export default class IndicatorScrollbar extends React.Component {
}
}
onMouseWheel = (e) => {
if (this.props.verticalScrollsHorizontally && this._scrollElement) {
// noinspection JSSuspiciousNameCombination
this._scrollElement.scrollLeft += e.deltaY / 2; // divide by 2 to reduce harshness
}
};
render() {
const leftIndicatorStyle = {left: this.state.leftIndicatorOffset};
const rightIndicatorStyle = {right: this.state.rightIndicatorOffset};
@ -117,6 +129,7 @@ export default class IndicatorScrollbar extends React.Component {
return (<AutoHideScrollbar
ref={this._collectScrollerComponent}
wrappedRef={this._collectScroller}
onWheel={this.onMouseWheel}
{... this.props}
>
{ leftOverflowIndicator }

3
src/components/views/rooms/RoomBreadcrumbs.js
View file

@ -242,7 +242,8 @@ export default class RoomBreadcrumbs extends React.Component {
);
});
return (
<IndicatorScrollbar ref="scroller" className="mx_RoomBreadcrumbs" trackHorizontalOverflow={true}>
<IndicatorScrollbar ref="scroller" className="mx_RoomBreadcrumbs"
trackHorizontalOverflow={true} verticalScrollsHorizontally={true}>
{ avatars }
</IndicatorScrollbar>
);