New UI design for the list of attachments (#3890)

* New UI design for the list of attachments

* Exchange the icon on focus (a11y)

* Improved a11y for attachments

* Inconsistent indentation

* Consistent use of whitespaces

* Fix indentation in en.xml

Co-authored-by: Tim Düsterhus <duesterhus@woltlab.com>

diff --git a/com.woltlab.wcf/templates/attachments.tpl b/com.woltlab.wcf/templates/attachments.tpl
index 5f698562add257be75e8ad58753900716392337a..5faadfbfc36d59a89532f11a0f96f9b11fadebd7 100644 (file)
--- a/com.woltlab.wcf/templates/attachments.tpl
+++ b/com.woltlab.wcf/templates/attachments.tpl
@@ -1,7 +1,7 @@
 {if $attachmentList && $attachmentList->getGroupedObjects($objectID)|count}
        {hascontent}
                <section class="section attachmentThumbnailList">
-                       <h2 class="sectionTitle">{lang}wcf.attachment.images{/lang}</h2>
+                       <h2 class="messageSectionTitle">{lang}wcf.attachment.images{/lang}</h2>
                        
                        <ul class="inlineList">
                                {content}
@@ -9,7 +9,7 @@
                                                {if $attachment->showAsImage() && !$attachment->isEmbedded()}
                                                        <li class="attachmentThumbnail" data-attachment-id="{@$attachment->attachmentID}">
                                                                {if $attachment->hasThumbnail()}
-                                                                       <a href="{$attachment->getLink()}"{if $attachment->canDownload()} class="jsImageViewer" title="{$attachment->filename}"{/if}>
+                                                                       <a href="{$attachment->getLink()}"{if $attachment->canDownload()} class="jsImageViewer jsTooltip" title="{lang}wcf.attachment.image.title{/lang}"{/if}>
                                                                {/if}
                                                                
                                                                <div class="attachmentThumbnailContainer">
@@ -54,24 +54,24 @@
        
        {hascontent}
                <section class="section attachmentFileList">
-                       <h2 class="sectionTitle">{lang}wcf.attachment.files{/lang}</h2>
-                               
-                       <ul class="inlineList">
+                       <h2 class="messageSectionTitle">{lang}wcf.attachment.files{/lang}</h2>
+
+                       <div class="messageAttachmentList">
                                {content}
                                        {foreach from=$attachmentList->getGroupedObjects($objectID) item=attachment}
                                                {if $attachment->showAsFile() && !$attachment->isEmbedded()}
-                                                       <li class="box32" data-attachment-id="{@$attachment->attachmentID}">
-                                                               <a href="{$attachment->getLink()}"><span class="icon icon32 fa-{@$attachment->getIconName()}"></span></a>
-                                                               
-                                                               <div>
-                                                                       <p><a href="{$attachment->getLink()}">{$attachment->filename}</a></p>
-                                                                       <small>{lang}wcf.attachment.file.info{/lang}</small>
-                                                               </div>
-                                                       </li>
-                                               {/if}
-                                       {/foreach}
-                               {/content}
-                       </ul>
+                                                       <a href="{$attachment->getLink()}" class="messageAttachment jsTooltip" title="{lang}wcf.attachment.file.title{/lang}">
+                                                               <span class="messageAttachmentIcon">
+                                                                       <span class="messageAttachmentIconDefault icon icon32 fa-{@$attachment->getIconName()}"></span>
+                                                                       <span class="messageAttachmentIconDownload icon icon32 fa-download"></span>
+                                                               </span>
+                                                               <span class="messageAttachmentFilename">{$attachment->filename}</span>
+                                                               <span class="messageAttachmentMeta">{lang}wcf.attachment.file.info{/lang}</span>
+                                                       </a>
+                                                       {/if}
+                                               {/foreach}
+                                       {/content}
+                       </div>
                </section>
        {/hascontent}
 {/if}

diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index f4af329b45a3bee1bdb59ad8a1dd2d5584d6f0bc..5c1365022d2571a6f8b0bca7ea972594d817b9a2 100644 (file)
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -117,6 +117,10 @@
                        opacity: 0;
                }
        }
+
+       > a {
+               display: block;
+       }
 }
 
 /* attachments tab in editor */
@@ -226,3 +230,87 @@
        /* this will also suppress the link being displayed in the browser's "status bar" on hover */
        pointer-events: none;
 }
