Use an actual element for attachment/media previews

diff --git a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
index ff303a9342d49626b84ae6d53dd4c2d09dcb7d08..881cf9c546720fbd091afe27d4ce7f9085c81107 100644 (file)
--- 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 f78ea36f7dd409500afee386fd3e3613d03596e0..31c755411bb9c477a76aea0fb78e7dc84b9a7f23 100644 (file)
--- 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 ff303a9342d49626b84ae6d53dd4c2d09dcb7d08..881cf9c546720fbd091afe27d4ce7f9085c81107 100644 (file)
--- 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 e3d3484189e9eda11cfc4adf819f961ca91b2c9a..630bda399017f729f8b0e85b9ada452396d58501 100644 (file)
--- 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 7f0a0f5c4f131af116704885b4fe75946644f962..a3a56114b04a85563c506827301a83775618e615 100644 (file)
--- 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,