Made attached images clickable — no more fiddling with the spyglass pictogram. Augmented the "Enlarge" button's function to retain it.

864859dd6bb5fa53d2c0fa0c4eebeb28f4892f1f

Gness Erquint <gness.na@gmail.com>

2 files changed, +14 -4Ignore whitespace
public/scripts/chats.js+10 -4
@@ -575,8 +575,8 @@ export function isExternalMediaAllowed() {
575 return !power_user.forbid_external_media;575 return !power_user.forbid_external_media;
576}576}
577577
578async function enlargeMessageImage() {578function expandMessageImage(event) {
579 const mesBlock = $(this).closest('.mes');579 const mesBlock = $(event.currentTarget).closest('.mes');
580 const mesId = mesBlock.attr('mesid');580 const mesId = mesBlock.attr('mesid');
581 const message = chat[mesId];581 const message = chat[mesId];
582 const imgSrc = message?.extra?.image;582 const imgSrc = message?.extra?.image;
@@ -620,7 +620,12 @@ async function enlargeMessageImage() {
620 popup.completeCancelled();620 popup.completeCancelled();
621 });621 });
622622
623 await popup.show();623 popup.show();
624 return img;
625}
626
627function expandAndZoomMessageImage(event) {
628 expandMessageImage(event).click();
624}629}
625630
626async function deleteMessageImage() {631async function deleteMessageImage() {
@@ -1603,7 +1608,8 @@ jQuery(function () {
1603 reloadCurrentChat();1608 reloadCurrentChat();
1604 });1609 });
16051610
1606 $(document).on('click', '.mes_img_enlarge', enlargeMessageImage);1611 $(document).on('click', '.mes_img.img_inline', expandMessageImage);
1612 $(document).on('click', '.mes_img_enlarge', expandAndZoomMessageImage);
1607 $(document).on('click', '.mes_img_delete', deleteMessageImage);1613 $(document).on('click', '.mes_img_delete', deleteMessageImage);
16081614
1609 $('#file_form_input').on('change', async () => {1615 $('#file_form_input').on('change', async () => {
public/style.css+4 -0
@@ -4990,6 +4990,10 @@ a:hover {
4990 padding: 0.5rem;4990 padding: 0.5rem;
4991}4991}
49924992
4993.mes_img.img_inline {
4994 cursor: pointer;
4995}
4996
4993.mes_img {4997.mes_img {
4994 border-radius: 10px;4998 border-radius: 10px;
4995 max-width: 100%;4999 max-width: 100%;