Merge branch 'develop' of git.znuny.com:zammad/zammad into develop

app/assets/javascripts/app/controllers/ticket_overview.coffee

@@ -350,6 +350,10 @@ class App.TicketOverview extends App.Controller
     return if !@batchOverlayShown # user might have dropped the item already
     @batchAssignShown = true
 
+    @batchCancel.css
+      top: 0
+      bottom: @batchAssign.height()
+
     @batchAssign.velocity
       properties:
         translateY: [0, '100%']
@@ -360,10 +364,6 @@ class App.TicketOverview extends App.Controller
         visibility: 'visible'
         complete: @highlightBatchEntryAtMousePosition
 
-    @batchCancel.css
-      top: 0
-      bottom: 'auto'
-
     @batchCancel.velocity
       properties:
         translateY: [0, '100%']
@@ -452,6 +452,10 @@ class App.TicketOverview extends App.Controller
     return if !@batchOverlayShown # user might have dropped the item already
     @batchMacroShown = true
 
+    @batchCancel.css
+      bottom: 0
+      top: @batchMacro.height()
+
     @batchMacro.velocity
       properties:
         translateY: [0, '-100%']
@@ -462,9 +466,6 @@ class App.TicketOverview extends App.Controller
         visibility: 'visible'
         complete: @highlightBatchEntryAtMousePosition
 
-    @batchCancel.css
-      top: 'auto'
-      bottom: 0
     @batchCancel.velocity
       properties:
         translateY: [0, '-100%']

app/assets/javascripts/app/models/group.coffee

@@ -27,3 +27,11 @@ class App.Group extends App.Model
     else if item.type is 'update'
       return App.i18n.translateContent('%s updated Group |%s|', item.created_by.displayName(), item.title)
     return "Unknow action for (#{@objectDisplayName()}/#{item.type}), extend activityMessage() of model."
+
+  avatar: (size = 40, cssClass = []) ->
+    size = parseInt(size, 10)
+    cssClass.push("size-#{ size }")
+    cssClass.push("avatar--group-color-#{@id % 3}")
+
+    return App.view('avatar_group')
+      cssClass: cssClass.join(" ")

app/assets/javascripts/app/views/avatar_group.jst.eco

@@ -0,0 +1,3 @@
+<span class="avatar avatar--group <%- @cssClass %>">
+  <%- @Icon('team') %>
+</span>

app/assets/javascripts/app/views/ticket_overview/batch_overlay_user_group.jst.eco

@@ -6,9 +6,7 @@
 <% end %>
 <% for group in @groups: %>
 <div class="batch-overlay-assign-entry js-batch-overlay-entry" data-action="group_assign" data-id="<%= group.id %>">
-  <span class="avatar avatar--organization size-80 js-batch-hover-target">
-    <%- @Icon('organization') %>
-  </span>
+	<div class="js-batch-hover-target"><%- group.avatar(80) %></div>
   <div class="batch-overlay-assign-entry-name"><%- group.displayName() %></div>
   <div class="batch-overlay-assign-entry-detail"><%- @T('%s people', group.valid_user_ids.length) %></div>
 </div>

app/assets/stylesheets/zammad.scss

@@ -1098,16 +1098,6 @@ th.align-right {
       box-shadow: 0 0 0 2px hsl(201,62%,90%);
       color: hsl(200,71%,59%);
     }
-
-    &:indeterminate {
-      ~ .icon-checked,
-      ~ .icon-unchecked {
-        display: none;
-      }
-      ~ .icon-indeterminate {
-        display: block;
-      }
-    }
   }
 
   + .label-text {
@@ -1115,6 +1105,18 @@ th.align-right {
   }
 }
 
+.checkbox-replacement {
+  &:indeterminate {
+    ~ .icon-checked,
+    ~ .icon-unchecked {
+      display: none;
+    }
+    ~ .icon-indeterminate {
+      display: block;
+    }
+  }
+}
+
 .radio-replacement {
   input:focus ~ .icon-checked,
   input:focus ~ .icon-unchecked {
@@ -3646,6 +3648,50 @@ footer {
     }
   }
 
+  &--group {
+    overflow: hidden;
+    
+    .icon {
+      fill: white;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 44px;
+      height: 44px;
+      bottom: -8px;
+    }
+
+    &.size-30 .icon {
+      width: 33px;
+      height: 33px;
+      bottom: -6px;
+    }
+
+    &.size-50 .icon {
+      width: 55px;
+      height: 55px;
+      bottom: -10px;
+    }
+
+    &.size-80 .icon {
+      width: 88px;
+      height: 88px;
+      bottom: -15px;
+    }
+
+    &-color-0 {
+      background: hsl(192,100%,38%);
+    }
+
+    &-color-1 {
+      background: hsl(148,100%,38%);
+    }
+
+    &-color-2 {
+      background: hsl(57,100%,37%);
+    }
+  }
+
   .icon-logo {
     width: 100%;
     height: 100%;
@@ -4723,17 +4769,15 @@ footer {
   .article-action {
     padding-top: 5px;
     margin-top: 5px;
-    color: black;
+    color: hsl(198,4%,56%);
     font-size: 12px;
     text-align: center;
-    opacity: 0.5;
     @extend .u-clickable;
   }
 
     .article-action:hover {
       color: black;
       text-decoration: none;
-      opacity: 1;
     }
 
     .article-action-icon {
@@ -4741,6 +4785,7 @@ footer {
       vertical-align: top;
       width: 17px;
       height: 17px;
+      fill: currentColor;
     }
 
 .article-add {
@@ -8466,13 +8511,16 @@ output {
     border: 2px dashed hsla(0,0%,100%,.3);
     border-radius: 8px;
     padding: 28px;
-    margin: 50px 200px;
+    margin: auto 200px;
     position: absolute;
-    top: 0;
     left: 0;
     right: 0;
+    max-height: 100px;
     visibility: hidden;
     will-change: opacity;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   &-box {
@@ -8541,10 +8589,7 @@ output {
         box-sizing: content-box;
         transition: transform 120ms;
         cursor: inherit;
-        
-        &--organization {
-          background: hsl(191,68%,47%);
-        }
+        z-index: 1;
       }
 
       &-name {