Merge pull request #2877 from matrix-org/travis/breadcrumbs/scroll-left

Translate vertical scrolling to horizontal movement in breadcrumbs

src/components/structures/AutoHideScrollbar.js

@@ -124,6 +124,7 @@ export default class AutoHideScrollbar extends React.Component {
                     style={this.props.style}
                     className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
                     onScroll={this.props.onScroll}
+                    onWheel={this.props.onWheel}
                 >
             <div className="mx_AutoHideScrollbar_offset">
                 { this.props.children }

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) {
@@ -113,6 +118,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};
@@ -124,6 +136,7 @@ export default class IndicatorScrollbar extends React.Component {
         return (<AutoHideScrollbar
             ref={this._collectScrollerComponent}
             wrappedRef={this._collectScroller}
+            onWheel={this.onMouseWheel}
             {... this.props}
         >
             { leftOverflowIndicator }

src/components/views/rooms/RoomBreadcrumbs.js

@@ -333,7 +333,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>
         );