From 88ac43b04d9c3aadb6ffd83778e51becf90aae35 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 23 Aug 2022 15:58:00 +0200
Subject: [PATCH] Use an actual element for attachment/media previews

---
 com.woltlab.wcf/templates/mediaBBCodeTag.tpl  | 11 +++++-
 .../templates/messageFormAttachments.tpl      |  8 ++--
 .../files/acp/templates/mediaBBCodeTag.tpl    | 11 +++++-
 .../system/bbcode/AttachmentBBCode.class.php  | 20 +++++++++-
 .../install/files/style/ui/attachment.scss    | 39 ++++++++-----------
 5 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
index ff303a9342..881cf9c546 100644
--- a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
@@ -1,7 +1,16 @@
 {if !$removeLinks|isset}{assign var='removeLinks' value=false}{/if}
 <span class="mediaBBCode{if $float != 'none'} messageFloatObject{$float|ucfirst}{/if}">
 	{if $thumbnailSize != 'original'}
-		{if !$removeLinks}<a href="{$mediaLink}" class="embeddedAttachmentLink jsImageViewer">{/if}<img src="{$thumbnailLink}" alt="{$media->altText}" title="{$media->title}" width="{@$media->getThumbnailWidth($thumbnailSize)}" height="{@$media->getThumbnailHeight($thumbnailSize)}" loading="lazy">{if !$removeLinks}</a>{/if}
+		{if !$removeLinks}
+			<a href="{$mediaLink}" class="embeddedAttachmentLink jsImageViewer">
+		{/if}
+				<img src="{$thumbnailLink}" alt="{$media->altText}" title="{$media->title}" width="{@$media->getThumbnailWidth($thumbnailSize)}" height="{@$media->getThumbnailHeight($thumbnailSize)}" loading="lazy">
+		{if !$removeLinks}
+				<span class="embeddedAttachmentLinkEnlarge">
+					{icon size=24 name='magnifying-glass'}
+				</span>
+			</a>
+		{/if}
 	{else}
 		<img src="{$mediaLink}" alt="{$media->altText}" title="{$media->title}" width="{@$media->width}" height="{@$media->height}" loading="lazy">
 	{/if}
diff --git a/com.woltlab.wcf/templates/messageFormAttachments.tpl b/com.woltlab.wcf/templates/messageFormAttachments.tpl
index f78ea36f7d..31c755411b 100644
--- a/com.woltlab.wcf/templates/messageFormAttachments.tpl
+++ b/com.woltlab.wcf/templates/messageFormAttachments.tpl
@@ -15,12 +15,12 @@
 					</div>
 					
 					<ul class="buttonGroup">
-						<li><button class="button small jsObjectAction" data-object-action="delete" data-confirm-message="{lang}wcf.attachment.delete.sure{/lang}">{lang}wcf.global.button.delete{/lang}</button></li>
+						<li><button type="button" class="button small jsObjectAction" data-object-action="delete" data-confirm-message="{lang}wcf.attachment.delete.sure{/lang}">{lang}wcf.global.button.delete{/lang}</button></li>
 						{if $attachment->isImage}
-							{if $attachment->thumbnailType}<li><button class="button small jsButtonAttachmentInsertThumbnail" data-object-id="{@$attachment->attachmentID}" data-url="{$attachment->getThumbnailLink('thumbnail')}">{lang}wcf.attachment.insertThumbnail{/lang}</button></li>{/if}
-							<li><button class="button small jsButtonAttachmentInsertFull" data-object-id="{@$attachment->attachmentID}" data-url="{$attachment->getLink()}">{lang}wcf.attachment.insertFull{/lang}</button></li>
+							{if $attachment->thumbnailType}<li><button type="button" class="button small jsButtonAttachmentInsertThumbnail" data-object-id="{@$attachment->attachmentID}" data-url="{$attachment->getThumbnailLink('thumbnail')}">{lang}wcf.attachment.insertThumbnail{/lang}</button></li>{/if}
+							<li><button type="button" class="button small jsButtonAttachmentInsertFull" data-object-id="{@$attachment->attachmentID}" data-url="{$attachment->getLink()}">{lang}wcf.attachment.insertFull{/lang}</button></li>
 						{else}
-							<li><button class="button small jsButtonInsertAttachment" data-object-id="{@$attachment->attachmentID}">{lang}wcf.attachment.insert{/lang}</button></li>
+							<li><button type="button" class="button small jsButtonInsertAttachment" data-object-id="{@$attachment->attachmentID}">{lang}wcf.attachment.insert{/lang}</button></li>
 						{/if}
 					</ul>
 				</div>
diff --git a/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl b/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
index ff303a9342..881cf9c546 100644
--- a/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
+++ b/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
@@ -1,7 +1,16 @@
 {if !$removeLinks|isset}{assign var='removeLinks' value=false}{/if}
 <span class="mediaBBCode{if $float != 'none'} messageFloatObject{$float|ucfirst}{/if}">
 	{if $thumbnailSize != 'original'}
