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

Bubble layout fixes to media events #7615

Merged
merged 6 commits into from
Jan 24, 2022
Merged

Bubble layout fixes to media events #7615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
02b9298
Fix bubble corners of file and audio pills to match image & messages
t3chguy Jan 24, 2022
b6f663d
Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into…
t3chguy Jan 24, 2022
ea8b16f
Correct the timestamp colour for non-image media too
t3chguy Jan 24, 2022
56722d6
Fix audio messages not properly shrinking at narrow widths in bubble …
t3chguy Jan 24, 2022
95ea23a
Fix ELS issues which broke redactions in bubble layout
t3chguy Jan 24, 2022
16c4987
delint
t3chguy Jan 24, 2022
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
47 changes: 29 additions & 18 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,8 +128,9 @@ limitations under the License.

.mx_MImageBody .mx_MImageBody_thumbnail,
.mx_MImageBody::before,
.mx_MediaBody,
.mx_MLocationBody_map {
border-bottom-right-radius: var(--cornerRadius);
border-bottom-right-radius: var(--cornerRadius) !important;
}
}

Expand All @@ -151,8 +152,9 @@ limitations under the License.

.mx_MImageBody .mx_MImageBody_thumbnail,
.mx_MImageBody::before,
.mx_MediaBody,
.mx_MLocationBody_map {
border-bottom-left-radius: var(--cornerRadius);
border-bottom-left-radius: var(--cornerRadius) !important;
}
}

Expand Down Expand Up @@ -215,8 +217,14 @@ limitations under the License.
z-index: 3; // above media and location share maps
}

// we put the timestamps for media (other than stickers) atop the media along with a gradient to aid visibility
&.mx_EventTile_mediaLine:not(.mx_EventTile_sticker) {
&.mx_EventTile_mediaLine .mx_MVoiceMessageBody {
// allow the event to be collapsed, this causes the waveform to get cropped
min-width: 0;
}

// we put the timestamps for media (other than stickers) atop the media
// for images we also apply a linear gradient and change the timestamp colour to aid readability
&.mx_EventTile_mediaLine.mx_EventTile_image {
.mx_MessageTimestamp {
color: #ffffff; // regardless of theme, always visible on the below gradient
}
Expand Down Expand Up @@ -248,26 +256,23 @@ limitations under the License.
}
}

//noinspection CssReplaceWithShorthandSafely
.mx_MImageBody {
width: 100%;
height: 100%;

//noinspection CssReplaceWithShorthandSafely
.mx_MImageBody_thumbnail {
// Note: This is intentionally not compressed because the browser gets confused
// when it is all combined. We're effectively unsetting the border radius then
// setting the two corners we care about manually.
border-radius: unset;
border-top-left-radius: var(--cornerRadius);
border-top-right-radius: var(--cornerRadius);

&.mx_MImageBody_thumbnail--blurhash {
position: unset;
}
.mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
position: unset;
}
}

//noinspection CssReplaceWithShorthandSafely
.mx_MImageBody .mx_MImageBody_thumbnail,
.mx_MediaBody {
border-radius: unset;
border-top-left-radius: var(--cornerRadius);
border-top-right-radius: var(--cornerRadius);
}

.mx_EventTile_e2eIcon {
flex-shrink: 0; // keep it at full size
}
Expand All @@ -284,6 +289,7 @@ limitations under the License.

.mx_MImageBody .mx_MImageBody_thumbnail,
.mx_MImageBody::before,
.mx_MediaBody,
.mx_MLocationBody_map {
border-top-left-radius: 0;
}
Expand All @@ -293,6 +299,7 @@ limitations under the License.

.mx_MImageBody .mx_MImageBody_thumbnail,
.mx_MImageBody::before,
.mx_MediaBody,
.mx_MLocationBody_map {
border-bottom-left-radius: var(--cornerRadius);
}
Expand All @@ -303,6 +310,7 @@ limitations under the License.

.mx_MImageBody .mx_MImageBody_thumbnail,
.mx_MImageBody::before,
.mx_MediaBody,
.mx_MLocationBody_map {
border-top-right-radius: 0;
}
Expand All @@ -312,6 +320,7 @@ limitations under the License.

.mx_MImageBody .mx_MImageBody_thumbnail,
.mx_MImageBody::before,
.mx_MediaBody,
.mx_MLocationBody_map {
border-bottom-right-radius: var(--cornerRadius);
}
Expand Down Expand Up @@ -523,9 +532,11 @@ limitations under the License.
// ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
// that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
.mx_EventListSummary[data-expanded=true][data-layout=bubble] {
display: flex;
flex-direction: column;
margin: 0;

.mx_EventTile {
.mx_EventTile_info {
padding: 2px 0;
margin-right: 0;

Expand Down
4 changes: 4 additions & 0 deletions src/components/views/rooms/EventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1121,6 +1121,10 @@ export default class EventTile extends React.Component<IProps, IState> {

const lineClasses = classNames("mx_EventTile_line", {
mx_EventTile_mediaLine: isProbablyMedia,
mx_EventTile_image: (
this.props.mxEvent.getType() === EventType.RoomMessage &&
this.props.mxEvent.getContent().msgtype === MsgType.Image
),
mx_EventTile_sticker: this.props.mxEvent.getType() === EventType.Sticker,
mx_EventTile_emote: (
this.props.mxEvent.getType() === EventType.RoomMessage &&
Expand Down