summaryrefslogtreecommitdiffstats
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/assets/stylesheets/application.css124
-rw-r--r--app/helpers/avatars_helper.rb62
-rw-r--r--app/views/issues/show.html.erb4
-rw-r--r--app/views/layouts/base.html.erb8
4 files changed, 150 insertions, 48 deletions
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index e994c12af..568bed2bc 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -433,7 +433,7 @@ tr.entry.file td.filename a { margin-left: 26px; }
tr.entry.file td.filename_no_report a { margin-left: 16px; }
tr span.expander, .gantt_subjects div > span.expander {margin-left: 0; cursor: pointer;}
-.gantt_subjects div > span .icon-gravatar {float: none;}
+.gantt_subjects .avatar {margin-right: 4px;}
.gantt_subjects div.project-name a, .gantt_subjects div.version-name a {margin-left: 4px;}
tr.changeset { height: 20px }
@@ -461,7 +461,7 @@ tr.version:not(.shared) td.name { padding-left: 20px; }
tr.version td.date, tr.version td.status, tr.version td.sharing { text-align: center; white-space:nowrap; }
#principals_for_new_member .icon-user, #users_for_watcher .icon-user {background:transparent;}
-#principals_for_new_member svg, #principals_for_new_member img {margin-right: 4px;}
+#principals_for_new_member svg, #principals_for_new_member .avatar {margin-right: 4px;}
tr.user td {width:13%;white-space: nowrap;}
td.username, td.firstname, td.lastname, td.email {text-align:left !important;}
@@ -565,9 +565,9 @@ body.controller-gantts fieldset#options > div > div {
td.center {text-align:center;}
#watchers select {width: 95%; display: block;}
-#watchers img.gravatar {margin: 0 4px 2px 0;}
+#watchers .avatar {margin: 0 4px 2px 0;}
#watchers svg.icon-svg {margin: 0 2px 2px 0;}
-#users_for_watcher img.gravatar {padding-bottom: 2px; margin-right: 4px;}
+#users_for_watcher .avatar {padding-bottom: 2px; margin-right: 4px;}
#users_for_watcher svg {margin-right: 4px;}
#users_for_watcher span.icon-user {display: inline;}
@@ -1439,7 +1439,7 @@ p.cal.legend span {display:flex;}
.tooltip span.tip{display: none; text-align:left;}
.tooltip span.tip a { color: #169 !important; }
-.tooltip span.tip img.gravatar {
+.tooltip span.tip .avatar {
float: none;
margin: 0;
}
@@ -1794,9 +1794,6 @@ table.gantt-table td {
}
.gantt_subjects div.issue-subject:hover { background-color:#ffffdd; }
.gantt_selected_column_content > div { padding-left: 3px; box-sizing: border-box; }
-.gantt_subjects .issue-subject img.icon-gravatar {
- margin: 2px 5px 0px 2px;
-}
.gantt_hdr_selected_column_name {
position: absolute;
@@ -2184,21 +2181,16 @@ tr.ui-sortable-helper { border:1px solid #e4e4e4; }
.contextual>*:not(:first-child), .buttons>.icon:not(:first-child), .contextual .journal-actions>*:not(:first-child) { margin-left: 5px; }
-img.gravatar {
- vertical-align: middle;
- border-radius: 20%;
-}
-
-div.issue img.gravatar {
+div.issue .avatar {
float: left;
margin: 0 12px 6px 0;
}
-div.gravatar-with-child {
+div.avatar-with-child {
position: relative;
}
-div.gravatar-with-child > img.gravatar:nth-child(2) {
+div.avatar-with-child > .avatar:nth-child(2) {
position: absolute;
top: 30px;
left: 30px;
@@ -2206,11 +2198,11 @@ div.gravatar-with-child > img.gravatar:nth-child(2) {
border: 2px solid rgba(255, 255, 255, 0.9);
}
-h2 img.gravatar, h3 img.gravatar {margin-right: 4px;}
+h2 .avatar, h3 .avatar {margin-right: 4px;}
+h4 img.gravatar {margin: -2px 4px -4px 0;}
+/*# TODO: check where this rule is still used*/
td.username img.gravatar {margin: 0 0.5em 0 0; vertical-align: top;}
-#activity dt img.gravatar {margin: 0 1em 0 0;}
-/* Used on 12px Gravatar img tags without the icon background */
-.icon-gravatar {float: left; margin-right: 4px;}
+#activity dt .avatar {margin: 0 1em 0 0;}
#activity dt, .journal {clear: left;}
@@ -2233,6 +2225,98 @@ color: #555; text-shadow: 1px 1px 0 #fff;
img.filecontent.image {background-image: url(/transparent.png);}
+/* Avatar styles */
+.avatar {
+ border-radius: 20%;
+ display: inline-flex;
+ vertical-align: middle;
+}
+
+span[role="img"].avatar {
+ font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ align-items: center;
+ display: inline-flex;
+ font-size: calc(24px * .4);
+ justify-content: center;
+ user-select: none;
+ font-weight: 700;
+}
+.avatar.s13 {
+ block-size: 13px;
+ inline-size: 13px;
+}
+span[role="img"].avatar.s13 {
+ font-size: calc(16px * .3);
+}
+.avatar.s16 {
+ block-size: 16px;
+ inline-size: 16px;
+}
+span[role="img"].avatar.s16 {
+ font-size: calc(16px * .4);
+}
+.avatar.s22 {
+ block-size: 22px;
+ inline-size: 22px;
+}
+span[role="img"].avatar.s22 {
+ font-size: calc(22px * .4);
+}
+.avatar.s24 {
+ block-size: 24px;
+ inline-size: 24px;
+}
+span[role="img"].avatar.s24 {
+ font-size: calc(24px * .4);
+}
+.avatar.s40 {
+ block-size: 40px;
+ inline-size: 40px;
+}
+span[role="img"].avatar.s40 {
+ font-size: calc(40px * .4);
+}
+.avatar.s50 {
+ block-size: 50px;
+ inline-size: 50px;
+}
+span[role="img"].avatar.s50 {
+ font-size: calc(50px * .4);
+}
+
+.avatar-color-0 {
+ background-color: #880000;
+ color: #FFFFFF;
+}
+.avatar-color-1 {
+ background-color: #ff0000;
+ color: #000000;
+}
+.avatar-color-2 {
+ background-color: #00ff00;
+ color: #000000;
+}
+.avatar-color-3 {
+ background-color: #008800;
+ color: #FFFFFF;
+}
+.avatar-color-4 {
+ background-color: #0000ff;
+ color: #FFFFFF;
+}
+.avatar-color-5 {
+ background-color: #000088;
+ color: #FFFFFF;
+}
+.avatar-color-6 {
+ background-color: #ff8800;
+ color: #000000;
+}
+.avatar-color-7 {
+ background-color: #ff0088;
+ color: #000000;
+}
+
/* Reaction styles */
.reaction-button:hover, .reaction-button:active {
text-decoration: none;
diff --git a/app/helpers/avatars_helper.rb b/app/helpers/avatars_helper.rb
index cd9c1d66e..67567fd8d 100644
--- a/app/helpers/avatars_helper.rb
+++ b/app/helpers/avatars_helper.rb
@@ -38,25 +38,9 @@ module AvatarsHelper
# +user+ can be a User or a string that will be scanned for an email address (eg. 'joe <joe@foo.bar>')
def avatar(user, options = {})
if Setting.gravatar_enabled?
- options[:default] = Setting.gravatar_default
- options[:class] = GravatarHelper::DEFAULT_OPTIONS[:class] + " " + options[:class] if options[:class]
- email = nil
- if user.respond_to?(:mail)
- email = user.mail
- options[:title] = user.name unless options[:title]
- options[:initials] = user.initials if options[:default] == "initials" && user.initials.present?
- elsif user.to_s =~ %r{<(.+?)>}
- email = $1
- end
- if email.present?
- gravatar(email.to_s.downcase, options) rescue nil
- elsif user.is_a?(AnonymousUser)
- anonymous_avatar(options)
- elsif user.is_a?(Group)
- group_avatar(options)
- else
- nil
- end
+ gravatar_avatar_tag(user, options)
+ elsif user.respond_to?(:initials)
+ initials_avatar_tag(user, options)
else
''
end
@@ -70,8 +54,6 @@ module AvatarsHelper
end
end
- private
-
def anonymous_avatar(options={})
image_tag 'anonymous.png', GravatarHelper::DEFAULT_OPTIONS.except(:default, :rating, :ssl).merge(options)
end
@@ -79,4 +61,42 @@ module AvatarsHelper
def group_avatar(options={})
image_tag 'group.png', GravatarHelper::DEFAULT_OPTIONS.except(:default, :rating, :ssl).merge(options)
end
+
+ private
+
+ def gravatar_avatar_tag(user, options)
+ options[:default] = Setting.gravatar_default
+ options[:class] = [GravatarHelper::DEFAULT_OPTIONS[:class], options[:class]].compact.join(' ')
+
+ email = extract_email_from_user(user)
+
+ if user.respond_to?(:mail)
+ options[:title] ||= user.name
+ options[:initials] = user.initials if options[:default] == "initials" && user.initials.present?
+ end
+
+ if email.present?
+ gravatar(email.to_s.downcase, options) rescue nil
+ elsif user.is_a?(AnonymousUser)
+ anonymous_avatar(options)
+ elsif user.is_a?(Group)
+ group_avatar(options)
+ end
+ end
+
+ def initials_avatar_tag(user, options)
+ size = (options.delete(:size) || GravatarHelper::DEFAULT_OPTIONS[:size]).to_i
+
+ css_class = ["avatar-color-#{user.id % 8}", 'avatar', "s#{size}", options[:class]].compact.join(' ')
+
+ content_tag('span', user.initials, role: 'img', class: css_class, title: options[:title])
+ end
+
+ def extract_email_from_user(user)
+ if user.respond_to?(:mail)
+ user.mail
+ elsif user.to_s =~ %r{<(.+?)>}
+ $1
+ end
+ end
end
diff --git a/app/views/issues/show.html.erb b/app/views/issues/show.html.erb
index 696b8f0ec..6892269e4 100644
--- a/app/views/issues/show.html.erb
+++ b/app/views/issues/show.html.erb
@@ -28,9 +28,9 @@
</div>
<% end %>
- <div class="gravatar-with-child">
+ <div class="avatar-with-child">
<%= author_avatar(@issue.author, :size => "50") %>
- <%= assignee_avatar(@issue.assigned_to, :size => "22", :class => "gravatar-child") if @issue.assigned_to %>
+ <%= assignee_avatar(@issue.assigned_to, :size => "22", :class => "avatar-child") if @issue.assigned_to %>
</div>
<div data-controller="sticky-issue-header">
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
index e982f534c..9e2ef51b5 100644
--- a/app/views/layouts/base.html.erb
+++ b/app/views/layouts/base.html.erb
@@ -36,11 +36,9 @@
<% end %>
<% if User.current.logged? %>
- <div class="flyout-menu__avatar <% if !Setting.gravatar_enabled? %>flyout-menu__avatar--no-avatar<% end %>">
- <% if Setting.gravatar_enabled? %>
- <%= link_to(avatar(User.current, :size => "80"), user_path(User.current)) %>
- <% end %>
- <%= link_to_user(User.current, :format => :username) %>
+ <div class="flyout-menu__avatar">
+ <%= link_to(avatar(User.current, :size => "40"), user_path(User.current)) %>
+ <%= link_to_user(User.current, :format => :username) %>
</div>
<% end %>