Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-17 05:55:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Translate vertical scrolling to horizontal movement in breadcrumbs
This commit is contained in:
Travis Ralston 2019-04-05 09:51:13 -06:00 committed by GitHub
commit 6a8b98eb71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/structures/AutoHideScrollbar.js
View File

@ -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 }

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) {
@ -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 }

3
src/components/views/rooms/RoomBreadcrumbs.js
View File

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