From 138fd4ec87a480c3d243623221628664f15481ce Mon Sep 17 00:00:00 2001 From: Travis Ralston 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 (
{ 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 ( { 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 ( - + { avatars } );