From 56c9d87ac97462a2eaaba929670e87cd0cac442b Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Wed, 28 Feb 2018 02:04:23 +0100
Subject: [PATCH] Improved css for attachment list and attachment list with
 preview.

---
 .../app/views/generic/attachment_item.jst.eco |  2 +-
 .../views/ticket_zoom/article_view.jst.eco    |  3 +-
 app/assets/stylesheets/zammad.scss            | 68 +++++++++++++++----
 3 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/app/views/generic/attachment_item.jst.eco b/app/assets/javascripts/app/views/generic/attachment_item.jst.eco
index d4de0ce4a..7b938f8d5 100644
--- a/app/assets/javascripts/app/views/generic/attachment_item.jst.eco
+++ b/app/assets/javascripts/app/views/generic/attachment_item.jst.eco
@@ -1,4 +1,4 @@
-<div class="attachment">
+<div class="attachment attachment--row">
   <div class="attachment-name"><%= @filename %></div>
   <div class="attachment-size"><%= @humanFileSize(@size) %></div>
   <div class="attachment-delete js-delete" data-id="<%= @id %>">
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
index 4c02508b8..4eebc79a6 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
@@ -57,8 +57,9 @@
             <div class="attachments-title"><%- @article.attachments.length %> <%- @T('Attached Files') %></div>
             <% for attachment in @article.attachments: %>
               <% if !@C('ui_ticket_zoom_attachments_preview'): %>
-                <div class="attachment">
+                <div class="attachment attachment--row">
                   <a class="attachment-name u-highlight" href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>?disposition=attachment" target="_blank" data-type="attachment"><%= attachment.filename %></a>
+                  <div class="attachment-size"><%- @humanFileSize(attachment.size) %></div>
                 </div>
               <% else: %>
                 <a class="attachment attachment--preview" title="<%- attachment.preferences['Content-Type'] %>" target="_blank" href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>?disposition=attachment" data-type="attachment"<% if @canDownload(attachment.preferences['Content-Type']): %> download<% end %>>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 74db894dc..54b9f4117 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -4958,7 +4958,6 @@ footer {
       font-size: 13px;
       color: hsl(60,1%,34%);
       font-weight: 500;
-      text-transform: uppercase;
       padding: 0 7px;
     }
 
@@ -4971,7 +4970,7 @@ footer {
 
   .attachments-block {
     margin-bottom: 12px;
-    
+
     &:last-child {
       margin-bottom: 0;
     }
@@ -5324,10 +5323,19 @@ footer {
       margin: 6px -12px 30px;
     }
 
-    .attachment {
-      display: block;
+    .attachment.attachment--row {
       font-size: 13px;
       padding: 1px 10px 1px 7px;
+      @include rtl(padding, 1px 7px 1px 10px);
+      cursor: default;
+      position: relative;
+      display: flex;
+    }
+
+    .attachment.attachment--preview {
+      display: block;
+      font-size: 13px;
+      padding: 9px 4px 9px 43px;
       position: relative;
       min-height: 42px;
       color: inherit;
@@ -5339,10 +5347,6 @@ footer {
       }
     }
 
-      .attachment--preview {
-        padding: 9px 4px 9px 43px;
-      }
-
       .attachment-icon {
         position: absolute;
         left: 0;
@@ -5361,20 +5365,20 @@ footer {
         }
       }
 
-      .attachment-name {
+      .attachment--preview .attachment-name {
         min-width: 0;
         display: block;
         @extend .u-highlight;
         word-break: break-all;
       }
 
-      .attachment-size {
+      .attachment--preview .attachment-size {
         white-space: nowrap;
         font-size: 11px;
         color: hsl(200,8%,77%);
       }
 
-      .attachment-delete {
+      .attachment--preview .attachment-delete {
         color: hsl(198,19%,72%);
         text-decoration: underline;
         display: none;
@@ -5384,7 +5388,7 @@ footer {
         user-select: none;
       }
 
-      .attachment:hover .attachment-delete {
+      .attachment:hover .attachment--preview .attachment-delete {
         padding: 0 10px 0 30px;
         float: right;
         display: block;
@@ -5393,7 +5397,45 @@ footer {
         background: linear-gradient(to right, hsla(200,20%,97%,0), hsla(200,20%,97%,1) 20px);
       }
 
-        .attachment-delete .icon {
+        .attachment--preview .attachment-delete .icon {
+          fill: hsl(198,18%,72%);
+          width: 9px;
+          height: 9px;
+          @include bidi-style(margin-right, 5px, margin-left, 0);
+        }
+
+      .attachment--row .attachment-name {
+        @include bidi-style(margin-right, 5px, margin-left, 0);
+        min-width: 0;
+        @extend .u-highlight;
+      }
+
+      .attachment--row .attachment-size {
+        white-space: nowrap;
+        float: right;
+        @include bidi-style(margin-right, 10px, margin-left, 0);
+      }
+
+      .attachment--row .attachment-delete {
+        color: hsl(198,19%,72%);
+        text-decoration: underline;
+        display: none;
+        white-space: nowrap;
+        @include bidi-style(margin-left, auto, margin-right, 0);
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .attachment:hover.attachment--row .attachment-delete {
+        padding: 0 10px 0 30px;
+        float: right;
+        display: block;
+        position: absolute;
+        right: 0;
+        background: linear-gradient(to right, hsla(200,20%,97%,0), hsla(200,20%,97%,1) 20px);
+      }
+
+       .attachment--row .attachment-delete .icon {
           fill: hsl(198,18%,72%);
           width: 9px;
           height: 9px;