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

4
src/components/views/elements/ImageView.tsx
View file

@ -38,6 +38,7 @@ import UIStore from '../../../stores/UIStore';
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
import { presentableTextForFile } from "../../../utils/FileUtils";
// Max scale to keep gaps around the image
const MAX_SCALE = 0.95;
@ -546,6 +547,9 @@ export default class ImageView extends React.Component<IProps, IState> {
>
<div className="mx_ImageView_panel">
{ info }
<div className="mx_ImageView_title">
{ presentableTextForFile(this.props.mxEvent.getContent(), _t("Image"), true) }
</div>
<div className="mx_ImageView_toolbar">
{ zoomOutButton }
{ zoomInButton }

2
src/components/views/messages/MFileBody.tsx
View file

@ -344,7 +344,7 @@ export default class MFileBody extends React.Component<IProps, IState> {
</a>
{ this.context.timelineRenderingType === TimelineRenderingType.File && (
<div className="mx_MImageBody_size">
{ this.content.info && this.content.info.size ? filesize(this.content.info.size) : "" }
{ this.content.info?.size ? filesize(this.content.info.size) : "" }
</div>
) }
</div> }

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 */ }