Merge branch 'develop' of github.com:martini/zammad into develop

app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco

@@ -44,7 +44,7 @@
     </div>
 
     <div class="ticket-article">
-      <div class="ticket-article-item bubble-grid customer phone" data-id="1" id="article-1">
+      <div class="ticket-article-item customer phone" data-id="1" id="article-1">
         <div class="article-meta-clip top">
           <div class="article-content-meta top hide">
             <div class="article-meta top">
@@ -55,7 +55,7 @@
             </div>
           </div>
         </div>
-        <div class="article-content zIndex-1 horizontal reverse">
+        <div class="article-content zIndex-1">
           <span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
           <div class="flex bubble-gap internal-border">
             <div class="text-bubble"><div class="bubble-arrow"></div>Welcome!
@@ -98,7 +98,7 @@ The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad
         <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
       </div>
 
-      <div class="ticket-article-item bubble-grid agent note" data-id="23" id="article-23">      
+      <div class="ticket-article-item agent note" data-id="23" id="article-23">      
         <div class="article-meta-clip top">
           <div class="article-content-meta top hide">
             <div class="article-meta top">
@@ -109,8 +109,8 @@ The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad
             </div>
           </div>
         </div>
-        <div class="article-content zIndex-1 horizontal">
-          <span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
+        <div class="article-content zIndex-1">
+          <span class="avatar user-popover" data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
           <div class="flex bubble-gap internal-border">
             <div class="text-bubble"><div class="bubble-arrow"></div>Hallp HP, du kannst dich nur einmal einloggen. Was machst du genau?</div>
           </div>
@@ -136,7 +136,7 @@ The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad
         <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-08-05T13:34:01.000Z" data-tooltip="2014-08-05 15:34">2014-08-05</time></small>
       </div>
 
-      <div class="ticket-article-item bubble-grid customer phone" data-id="1" id="article-1">
+      <div class="ticket-article-item customer phone" data-id="1" id="article-1">
         <div class="article-meta-clip top">
           <div class="article-content-meta top hide">
             <div class="article-meta top">
@@ -147,7 +147,7 @@ The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad
             </div>
           </div>
         </div>
-        <div class="article-content zIndex-1 horizontal reverse">
+        <div class="article-content zIndex-1">
           <span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
           <div class="flex bubble-gap internal-border">
             <div class="text-bubble"><div class="bubble-arrow"></div>Ich wollte mir die Lyrics von Maria herunterladen, aber ich schaff es einfach nicht, da raufzukommen. Schick mir bitte mein Passwort.
@@ -182,7 +182,7 @@ Grüße, Peter</div>
         <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
       </div>
 
-      <div class="ticket-article-item bubble-grid agent note" data-id="23" id="article-23">      
+      <div class="ticket-article-item agent note" data-id="23" id="article-23">      
         <div class="article-meta-clip top">
           <div class="article-content-meta top hide">
             <div class="article-meta top">
@@ -193,7 +193,7 @@ Grüße, Peter</div>
             </div>
           </div>
         </div>
-        <div class="article-content zIndex-1 horizontal">
+        <div class="article-content zIndex-1">
           <span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
           <div class="flex bubble-gap internal-border">
             <div class="text-bubble"><div class="bubble-arrow"></div>Lieber HP,<br>

app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco

@@ -1,5 +1,5 @@
 <% for article in @articles: %>
-<div class="ticket-article-item bubble-grid <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' is-internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
+<div class="ticket-article-item <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' is-internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
 
 
   <div class="article-meta-clip top">
@@ -33,14 +33,14 @@
     </div>
   </div>
 
-  <div class="article-content zIndex-1 horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
+  <div class="article-content zIndex-1">
     <% if article.sender.name isnt 'Agent': %>
     <%    position = 'left' %>
     <% else: %>
     <%    position = 'right' %>
     <% end %>
     <%- article.created_by.avatar("40", position) %>
-    <div class="flex bubble-gap">
+    <div class="bubble-gap">
       <div class="internal-border">
         <div class="text-bubble">
           <div class="bubble-arrow"></div>
@@ -59,17 +59,6 @@
           <% end %>
         </div>
       </div>
-      <% if article.actions: %>
-      <div>
-        <div class="article-actions horizontal stretch">
-          <% for action in article.actions: %>
-            <a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action u-clickable<% if action.class: %> <%= action.class %><% end %>">
-              <span class="<%= action.type %> action icon"></span><%- @T( action.name ) %>
-            </a>
-          <% end %>
-        </div>
-      </div>
-      <% end %>
     </div>
   </div>
 
@@ -90,6 +79,18 @@
     </div>
   </div>
 
