diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 17033f922c7..4b5a6757195 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -92,6 +92,10 @@ limitations under the License. &[data-self=false] { .mx_EventTile_line { border-bottom-right-radius: var(--cornerRadius); + + .mx_MImageBody .mx_MImageBody_thumbnail { + border-bottom-right-radius: var(--cornerRadius); + } } .mx_EventTile_avatar { left: -34px; @@ -106,12 +110,16 @@ limitations under the License. } &[data-self=true] { .mx_EventTile_line { - border-bottom-left-radius: var(--cornerRadius); float: right; + border-bottom-left-radius: var(--cornerRadius); > a { left: auto; right: -68px; } + + .mx_MImageBody .mx_MImageBody_thumbnail { + border-bottom-left-radius: var(--cornerRadius); + } } .mx_ThreadInfo { @@ -147,33 +155,62 @@ limitations under the License. .mx_EventTile_line { position: relative; - padding: var(--gutterSize); - border-top-left-radius: var(--cornerRadius); - border-top-right-radius: var(--cornerRadius); - background: var(--backgroundColor); display: flex; gap: 5px; margin: 0 -12px 0 -9px; + border-top-left-radius: var(--cornerRadius); + border-top-right-radius: var(--cornerRadius); > a { position: absolute; padding: 10px 20px; top: 0; left: -68px; } + + //noinspection CssReplaceWithShorthandSafely + .mx_MImageBody .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_EventTile_line:not(.mx_EventTile_mediaLine) { + padding: var(--gutterSize); + background: var(--backgroundColor); } &.mx_EventTile_continuation[data-self=false] .mx_EventTile_line { border-top-left-radius: 0; + + .mx_MImageBody .mx_MImageBody_thumbnail { + border-top-left-radius: 0; + } } &.mx_EventTile_lastInSection[data-self=false] .mx_EventTile_line { border-bottom-left-radius: var(--cornerRadius); + + .mx_MImageBody .mx_MImageBody_thumbnail { + border-bottom-left-radius: var(--cornerRadius); + } } &.mx_EventTile_continuation[data-self=true] .mx_EventTile_line { border-top-right-radius: 0; + + .mx_MImageBody .mx_MImageBody_thumbnail { + border-top-right-radius: 0; + } } &.mx_EventTile_lastInSection[data-self=true] .mx_EventTile_line { border-bottom-right-radius: var(--cornerRadius); + + .mx_MImageBody .mx_MImageBody_thumbnail { + border-bottom-right-radius: var(--cornerRadius); + } } .mx_EventTile_avatar { diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 8f9915132e8..30091ea8a27 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -63,6 +63,7 @@ import { MessagePreviewStore } from '../../../stores/room-list/MessagePreviewSto import { logger } from "matrix-js-sdk/src/logger"; import { TimelineRenderingType } from "../../../contexts/RoomContext"; +import { MediaEventHelper } from "../../../utils/MediaEventHelper"; const eventTileTypes = { [EventType.RoomMessage]: 'messages.MessageEvent', @@ -994,6 +995,12 @@ export default class EventTile extends React.Component { } const EventTileType = sdk.getComponent(tileHandler); + const isProbablyMedia = MediaEventHelper.isEligible(this.props.mxEvent); + + const lineClasses = classNames({ + mx_EventTile_line: true, + mx_EventTile_mediaLine: isProbablyMedia, + }); const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1); const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted; @@ -1209,7 +1216,7 @@ export default class EventTile extends React.Component { { timestamp } , -
+
{ { timestamp }
, -
+
{ replyChain } { "aria-atomic": true, "data-scroll-tokens": scrollToken, }, [ -
+
{ { sender } { ircPadlock } { avatar } -
+
{ groupTimestamp } { groupPadlock } { replyChain }