-		{if !$removeLinks}<a href="{$mediaLink}" class="embeddedAttachmentLink jsImageViewer">{/if}<img src="{$thumbnailLink}" alt="{$media->altText}" title="{$media->title}" width="{@$media->getThumbnailWidth($thumbnailSize)}" height="{@$media->getThumbnailHeight($thumbnailSize)}" loading="lazy">{if !$removeLinks}</a>{/if}
+		{if !$removeLinks}
+			<a href="{$mediaLink}" class="embeddedAttachmentLink jsImageViewer">
+		{/if}
+				<img src="{$thumbnailLink}" alt="{$media->altText}" title="{$media->title}" width="{@$media->getThumbnailWidth($thumbnailSize)}" height="{@$media->getThumbnailHeight($thumbnailSize)}" loading="lazy">
+		{if !$removeLinks}
+				<span class="embeddedAttachmentLinkEnlarge">
+					{icon size=24 name='magnifying-glass'}
+				</span>
+			</a>
+		{/if}
 	{else}
 		<img src="{$mediaLink}" alt="{$media->altText}" title="{$media->title}" width="{@$media->width}" height="{@$media->height}" loading="lazy">
 	{/if}
diff --git a/wcfsetup/install/files/lib/system/bbcode/AttachmentBBCode.class.php b/wcfsetup/install/files/lib/system/bbcode/AttachmentBBCode.class.php
index e3d3484189..630bda3990 100644
--- a/wcfsetup/install/files/lib/system/bbcode/AttachmentBBCode.class.php
+++ b/wcfsetup/install/files/lib/system/bbcode/AttachmentBBCode.class.php
@@ -6,6 +6,7 @@ use wcf\data\attachment\Attachment;
 use wcf\data\attachment\GroupedAttachmentList;
 use wcf\system\message\embedded\object\MessageEmbeddedObjectManager;
 use wcf\system\request\LinkHandler;
+use wcf\system\style\FontAwesomeIcon;
 use wcf\system\WCF;
 use wcf\util\StringUtil;
 
@@ -121,11 +122,22 @@ class AttachmentBBCode extends AbstractBBCode
                     }
 
                     if (!$hasParentLink && ($attachment->width > ATTACHMENT_THUMBNAIL_WIDTH || $attachment->height > ATTACHMENT_THUMBNAIL_HEIGHT)) {
-                        $result = '<a href="' . $source . '" title="' . $title . '" class="embeddedAttachmentLink jsImageViewer' . ($class ? ' ' . $class : '') . '">' . $result . '</a>';
+                        $icon = FontAwesomeIcon::fromValues('magnifying-glass')->toHtml(24);
+                        $result = <<<HTML
+                        <a href="{$source}" title="{$title}" class="embeddedAttachmentLink jsImageViewer {$class}'">
+                            {$result}
+                            <span class="embeddedAttachmentLinkEnlarge">
+                                {$icon}
+                            </span>
+                        </a>
+                        HTML;
                     } else {
                         $result = '<span title="' . $title . '"' . ($class ? (' class="' . $class . '"') : '') . '>' . $result . '</span>';
                     }
                 } else {
+                    $icon = FontAwesomeIcon::fromValues('magnifying-glass')->toHtml(24);
+                    $enlarge = '<span class="embeddedAttachmentLinkEnlarge">' . $icon . '</span>';
+
                     $linkParameters = [
                         'object' => $attachment,
                     ];
@@ -162,8 +174,12 @@ class AttachmentBBCode extends AbstractBBCode
                         $result = '<a href="' . StringUtil::encodeHTML(LinkHandler::getInstance()->getLink(
                             'Attachment',
                             ['object' => $attachment]
-                        )) . '" title="' . StringUtil::encodeHTML($attachment->filename) . '" class="embeddedAttachmentLink jsImageViewer' . ($class ? ' ' . $class : '') . '">' . $result . '</a>';
+                        )) . '" title="' . StringUtil::encodeHTML($attachment->filename) . '" class="embeddedAttachmentLink jsImageViewer' . ($class ? ' ' . $class : '') . '">' . $result . $enlarge . '</a>';
                     } else {
+                        if (\str_contains($imageClasses, 'embeddedAttachmentLink')) {
+                            $result = $result . $enlarge;
+                        }
+
                         $result = '<span' . ($class ? (' class="' . $class . '"') : '') . '>' . $result . '</span>';
                     }
                 }
diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index 7f0a0f5c4f..a3a56114b0 100644
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -203,31 +203,24 @@
 	padding: 2px;
 	position: relative;
 
-	&::after {
-		background-color: rgba(0, 0, 0, 0.8);
-		border-radius: 2px;
-		box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
-		bottom: 5px;
-		color: white;
-		content: $fa-var-search;
-		display: block;
-		font-family: FontAwesome;
-		font-size: 21px;
-		font-style: normal;
-		font-weight: normal;
-		opacity: 0.5;
-		padding: 2px 8px;
-		position: absolute;
-		right: 5px;
-		text-decoration: none;
-		transition: 0.2s ease opacity;
+	&:hover .embeddedAttachmentLinkEnlarge {
+		opacity: 0.8;
 	}
+}
 
-	&:hover {
-		&::after {
-			opacity: 0.8;
-		}
-	}
+.embeddedAttachmentLinkEnlarge {
+	background-color: rgba(0, 0, 0, 0.8);
+	border-radius: 2px;
+	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
+	bottom: 5px;
+	color: white;
+	display: block;
+	opacity: 0.5;
+	padding: 2px;
+	position: absolute;
+	right: 5px;
+	text-decoration: none;
+	transition: 0.2s ease opacity;
 }
 
 .popoverContent .embeddedAttachmentLink,
-- 
2.20.1