Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Remove redundant scroll-margins and fix RoomTile wrongly scrolling #4952

Merged
merged 1 commit into from
Jul 13, 2020
Merged

Remove redundant scroll-margins and fix RoomTile wrongly scrolling #4952

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions res/css/views/rooms/_RoomTile2.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,6 @@ limitations under the License.
margin-bottom: 4px;
padding: 4px;

// allow scrollIntoView to ignore the sticky headers, must match combined height of .mx_RoomSublist2_headerContainer
scroll-margin-top: 32px;
scroll-margin-bottom: 32px;

// The tile is also a flexbox row itself
display: flex;

Expand Down Expand Up @@ -168,11 +164,6 @@ limitations under the License.
}
}

// do not apply scroll-margin-bottom to the sublist which will not have a sticky header below it
.mx_RoomSublist2:last-child .mx_RoomTile2 {
scroll-margin-bottom: 0;
}

// We use these both in context menus and the room tiles
.mx_RoomTile2_iconBell::before {
mask-image: url('$(res)/img/feather-customised/bell.svg');
Expand Down
10 changes: 8 additions & 2 deletions src/components/views/rooms/RoomSublist2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ limitations under the License.
*/

import * as React from "react";
import { createRef } from "react";
import {createRef, UIEventHandler} from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import classNames from 'classnames';
import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
Expand Down Expand Up @@ -595,6 +595,12 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
);
}

private onScrollPrevent(e: React.UIEvent<HTMLDivElement>) {
// the RoomTile calls scrollIntoView and the browser may scroll a div we do not wish to be scrollable
// this fixes https://github.com/vector-im/riot-web/issues/14413
(e.target as HTMLDivElement).scrollTop = 0;
}

public render(): React.ReactElement {
// TODO: Error boundary: https://github.com/vector-im/riot-web/issues/14185

Expand Down Expand Up @@ -704,7 +710,7 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
className="mx_RoomSublist2_resizeBox"
enable={handles}
>
<div className="mx_RoomSublist2_tiles">
<div className="mx_RoomSublist2_tiles" onScroll={this.onScrollPrevent}>
{visibleTiles}
</div>
{showNButton}
Expand Down