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

Increase gap between ELS and the subsequent event to prevent overlap #7391

Merged
merged 3 commits into from
Dec 17, 2021
Merged

Increase gap between ELS and the subsequent event to prevent overlap #7391

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a4ee11
Increase gap between ELS and the subsequent event to prevent overlap
t3chguy Dec 16, 2021
ec0018d
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into…
t3chguy Dec 16, 2021
2d97ee3
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into…
t3chguy Dec 17, 2021
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
5 changes: 5 additions & 0 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,11 @@ limitations under the License.
padding: 0 49px;
}

// increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
.mx_EventListSummary[data-layout=bubble][data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
margin-top: 20px;
}

/* events that do not require bubble layout */
.mx_EventListSummary[data-layout=bubble],
.mx_EventTile.mx_EventTile_bad[data-layout=bubble] {
Expand Down
5 changes: 3 additions & 2 deletions src/components/views/elements/MemberEventListSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,15 @@ export default class MemberEventListSummary extends React.Component<IProps> {
layout: Layout.Group,
};

shouldComponentUpdate(nextProps) {
shouldComponentUpdate(nextProps: IProps): boolean {
// Update if
// - The number of summarised events has changed
// - or if the summary is about to toggle to become collapsed
// - or if there are fewEvents, meaning the child eventTiles are shown as-is
return (
nextProps.events.length !== this.props.events.length ||
nextProps.events.length < this.props.threshold
nextProps.events.length < this.props.threshold ||
nextProps.layout !== this.props.layout
Comment on lines +93 to +101
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this actually fixes a bug which would let data-layout desync, any rendered MELS wouldn't update their layout.

);
}

Expand Down