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

Fix image preview sizing for edge cases #8322

Merged
merged 1 commit into from
Apr 14, 2022
Merged

Fix image preview sizing for edge cases #8322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 6 additions & 0 deletions res/css/views/messages/_MImageBody.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@ $timeline-image-border-radius: 8px;
// Necessary for the border radius to apply correctly to the placeholder
overflow: hidden;
contain: paint;

min-height: $font-44px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: we shouldn't use the font variables for non-font usecases, unless this is meant to be relative to a message of x lines or something?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The idea is to have this be 2x the line height of a regular text message. Regular text messages have a line-height defined as $font-22px, so the ideal value would be calc(2 * $font-22px).

min-width: $font-44px;
display: flex;
justify-content: center;
align-items: center;
}

.mx_MImageBody_thumbnail {
Expand Down
5 changes: 5 additions & 0 deletions res/css/views/rooms/_EventBubbleTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,11 @@ limitations under the License.
padding-right: 48px;
}

.mx_MImageBody_thumbnail_container {
min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
}

.mx_CallEvent {
background-color: unset;

Expand Down
9 changes: 8 additions & 1 deletion src/components/views/messages/MImageBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,10 +364,12 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {

let infoWidth: number;
let infoHeight: number;
let infoSvg = false;

if (content.info?.w && content.info?.h) {
infoWidth = content.info.w;
infoHeight = content.info.h;
infoSvg = content.info.mimetype.startsWith("image/svg");
} else {
// Whilst the image loads, display nothing. We also don't display a blurhash image
// because we don't really know what size of image we'll end up with.
Expand Down Expand Up @@ -449,6 +451,11 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
'mx_MImageBody_placeholder--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
});

// many SVGs don't have an intrinsic size if used in <img> elements.
// due to this we have to set our desired width directly.
// this way if the image is forced to shrink, the height adapts appropriately.
const sizing = infoSvg ? { maxHeight, maxWidth, width: maxWidth } : { maxHeight, maxWidth };

const thumbnail = (
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight, maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}>
<SwitchTransition mode="out-in">
Expand All @@ -463,7 +470,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
</CSSTransition>
</SwitchTransition>

<div style={{ maxHeight, maxWidth }}>
<div style={sizing}>
{ img }
{ gifLabel }
</div>
Expand Down