diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index 7667b7e556..f4d0e39139 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -126,12 +126,14 @@ limitations under the License. border-bottom-right-radius: var(--cornerRadius); } } + .mx_EventTile_avatar { left: -34px; } --backgroundColor: $eventbubble-others-bg; } + &[data-self=true] { .mx_EventTile_line { float: right; @@ -144,6 +146,11 @@ limitations under the License. } } + .mx_EventTile_sticker { + // align timestamp with those inside bubbles + margin-right: 32px; + } + .mx_ThreadInfo { float: right; margin-right: calc(-1 * var(--gutterSize)); @@ -195,7 +202,8 @@ limitations under the License. z-index: 3; // above media and location share maps } - &.mx_EventTile_mediaLine { + // 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_MessageTimestamp { color: #ffffff; // regardless of theme, always visible on the below gradient } @@ -214,6 +222,18 @@ limitations under the License. } } + &.mx_EventTile_sticker { + > a { + // position timestamps for stickers to the right of the un-bubbled sticker + right: unset; + left: 100%; + } + + .mx_MStickerBody_wrapper { + padding: 0; + } + } + //noinspection CssReplaceWithShorthandSafely .mx_MImageBody { width: 100%; diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 0118f58757..4ebe8f2300 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1106,9 +1106,9 @@ 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, + const lineClasses = classNames("mx_EventTile_line", { mx_EventTile_mediaLine: isProbablyMedia, + mx_EventTile_sticker: this.props.mxEvent.getType() === EventType.Sticker, }); const isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);