From 138fd4ec87a480c3d243623221628664f15481ce Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 4 Apr 2019 16:43:04 -0600
Subject: [PATCH] Translate vertical scrolling to horizontal movement in
breadcrumbs
Fixes https://github.com/vector-im/riot-web/issues/9314
---
src/components/structures/AutoHideScrollbar.js | 7 +++++++
src/components/structures/IndicatorScrollbar.js | 13 +++++++++++++
src/components/views/rooms/RoomBreadcrumbs.js | 3 ++-
3 files changed, 22 insertions(+), 1 deletion(-)
diff --git a/src/components/structures/AutoHideScrollbar.js b/src/components/structures/AutoHideScrollbar.js
index 72d48a2084..4055eb4f9d 100644
--- a/src/components/structures/AutoHideScrollbar.js
+++ b/src/components/structures/AutoHideScrollbar.js
@@ -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 }
diff --git a/src/components/structures/IndicatorScrollbar.js b/src/components/structures/IndicatorScrollbar.js
index 263a0a22ba..cda253c049 100644
--- a/src/components/structures/IndicatorScrollbar.js
+++ b/src/components/structures/IndicatorScrollbar.js
@@ -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 }
diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index 314b2912cd..8524ff26fe 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -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>
);