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:
parent
b3481f197e
commit
d9aa5db55f
3 changed files with 55 additions and 0 deletions
|
@ -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(" ")
|
3
app/assets/javascripts/app/views/avatar_group.jst.eco
Normal file
3
app/assets/javascripts/app/views/avatar_group.jst.eco
Normal file
|
@ -0,0 +1,3 @@
|
|||
<span class="avatar avatar--group <%- @cssClass %>">
|
||||
<%- @Icon('team') %>
|
||||
</span>
|
|
@ -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%;
|
||||
|
|
Loading…
Reference in a new issue