OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #6423 from matrix-org/gsouquet/fix-18077

pull/21833/head
Germain 2021-07-21 09:43:15 +01:00 committed by GitHub
parent 8e01080711 b31b8f1b41
commit dfa85b00d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
res/css/views/messages/_MImageBody.scss
View File

@ -21,11 +21,7 @@ $timelineImageBorderRadius: 4px;
} }
.mx_MImageBody_thumbnail { .mx_MImageBody_thumbnail {
position: absolute; object-fit: contain;
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: $timelineImageBorderRadius; border-radius: $timelineImageBorderRadius;
display: flex; display: flex;

2
src/components/views/messages/MImageBody.tsx
View File

@ -361,8 +361,6 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
const thumbnail = ( const thumbnail = (
<div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }} > <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px", maxWidth: maxWidth + "px" }} >
{ /* Calculate aspect ratio, using %padding will size _container correctly */ }
<div style={{ paddingBottom: forcedHeight ? (forcedHeight + "px") : ((100 * infoHeight / infoWidth) + '%') }} />
{ showPlaceholder && { showPlaceholder &&
<div className="mx_MImageBody_thumbnail" style={{ <div className="mx_MImageBody_thumbnail" style={{
// Constrain width here so that spinner appears central to the loaded thumbnail // Constrain width here so that spinner appears central to the loaded thumbnail

12
src/components/views/messages/MStickerBody.js → src/components/views/messages/MStickerBody.tsx
View File

@ -23,16 +23,16 @@ import { BLURHASH_FIELD } from "../../../ContentMessages";
@replaceableComponent("views.messages.MStickerBody") @replaceableComponent("views.messages.MStickerBody")
export default class MStickerBody extends MImageBody { export default class MStickerBody extends MImageBody {
// Mostly empty to prevent default behaviour of MImageBody // Mostly empty to prevent default behaviour of MImageBody
onClick(ev) { protected onClick = (ev: React.MouseEvent) => {
ev.preventDefault(); ev.preventDefault();
if (!this.state.showImage) { if (!this.state.showImage) {
this.showImage(); this.showImage();
} }
} };
// MStickerBody doesn't need a wrapping `<a href=...>`, but it does need extra padding // MStickerBody doesn't need a wrapping `<a href=...>`, but it does need extra padding
// which is added by mx_MStickerBody_wrapper // which is added by mx_MStickerBody_wrapper
wrapImage(contentUrl, children) { protected wrapImage(contentUrl: string, children: React.ReactNode): JSX.Element {
let onClick = null; let onClick = null;
if (!this.state.showImage) { if (!this.state.showImage) {
onClick = this.onClick; onClick = this.onClick;
@ -42,13 +42,13 @@ export default class MStickerBody extends MImageBody {
// Placeholder to show in place of the sticker image if // Placeholder to show in place of the sticker image if
// img onLoad hasn't fired yet. // img onLoad hasn't fired yet.
getPlaceholder(width, height) { protected getPlaceholder(width: number, height: number): JSX.Element {
if (this.props.mxEvent.getContent().info[BLURHASH_FIELD]) return super.getPlaceholder(width, height); if (this.props.mxEvent.getContent().info[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
return <img src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />; return <img src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
} }
// Tooltip to show on mouse over // Tooltip to show on mouse over
getTooltip() { protected getTooltip(): JSX.Element {
const content = this.props.mxEvent && this.props.mxEvent.getContent(); const content = this.props.mxEvent && this.props.mxEvent.getContent();
if (!content || !content.body || !content.info || !content.info.w) return null; if (!content || !content.body || !content.info || !content.info.w) return null;
@ -60,7 +60,7 @@ export default class MStickerBody extends MImageBody {
} }
// Don't show "Download this_file.png ..." // Don't show "Download this_file.png ..."
getFileBody() { protected getFileBody() {
return null; return null;
} }
} }