From de105cbbab16112af2b348944affca1a1c736734 Mon Sep 17 00:00:00 2001 From: Marcel Werk Date: Tue, 24 May 2016 22:45:04 +0200 Subject: [PATCH] Redesigned list of attached images in messages --- CHANGELOG.md | 1 + com.woltlab.wcf/option.xml | 4 +- com.woltlab.wcf/templates/attachments.tpl | 38 ++++++- .../install/files/style/ui/attachment.scss | 107 ++++++++++++++---- 4 files changed, 122 insertions(+), 28 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b640a6144..116194eaf8 100644 --- 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 629eae786c..75cc0ca064 100644 --- 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]]> diff --git a/com.woltlab.wcf/templates/attachments.tpl b/com.woltlab.wcf/templates/attachments.tpl index d540477c1a..6233772cf4 100644 --- a/com.woltlab.wcf/templates/attachments.tpl +++ b/com.woltlab.wcf/templates/attachments.tpl @@ -9,15 +9,41 @@ {if $attachment->showAsImage() && !$attachment->isEmbedded()}
  • {if $attachment->hasThumbnail()} - canDownload()} class="jsImageViewer" title="{$attachment->filename}"{/if}> - {else} - + canDownload()} class="jsImageViewer" title="{$attachment->filename}"{/if}> {/if} -
    -

    {$attachment->filename}

    - {lang}wcf.attachment.image.info{/lang} +
    + + {if $attachment->hasThumbnail()} + thumbnailWidth >= ATTACHMENT_THUMBNAIL_WIDTH && $attachment->thumbnailHeight >= ATTACHMENT_THUMBNAIL_HEIGHT} class="attachmentThumbnailImageScalable"{/if}/> + {else} + width >= ATTACHMENT_THUMBNAIL_WIDTH && $attachment->height >= ATTACHMENT_THUMBNAIL_HEIGHT} class="attachmentThumbnailImageScalable"{/if}/> + {/if} + + + + {$attachment->filename} +
    + +
      +
    • + + {@$attachment->filesize|filesize} +
      • +
    • + + {#$attachment->width}×{#$attachment->height} +
      • +
    • + + {#$attachment->downloads} +
      • +
    + + {if $attachment->hasThumbnail()} +     + {/if}
    • {/if} {/foreach} diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss index d931322a42..bd95199a03 100644 --- 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; } } } -- 2.20.1