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

* 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

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 }