mirror of https://github.com/vector-im/riot-web
Merge pull request #2913 from matrix-org/travis/breadcrumbs/scrolling-3
Remove breadcrumb scroll tolerances and use sensible defaultspull/21833/head
commit
9bd8f47cdf
|
@ -29,13 +29,6 @@ export default class IndicatorScrollbar extends React.Component {
|
||||||
// scroll horizontally rather than vertically. This should only be used on components
|
// scroll horizontally rather than vertically. This should only be used on components
|
||||||
// with no vertical scroll opportunity.
|
// with no vertical scroll opportunity.
|
||||||
verticalScrollsHorizontally: PropTypes.bool,
|
verticalScrollsHorizontally: PropTypes.bool,
|
||||||
|
|
||||||
// An object containing 2 numbers: xyThreshold and yReduction. xyThreshold is the amount
|
|
||||||
// of horizontal movement required in order to ignore any vertical changes in scroll, and
|
|
||||||
// only applies when verticalScrollsHorizontally is true. yReduction is the factor to
|
|
||||||
// multiply the vertical delta by when verticalScrollsHorizontally is true. The default
|
|
||||||
// behaviour is to have an xyThreshold of infinity and a yReduction of 0.8
|
|
||||||
scrollTolerances: PropTypes.object,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
@ -127,20 +120,19 @@ export default class IndicatorScrollbar extends React.Component {
|
||||||
|
|
||||||
onMouseWheel = (e) => {
|
onMouseWheel = (e) => {
|
||||||
if (this.props.verticalScrollsHorizontally && this._scrollElement) {
|
if (this.props.verticalScrollsHorizontally && this._scrollElement) {
|
||||||
const xyThreshold = this.props.scrollTolerances
|
// xyThreshold is the amount of horizontal motion required for the component to
|
||||||
? this.props.scrollTolerances.xyThreshold
|
// ignore the vertical delta in a scroll. Used to stop trackpads from acting in
|
||||||
: Number.MAX_SAFE_INTEGER;
|
// strange ways. Should be positive.
|
||||||
|
const xyThreshold = 0;
|
||||||
|
|
||||||
const yReduction = this.props.scrollTolerances
|
// yRetention is the factor multiplied by the vertical delta to try and reduce
|
||||||
? this.props.scrollTolerances.yReduction
|
// the harshness of the scroll behaviour. Should be a value between 0 and 1.
|
||||||
: 0.8;
|
const yRetention = 1.0;
|
||||||
|
|
||||||
// Don't apply vertical motion to horizontal scrolls. This is meant to eliminate
|
if (Math.abs(e.deltaX) < xyThreshold) {
|
||||||
// trackpads causing excessive scroll motion.
|
// noinspection JSSuspiciousNameCombination
|
||||||
if (e.deltaX >= xyThreshold) return;
|
this._scrollElement.scrollLeft += e.deltaY * yRetention;
|
||||||
|
}
|
||||||
// noinspection JSSuspiciousNameCombination
|
|
||||||
this._scrollElement.scrollLeft += e.deltaY * yReduction;
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -33,12 +33,7 @@ const MAX_ROOMS = 20;
|
||||||
export default class RoomBreadcrumbs extends React.Component {
|
export default class RoomBreadcrumbs extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
this.state = {rooms: []};
|
||||||
const tolerances = SettingsStore.getValue("breadcrumb_scroll_tolerances");
|
|
||||||
this.state = {rooms: [], scrollTolerances: tolerances};
|
|
||||||
|
|
||||||
// Record this for debugging purposes
|
|
||||||
console.log("Breadcrumbs scroll tolerances:", tolerances);
|
|
||||||
|
|
||||||
this.onAction = this.onAction.bind(this);
|
this.onAction = this.onAction.bind(this);
|
||||||
this._dispatcherRef = null;
|
this._dispatcherRef = null;
|
||||||
|
@ -343,8 +338,7 @@ export default class RoomBreadcrumbs extends React.Component {
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<IndicatorScrollbar ref="scroller" className="mx_RoomBreadcrumbs"
|
<IndicatorScrollbar ref="scroller" className="mx_RoomBreadcrumbs"
|
||||||
trackHorizontalOverflow={true} verticalScrollsHorizontally={true}
|
trackHorizontalOverflow={true} verticalScrollsHorizontally={true}>
|
||||||
scrollTolerances={this.state.scrollTolerances}>
|
|
||||||
{ avatars }
|
{ avatars }
|
||||||
</IndicatorScrollbar>
|
</IndicatorScrollbar>
|
||||||
);
|
);
|
||||||
|
|
|
@ -262,13 +262,6 @@ export const SETTINGS = {
|
||||||
supportedLevels: ['account'],
|
supportedLevels: ['account'],
|
||||||
default: [],
|
default: [],
|
||||||
},
|
},
|
||||||
"breadcrumb_scroll_tolerances": {
|
|
||||||
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
|
|
||||||
default: {
|
|
||||||
xyThreshold: 10,
|
|
||||||
yReduction: 0.8,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
"analyticsOptIn": {
|
"analyticsOptIn": {
|
||||||
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
|
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
|
||||||
displayName: _td('Send analytics data'),
|
displayName: _td('Send analytics data'),
|
||||||
|
|
Loading…
Reference in New Issue