Merge branch '29128-profile-page-icons' into 'master'

Resolve "Add system note icons to profile page"

Closes #29128

See merge request !10387

app/assets/stylesheets/pages/events.scss

@@ -4,14 +4,14 @@
  */
 .event-item {
   font-size: $gl-font-size;
-  padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top);
+  padding: $gl-padding-top 0 $gl-padding-top 40px;
   border-bottom: 1px solid $white-normal;
   color: $list-text-color;
+  position: relative;
 
   &.event-inline {
-    .avatar {
-      position: relative;
-      top: -2px;
+    .profile-icon {
+      top: 20px;
     }
 
     .event-title,
@@ -24,8 +24,28 @@
     color: $gl-text-color;
   }
 
-  .avatar {
-    margin-left: -($gl-avatar-size + $gl-padding-top);
+  .profile-icon {
+    position: absolute;
+    left: 0;
+    top: 14px;
+
+    svg {
+      width: 20px;
+      height: auto;
+      fill: $gl-text-color-secondary;
+    }
+
+    &.open-icon svg {
+      fill: $green-300;
+    }
+
+    &.closed-icon svg {
+      fill: $red-300;
+    }
+
+    &.fork-icon svg {
+      fill: $blue-300;
+    }
   }
 
   .event-title {
@@ -163,7 +183,7 @@
       max-width: 100%;
     }
 
-    .avatar {
+    .profile-icon {
       display: none;
     }
 

app/views/events/_event.html.haml

@@ -3,8 +3,6 @@
     .event-item-timestamp
       #{time_ago_with_tooltip(event.created_at)}
 
-    = author_avatar(event, size: 40)
-
     - if event.created_project?
       = render "events/event/created_project", event: event
     - elsif event.push?

app/views/events/event/_common.html.haml

+- if event.target
+  - if event.action_name == "opened"
+    .profile-icon.open-icon
+      = custom_icon("icon_status_open")
+  - elsif event.action_name == "closed"
+    .profile-icon.closed-icon
+      = custom_icon("icon_status_closed")
+  - else
+    .profile-icon.fork-icon
+      = custom_icon("code_fork")
+
 .event-title
-  %span.author_name= link_to_author event
   %span{ class: event.action_name }
   - if event.target
     = event.action_name

app/views/events/event/_created_project.html.haml

+.profile-icon.open-icon
+  = custom_icon("icon_status_open")
+
 .event-title
-  %span.author_name= link_to_author event
   %span{ class: event.action_name }
     = event_action_name(event)
 

app/views/events/event/_note.html.haml

+.profile-icon
+  = custom_icon("comment_o")
+
 .event-title
-  %span.author_name= link_to_author event
   = event.action_name
   = event_note_title_html(event)
 

app/views/events/event/_push.html.haml

 - project = event.project
 
+.profile-icon
+  - if event.action_name == "deleted"
+    = custom_icon("trash_o")
+  - else
+    = custom_icon("icon_commit")
+
 .event-title
-  %span.author_name= link_to_author event
   %span.pushed #{event.action_name} #{event.ref_type}
   %strong
     - commits_link = namespace_project_commits_path(project.namespace, project, event.ref_name)
@@ -48,4 +53,3 @@
     .event-body
       %ul.well-list.event_commits
         = render "events/commit", commit: last_commit, project: project, event: event
-

app/views/shared/icons/_code_fork.svg

+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M672 1472q0-40-28-68t-68-28-68 28-28 68 28 68 68 28 68-28 28-68zm0-1152q0-40-28-68t-68-28-68 28-28 68 28 68 68 28 68-28 28-68zm640 128q0-40-28-68t-68-28-68 28-28 68 28 68 68 28 68-28 28-68zm96 0q0 52-26 96.5t-70 69.5q-2 287-226 414-68 38-203 81-128 40-169.5 71t-41.5 100v26q44 25 70 69.5t26 96.5q0 80-56 136t-136 56-136-56-56-136q0-52 26-96.5t70-69.5v-820q-44-25-70-69.5t-26-96.5q0-80 56-136t136-56 136 56 56 136q0 52-26 96.5t-70 69.5v497q54-26 154-57 55-17 87.5-29.5t70.5-31 59-39.5 40.5-51 28-69.5 8.5-91.5q-44-25-70-69.5t-26-96.5q0-80 56-136t136-56 136 56 56 136z"/></svg>
\ No newline at end of file

app/views/shared/icons/_comment_o.svg

+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M896 384q-204 0-381.5 69.5t-282 187.5-104.5 255q0 112 71.5 213.5t201.5 175.5l87 50-27 96q-24 91-70 172 152-63 275-171l43-38 57 6q69 8 130 8 204 0 381.5-69.5t282-187.5 104.5-255-104.5-255-282-187.5-381.5-69.5zm896 512q0 174-120 321.5t-326 233-450 85.5q-70 0-145-8-198 175-460 242-49 14-114 22h-5q-15 0-27-10.5t-16-27.5v-1q-3-4-.5-12t2-10 4.5-9.5l6-9 7-8.5 8-9q7-8 31-34.5t34.5-38 31-39.5 32.5-51 27-59 26-76q-157-89-247.5-220t-90.5-281q0-174 120-321.5t326-233 450-85.5 450 85.5 326 233 120 321.5z"/></svg>
\ No newline at end of file

app/views/shared/icons/_icon_commit.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
-  <path fill="#8F8F8F" fill-rule="evenodd" d="M28.7769836,18 C27.8675252,13.9920226 24.2831748,11 20,11 C15.7168252,11 12.1324748,13.9920226 11.2230164,18 L4.0085302,18 C2.90195036,18 2,18.8954305 2,20 C2,21.1122704 2.8992496,22 4.0085302,22 L11.2230164,22 C12.1324748,26.0079774 15.7168252,29 20,29 C24.2831748,29 27.8675252,26.0079774 28.7769836,22 L35.9914698,22 C37.0980496,22 38,21.1045695 38,20 C38,18.8877296 37.1007504,18 35.9914698,18 L28.7769836,18 L28.7769836,18 Z M20,25 C22.7614237,25 25,22.7614237 25,20 C25,17.2385763 22.7614237,15 20,15 C17.2385763,15 15,17.2385763 15,20 C15,22.7614237 17.2385763,25 20,25 L20,25 Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 18" enable-background="new 0 0 36 18"><path d="m34 7h-7.2c-.9-4-4.5-7-8.8-7s-7.9 3-8.8 7h-7.2c-1.1 0-2 .9-2 2 0 1.1.9 2 2 2h7.2c.9 4 4.5 7 8.8 7s7.9-3 8.8-7h7.2c1.1 0 2-.9 2-2 0-1.1-.9-2-2-2m-16 7c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5"/></svg>
\ No newline at end of file

app/views/shared/icons/_icon_status_closed.svg

+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M0 7c0-3.866 3.142-7 7-7 3.866 0 7 3.142 7 7 0 3.866-3.142 7-7 7-3.866 0-7-3.142-7-7z"/><path d="M1 7c0 3.309 2.69 6 6 6 3.309 0 6-2.69 6-6 0-3.309-2.69-6-6-6-3.309 0-6 2.69-6 6z" fill="#FFF"/><rect x="3.36" y="6.16" width="7.28" height="1.68" rx=".84"/></svg>

app/views/shared/icons/_icon_status_open.svg

+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M0 7c0-3.866 3.142-7 7-7 3.866 0 7 3.142 7 7 0 3.866-3.142 7-7 7-3.866 0-7-3.142-7-7z"/><path d="M1 7c0 3.309 2.69 6 6 6 3.309 0 6-2.69 6-6 0-3.309-2.69-6-6-6-3.309 0-6 2.69-6 6z" fill="#FFF"/><path d="M7 9.219a2.218 2.218 0 1 0 0-4.436A2.218 2.218 0 0 0 7 9.22zm0 1.12a3.338 3.338 0 1 1 0-6.676 3.338 3.338 0 0 1 0 6.676z"/></svg>

app/views/shared/icons/_trash_o.svg

+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M704 736v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h64q14 0 23 9t9 23zm256 0v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h64q14 0 23 9t9 23zm256 0v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h64q14 0 23 9t9 23zm128 724v-948h-896v948q0 22 7 40.5t14.5 27 10.5 8.5h832q3 0 10.5-8.5t14.5-27 7-40.5zm-672-1076h448l-48-117q-7-9-17-11h-317q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5h-832q-66 0-113-58.5t-47-141.5v-952h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z"/></svg>
\ No newline at end of file

changelogs/unreleased/29128-profile-page-icons.yml

+---
+title: Add helpful icons to profile events
+merge_request:
+author:

features/steps/shared/project.rb

@@ -97,7 +97,7 @@ module SharedProject
 
   step 'I should see project "Shop" activity feed' do
     project = Project.find_by(name: "Shop")
-    expect(page).to have_content "#{@user.name} pushed new branch fix at #{project.name_with_namespace}"
+    expect(page).to have_content "pushed new branch fix at #{project.name_with_namespace}"
   end
 
   step 'I should see project settings' do

spec/features/dashboard/project_member_activity_index_spec.rb

@@ -21,20 +21,20 @@ feature 'Project member activity', feature: true, js: true do
   context 'when a user joins the project' do
     before { visit_activities_and_wait_with_event(Event::JOINED) }
 
-    it { is_expected.to eq("#{user.name} joined project") }
+    it { is_expected.to eq("joined project") }
   end
 
   context 'when a user leaves the project' do
     before { visit_activities_and_wait_with_event(Event::LEFT) }
 
-    it { is_expected.to eq("#{user.name} left project") }
+    it { is_expected.to eq("left project") }
   end
 
   context 'when a users membership expires for the project' do
     before { visit_activities_and_wait_with_event(Event::EXPIRED) }
 
     it "presents the correct message" do
-      message = "#{user.name} removed due to membership expiration from project"
+      message = "removed due to membership expiration from project"
       is_expected.to eq(message)
     end
   end