mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-26 19:26:04 +03:00
Code Issues Projects Releases Packages Wiki Activity

Hide image banner on stickers, they have a tooltip already (#8641)

Browse source
This commit is contained in:
Michael Telatynski 2022-05-18 10:08:33 +01:00 committed by GitHub
parent 65e27cd6be
commit ce73b9988e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
res/css/views/messages/_MImageReplyBody.scss
View file

@ -20,10 +20,6 @@ limitations under the License.
.mx_MImageBody_thumbnail_container {
flex: 1;
margin-right: 4px;
.mx_MImageBody_banner {
display: none;
}
}
.mx_MImageReplyBody_info {

30
src/components/views/messages/MImageBody.tsx
View file

@ -355,6 +355,22 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
}
}
protected getBanner(content: IMediaEventContent): JSX.Element {
// Hide it for the threads list & the file panel where we show it as text anyway.
if ([
TimelineRenderingType.ThreadsList,
TimelineRenderingType.File,
].includes(this.context.timelineRenderingType)) {
return null;
}
return (
<span className="mx_MImageBody_banner">
{ presentableTextForFile(content, _t("Image"), true, true) }
</span>
);
}
protected messageContent(
contentUrl: string,
thumbUrl: string,
@ -448,18 +464,8 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
}
let banner: JSX.Element;
const isTimeline = [
TimelineRenderingType.Room,
TimelineRenderingType.Search,
TimelineRenderingType.Thread,
TimelineRenderingType.Notification,
].includes(this.context.timelineRenderingType);
if (this.state.showImage && this.state.hover && isTimeline) {
banner = (
<span className="mx_MImageBody_banner">
{ presentableTextForFile(content, _t("Image"), true, true) }
</span>
);
if (this.state.showImage && this.state.hover) {
banner = this.getBanner(content);
}
const classes = classNames({

4
src/components/views/messages/MImageReplyBody.tsx
View file

@ -40,6 +40,10 @@ export default class MImageReplyBody extends MImageBody {
return presentableTextForFile(this.props.mxEvent.getContent(), sticker ? _t("Sticker") : _t("Image"), !sticker);
}
protected getBanner(content: IMediaEventContent): JSX.Element {
return null; // we don't need a banner, nor have space for one
}
render() {
if (this.state.error) {
return super.render();

5
src/components/views/messages/MStickerBody.tsx
View file

@ -19,6 +19,7 @@ import React from 'react';
import MImageBody from './MImageBody';
import { BLURHASH_FIELD } from "../../../utils/image-media";
import Tooltip from "../elements/Tooltip";
import { IMediaEventContent } from "../../../customisations/models/IMediaEventContent";
export default class MStickerBody extends MImageBody {
// Mostly empty to prevent default behaviour of MImageBody
@ -69,4 +70,8 @@ export default class MStickerBody extends MImageBody {
protected getFileBody() {
return null;
}
protected getBanner(content: IMediaEventContent): JSX.Element {
return null; // we don't need a banner, we have a tooltip
}
}