chat to ticket layout ref: style attachment

zammad · Jan 14, 2016 · 5e667eb · 5e667eb
1 parent 1d5a539
commit 5e667eb
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 30 deletions.
diff --git a/app/assets/javascripts/app/views/layout_ref/chat_to_ticket.jst.eco b/app/assets/javascripts/app/views/layout_ref/chat_to_ticket.jst.eco
@@ -1,7 +1,7 @@
 <div class="newTicket newTicket--chatTicket">
   <div class="box chatHistory">
     <div class="page-header">
-      <h1>Chat History</h1>
+      <h1>Chat</h1>
     </div>
     <!-- Hallo Martin. Achtung  chat-body-holder--standalone klasse is wichtig -->
     <div class="page-content chat-body-holder chat-body-holder--standalone js-scrollHolder">
@@ -85,32 +85,13 @@
 </div>
 <div class="controls"><div class="richtext form-control">
     <div contenteditable="true" id="TicketArticle_204825_body" data-name="body" class=""></div><div class="shortcut dropdown"><ul class="dropdown-menu" style="width: 360px; max-height: 200px;"><li><a>-</a></li></ul></div>
-    <div class="attachments"></div>
-    <div class="article-attachment">
-        <div class="attachmentPlaceholder">
-            <span class="attachmentPlaceholder-inputHolder fileUpload">
-            select attachment..
-            <input multiple="multiple" type="file" name="file" style="">
-            </span>
-        </div>
-        <div class="attachmentUpload hide">
-            <div class="horizontal">
-                <div class="u-highlight">
-                    Uploading (<span class="js-percentage">0</span>%) ...
-                </div>
-                <div class="attachmentUpload-cancel js-cancel">
-                <svg class="icon icon-diagonal-cross "><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/icons.svg#icon-diagonal-cross"></use></svg></div>Cancel Upload
-            </div>
-        </div>
-        <div class="attachmentUpload-progressBar" style="width: 0%"></div>
+    <div class="attachments attachments--list">
+      <%- @Icon('paperclip') %>
+      <div class="attachments-title">1 Attached File</div>
+      <div class="attachment">
+        <div class="attachment-name u-highlight">Chat</div>
+      </div>
     </div>
-    <div class="fit dropArea">
-        <div class="dropArea-inner">
-            Drop Files here
-        </div>
-    </div></div>
-    <span class="help-inline"></span>
-    <span class="help-block"></span>
 </div>
 </div></fieldset></div>
 <div class="formset-inset">

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
@@ -47,7 +47,7 @@
           </div>
         </div>
         <% if !_.isEmpty( @article.attachments ): %>
-          <div class="attachments">
+          <div class="attachments attachments--list">
             <%- @Icon('paperclip') %>
             <div class="attachments-title"><%- @article.attachments.length %> <%- @T('Attached Files') %></div>
             <% for attachment in @article.attachments: %>

diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
@@ -1456,6 +1456,15 @@ input.time.time--12 {
     background: none;
   }
 
+  .richtext.form-control .attachments.attachments--list:not(:empty) {
+    border-top: 1px solid rgba(0,0,0,.04);
+    white-space: normal;
+    margin: 0 -12px -14px;
+    padding: 25px 20px 7px 72px;
+    position: relative;
+    line-height: 1;
+  }
+
   textarea.form-control {
     height: 118px;
   }
@@ -4311,23 +4320,23 @@ footer {
       box-shadow: none;
     }
 
-  .ticket-article-item .attachments:not(:empty) {
+  .attachments.attachments--list:not(:empty) {
     border-top: 1px solid rgba(0,0,0,.04);
     white-space: normal;
     margin: 0 -20px;
     padding: 26px 20px 7px 72px;
     position: relative;
   }
 
-    .ticket-article-item .attachments .attachments-title {
+    .attachments.attachments--list .attachments-title {
       font-size: 13px;
       color: hsl(60,1%,34%);
       font-weight: bold;
       padding: 0 7px;
       margin: 0 0 4px;
     }
 
-    .attachments .icon-paperclip {
+    .attachments .icon {
       position: absolute;
       left: 33px;
       top: 27px;
@@ -5073,6 +5082,7 @@ footer {
 
   .box h1 {
     margin-top: 10px;
+    margin-bottom: 12px;
     color: hsl(60,1%,34%);
     flex: 1;
   }