Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Remove bubble from around location events #7459

Merged
merged 5 commits into from
Jan 10, 2022
Merged

Remove bubble from around location events #7459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2e318d7
Remove bubble from around location events
t3chguy Jan 4, 2022
d9c3d6a
Fix timestamp for locations in bubble events
t3chguy Jan 4, 2022
1fe8cd8
Fix bubble corners on location events
t3chguy Jan 4, 2022
62dcb40
Tidy implementation
t3chguy Jan 4, 2022
0806441
delint
t3chguy Jan 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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);
Expand All @@ -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);
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/views/rooms/EventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1119,7 +1119,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,
Expand Down
8 changes: 7 additions & 1 deletion src/utils/EventUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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
Expand Down