From d9aa5db55f1c28db59ac831e9af306202e05b0db Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 21 Feb 2017 09:58:10 +0100
Subject: [PATCH] Group Avatar

- add support for group avatars
- get different background colors - blue, green and yellow - based on the id
- use the team icon
---
 .../javascripts/app/models/group.coffee       |  8 ++++
 .../app/views/avatar_group.jst.eco            |  3 ++
 app/assets/stylesheets/zammad.scss            | 44 +++++++++++++++++++
 3 files changed, 55 insertions(+)
 create mode 100644 app/assets/javascripts/app/views/avatar_group.jst.eco

diff --git a/app/assets/javascripts/app/models/group.coffee b/app/assets/javascripts/app/models/group.coffee
index b9b2925a2..b849bd075 100644
--- a/app/assets/javascripts/app/models/group.coffee
+++ b/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(" ")
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/avatar_group.jst.eco b/app/assets/javascripts/app/views/avatar_group.jst.eco
new file mode 100644
index 000000000..10dba620d
--- /dev/null
+++ b/app/assets/javascripts/app/views/avatar_group.jst.eco
@@ -0,0 +1,3 @@
+<span class="avatar avatar--group <%- @cssClass %>">
+  <%- @Icon('team') %>
+</span>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index b25c022e0..e73efaaa7 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/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%;