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>
         );