From 31760fac91dd70bfb466def64be98cd87ab3864b Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Thu, 28 May 2015 16:26:49 +0200
Subject: [PATCH] fix delete icon (attachments)

---
 .../app/views/generic/attachment.jst.eco      | 12 ++++-----
 .../app/views/generic/attachment_item.jst.eco |  8 +++---
 .../layout_ref/communication_reply.jst.eco    | 22 ++++++++--------
 .../app/views/ticket_zoom/article_new.jst.eco | 14 +++++-----
 app/assets/stylesheets/zammad.css.scss        | 26 ++++++++++++++++---
 5 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/app/assets/javascripts/app/views/generic/attachment.jst.eco b/app/assets/javascripts/app/views/generic/attachment.jst.eco
index b96d9165a..cd5c88995 100644
--- a/app/assets/javascripts/app/views/generic/attachment.jst.eco
+++ b/app/assets/javascripts/app/views/generic/attachment.jst.eco
@@ -1,25 +1,25 @@
 <div class="attachments"></div>
-<div class="article-attachment u-unclickable">
+<div class="article-attachment">
   <div class="attachmentPlaceholder">
-    <span class="attachmentPlaceholder-inputHolder u-highlight u-clickable fileUpload">
+    <span class="attachmentPlaceholder-inputHolder fileUpload">
       <%- @T('select attachment..') %>
       <input multiple="multiple" type="file" name="file" style="">
     </span>
   </div>
-  <div class="attachmentUpload hide u-clickable">
+  <div class="attachmentUpload hide">
     <div class="horizontal">
       <div class="u-highlight">
         <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
       </div>
-      <div class="attachmentUpload-cancel align-right js-cancel u-clickable">
-        <div class="delete icon"></div><%- @T('Cancel Upload') %>
+      <div class="attachmentUpload-cancel js-cancel">
+        <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg></div><%- @T('Cancel Upload') %>
       </div>
     </div>
     <div class="attachmentUpload-progressBar" style="width: 0%"></div>
   </div>
 </div>
 <div class="fit dropArea">
-  <div class="dropArea-inner fit centered">
+  <div class="dropArea-inner">
     <%- @T('Drop Files here') %>
   </div>
 </div>
\ No newline at end of file
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 223d52a6a..1d8e9c1f9 100644
--- a/app/assets/javascripts/app/views/generic/attachment_item.jst.eco
+++ b/app/assets/javascripts/app/views/generic/attachment_item.jst.eco
@@ -1,7 +1,7 @@
-<div class="attachment horizontal">
-  <div class="attachment-name u-highlight"><%= @fileName %></div>
+<div class="attachment">
+  <div class="attachment-name"><%= @fileName %></div>
   <div class="attachment-size"><%= @fileSize %></div>
-  <div class="attachment-delete js-delete align-right u-clickable" data-id="<%= @store_id %>">
-    <div class="delete icon"></div><%- @T('Delete File') %>
+  <div class="attachment-delete js-delete" data-id="<%= @store_id %>">
+    <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %>
   </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/communication_reply.jst.eco b/app/assets/javascripts/app/views/layout_ref/communication_reply.jst.eco
index 79a7768c3..3041c01d4 100644
--- a/app/assets/javascripts/app/views/layout_ref/communication_reply.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/communication_reply.jst.eco
@@ -14,45 +14,45 @@
           <div class="js-textarea articleNewEdit-body" contenteditable="true"><%- @content %></div>
           <!-- .textBubble grows with textarea (and expanding clone) -->
           <div class="attachments"></div>
-            <!--
-            </div>
+          
+          <!-- <div>
             <div class="attachment horizontal">
               <div class="attachment-name u-highlight">sega-genesis-box.gif</div>
               <div class="attachment-size">2.4mb</div>
               <div class="attachment-delete js-delete align-right u-clickable">
-                <div class="delete icon"></div><%- @T('Delete File') %>
+                <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %>
               </div>
             </div>
             <div class="attachment horizontal">
               <div class="attachment-name u-highlight">license-key.txt</div>
               <div class="attachment-size">7kb</div>
               <div class="attachment-delete js-delete align-right u-clickable">
-                <div class="delete icon"></div><%- @T('Delete File') %>
+                <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Delete File') %>
               </div>
             </div>
-          </div>-->
-          <div class="article-attachment u-unclickable">
+          </div> -->
+          <div class="article-attachment">
             <div class="attachmentPlaceholder">
               <span class="attachmentPlaceholder-hint">Antwort eingeben oder</span>
-              <span class="attachmentPlaceholder-inputHolder u-highlight u-clickable">
+              <span class="attachmentPlaceholder-inputHolder">
                 Dateien wählen..
                 <input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
               </span>
             </div>
