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

Fix room list scroll jumps (#7991)

Browse source 
Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
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
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; height: 24px;
color: $tertiary-content; color: $tertiary-content;
.mx_RoomSublist_stickableContainer {
width: 100%;
}
.mx_RoomSublist_stickable { .mx_RoomSublist_stickable {
flex: 1; flex: 1;
max-width: 100%; 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 { .mx_RoomSublist_resizeBox {
position: relative; 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} onFocus={onFocus}
aria-label={this.props.label} aria-label={this.props.label}
> >
<div className="mx_RoomSublist_stickable"> <div className="mx_RoomSublist_stickableContainer">
<Button <div className="mx_RoomSublist_stickable">
onFocus={onFocus} <Button
inputRef={ref} onFocus={onFocus}
tabIndex={tabIndex} inputRef={ref}
className="mx_RoomSublist_headerText" tabIndex={tabIndex}
role="treeitem" className="mx_RoomSublist_headerText"
aria-expanded={this.state.isExpanded} role="treeitem"
aria-level={1} aria-expanded={this.state.isExpanded}
onClick={this.onHeaderClick} aria-level={1}
onContextMenu={this.onContextMenu} onClick={this.onHeaderClick}
title={this.props.isMinimized ? this.props.label : undefined} onContextMenu={this.onContextMenu}
> title={this.props.isMinimized ? this.props.label : undefined}
<span className={collapseClasses} /> >
<span>{ this.props.label }</span> <span className={collapseClasses} />
</Button> <span>{ this.props.label }</span>
{ this.renderMenu() } </Button>
{ this.props.isMinimized ? null : badgeContainer } { this.renderMenu() }
{ this.props.isMinimized ? null : addRoomButton } { this.props.isMinimized ? null : badgeContainer }
{ this.props.isMinimized ? null : addRoomButton }
</div>
</div> </div>
{ this.props.isMinimized ? badgeContainer : null } { this.props.isMinimized ? badgeContainer : null }
{ this.props.isMinimized ? addRoomButton : null } { this.props.isMinimized ? addRoomButton : null }