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

5
res/css/views/elements/_ImageView.scss
View file

@ -79,6 +79,11 @@ $button-gap: 24px;
font-weight: bold;
}
.mx_ImageView_title {
color: $lightbox-fg-color;
font-size: $font-12px;
}
.mx_ImageView_toolbar {
padding-right: 16px;
pointer-events: initial;

22
res/css/views/messages/_MImageBody.scss
View file

@ -17,6 +17,28 @@ limitations under the License.
$timeline-image-border-radius: 8px;
.mx_MImageBody_banner {
position: absolute;
bottom: 4px;
left: 4px;
padding: 4px;
border-radius: $timeline-image-border-radius;
font-size: $font-15px;
pointer-events: none; // let the cursor go through to the media underneath
// Trying to match the width of the image is surprisingly difficult, so arbitrarily break it off early.
max-width: min(100%, 350px);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
// Hardcoded colours because it's the same on all themes
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
}
.mx_MImageBody_placeholder {
// Position the placeholder on top of the thumbnail, so that the reveal animation can work
position: absolute;