Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

rewrite avatar first param: 40, 50 or 80

Browse source 
depricated avatar class: 'big'
new avatar classes: size-40 (default, equal to no additional avatar class), size-50 and size-80
This commit is contained in:
Felix Niklas 2014-11-06 16:18:22 +01:00
parent 914102a0e3
commit 99d86d74e0
12 changed files with 68 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/javascripts/app/controllers/layout_ref.js.coffee
View file

@ -24,7 +24,10 @@ class Content extends App.ControllerContent
for avatar in @$('.user.avatar')
avatar = $(avatar)
size = if avatar.hasClass('big') then 50 else 40
size = switch
when avatar.hasClass('size-80') then 80
when avatar.hasClass('size-50') then 50
else 40
@createUniqueAvatar avatar, size, avatar.data('firstname'), avatar.data('lastname'), avatar.data('userid')
createUniqueAvatar: (holder, size, firstname, lastname, id) ->
@ -576,4 +579,15 @@ class ImportWizard extends App.ControllerContent
App.Config.set( 'layout_ref/import_wizard', ImportWizard, 'Routes' )
class UserZoom extends App.ControllerContent
constructor: ->
super
@render()
render: ->
@html App.view('layout_ref/user_zoom')()
App.Config.set( 'layout_ref/user_zoom', UserZoom, 'Routes' )
App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )

16
app/assets/javascripts/app/models/user.js.coffee
View file

@ -52,24 +52,24 @@ class App.User extends App.Model
else
return '??'
avatar: (big = false, placement = '', cssClass = '') ->
if big
cssClass += ' big'
avatar: (size = 40, placement = '', cssClass = '') ->
cssClass += " size-#{ size }"
if placement
placement = "data-placement=\"#{placement}\""
if @image is 'none'
return @uniqueAvatar(big, placement, cssClass)
return @uniqueAvatar(size, placement, cssClass)
else
"<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{ @imageUrl })\" #{placement}></span>"
uniqueAvatar: (big = false, placement = '', cssClass = '') ->
if big
cssClass += ' big'
uniqueAvatar: (size = 40, placement = '', cssClass = '') ->
if size and !cssClass
cssClass += " size-#{ size }"
width = 300
height = 226
size = if big then 50 else 40
size = parseInt(size, 10)
rng = new Math.seedrandom(@id)
x = rng() * (width - size)

2
app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
View file

@ -32,7 +32,7 @@
</div>
<div class="page-header horizontal">
<div class="flex vertical center">
<span class="avatar unique user-popover big" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
<span class="avatar unique user-popover size-50" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
<div class="ticket-title">
<h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
</div>

24
app/assets/javascripts/app/views/layout_ref/content.jst.eco
View file

@ -16,6 +16,21 @@
<h2>Avatars</h2>
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
<p><code>.avatar</code></p>
<div class="avatar size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
<p><code>.avatar.size-50</code></p>
<div class="avatar size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
<p><code>.avatar.size-80</code></p>
<h2>Unique Avatars</h2>
<p>
Users and customers might not have a profile images because:
</p>
@ -36,9 +51,12 @@
<span class="user avatar" data-firstname="Stefanie" data-lastname="Lingerl" data-userid="7"></span>
<span class="user avatar" data-firstname="Igor" data-lastname="Kaufer" data-userid="8"></span>
<span class="user avatar" data-firstname="Ina" data-lastname="Lingerl" data-userid="12"></span>
<span class="big user avatar" data-firstname="Andreas" data-lastname="Berger" data-userid="9"></span>
<span class="big user avatar" data-firstname="Luisa" data-lastname="Hofner" data-userid="10"></span>
<span class="big user avatar" data-firstname="Clara" data-lastname="Altman" data-userid="11"></span>
<span class="size-50 user avatar" data-firstname="Andreas" data-lastname="Berger" data-userid="9"></span>
<span class="size-50 user avatar" data-firstname="Luisa" data-lastname="Hofner" data-userid="10"></span>
<span class="size-50 user avatar" data-firstname="Clara" data-lastname="Altman" data-userid="11"></span>
<span class="size-80 user avatar" data-firstname="Christian" data-lastname="Jonga" data-userid="12"></span>
<span class="size-80 user avatar" data-firstname="Rando" data-lastname="Bauer" data-userid="13"></span>
<span class="size-80 user avatar" data-firstname="Korinna" data-lastname="Jung" data-userid="14"></span>
<hr>

