Remove bubble from around location events (#7459)

Author: t3chguy

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,29 +190,29 @@ 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);
         }
     }
 
     &.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);
         }
     }

src/components/views/rooms/EventTile.tsx

@@ -1123,7 +1123,7 @@ export default class EventTile extends React.Component<IProps, IState> {
             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,

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