Group Avatar

- add support for group avatars
- get different background colors - blue, green and yellow - based on the id
- use the team icon
This commit is contained in:
Felix Niklas 2017-02-21 09:58:10 +01:00
parent b3481f197e
commit d9aa5db55f
3 changed files with 55 additions and 0 deletions

View file

@ -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(" ")

View file

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

View file

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