Group Avatar

- add support for group avatars
- get different background colors - blue, green and yellow - based on the id
- use the team icon

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/stylesheets/zammad.scss

@@ -3648,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%;