diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss index adaf66134e..53c0a03a52 100644 --- a/res/css/views/rooms/_EventBubbleTile.scss +++ b/res/css/views/rooms/_EventBubbleTile.scss @@ -163,7 +163,7 @@ limitations under the License. padding: 4px 8px; bottom: 0; right: 0; - z-index: 1; // above media + z-index: 3; // above media and location share maps } //noinspection CssReplaceWithShorthandSafely @@ -181,7 +181,7 @@ limitations under the License. } } - .mx_EventTile_line:not(.mx_EventTile_mediaLine) { + &:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) { padding: var(--gutterSize); padding-right: 60px; // space for the timestamp background: var(--backgroundColor); @@ -190,14 +190,14 @@ limitations under the License. &.mx_EventTile_continuation[data-self=false] .mx_EventTile_line { border-top-left-radius: 0; - .mx_MImageBody .mx_MImageBody_thumbnail { + .mx_MImageBody .mx_MImageBody_thumbnail, .mx_MLocationBody_map { 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 { + .mx_MImageBody .mx_MImageBody_thumbnail, .mx_MLocationBody_map { border-bottom-left-radius: var(--cornerRadius); } } @@ -205,14 +205,14 @@ limitations under the License. &.mx_EventTile_continuation[data-self=true] .mx_EventTile_line { border-top-right-radius: 0; - .mx_MImageBody .mx_MImageBody_thumbnail { + .mx_MImageBody .mx_MImageBody_thumbnail, .mx_MLocationBody_map { 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 { + .mx_MImageBody .mx_MImageBody_thumbnail, .mx_MLocationBody_map { border-bottom-right-radius: var(--cornerRadius); } } diff --git a/src/components/views/rooms/EventTile.tsx b/src/components/views/rooms/EventTile.tsx index 53292015bf..ca5e1f3820 100644 --- a/src/components/views/rooms/EventTile.tsx +++ b/src/components/views/rooms/EventTile.tsx @@ -1123,7 +1123,7 @@ export default class EventTile extends React.Component { mx_EventTile_unverified: !isBubbleMessage && this.state.verified === E2EState.Warning, mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2EState.Unknown, mx_EventTile_bad: isEncryptionFailure, - mx_EventTile_emote: msgtype === 'm.emote', + mx_EventTile_emote: msgtype === MsgType.Emote, mx_EventTile_noSender: this.props.hideSender, mx_EventTile_clamp: this.props.tileShape === TileShape.ThreadPanel, mx_EventTile_noBubble: noBubbleEvent, diff --git a/src/utils/EventUtils.ts b/src/utils/EventUtils.ts index 8c7731f2b8..4d390db1ab 100644 --- a/src/utils/EventUtils.ts +++ b/src/utils/EventUtils.ts @@ -19,6 +19,7 @@ import { EventType, MsgType, RelationType } from "matrix-js-sdk/src/@types/event import { MatrixClient } from 'matrix-js-sdk/src/client'; import { logger } from 'matrix-js-sdk/src/logger'; import { POLL_START_EVENT_TYPE } from "matrix-js-sdk/src/@types/polls"; +import { LOCATION_EVENT_TYPE } from 'matrix-js-sdk/src/@types/location'; import { MatrixClientPeg } from '../MatrixClientPeg'; import shouldHideEvent from "../shouldHideEvent"; @@ -148,7 +149,12 @@ export function getEventDisplayInfo(mxEvent: MatrixEvent): { ); // Some non-info messages want to be rendered in the appropriate bubble column but without the bubble background const noBubbleEvent = ( - POLL_START_EVENT_TYPE.matches(eventType) + POLL_START_EVENT_TYPE.matches(eventType) || + LOCATION_EVENT_TYPE.matches(eventType) || + ( + eventType === EventType.RoomMessage && + LOCATION_EVENT_TYPE.matches(msgtype) + ) ); // If we're showing hidden events in the timeline, we should use the