imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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 }