imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Show file name and size on images on hover (#6511)

Browse source 
* Show simple file name and size on images/videos

Fixes https://github.com/vector-im/element-web/issues/18197

* i18n

* Fix bad merge

* Add hover state tracking

* Only show on timeline-like objects

* Match new design requirements

* Remove video support (deemed not needed)

* Colouring and sizing from design

* Include file name in lightbox

* Revert changes to videos since we don't need them

* i18n

* Iterate PR

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Travis Ralston 2022-05-14 02:31:53 -06:00 • committed by GitHub
parent f54d54b3ff
commit f51a6b6da4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 52 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -37,6 +37,7 @@ import { ImageSize, suggestedSize as suggestedImageSize } from "../../../setting
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import { blobIsAnimated, mayBeAnimated } from '../../../utils/Image';
import { presentableTextForFile } from "../../../utils/FileUtils";
enum Placeholder {
NoImage,
@ -446,6 +447,21 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
}
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>
);
}
const classes = classNames({
'mx_MImageBody_placeholder': true,
'mx_MImageBody_placeholder--blurhash': this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
@ -473,6 +489,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
<div style={sizing}>
{ img }
{ gifLabel }
{ banner }
</div>
{ /* HACK: This div fills out space while the image loads, to prevent scroll jumps */ }