+
+.messageSectionTitle {
+       align-items: center;
+       display: flex;
+       margin-bottom: 10px;
+
+       &::before {
+               border-top: 1px solid $wcfContentBorderInner;
+               content: "";
+               flex: 0 0 20px;
+               margin-right: 10px;
+       }
+
+       &::after {
+               border-top: 1px solid $wcfContentBorderInner;
+               content: "";
+               flex: 1 0 auto;
+               margin-left: 10px;
+       }
+}
+
+.messageAttachmentList {
+       display: grid;
+       gap: 10px;
+       grid-template-columns: repeat(auto-fill, 300px);
+
+       @include screen-xs {
+               grid-template-columns: 1fr;
+       }
+}
+
+.messageAttachment {
+       border: 1px solid $wcfContentBorderInner;
+       border-radius: 3px;
+       color: inherit;
+       column-gap: 8px;
+       display: grid;
+       grid-template-areas:
+               "icon filename"
+               "icon meta";
+       grid-template-columns: 32px auto;
+       padding: 8px;
+       row-gap: 1px;
+
+       &:focus,
+       &:hover {
+               color: inherit;
+
+               .messageAttachmentIconDefault {
+                       display: none;
+               }
+       }
+
+       &:not(:focus):not(:hover) {
+               .messageAttachmentIconDownload {
+                       display: none;
+               }
+       }
+}
+
+.messageAttachmentIcon {
+       align-self: center;
+       grid-area: icon;
+}
+
+.messageAttachmentIconDefault,
+.messageAttachmentIconDownload {
+       cursor: inherit !important;
+}
+
+.messageAttachmentFilename {
+       font-weight: 600;
+       grid-area: filename;
+       overflow: hidden;
+       text-overflow: ellipsis;
+       white-space: nowrap;
+}
+
+.messageAttachmentMeta {
+       @include wcfFontSmall;
+
+       color: $wcfContentDimmedText;
+       grid-area: meta;
+}

diff --git a/wcfsetup/install/lang/de.xml b/wcfsetup/install/lang/de.xml
index ac315bcf3fd3806019f991c974536bc134b524ad..af34bed040667f60aabe33b64adb1d967eb65adc 100644 (file)
--- a/wcfsetup/install/lang/de.xml
+++ b/wcfsetup/install/lang/de.xml
@@ -3294,8 +3294,10 @@ freigeschaltet. {if LANGUAGE_USE_INFORMAL_VARIANT}Du kannst{else}Sie können{/if
                <item name="wcf.article.like.notification.message.stacked"><![CDATA[{@'wcf.user.notification.stacked.authorList'|language} haben auf {if LANGUAGE_USE_INFORMAL_VARIANT}deinen{else}Ihren{/if} Artikel <strong>{$article->getTitle()}</strong> reagiert ({@$__wcf->getReactionHandler()->renderInlineList($reactions)}).]]></item>
        </category>
        <category name="wcf.attachment">
-               <item name="wcf.attachment.file.info"><![CDATA[({@$attachment->filesize|filesize}, <strong>{#$attachment->downloads}</strong> Mal heruntergeladen{if $attachment->downloads > 0}, zuletzt: {@$attachment->lastDownloadTime|time}{/if})]]></item>
+               <item name="wcf.attachment.file.info"><![CDATA[{@$attachment->filesize|filesize} – {plural value=$attachment->downloads 1="1 Download" other="# Downloads"}]]></item>
+               <item name="wcf.attachment.file.title"><![CDATA[Datei „{$attachment->filename}“ herunterladen]]></item>
                <item name="wcf.attachment.image.info"><![CDATA[{@$attachment->filesize|filesize}, {#$attachment->width}×{#$attachment->height}, {#$attachment->downloads} Mal angesehen]]></item>
+               <item name="wcf.attachment.image.title"><![CDATA[Bild „{$attachment->filename}“ anzeigen]]></item>
                <item name="wcf.attachment.files"><![CDATA[Dateien]]></item>
                <item name="wcf.attachment.images"><![CDATA[Bilder]]></item>
                <item name="wcf.attachment.attachments"><![CDATA[Dateianhänge]]></item>

diff --git a/wcfsetup/install/lang/en.xml b/wcfsetup/install/lang/en.xml
index 02a8617d2209d22fd081cc887410fa0b0df135e2..f02cff20b34c060eb73b8cbbf6d46d72b0a733a4 100644 (file)
--- a/wcfsetup/install/lang/en.xml
+++ b/wcfsetup/install/lang/en.xml
@@ -3218,8 +3218,10 @@ Your account on the website: {@PAGE_TITLE|language} [URL:{link isEmail=true}{/li
                <item name="wcf.article.like.notification.message.stacked"><![CDATA[{@'wcf.user.notification.stacked.authorList'|language} reacted to article <strong>{$article->getTitle()}</strong> ({@$__wcf->getReactionHandler()->renderInlineList($reactions)}).]]></item>
        </category>
        <category name="wcf.attachment">
-               <item name="wcf.attachment.file.info"><![CDATA[({@$attachment->filesize|filesize}, downloaded <strong>{#$attachment->downloads}</strong> times{if $attachment->downloads > 0}, last: {@$attachment->lastDownloadTime|time}{/if})]]></item>
+               <item name="wcf.attachment.file.info"><![CDATA[{@$attachment->filesize|filesize} – {plural value=$attachment->downloads 1="1 Download" other="# Downloads"}]]></item>
+               <item name="wcf.attachment.file.title"><![CDATA[Download file “{$attachment->filename}”]]></item>
                <item name="wcf.attachment.image.info"><![CDATA[{@$attachment->filesize|filesize}, {#$attachment->width}×{#$attachment->height}, viewed {#$attachment->downloads} times]]></item>
+               <item name="wcf.attachment.image.title"><![CDATA[View image “{$attachment->filename}”]]></item>
                <item name="wcf.attachment.files"><![CDATA[Files]]></item>
                <item name="wcf.attachment.images"><![CDATA[Images]]></item>
                <item name="wcf.attachment.attachments"><![CDATA[Attachments]]></item>