Skip to content

Commit 507bdc4

Browse files
ImTheKaiImTheKai
committed
add overlay of committer,core and contributor icons over the avatars
Signed-off-by: Kai Wagner <[email protected]>
1 parent deca280 commit 507bdc4

File tree

8 files changed

+127
-3
lines changed

8 files changed

+127
-3
lines changed

‎app/assets/stylesheets/components/messages.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@
4040
gap: var(--spacing-3);
4141
}
4242

43+
.author-avatar-link {
44+
position: relative;
45+
display: inline-block;
46+
}
47+
4348
.message-number {
4449
font-weight: var(--font-weight-bold);
4550
color: var(--color-gray-600);

‎app/assets/stylesheets/components/participants.css‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545

4646
.participant-avatar-link {
4747
display: inline-block;
48+
position: relative;
4849
}
4950

5051
.participant-name-link {
@@ -60,6 +61,51 @@
6061
font-weight: var(--font-weight-semibold);
6162
}
6263

64+
.participant-role-badge {
65+
position: absolute;
66+
bottom: -2px;
67+
right: -2px;
68+
width: 16px;
69+
height: 16px;
70+
border-radius: 999px;
71+
display: inline-flex;
72+
align-items: center;
73+
justify-content: center;
74+
border: 2px solid var(--color-bg-card);
75+
background: var(--color-gray-200);
76+
color: var(--color-text-secondary);
77+
font-size: 0.55rem;
78+
line-height: 1;
79+
box-shadow: var(--shadow-sm);
80+
z-index: 2;
81+
}
82+
83+
.participant-role-badge-core-team {
84+
background: var(--color-primary-500);
85+
color: var(--color-text-contrast);
86+
}
87+
88+
.participant-role-badge-committer {
89+
background: var(--color-success);
90+
color: var(--color-text-contrast);
91+
}
92+
93+
.participant-role-badge-major-contributor {
94+
background: var(--color-warning);
95+
color: var(--color-text-contrast);
96+
}
97+
98+
.participant-role-badge-significant-contributor {
99+
background: var(--color-primary-500);
100+
color: var(--color-text-contrast);
101+
}
102+
103+
.participant-role-badge-past-major-contributor,
104+
.participant-role-badge-past-significant-contributor {
105+
background: var(--color-gray-400);
106+
color: var(--color-text-contrast);
107+
}
108+
63109
.participants-count {
64110
border-radius: var(--border-radius-full);
65111
background: var(--color-bg-icon);

‎app/assets/stylesheets/components/topics.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -449,6 +449,11 @@ a.topic-icon {
449449
flex-shrink: 0;
450450
}
451451

452+
.topic-byline-avatar-wrap {
453+
position: relative;
454+
display: inline-flex;
455+
}
456+
452457
@media (max-width: 900px) {
453458
.topic-title-main {
454459
display: none;

‎app/helpers/application_helper.rb‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,47 @@ def commitfest_icon_class(summary)
5454
"fa-code-branch"
5555
end
5656

57+
def contributor_role_overlay(contributor)
58+
return nil unless contributor&.respond_to?(:contributor_type)
59+
60+
role_type = contributor.contributor_type
61+
return nil unless role_type
62+
63+
case role_type
64+
when "core_team"
65+
{ type: role_type, icon: "fa-solid fa-people-group", label: "Core Team" }
66+
when "committer"
67+
{ type: role_type, icon: "fa-solid fa-code-branch", label: "Committer" }
68+
when "major_contributor"
69+
{ type: role_type, icon: "fa-solid fa-star", label: "Major Contributor" }
70+
when "significant_contributor"
71+
{ type: role_type, icon: "fa-solid fa-award", label: "Significant Contributor" }
72+
when "past_major_contributor", "past_significant_contributor"
73+
{ type: role_type, icon: "fa-solid fa-clock-rotate-left", label: "Past Contributor" }
74+
end
75+
end
76+
77+
def contributor_role_overlay_for_types(types)
78+
types = Array(types).compact
79+
return nil if types.empty?
80+
81+
role_type = types.min_by { |type| Alias::CONTRIBUTOR_RANK[type] || 99 }
82+
return nil unless role_type
83+
84+
case role_type
85+
when "core_team"
86+
{ type: role_type, icon: "fa-solid fa-people-group", label: "Core Team" }
87+
when "committer"
88+
{ type: role_type, icon: "fa-solid fa-code-branch", label: "Committer" }
89+
when "major_contributor"
90+
{ type: role_type, icon: "fa-solid fa-star", label: "Major Contributor" }
91+
when "significant_contributor"
92+
{ type: role_type, icon: "fa-solid fa-award", label: "Significant Contributor" }
93+
when "past_major_contributor", "past_significant_contributor"
94+
{ type: role_type, icon: "fa-solid fa-clock-rotate-left", label: "Past Contributor" }
95+
end
96+
end
97+
5798
def read_visibility_seconds
5899
5
59100
end

‎app/views/topics/_avatar_list.slim‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
- role_label = person&.contributor_badge
1414
- tooltip_parts << role_label if role_label
1515
- badge_text = tooltip_parts.join(", ")
16+
- membership_types = person&.contributor_membership_types || []
17+
- role_badge = contributor_role_overlay_for_types(membership_types)
1618
- css_classes = ["participant-avatar"]
1719
- css_classes << "is-core-team" if person&.core_team?
1820
- css_classes << "is-committer" if !person&.core_team? && person&.committer?
@@ -21,5 +23,8 @@
2123
- css_classes << "is-past-contributor" if person&.past_contributor?
2224
= link_to person_path(alias_record.email), class: "participant-avatar-link" do
2325
= image_tag alias_record.gravatar_url(size: 32), class: css_classes.join(" "), alt: alias_record.name, title: badge_text
26+
- if role_badge
27+
span.participant-role-badge class="participant-role-badge-#{role_badge[:type].to_s.tr('_', '-')}" title=role_badge[:label]
28+
i class=role_badge[:icon]
2429
- if total_participants > participants.count
2530
span.participants-count +#{total_participants - participants.count}

‎app/views/topics/_message.html.slim‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,19 @@
2424
i.fa-regular.fa-copy
2525
- display_alias = message.sender_display_alias
2626
- profile_path = message.sender_person ? person_path(display_alias.email) : nil
27+
- role_badge = contributor_role_overlay(display_alias) || contributor_role_overlay(display_alias.person)
2728
- if profile_path
2829
= link_to profile_path, class: "author-avatar-link" do
2930
= image_tag display_alias.display_gravatar_url(size: 42), class: "message-avatar", alt: display_alias.name
31+
- if role_badge
32+
span.participant-role-badge class="participant-role-badge-#{role_badge[:type].to_s.tr('_', '-')}" title=role_badge[:label]
33+
i class=role_badge[:icon]
3034
- else
31-
= image_tag display_alias.display_gravatar_url(size: 42), class: "message-avatar", alt: display_alias.name
35+
span.author-avatar-link
36+
= image_tag display_alias.display_gravatar_url(size: 42), class: "message-avatar", alt: display_alias.name
37+
- if role_badge
38+
span.participant-role-badge class="participant-role-badge-#{role_badge[:type].to_s.tr('_', '-')}" title=role_badge[:label]
39+
i class=role_badge[:icon]
3240
.author-details
3341
- if profile_path
3442
.author-name = link_to display_alias.name, profile_path, class: "author-name-link"

‎app/views/topics/_participant_row.html.slim‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
- avatar_classes = ["participant-avatar"]
1414
- membership_icons = []
1515
- membership_types = person&.contributor_membership_types || []
16+
- role_badge = contributor_role_overlay_for_types(membership_types)
1617
- if membership_types.include?("core_team")
1718
- membership_icons << { icon: "fa-solid fa-people-group", label: "Core Team" }
1819
- if membership_types.include?("committer")
@@ -27,6 +28,9 @@
2728
.participant-left
2829
= link_to person_path(alias_record.email), class: "participant-avatar-link" do
2930
= image_tag alias_record.gravatar_url(size: avatar_size), class: avatar_classes.join(" "), alt: alias_record.name, title: tooltip
31+
- if role_badge
32+
span.participant-role-badge class="participant-role-badge-#{role_badge[:type].to_s.tr('_', '-')}" title=role_badge[:label]
33+
i class=role_badge[:icon]
3034
.participant-details
3135
- name_classes = ["participant-name-link"]
3236
- name_classes << "is-committer" if membership_types.include?("committer")

‎app/views/topics/_status_cell.html.slim‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,22 @@ td.topic-title.status-border class=status_class id=dom_id(topic, "status_cell")
3131
- if creator || last_sender
3232
.topic-byline
3333
- if creator
34+
- creator_role_badge = contributor_role_overlay_for_types(creator.person&.contributor_membership_types)
3435
span.topic-byline-item
35-
= image_tag creator.gravatar_url(size: 20), class: "topic-byline-avatar", alt: creator.name
36+
span.topic-byline-avatar-wrap
37+
= image_tag creator.gravatar_url(size: 20), class: "topic-byline-avatar", alt: creator.name
38+
- if creator_role_badge
39+
span.participant-role-badge class="participant-role-badge-#{creator_role_badge[:type].to_s.tr('_', '-')}" title=creator_role_badge[:label]
40+
i class=creator_role_badge[:icon]
3641
span.topic-byline-name = creator.name
3742
- if last_sender
43+
- last_sender_role_badge = contributor_role_overlay_for_types(last_sender.person&.contributor_membership_types)
3844
span.topic-byline-item.topic-byline-right
39-
= image_tag last_sender.gravatar_url(size: 20), class: "topic-byline-avatar", alt: last_sender.name
45+
span.topic-byline-avatar-wrap
46+
= image_tag last_sender.gravatar_url(size: 20), class: "topic-byline-avatar", alt: last_sender.name
47+
- if last_sender_role_badge
48+
span.participant-role-badge class="participant-role-badge-#{last_sender_role_badge[:type].to_s.tr('_', '-')}" title=last_sender_role_badge[:label]
49+
i class=last_sender_role_badge[:icon]
4050
span.topic-byline-name = last_sender.name
4151
.topic-row-footer
4252
.topic-footer-icons

0 commit comments

Comments
 (0)