Added search icon overlay on embedded attachments/images

diff --git a/wcfsetup/install/files/js/WCF.ImageViewer.js b/wcfsetup/install/files/js/WCF.ImageViewer.js
index 12771663348831432ec20a5da3099f9aab5813d6..1e70006f079b2f2a936a32b9137479d429bcd317 100644 (file)
--- a/wcfsetup/install/files/js/WCF.ImageViewer.js
+++ b/wcfsetup/install/files/js/WCF.ImageViewer.js
@@ -95,7 +95,7 @@ WCF.ImageViewer = Class.extend({
                var $maxWidth = $image.closest('div.messageText').width();
                if ($maxWidth < $imageObject.width) {
                        if (!$image.parents('a').length) {
-                               $image.wrap('<a href="' + $image.attr('src') + '" class="jsImageViewerEnabled" />');
+                               $image.wrap('<a href="' + $image.attr('src') + '" class="jsImageViewerEnabled embeddedImageLink" />');
                                $image.parent().click($.proxy(this._click, this));
                        }
                }

diff --git a/wcfsetup/install/files/style/attachment.less b/wcfsetup/install/files/style/attachment.less
index e56ce3758d26203732de6dd7b484c12817846b7a..802e58bf588b1b39a26fad92bf8563a0547dd733 100644 (file)
--- a/wcfsetup/install/files/style/attachment.less
+++ b/wcfsetup/install/files/style/attachment.less
@@ -153,3 +153,35 @@
        max-height: 64px;
        max-width: 64px;
 }
+
+/* add search icon overlay on embedded attachments/images */
+.embeddedAttachmentLink,
+.embeddedImageLink {
+       display: inline-block;
+       position: relative;
+       
+       &::after {
+               background-color: rgba(0, 0, 0, .8);
+               border-radius: 2px;
+               bottom: @wcfGapSmall;
+               color: white;
+               content: @fa-var-search;
+               display: block;
+               font-family: FontAwesome;
+               font-size: 21px;
+               opacity: .5;
+               padding: 2px 8px;
+               position: absolute;
+               right: @wcfGapSmall;
+               text-decoration: none;
+               
+               .boxShadow(0, 0, rgba(0, 0, 0, .15), 0, 3px);
+               .transition(opacity, .1s);
+       }
+       
+       &:hover {
+               &::after {
+                       opacity: .8;
+               }
+       }
+}