diff --git a/app/assets/javascripts/app/models/user.js.coffee b/app/assets/javascripts/app/models/user.js.coffee
index cedbf80c4..fd8861529 100644
--- a/app/assets/javascripts/app/models/user.js.coffee
+++ b/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()
- ""
+
+ # TODO: don't show vip when its the avatar of the logged-in user
+ if @vip
+ return ""
+ else
+ return ""
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"
- "#{ @initials() }"
+ return "#{ @initials() }"
+ else
+ return "#{ @initials() }"
imageUrl: ->
return if !@image
diff --git a/app/assets/javascripts/app/views/layout_ref/content.jst.eco b/app/assets/javascripts/app/views/layout_ref/content.jst.eco
index aa630b7cc..03d1151e7 100644
--- a/app/assets/javascripts/app/views/layout_ref/content.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/content.jst.eco
@@ -28,6 +28,20 @@
.avatar.size-80
+ VIP Avatars
+
+
+
+ .avatar
+
+
+
+ .avatar.size-50
+
+
+
+ .avatar.size-80
+
Unique Avatars
diff --git a/app/assets/stylesheets/svg-dimensions.css b/app/assets/stylesheets/svg-dimensions.css
index 9d84ae7ca..e83594be3 100644
--- a/app/assets/stylesheets/svg-dimensions.css
+++ b/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; }
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index 361cd20cd..d1326e33a 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -2542,24 +2542,35 @@ footer {
border-radius: 100%;
display: inline-block;
vertical-align: bottom;
-}
-
- :not(.navigation) .avatar.vip {
- border: 2px dotted;
- border-color: #fff;
+ position: relative;
+
+ .icon-crown {
+ position: absolute;
+ 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 {
- border: 2px dotted;
- line-height: 36px;
- }
+ &.size-50 {
+ font-size: 16px;
+ line-height: 52px;
+ }
- .unique.avatar.size-50 {
- font-size: 16px;
- line-height: 52px;
- }
-
- :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;
+ &.size-80 {
+ font-size: 20px;
+ line-height: 84px;
+ }
}
+}
.sidebar {
width: 32%;
diff --git a/contrib/icon-sprite.sketch b/contrib/icon-sprite.sketch
index 1b7eefa5c..c6ecaadc4 100644
Binary files a/contrib/icon-sprite.sketch and b/contrib/icon-sprite.sketch differ
diff --git a/public/assets/images/icons.svg b/public/assets/images/icons.svg
index 0dfa12770..ab2865c3a 100644
--- a/public/assets/images/icons.svg
+++ b/public/assets/images/icons.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/public/assets/images/icons/crown.svg b/public/assets/images/icons/crown.svg
new file mode 100644
index 000000000..39c9d8abf
--- /dev/null
+++ b/public/assets/images/icons/crown.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file