Redesigned list of attached images in messages

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b640a61443141a960f569c5fabf86c152ce659f..116194eaf80d42e5f0d115d59f8ed3e3ec8092dd 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -92,6 +92,7 @@
 * Overhauled user login
 * Overhauled exception view
 * Redesigned ACP login
+* Redesigned list of attached images in messages
 
 * Introduced sticky page header
 * Replaced LESS with SCSS

diff --git a/com.woltlab.wcf/option.xml b/com.woltlab.wcf/option.xml
index 629eae786c9b1c63f5661068e1bcb6cd2b28d87b..75cc0ca064053612b81a9cf3548676d8e556e7d2 100644 (file)
--- a/com.woltlab.wcf/option.xml
+++ b/com.woltlab.wcf/option.xml
@@ -915,14 +915,14 @@ redis:cache_source_redis_host,!cache_source_memcached_host]]></enableoptions>
                        <option name="attachment_thumbnail_height">
                                <categoryname>message.attachment</categoryname>
                                <optiontype>integer</optiontype>
-                               <defaultvalue><![CDATA[210]]></defaultvalue>
+                               <defaultvalue><![CDATA[198]]></defaultvalue>
                                <minvalue>96</minvalue>
                                <suffix>pixel</suffix>
                        </option>
                        <option name="attachment_thumbnail_width">
                                <categoryname>message.attachment</categoryname>
                                <optiontype>integer</optiontype>
-                               <defaultvalue><![CDATA[280]]></defaultvalue>
+                               <defaultvalue><![CDATA[352]]></defaultvalue>
                                <minvalue>96</minvalue>
                                <suffix>pixel</suffix>
                        </option>

diff --git a/com.woltlab.wcf/templates/attachments.tpl b/com.woltlab.wcf/templates/attachments.tpl
index d540477c1a79e6c37b520b781a8deb588f37ead7..6233772cf4b64bf567f7942ddb2b3ccf8706d612 100644 (file)
--- a/com.woltlab.wcf/templates/attachments.tpl
+++ b/com.woltlab.wcf/templates/attachments.tpl
@@ -9,15 +9,41 @@
                                                {if $attachment->showAsImage() && !$attachment->isEmbedded()}
                                                        <li class="attachmentThumbnail" data-attachment-id="{@$attachment->attachmentID}">
                                                                {if $attachment->hasThumbnail()}
-                                                                       <a href="{link controller='Attachment' object=$attachment}{/link}"{if $attachment->canDownload()} class="jsImageViewer" title="{$attachment->filename}"{/if}><img src="{link controller='Attachment' object=$attachment}thumbnail=1{/link}" alt="" style="{if $attachment->thumbnailHeight < ATTACHMENT_THUMBNAIL_HEIGHT}margin-top: {@ATTACHMENT_THUMBNAIL_HEIGHT/2-$attachment->thumbnailHeight/2}px; {/if}{if $attachment->thumbnailWidth < ATTACHMENT_THUMBNAIL_WIDTH}margin-left: {@ATTACHMENT_THUMBNAIL_WIDTH/2-$attachment->thumbnailWidth/2}px{/if}" /></a>
-                                                               {else}
-                                                                       <img src="{link controller='Attachment' object=$attachment}{/link}" alt="" style="margin-top: {@ATTACHMENT_THUMBNAIL_HEIGHT/2-$attachment->height/2}px; margin-left: {@ATTACHMENT_THUMBNAIL_WIDTH/2-$attachment->width/2}px" />
+                                                                       <a href="{link controller='Attachment' object=$attachment}{/link}"{if $attachment->canDownload()} class="jsImageViewer" title="{$attachment->filename}"{/if}>
                                                                {/if}
                                                                
-                                                               <div title="{lang}wcf.attachment.image.info{/lang}">
-                                                                       <p>{$attachment->filename}</p>
-                                                                       <small>{lang}wcf.attachment.image.info{/lang}</small>
+                                                               <div class="attachmentThumbnailContainer">              
+                                                                       <span class="attachmentThumbnailImage">
+                                                                               {if $attachment->hasThumbnail()}
+                                                                                       <img src="{link controller='Attachment' object=$attachment}thumbnail=1{/link}" alt="" {if $attachment->thumbnailWidth >= ATTACHMENT_THUMBNAIL_WIDTH && $attachment->thumbnailHeight >= ATTACHMENT_THUMBNAIL_HEIGHT} class="attachmentThumbnailImageScalable"{/if}/>
+                                                                               {else}
+                                                                                       <img src="{link controller='Attachment' object=$attachment}{/link}" alt="" {if $attachment->width >= ATTACHMENT_THUMBNAIL_WIDTH && $attachment->height >= ATTACHMENT_THUMBNAIL_HEIGHT} class="attachmentThumbnailImageScalable"{/if}/>
+                                                                               {/if}
+                                                                       </span>
+                                                               
+                                                                       <span class="attachmentThumbnailData">
+                                                                               <span class="attachmentFilename">{$attachment->filename}</span>
+                                                                       </span>
                                                                </div>
