add vip crown

todo for martin:
- seperate avatar html into template
- don't add the crown if the user is the logged-in user?

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

@@ -61,10 +61,13 @@ class App.User extends App.Model
     if !@image || @image is 'none' || unique
       return @uniqueAvatar(size, placement, cssClass, avatar)
     else
-      if @vip
-        cssClass += " vip"
       image = @imageUrl()
-      "<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}></span>"
+
+      # TODO: don't show vip when its the avatar of the logged-in user
+      if @vip
+        return "<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></span>"
+      else
+        return "<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{image})\" #{placement}></span>"
 
   uniqueAvatar: (size, placement = '', cssClass = '', avatar) ->
     width  = 300
@@ -82,8 +85,9 @@ class App.User extends App.Model
       data      = "data-avatar-id=\"#{avatar.id}\""
 
     if @vip
-      cssClass += " vip"
+      return "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg>#{ @initials() }</span>"
-    "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}>#{ @initials() }</span>"
+    else
+      return "<span class=\"avatar unique #{cssClass}\" #{data} style=\"background-position: -#{ x }px -#{ y }px;\" #{placement}>#{ @initials() }</span>"
 
   imageUrl: ->
     return if !@image

app/assets/javascripts/app/views/layout_ref/content.jst.eco

@@ -28,6 +28,20 @@
 
   <p><code>.avatar.size-80</code></p>
 
+  <h2>VIP Avatars</h2>
+
+  <div class="avatar avatar--vip" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
+
+  <p><code>.avatar</code></p>
+
+  <div class="avatar avatar--vip size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
+
+  <p><code>.avatar.size-50</code></p>
+
+  <div class="avatar avatar--vip size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"><svg class='icon icon-crown'><use xlink:href='#icon-crown'></svg></div>
+
+  <p><code>.avatar.size-80</code></p>
+
 
   <h2>Unique Avatars</h2>
 

app/assets/stylesheets/svg-dimensions.css

@@ -9,6 +9,7 @@
 .icon-clock { width: 16px; height: 16px; }
 .icon-cloud { width: 16px; height: 16px; }
 .icon-cog { width: 20px; height: 20px; }
+.icon-crown { width: 32px; height: 27px; }
 .icon-dashboard { width: 24px; height: 24px; }
 .icon-diagonal-cross { width: 13px; height: 13px; }
 .icon-download { width: 14px; height: 13px; }

app/assets/stylesheets/zammad.css.scss

@@ -2542,24 +2542,35 @@ footer {
   border-radius: 100%;
   display: inline-block;
   vertical-align: bottom;
-}
+  position: relative;
-
+  
-  :not(.navigation) .avatar.vip {
+  .icon-crown {
-    border: 2px dotted;
+    position: absolute;
-    border-color: #fff;
+    width: 16px;
+    top: -12px;
+    left: 0;
   }
 
-  .avatar.size-50 {
+  &.size-50 {
     width: 50px;
     height: 50px;
+      
+    .icon-crown {
+      width: 20px;
+    }
   }
 
-  .avatar.size-80 {
+  &.size-80 {
     width: 82px;
     height: 82px;
+      
+    .icon-crown {
+      width: 32px;
+      top: -11px;
+    }
   }
 
-  .unique.avatar {
+  &.unique {
     background-image: image_url("/assets/images/avatar-bg.png");
     background-size: auto;
     color: white;
@@ -2570,31 +2581,18 @@ footer {
     text-transform: uppercase;
     text-shadow: 0 1px rgba(0,0,0,.2);
     cursor: default;
-  }
 
-  :not(.navigation) .unique.avatar.vip {
+    &.size-50 {
-    border: 2px dotted;
+      font-size: 16px;
-    line-height: 36px;
+      line-height: 52px;
-  }
+    }
 
-  .unique.avatar.size-50 {
+    &.size-80 {
-    font-size: 16px;
+      font-size: 20px;
-    line-height: 52px;
+      line-height: 84px;
-  }
+    }
-
-  :not(.navigation) .unique.avatar.size-50.vip {
-    line-height: 46px;
-  }
-
-  .unique.avatar.size-80 {
-    font-size: 20px;
-    line-height: 84px;
-  }
-
-  :not(.navigation) .unique.avatar.size-80.vip {
-    font-size: 20px;
-    line-height: 78px;
   }
+}
 
 .sidebar {
   width: 32%;

public/assets/images/icons/crown.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="32px" height="27px" viewBox="0 0 32 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
+    <title>crown</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="crown" sketch:type="MSArtboardGroup" fill="#FFEC00">
+            <path d="M30.1634955,9.17391304 L30.1634955,20.4782609 L2.33740854,20.4782609 L2.33740854,9.17391304 C1.73709903,9.17391304 1.25045202,8.68726603 1.25045202,8.08695652 C1.25045202,7.48664701 1.73709903,7 2.33740854,7 C2.93771805,7 3.42436506,7.48664701 3.42436506,8.08695652 C3.42436506,8.53544627 3.15274074,8.92049476 2.76502515,9.08656894 L2.76502515,9.08656894 L9.29393028,14.3913044 L15.8228354,9.08656894 L15.8228354,9.08656894 C15.4351198,8.92049476 15.1634955,8.53544627 15.1634955,8.08695652 C15.1634955,7.48664701 15.6501425,7 16.250452,7 C16.8507615,7 17.3374085,7.48664701 17.3374085,8.08695652 C17.3374085,8.53544627 17.0657842,8.92049476 16.6780686,9.08656894 L23.2069738,14.3913044 L29.7358789,9.08656894 C29.3481633,8.92049476 29.076539,8.53544627 29.076539,8.08695652 C29.076539,7.48664701 29.563186,7 30.1634955,7 C30.763805,7 31.250452,7.48664701 31.250452,8.08695652 C31.250452,8.68726603 30.763805,9.17391304 30.1634955,9.17391304 Z" id="Path-1-Copy-4" sketch:type="MSShapeGroup" transform="translate(16.250452, 13.739130) rotate(-33.000000) translate(-16.250452, -13.739130) "></path>
+        </g>
+    </g>
+</svg>