paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-21 15:09:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

lightbox: Add tippy tooltip to lightbox title.

Browse Source 
This commit adds a tippy tooltip to the lightbox title which enables the
user to view the filename of an image if the filename is different than
the image title.

Fixes: #21333
This commit is contained in:
Austin Riba
2022-03-17 16:38:16 -07:00
committed by Tim Abbott
parent 3df0cacd9e
commit 0943b38300
2 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
static/js/lightbox.js
View File

@@ -210,9 +210,11 @@ function display_image(payload) {
img.src = payload.source; img.src = payload.source;
$img_container.html(img).show(); $img_container.html(img).show();
const filename = payload.url?.split("/").pop();
$(".image-description .title") $(".image-description .title")
.text(payload.title || "N/A") .text(payload.title || "N/A")
.prop("title", payload.title || "N/A"); .attr("aria-label", payload.title || "N/A")
.prop("data-filename", filename || "N/A");
$(".image-description .user").text(payload.user).prop("title", payload.user); $(".image-description .user").text(payload.user).prop("title", payload.user);
$(".image-actions .open, .image-actions .download").attr("href", payload.source); $(".image-actions .open, .image-actions .download").attr("href", payload.source);
@@ -411,7 +413,7 @@ export function parse_image_data(image) {
} }
const payload = { const payload = {
user: sender_full_name, user: sender_full_name,
title: $parent.attr("title"), title: $parent.attr("aria-label") || $parent.attr("href"),
type, type,
preview: preview_src, preview: preview_src,
source, source,

20
static/js/tippyjs.js
View File

@@ -267,4 +267,24 @@ export function initialize() {
instance.destroy(); instance.destroy();
}, },
}); });
delegate("body", {
target: ".image-info-wrapper > .image-description > .title",
appendTo: () => document.body,
onShow(instance) {
const title = $(instance.reference).attr("aria-label");
const filename = $(instance.reference).prop("data-filename");
const $markup = $("<span>").text(title);
if (title !== filename) {
// If the image title is the same as the filename, there's no reason
// to show this next line.
const second_line = $t({defaultMessage: "File name: {filename}"}, {filename});
$markup.append($("<br>"), $("<span>").text(second_line));
}
instance.setContent($markup[0]);
},
onHidden(instance) {
instance.destroy();
},
});
} }