+  <% if article.actions: %>
+  <div>
+    <div class="article-actions horizontal stretch">
+      <% for action in article.actions: %>
+        <a href="<%= action.href %>" data-type="<%= action.type %>" class="article-action u-clickable<% if action.class: %> <%= action.class %><% end %>">
+          <span class="<%= action.type %> action icon"></span><%- @T( action.name ) %>
+        </a>
+      <% end %>
+    </div>
+  </div>
+  <% end %>
+
   <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="<%- article.created_at %>">?</time></small>
 </div>
 <% end %>

app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco

@@ -2,7 +2,6 @@
   <input type="hidden" name="type" value="<%= @article.type %>">
   <input type="hidden" name="internal" value="<%= @article.internal %>">
   <input type="hidden" name="form_id" value="<%= @article.form_id %>">
-  <div class="bubble-grid horizontal">
   <div class="editControls">
     <%- App.User.fullLocal( @S('id') ).avatar("40", 'right', 'zIndex-5') %>
     <div class="dark pop-select zIndex-7 editControls-item">
@@ -28,7 +27,7 @@
       </div>
     </div>
   </div>
-    <div class="flex article-content zIndex-5 bubble-gap">
+  <div class="article-content zIndex-5 bubble-gap">
 <!--
     <label class="recipients"><%- @T('Recipients') %>
       <div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_normal.jpg)"></div>
@@ -82,7 +81,5 @@
         </div>
       </div>
     </div>
-
-    </div>
   </div>
 </form>

app/assets/stylesheets/zammad.css.scss

@@ -18,7 +18,7 @@ p {
 }
 
 .u-highlight {
-  color: hsl(194,90%,45%);
+  color: #0F94D6;
 }
 
 a {
@@ -752,6 +752,16 @@ textarea,
   border-color: #ececec;
 }
 
+.pagination > .active > a, 
+.pagination > .active > span, 
+.pagination > .active > a:hover, 
+.pagination > .active > span:hover, 
+.pagination > .active > a:focus, 
+.pagination > .active > span:focus {
+  background: #0F94D6;
+  border-color: #0F94D6;
+}
+
 .pagination-counter {
   margin-right: 19px;
   line-height: 28px;
@@ -1826,6 +1836,11 @@ footer {
   padding: 10px 20px;
 }
 
+.tableOverview-edit {
+  @extend .u-clickable;
+  @extend .u-highlight;
+}
+
 .bulkAction {
   background: white;
   z-index: 1;
@@ -2955,6 +2970,13 @@ footer {
   margin-top: 55px;
 }
 
+.ticket-article,
+.ticket-edit {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 0 21px;
+}
+
   .ticket-title {
     max-width: 800px;
     padding: 0 81px;
@@ -2975,24 +2997,20 @@ footer {
     display: block;
   }
 
-.bubble-grid {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 0 21px;
-}
-
-  .bubble-gap {
-    margin-left: 15px !important;
-  }
-
-  .customer.ticket-article-item .bubble-gap {
-    margin-left: 0 !important;
-    margin-right: 15px !important;
-  }
-
 .ticket-article-item {
   padding-bottom: 33px;
   position: relative;
+  
+  .avatar {
+    position: absolute;
+    right: 0;
+    top: 5px;
+  }
+
+  &.agent .avatar {
+    right: auto;
+    left: 0;
+  }
 }
 
   /*
@@ -3004,20 +3022,16 @@ footer {
     overflow: hidden;
     position: relative;
     height: 100%;
+    margin: 0 55px;
   }
 
   .article-content {
     position: relative;
-    margin-right: 55px;
+    padding: 0 55px;
   }
 
-    .customer.ticket-article-item .article-content {
-      margin-right: 0;
-      margin-left: 55px;
-    }
 
   .article-content-meta {
-    padding: 0 55px;
     position: absolute;
     width: 100%;
   }
@@ -3039,7 +3053,7 @@ footer {
     }
 
     .article-meta-key {
-      width: 13%;
+      width: 20%;
       text-transform: uppercase;
     }
 
@@ -3079,6 +3093,7 @@ footer {
     box-shadow: 0 0 1px rgba(0,0,0,.06) inset;
     position: relative;
     overflow-wrap: break-word;
+    word-wrap: break-word;
   }
 
     /* email css reset */
@@ -3196,6 +3211,10 @@ footer {
       vertical-align: top;
     }
 
+.article-add {
+  position: relative;
+}
+
 .ticket-edit {
   margin-top: auto;
   margin-bottom: 36px;
@@ -3215,7 +3234,9 @@ footer {
   }
 
 .editControls {
-  position: relative;
+  position: absolute;
+  left: 0;
+  top: 5px;
 }
 
   .editControls-item {

public/assets/images/sprite.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="333px" height="362px" viewBox="0 0 333 362" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.1.1 (8761) - http://www.bohemiancoding.com/sketch -->
+<svg width="341px" height="362px" viewBox="0 0 341 362" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
     <title>Slice 2</title>
     <desc>Created with Sketch.</desc>
     <defs>