Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Michael Telatynski 2021-12-17 09:28:10 +00:00 committed by GitHub
parent 39c4b78371
commit 818465a4d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -401,6 +401,11 @@ limitations under the License.
} }
} }
// 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 */ /* events that do not require bubble layout */
.mx_EventListSummary[data-layout=bubble], .mx_EventListSummary[data-layout=bubble],
.mx_EventTile.mx_EventTile_bad[data-layout=bubble] { .mx_EventTile.mx_EventTile_bad[data-layout=bubble] {

5
src/components/views/elements/MemberEventListSummary.tsx
View File

@ -90,14 +90,15 @@ export default class MemberEventListSummary extends React.Component<IProps> {
layout: Layout.Group, layout: Layout.Group,
}; };
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps: IProps): boolean {
// Update if // Update if
// - The number of summarised events has changed // - The number of summarised events has changed
// - or if the summary is about to toggle to become collapsed // - or if the summary is about to toggle to become collapsed
// - or if there are fewEvents, meaning the child eventTiles are shown as-is // - or if there are fewEvents, meaning the child eventTiles are shown as-is
return ( return (
nextProps.events.length !== this.props.events.length || nextProps.events.length !== this.props.events.length ||
nextProps.events.length < this.props.threshold nextProps.events.length < this.props.threshold ||
nextProps.layout !== this.props.layout
); );
} }