+                                                                               
+                                                               <ul class="attachmentMetaData inlineList">
+                                                                       <li>
+                                                                               <span class="icon icon16 fa-file-text-o"></span>
+                                                                               {@$attachment->filesize|filesize}
+                                                                       </li>
+                                                                       <li>
+                                                                               <span class="icon icon16 fa-expand"></span>
+                                                                               {#$attachment->width}×{#$attachment->height}
+                                                                       </li>
+                                                                       <li>
+                                                                               <span class="icon icon16 fa-eye"></span>
+                                                                               {#$attachment->downloads}
+                                                                       </li>
+                                                               </ul>           
+                                                                               
+                                                               {if $attachment->hasThumbnail()}
+                                                                       </a>
+                                                               {/if}
                                                        </li>
                                                {/if}
                                        {/foreach}

diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index d931322a421e9704d1ae593ec3e36c8680a7f16a..bd95199a032b4e3bbb7e1aa8558d61b32209d6c0 100644 (file)
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -1,5 +1,4 @@
 /* attachment list in messages */
-.attachmentThumbnailList,
 .attachmentFileList {
        > ul > li:not(:last-child) {
                margin-right: 10px;
@@ -7,37 +6,105 @@
 }
 
 /* attachment in messages */
+.attachmentThumbnailList > ul {
+       margin-bottom: -15px;
+       margin-right: -15px;
+}
+
 .attachmentThumbnail {
        border-radius: 3px;
-       min-height: #{$wcf_option_attachment_thumbnail_height}px;
-       min-width: #{$wcf_option_attachment_thumbnail_width}px;
-       overflow: hidden;
+       box-shadow: 0 0 1px #aaa;
+       background: #fff;
+       margin-bottom: 15px !important;
+       margin-right: 15px !important;
        position: relative;
        
-       &:hover > div > small {
-               height: 1.5em;
+       @include screen-xs {
+               width: 100%;
+       }
+       
+       .attachmentThumbnailContainer {
+               position: relative;
+       }
+       
+       .attachmentThumbnailImage {
+               align-items: center;
+               border-radius: 3px 3px 0 0;
+               background-color: #333;
+               display: flex;
+               justify-content: center;
+               overflow: hidden;
+               text-align: center;
+               
+               @include screen-sm-up {
+                       height: #{$wcf_option_attachment_thumbnail_height}px;
+                       width: #{$wcf_option_attachment_thumbnail_width}px;
+               }
+               
+               @include screen-xs {
+                       max-height: #{$wcf_option_attachment_thumbnail_height}px;
+                       min-height: 100px;
+               }
+               
+               img {
+                       backface-visibility: hidden;
+                       border-radius: 3px 3px 0 0;
+                       max-width: 100%;
+                       opacity: .85;
+                       transform: translate3d(0,0,0);
+                       transition: .2s ease opacity;
+               }
+               
+               .attachmentThumbnailImageScalable {
+                       @include screen-xs {
+                               width: 100%;
+                       }
+               }
+       }
+       
+       &:hover {
+               .attachmentThumbnailImage {
+                       img {
+                               opacity: 1;
+                       }       
+               }
        }
        
-       > a {
-               display: block;
-               min-height: #{$wcf_option_attachment_thumbnail_height}px;
-               min-width: #{$wcf_option_attachment_thumbnail_width}px;
+       .attachmentThumbnailData {
+               backface-visibility: hidden;
+               background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .7) 100%);
+               border-radius: 3px 3px 0 0;
+               height: 100%;
+               position: absolute;
+               top: 0;
+               transform: translate3d(0,0,0);
+               width: 100%;
        }
        
-       > div {
-               background-color: rgba(0, 0, 0, .6);
+       .attachmentFilename {
+               color: #fff;
                bottom: 0;
-               color: rgb(255, 255, 255);
-               left: 0;
+               overflow: hidden;
                padding: 10px;
                position: absolute;
-               right: 0;
+               text-overflow: ellipsis;
+               text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
+               width: 100%;
+               white-space: nowrap;
+       
+               @include wcfFontHeadline;
+       }
+       
+       .attachmentMetaData {
+               color: $wcfContentDimmedText;
+               padding: 10px;
+               
+               li:not(:last-child) {
+                       margin-right: 10px;
+               }
                
-               > small {
-                       display: block;
-                       height: 0;
-                       overflow: hidden;
-                       transition: height .12s linear;
+               .icon {
+                       color: inherit;
                }
        }
 }