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') for avatar in @$('.user.avatar')
avatar = $(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 avatar, size, avatar.data('firstname'), avatar.data('lastname'), avatar.data('userid')
createUniqueAvatar: (holder, size, firstname, lastname, id) -> createUniqueAvatar: (holder, size, firstname, lastname, id) ->
@ -576,4 +579,15 @@ class ImportWizard extends App.ControllerContent
App.Config.set( 'layout_ref/import_wizard', ImportWizard, 'Routes' ) 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' ) 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 else
return '??' return '??'
avatar: (big = false, placement = '', cssClass = '') -> avatar: (size = 40, placement = '', cssClass = '') ->
if big cssClass += " size-#{ size }"
cssClass += ' big'
if placement if placement
placement = "data-placement=\"#{placement}\"" placement = "data-placement=\"#{placement}\""
if @image is 'none' if @image is 'none'
return @uniqueAvatar(big, placement, cssClass) return @uniqueAvatar(size, placement, cssClass)
else else
"<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{ @imageUrl })\" #{placement}></span>" "<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{ @imageUrl })\" #{placement}></span>"
uniqueAvatar: (big = false, placement = '', cssClass = '') -> uniqueAvatar: (size = 40, placement = '', cssClass = '') ->
if big if size and !cssClass
cssClass += ' big' cssClass += " size-#{ size }"
width = 300 width = 300
height = 226 height = 226
size = if big then 50 else 40 size = parseInt(size, 10)
rng = new Math.seedrandom(@id) rng = new Math.seedrandom(@id)
x = rng() * (width - size) x = rng() * (width - size)

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

@ -32,7 +32,7 @@
</div> </div>
<div class="page-header horizontal"> <div class="page-header horizontal">
<div class="flex vertical center"> <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"> <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> <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> </div>

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

@ -16,6 +16,21 @@
<h2>Avatars</h2> <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> <p>
Users and customers might not have a profile images because: Users and customers might not have a profile images because:
</p> </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="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="Igor" data-lastname="Kaufer" data-userid="8"></span>
<span class="user avatar" data-firstname="Ina" data-lastname="Lingerl" data-userid="12"></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="size-50 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="size-50 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="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> <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. 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>
<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>
<p> <p>

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

@ -1,4 +1,4 @@
<div class="avatar-holder"> <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 class="avatar-delete"><div class="delete icon"></div></div>
</div> </div>

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

@ -11,13 +11,13 @@
</div> </div>
<div class="avatar-gallery horizontal wrap"> <div class="avatar-gallery horizontal wrap">
<div class="avatar-holder"> <div class="avatar-holder">
<%- App.Session.get().uniqueAvatar(true) %> <%- App.Session.get().uniqueAvatar("50") %>
</div> </div>
<div class="avatar-holder"> <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 class="avatar-delete"><div class="delete icon"></div></div>
</div> </div>
<!-- <div class="active"> <!-- <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> -->
</div> </div>

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

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

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

@ -39,7 +39,7 @@
<% else: %> <% else: %>
<% position = 'right' %> <% position = 'right' %>
<% end %> <% end %>
<%- article.created_by.avatar(false, position) %> <%- article.created_by.avatar("40", position) %>
<div class="flex bubble-gap internal-border"> <div class="flex bubble-gap internal-border">
<div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div> <div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
</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 %>"> <input type="hidden" name="form_id" value="<%= @article.form_id %>">
<div class="bubble-grid horizontal"> <div class="bubble-grid horizontal">
<div class="editControls"> <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="dark pop-select zIndex-7 editControls-item">
<div class="pop-selected u-clickable centered"> <div class="pop-selected u-clickable centered">
<div class="gray <%- @article.type %> channel icon"></div> <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">
<div class="userInfo-entry"> <div class="userInfo-entry">
<td> <td>
<%- @user.avatar(true) %> <%- @user.avatar("50") %>
<div class="userInfo-name"> <div class="userInfo-name">
<div class="u-textTruncate" title="<%- @Ti( 'Name') %>"> <div class="u-textTruncate" title="<%- @Ti( 'Name') %>">
<%= @user.displayName() %> <%= @user.displayName() %>

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

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