OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix room list scroll jumps (#7991) 

Signed-off-by: Robin Townsend <robin@robin.town>
pull/21833/head
Robin 2022-03-09 13:18:17 -05:00 committed by GitHub
parent 14684c6296
commit 7b71a9fb65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
res/css/views/rooms/_RoomSublist.scss
View File

@ -50,6 +50,10 @@ limitations under the License.
height: 24px;
color: $tertiary-content;
.mx_RoomSublist_stickableContainer {
width: 100%;
}
.mx_RoomSublist_stickable {
flex: 1;
max-width: 100%;
@ -176,6 +180,14 @@ limitations under the License.
}
}
// In the general case, we reserve space for each sublist header to prevent
// scroll jumps when they become sticky. However, that leaves a gap when
// scrolled to the top above the first sublist (whose header can only ever
// stick to top), so we make sure to exclude the first visible sublist.
&:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_stickableContainer {
height: 24px;
}
.mx_RoomSublist_resizeBox {
position: relative;

40
src/components/views/rooms/RoomSublist.tsx
View File

@ -698,25 +698,27 @@ export default class RoomSublist extends React.Component<IProps, IState> {
onFocus={onFocus}
aria-label={this.props.label}
>
<div className="mx_RoomSublist_stickable">
<Button
onFocus={onFocus}
inputRef={ref}
tabIndex={tabIndex}
className="mx_RoomSublist_headerText"
role="treeitem"
aria-expanded={this.state.isExpanded}
aria-level={1}
onClick={this.onHeaderClick}
onContextMenu={this.onContextMenu}
title={this.props.isMinimized ? this.props.label : undefined}
>
<span className={collapseClasses} />
<span>{ this.props.label }</span>
</Button>
{ this.renderMenu() }
{ this.props.isMinimized ? null : badgeContainer }
{ this.props.isMinimized ? null : addRoomButton }
<div className="mx_RoomSublist_stickableContainer">
<div className="mx_RoomSublist_stickable">
<Button
onFocus={onFocus}
inputRef={ref}
tabIndex={tabIndex}
className="mx_RoomSublist_headerText"
role="treeitem"
aria-expanded={this.state.isExpanded}
aria-level={1}
onClick={this.onHeaderClick}
onContextMenu={this.onContextMenu}
title={this.props.isMinimized ? this.props.label : undefined}
>
<span className={collapseClasses} />
<span>{ this.props.label }</span>
</Button>
{ this.renderMenu() }
{ this.props.isMinimized ? null : badgeContainer }
{ this.props.isMinimized ? null : addRoomButton }
</div>
</div>
{ this.props.isMinimized ? badgeContainer : null }
{ this.props.isMinimized ? addRoomButton : null }