mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +03:00
Code Issues Projects Releases Packages Wiki Activity

Bubble layout fixes to media events (#7615)

Browse source
This commit is contained in:
Michael Telatynski 2022-01-24 19:01:20 +00:00 committed by GitHub
parent 20e6d36df7
commit 777af0cf10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -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;
}
}
@ -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;
}
}
@ -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
}
@ -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
}
@ -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;
}
@ -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);
}
@ -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;
}
@ -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);
}
@ -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;

4
src/components/views/rooms/EventTile.tsx
View file

@ -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 &&