6
app/assets/javascripts/app/views/layout_ref/content_sidebar_right.jst.eco
View file

@ -7,12 +7,6 @@
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
</p>
<p>
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_normal.jpg)"></div>
<div class="avatar big" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_normal.jpg)"></div>
<div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
<div class="avatar big" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
</p>
<p>

2
app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
View file

@ -1,4 +1,4 @@
<div class="avatar-holder">
<span class="avatar big" style="background-image: url(<%- @src %>)"></span>
<span class="avatar size-50" style="background-image: url(<%- @src %>)"></span>
<div class="avatar-delete"><div class="delete icon"></div></div>
</div>

6
app/assets/javascripts/app/views/profile/avatar.jst.eco
View file

@ -11,13 +11,13 @@
</div>
<div class="avatar-gallery horizontal wrap">
<div class="avatar-holder">
<%- App.Session.get().uniqueAvatar(true) %>
<%- App.Session.get().uniqueAvatar("50") %>
</div>
<div class="avatar-holder">
<%- App.Session.get().avatar(true, undefined, 'is-active') %>
<%- App.Session.get().avatar("50", undefined, 'is-active') %>
<div class="avatar-delete"><div class="delete icon"></div></div>
</div>
<!-- <div class="active">
<div class="big avatar avatar--new centered"><div class="white plus icon"></div></div>
<div class="size-50 avatar avatar--new centered"><div class="white plus icon"></div></div>
</div> -->
</div>

2
app/assets/javascripts/app/views/ticket_zoom.jst.eco
View file

@ -25,7 +25,7 @@
</div>
<div class="page-header horizontal">
<div class="flex vertical center">
<%- @ticket.customer.avatar(true) %>
<%- @ticket.customer.avatar("50") %>
<div class="ticket-title"></div>
<div class="ticket-meta"></div>
</div>

2
app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
View file

@ -39,7 +39,7 @@
<% else: %>
<% position = 'right' %>
<% end %>
<%- article.created_by.avatar(false, position) %>
<%- article.created_by.avatar("40", position) %>
<div class="flex bubble-gap internal-border">
<div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
</div>

2
app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
View file

@ -4,7 +4,7 @@
<input type="hidden" name="form_id" value="<%= @article.form_id %>">
<div class="bubble-grid horizontal">
<div class="editControls">
<%- App.User.fullLocal( @S('id') ).avatar(false, 'right', 'zIndex-5') %>
<%- App.User.fullLocal( @S('id') ).avatar("40", 'right', 'zIndex-5') %>
<div class="dark pop-select zIndex-7 editControls-item">
<div class="pop-selected u-clickable centered">
<div class="gray <%- @article.type %> channel icon"></div>

2
app/assets/javascripts/app/views/widget/user.jst.eco
View file

@ -1,7 +1,7 @@
<div class="userInfo">
<div class="userInfo-entry">
<td>
<%- @user.avatar(true) %>
<%- @user.avatar("50") %>
<div class="userInfo-name">
<div class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%= @user.displayName() %>

19
app/assets/stylesheets/zammad.css.scss
View file

@ -5,12 +5,13 @@ body {
background: hsl(210,17%,98%);
}
ol,
p,
ol,
ul {
color: #bcbcbb;
}
p {
color: #bcbcbb;
margin: 14px 0;
}
@ -2100,11 +2101,16 @@ footer {
vertical-align: bottom;
}
.big.avatar {
.avatar.size-50 {
width: 50px;
height: 50px;
}
.avatar.size-80 {
width: 82px;
height: 82px;
}
.unique.avatar {
background-image: image_url("avatar-bg.png");
background-size: auto;
@ -2117,11 +2123,16 @@ footer {
text-shadow: 0 1px rgba(0,0,0,.2);
}
.unique.big.avatar {
.unique.avatar.size-50 {
font-size: 16px;
line-height: 52px;
}
.unique.avatar.size-80 {
font-size: 20px;
line-height: 84px;
}
.sidebar {
width: 32%;
max-width: 300px;