Implemented new avatars.

app/assets/javascripts/app/controllers/_dashboard/activity_stream.js.coffee

@@ -49,7 +49,7 @@ class App.DashboardActivityStream extends App.Controller
     @html html
 
     # start user popups
-    @userPopups('right')
+    @userPopups('left')
 
     # update time
     @frontendTimeUpdate()

app/assets/javascripts/app/controllers/_default_navbar.js.coffee

@@ -3,8 +3,9 @@ App.Config.set( 'User', {
   parent: '',
   callback: ->
     item = {}
-    item['name'] = App.Session.get( 'login' )
-    item['image'] = App.Session.get( 'imageUrl' )
+    item['name']   = App.Session.get( 'login' )
+    item['image']  = App.Session.get( 'imageUrl' )
+    item['avatar'] = App.User.fullLocal( App.Session.get('id') ).avatar()
     return item
   target: '#current_user',
   class:  'user'

app/assets/javascripts/app/models/user.js.coffee

@@ -36,6 +36,28 @@ class App.User extends App.Model
   icon: (user) ->
     "user icon"
 
+  initials: ->
+    @firstname[0] + @lastname[0]
+
+  avatar: (big = false, placement = '', cssClass = '') ->
+    if big
+      cssClass = ' big'
+    if placement
+      placement = "data-placement=\"#{placement}\""
+
+    if @image is 'none'
+      width  = 300
+      height = 226
+      size   = if big then 50 else 40
+
+      rng = new Math.seedrandom(@id)
+      x = rng() * (width - size)
+      y = rng() * (height - size)
+
+      "<span class=\"avatar unique user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}>#{ @initials() }</span>"
+    else
+      "<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{ @imageUrl })\" #{placement}></span>"
+
   @_fillUp: (data) ->
 
     # set socal media links

app/assets/javascripts/app/views/dashboard/activity_stream.jst.eco

@@ -1,8 +1,8 @@
 <h2 class="can-move"><%- @T( @head ) %></h2>
 <% for item in @items: %>
 <div class="activity-entry horizontal">
-  <a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>">
-    <span class="avatar" style="background-image: url(<%- item.created_by.imageUrl %>)"></span>
+  <a class="activity-avatar" href="<%- item.created_by.uiUrl() %>">
+    <%- item.created_by.avatar() %>
   </a>
   <a href="<%- item.link %>" class="activity-body flex horizontal">
     <span class="activity-message flex">

app/assets/javascripts/app/views/navigation/personal.jst.eco

@@ -4,7 +4,7 @@
       <a class="list-button horizontal centered dropdown-toggle" data-toggle="dropdown" href="<%= item.target %>" title="<%- @T( item.name ) %>">
         <span class="dropdown-nose"></span>
         <% if item.class is 'user': %>
-          <span class="user avatar" style="background-image: url(<%- item.image %>)"></span>
+          <%- item.avatar %>
         <% else: %>
           <span class="green plus icon"></span>
           <span class="white plus icon"></span>

app/assets/javascripts/app/views/ticket_zoom.jst.eco

@@ -4,7 +4,7 @@
       <div class="ticketZoom">
         <div class="page-header horizontal">
           <div class="flex vertical center">
-            <div class="big avatar user-popover" data-id="<%- @ticket.customer.id %>" style="background-image: url(<%- @ticket.customer.imageUrl %>)"></div>
+            <%- @ticket.customer.avatar(true) %>
             <div class="ticket-title"></div>
           </div>
           <div class="page-header-meta">

app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco

@@ -34,7 +34,12 @@
   </div>
 
   <div class="article-content zIndex-1 horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
-    <div class="avatar user-popover" data-placement="<% if article.sender.name isnt 'Agent': %>left<% else: %>right<% end %>" data-id="<%= article.created_by_id %>" style="background-image: url(<%= article.created_by.imageUrl %>)"></div>
+    <% if article.sender.name isnt 'Agent': %>
+    <%    position = 'left' %>
+    <% else: %>
+    <%    position = 'right' %>
+    <% end %>
+    <%- article.created_by.avatar(false, position) %>
     <div class="flex bubble-gap internal-border">
       <div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
     </div>

app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco

@@ -1,7 +1,7 @@
 <form class="ticket-update <% if @formChanged: %>form-changed<% end %>">
   <div class="bubble-grid horizontal">
     <div class="vertical center edit-controls">
-      <div class="avatar user-popover zIndex-5" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('imageUrl') %>)"></div>
+      <%- App.User.fullLocal( @S('id') ).avatar(false, 'right', 'zIndex-5') %>
       <div class="dark pop-select zIndex-7 edit-control-item">
         <div class="pop-selected u-clickable centered">
           <div class="gray <%- @type %> channel icon"></div>

app/assets/javascripts/app/views/widget/online_notification.jst.eco

@@ -1,7 +1,7 @@
 <% for item in @items: %>
 <div class="activity-entry horizontal">
   <a class="activity-avatar user-popover" data-id="<%= item.created_by_id %>" href="<%- item.created_by.uiUrl() %>">
-    <span class="avatar" style="background-image: url(<%- item.created_by.imageUrl %>)"></span>
+    <%- item.created_by.avatar() %>
   </a>
   <a href="<%- item.link %>" class="activity-body flex horizontal">
     <span class="activity-message flex">

app/assets/javascripts/app/views/widget/user.jst.eco

@@ -1,8 +1,7 @@
 <div class="user-info">
 
-<% if @user.imageUrl: %>
-  <div class="big avatar" style="background-image: url(<%- @user.imageUrl %>)"></div>
-<% end %>
+  <%- @user.avatar(true) %>
+
   <div class="customer-info" title="<%- @Ti( 'Name') %>"><%= @user.displayName() %></div>
 <% for row in @userData: %>
   <% if @user[row.name] || row.name is 'note': %>