-            <div class="attachmentUpload hide u-clickable">
+            <div class="attachmentUpload hide">
               <div class="horizontal">
                 <div class="u-highlight">
                   <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
                 </div>
-                <div class="attachmentUpload-cancel align-right js-cancel u-clickable">
-                  <div class="delete icon"></div><%- @T('Cancel Upload') %>
+                <div class="attachmentUpload-cancel js-cancel">
+                  <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Cancel Upload') %>
                 </div>
               </div>
               <div class="attachmentUpload-progressBar" style="width: 0%"></div>
             </div>
           </div>
           <div class="fit dropArea">
-            <div class="dropArea-inner fit centered">
+            <div class="dropArea-inner">
               <%- @T('Drop Files here') %>
             </div>
           </div>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
index 1de3b32d7..0e6cb1065 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
@@ -54,28 +54,28 @@
         <div class="js-textarea articleNewEdit-body" contenteditable="true" data-name="body"><%- @article.body %></div>
         <!-- .textBubble grows with textarea (and expanding clone) -->
         <div class="attachments"></div>
-        <div class="article-attachment u-unclickable u-textTruncate">
+        <div class="article-attachment">
           <div class="attachmentPlaceholder">
             <span class="attachmentPlaceholder-hint"><%- @T('Enter Answer or') %></span>
-            <span class="attachmentPlaceholder-inputHolder u-highlight u-clickable">
+            <span class="attachmentPlaceholder-inputHolder">
               <%- @T('select attachment..') %>
               <input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
             </span>
           </div>
-          <div class="attachmentUpload hide u-clickable">
+          <div class="attachmentUpload hide">
             <div class="horizontal">
               <div class="u-highlight">
                 <%- @T('Uploading') %> (<span class="js-percentage">0</span>%) ...
               </div>
-              <div class="attachmentUpload-cancel align-right js-cancel u-clickable">
-                <div class="delete icon"></div><%- @T('Cancel Upload') %>
+              <div class="attachmentUpload-cancel js-cancel">
+                <svg class="icon icon-diagonal-cross"><use xlink:href="#icon-diagonal-cross" /></svg><%- @T('Cancel Upload') %>
               </div>
             </div>
             <div class="attachmentUpload-progressBar" style="width: 0%"></div>
           </div>
         </div>
-        <div class="fit dropArea">
-          <div class="dropArea-inner fit centered">
+        <div class="dropArea">
+          <div class="dropArea-inner">
             <%- @T('Drop Files here') %>
           </div>
         </div>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 3a8619a6b..21ad93302 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -3047,12 +3047,20 @@ footer {
     font-size: 20px;
     margin: 5px;
     display: none;
+    @extend .fit;
   }
 
   .is-dropTarget .dropArea {
     display: block;
   }
 
+  .dropArea-inner {
+    @extend .fit;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
 .shortcut .dropdown-menu > .active > a {
   background: none;
 }
@@ -3312,6 +3320,7 @@ footer {
     padding: 10px 0;
     color: #b3b3b3;
     overflow: hidden;
+    @extend .u-unclickable, .u-textTruncate;
   }
 
     .attachments:not(:empty) {
@@ -3325,6 +3334,7 @@ footer {
       padding: 1px 10px 1px 7px;
       cursor: default;
       position: relative;
+      display: flex;
     }
 
     .attachment:hover {
@@ -3334,6 +3344,7 @@ footer {
       .attachment-name {
         margin-right: 5px;
         word-break: break-all;
+        @extend .u-highlight;
       }
 
       .attachment-size {
@@ -3347,6 +3358,8 @@ footer {
         text-decoration: underline;
         display: none;
         white-space: nowrap;
+        margin-left: auto;
+        @extend .u-clickable;
       }
 
       .attachment:hover .attachment-delete {
@@ -3359,7 +3372,9 @@ footer {
       }
 
         .attachment-delete .icon {
-          opacity: 0.2;
+          fill: hsl(198,18%,72%);
+          width: 9px;
+          height: 9px;
           margin-right: 5px;
         }
 
@@ -3368,6 +3383,7 @@ footer {
       display: inline-block;
       overflow: hidden;
       vertical-align: bottom;
+      @extend .u-highlight, .u-clickable;
     }
 
     .attachmentUpload {
@@ -3375,11 +3391,15 @@ footer {
     }
 
     .attachmentUpload-cancel {
+      @extend .u-clickable;
+      margin-left: auto;
       text-decoration: underline;
     }
 
-    .attachmentUpload .delete.icon {
-      opacity: 0.33;
+    .attachmentUpload .icon {
+      fill: hsl(198,18%,72%);
+      width: 9px;
+      height: 9px;
       margin-right: 5px;
     }