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

Don't apply message bubble visual style to media messages #7040

Merged
merged 2 commits into from
Oct 28, 2021
Merged

Don't apply message bubble visual style to media messages #7040

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
325132e
PSFD-457: Don't apply message bubble visual style to media messages
turt2live Oct 27, 2021
091e4fb
Match corner rounding for images
turt2live Oct 27, 2021
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
47 changes: 42 additions & 5 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
15 changes: 11 additions & 4 deletions src/components/views/rooms/EventTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -994,6 +995,12 @@ export default class EventTile extends React.Component<IProps, IState> {
}

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;
Expand Down Expand Up @@ -1209,7 +1216,7 @@ export default class EventTile extends React.Component<IProps, IState> {
{ timestamp }
</a>
</div>,
<div className="mx_EventTile_line" key="mx_EventTile_line">
<div className={lineClasses} key="mx_EventTile_line">
<EventTileType ref={this.tile}
mxEvent={this.props.mxEvent}
highlights={this.props.highlights}
Expand Down Expand Up @@ -1257,7 +1264,7 @@ export default class EventTile extends React.Component<IProps, IState> {
{ timestamp }
</a>
</div>,
<div className="mx_EventTile_line" key="mx_EventTile_line">
<div className={lineClasses} key="mx_EventTile_line">
{ replyChain }
<EventTileType ref={this.tile}
mxEvent={this.props.mxEvent}
Expand All @@ -1281,7 +1288,7 @@ export default class EventTile extends React.Component<IProps, IState> {
"aria-atomic": true,
"data-scroll-tokens": scrollToken,
}, [
<div className="mx_EventTile_line" key="mx_EventTile_line">
<div className={lineClasses} key="mx_EventTile_line">
<EventTileType ref={this.tile}
mxEvent={this.props.mxEvent}
highlights={this.props.highlights}
Expand Down Expand Up @@ -1341,7 +1348,7 @@ export default class EventTile extends React.Component<IProps, IState> {
{ sender }
{ ircPadlock }
{ avatar }
<div className="mx_EventTile_line" key="mx_EventTile_line">
<div className={lineClasses} key="mx_EventTile_line">
{ groupTimestamp }
{ groupPadlock }
{ replyChain }
Expand Down