Resolve "Redesign activity feed"

app/assets/stylesheets/framework/images.scss

@@ -39,7 +39,7 @@
 svg {
   fill: currentColor;
 
-  $svg-sizes: 8 10 12 16 18 24 32 48 72;
+  $svg-sizes: 8 10 12 14 16 18 24 32 48 72;
   @each $svg-size in $svg-sizes {
     &.s#{$svg-size} {
       @include svg-size(#{$svg-size}px);

app/assets/stylesheets/framework/variables.scss

@@ -269,6 +269,7 @@ $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
 $project-title-row-height: 24px;
+$gl-line-height: 16px;
 
 /*
 * Common component specific colors

app/assets/stylesheets/pages/events.scss

@@ -4,41 +4,29 @@
  */
 .event-item {
   font-size: $gl-font-size;
-  padding: $gl-padding-top 0 $gl-padding-top 40px;
+  padding: $gl-padding 0 $gl-padding 56px;
   border-bottom: 1px solid $white-normal;
-  color: $gl-text-color;
+  color: $gl-text-color-secondary;
   position: relative;
+  line-height: $gl-line-height;
 
-  &.event-inline {
   .system-note-image {
-      top: 20px;
-    }
-
-    .user-avatar {
-      top: 14px;
-    }
+    position: absolute;
+    left: 0;
 
-    .event-title,
-    .event-item-timestamp {
-      line-height: 40px;
+    svg {
+      fill: $gl-text-color-secondary;
     }
   }
 
-  a {
-    color: $gl-text-color;
-  }
-
-  .system-note-image {
-    position: absolute;
-    left: 0;
-    top: 14px;
-
+  .system-note-image-inline {
     svg {
-      width: 20px;
-      height: 20px;
       fill: $gl-text-color-secondary;
     }
+  }
 
+  .system-note-image,
+  .system-note-image-inline {
     &.opened-icon,
     &.created-icon {
       svg {
@@ -53,16 +41,35 @@
     &.accepted-icon svg {
       fill: $blue-300;
     }
+
+    &.commented-on-icon svg {
+      fill: $blue-600;
+    }
   }
 
-  .event-title {
-    @include str-truncated(calc(100% - 174px));
-    font-weight: $gl-font-weight-bold;
+  .event-user-info {
+    margin-bottom: $gl-padding-8;
+
+    .author_name {
+      a {
         color: $gl-text-color;
+        font-weight: $gl-font-weight-bold;
+      }
+    }
+  }
+
+  .event-title {
+    .event-type {
+      &::first-letter {
+        text-transform: capitalize;
+      }
+    }
   }
 
   .event-body {
+    margin-top: $gl-padding-8;
     margin-right: 174px;
+    color: $gl-text-color;
 
     .event-note {
       word-wrap: break-word;
@@ -92,7 +99,7 @@
       }
 
       .note-image-attach {
-        margin-top: 4px;
+        margin-top: $gl-padding-4;
         margin-left: 0;
         max-width: 200px;
         float: none;
@@ -107,7 +114,6 @@
       color: $gl-gray-500;
       float: left;
       font-size: $gl-font-size;
-      line-height: 16px;
       margin-right: 5px;
     }
   }
@@ -127,7 +133,9 @@
     }
   }
 
-  &:last-child { border: 0; }
+  &:last-child {
+    border: 0;
+  }
 
   .event_commits {
     li {
@@ -154,7 +162,6 @@
 
   .event-item-timestamp {
     float: right;
-    line-height: 22px;
   }
 }
 
@@ -177,10 +184,8 @@
   .event-item {
     padding-left: 0;
 
-    &.event-inline {
-      .event-title {
-        line-height: 20px;
-      }
+    .event-user-info {
+      margin-bottom: $gl-padding-4;
     }
 
     .event-title {
@@ -194,7 +199,8 @@
     }
 
     .event-body {
-      margin: 0;
+      margin-top: $gl-padding-4;
+      margin-right: 0;
       padding-left: 0;
     }
 

app/assets/stylesheets/pages/profile.scss

@@ -240,6 +240,12 @@
     left: 0;
   }
 
+  .activities-block {
+    .event-item {
+      padding-left: 40px;
+    }
+  }
+
   @include media-breakpoint-down(xs) {
     .cover-block {
       padding-top: 20px;
@@ -267,6 +273,12 @@
         margin-right: 0;
       }
     }
+
+    .activities-block {
+      .event-item {
+        padding-left: 0;
+      }
+    }
   }
 }
 

app/helpers/events_helper.rb

@@ -163,14 +163,10 @@ module EventsHelper
 
   def event_note_title_html(event)
     if event.note_target
-      text = raw("#{event.note_target_type} ") +
-        if event.commit_note?
-          content_tag(:span, event.note_target_reference, class: 'commit-sha')
-        else
-          event.note_target_reference
+      capture do
+        concat content_tag(:span, event.note_target_type, class: "event-target-type append-right-4")
+        concat link_to(event.note_target_reference, event_note_target_url(event), title: event.target_title, class: 'has-tooltip event-target-link append-right-4')
       end
-
-      link_to(text, event_note_target_url(event), title: event.target_title, class: 'has-tooltip')
     else
       content_tag(:strong, '(deleted)')
     end
@@ -183,17 +179,9 @@ module EventsHelper
     "--broken encoding"
   end
 
-  def event_row_class(event)
-    if event.body?
-      "event-block"
-    else
-      "event-inline"
-    end
-  end
-
-  def icon_for_event(note)
+  def icon_for_event(note, size: 24)
     icon_name = ICON_NAMES_BY_EVENT_TYPE[note]
-    sprite_icon(icon_name) if icon_name
+    sprite_icon(icon_name, size: size) if icon_name
   end
 
   def icon_for_profile_event(event)
@@ -203,8 +191,24 @@ module EventsHelper
       end
     else
       content_tag :div, class: 'system-note-image user-avatar' do
-        author_avatar(event, size: 32)
+        author_avatar(event, size: 40)
       end
     end
   end
+
+  def inline_event_icon(event)
+    unless current_path?('users#show')
+      content_tag :span, class: "system-note-image-inline d-none d-sm-flex append-right-4 #{event.action_name.parameterize}-icon align-self-center" do
+        icon_for_event(event.action_name, size: 14)
+      end
+    end
+  end
+
+  def event_user_info(event)
+    content_tag(:div, class: "event-user-info") do
+      concat content_tag(:span, link_to_author(event), class: "author_name")
+      concat " ".html_safe
+      concat content_tag(:span, event.author.to_reference, class: "username")
+    end
+  end
 end

app/views/events/_event.html.haml

 - if event.visible_to_user?(current_user)
-  .event-item{ class: event_row_class(event) }
+  .event-item
     .event-item-timestamp
       #{time_ago_with_tooltip(event.created_at)}
 

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

 = icon_for_profile_event(event)
 
-.event-title
-  %span.author_name= link_to_author(event)
-  %span{ class: event.action_name }
+= event_user_info(event)
+
+.event-title.d-flex.flex-wrap
+  = inline_event_icon(event)
   - if event.target
+    %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
       = event.action_name
-    %strong
-      = link_to [event.project.namespace.becomes(Namespace), event.project, event.target], class: 'has-tooltip', title: event.target_title do
-        = event.target_type.titleize.downcase
+    %span.event-target-type.append-right-4= event.target_type.titleize.downcase
+    = link_to [event.project.namespace.becomes(Namespace), event.project, event.target], class: 'has-tooltip event-target-link append-right-4', title: event.target_title do
       = event.target.reference_link_text
+    - unless event.milestone?
+      %span.event-target-title.append-right-4= """.html_safe + event.target.title + "&quot".html_safe
   - else
+    %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
       = event_action_name(event)
 
   = render "events/event_scope", event: event
-
-- if event.target.respond_to?(:title)
-  .event-body
-    .event-note
-      = event.target.title

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

 = icon_for_profile_event(event)
 
-.event-title
-  %span.author_name= link_to_author(event)
-  %span{ class: event.action_name }
+= event_user_info(event)
+
+.event-title.d-flex.flex-wrap
+  = inline_event_icon(event)
+  %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
     = event_action_name(event)
 
   - if event.project

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

 = icon_for_profile_event(event)
 
-.event-title
-  %span.author_name= link_to_author(event)
+= event_user_info(event)
+
+.event-title.d-flex.flex-wrap
+  = inline_event_icon(event)
+  %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
     = event.action_name
   = event_note_title_html(event)
+  %span.event-target-title.append-right-4= """.html_safe + event.target.title + "&quot".html_safe
 
   = render "events/event_scope", event: event
 

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

-.event-inline.event-item
+.event-item
   .event-item-timestamp
     = time_ago_with_tooltip(event.created_at)
 
-  .system-note-image= sprite_icon('eye-slash', size: 16, css_class: 'icon')
+  .system-note-image= sprite_icon('eye-slash', size: 24, css_class: 'icon')
 
-  .event-title
-    - author_name = capture do
-      %span.author_name= link_to_author(event)
-    = s_('Profiles|%{author_name} made a private contribution').html_safe % { author_name: author_name }
+  = event_user_info(event)
+
+  .event-title.d-flex.flex-wrap
+    = inline_event_icon(event)
+    = s_('Profiles|Made a private contribution')

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

@@ -2,13 +2,15 @@
 
 = icon_for_profile_event(event)
 
-.event-title
-  %span.author_name= link_to_author(event)
-  %span.pushed #{event.action_name} #{event.ref_type}
-  %strong
+= event_user_info(event)
+
+.event-title.d-flex.flex-wrap
+  = inline_event_icon(event)
+  %span.event-type.d-inline-block.append-right-4.pushed #{event.action_name} #{event.ref_type}
+  %span
     - commits_link = project_commits_path(project, event.ref_name)
     - should_link = event.tag? ? project.repository.tag_exists?(event.ref_name) : project.repository.branch_exists?(event.ref_name)
-    = link_to_if should_link, event.ref_name, commits_link, class: 'ref-name'
+    = link_to_if should_link, event.ref_name, commits_link, class: 'ref-name append-right-4'
 
   = render "events/event_scope", event: event
 

app/views/users/_overview.html.haml

@@ -11,8 +11,8 @@
 
     - if can?(current_user, :read_cross_project)
       .activities-block
-        .content-block
-          %h5.prepend-top-10
+        .border-bottom.prepend-top-16
+          %h5
             = s_('UserProfile|Recent contributions')
           .overview-content-list{ data: { href: user_path } }
             .center.light.loading
@@ -22,7 +22,7 @@
 
   .col-md-12.col-lg-6
     .projects-block
-      .content-block
+      .border-bottom.prepend-top-16
         %h4
           = s_('UserProfile|Personal projects')
         .overview-content-list{ data: { href: user_projects_path } }

changelogs/unreleased/49403-redesign-activity-feed.yml

+title: Redesign activity feed
+merge_request: 22217
+author:
+type: other

locale/gitlab.pot

@@ -4641,9 +4641,6 @@ msgstr ""
 msgid "Profiles| You are going to change the username %{currentUsernameBold} to %{newUsernameBold}. Profile and projects will be redirected to the %{newUsername} namespace but this redirect will expire once the %{currentUsername} namespace is registered by another user or group. Please update your Git repository remotes as soon as possible."
 msgstr ""
 
-msgid "Profiles|%{author_name} made a private contribution"
-msgstr ""
-
 msgid "Profiles|Account scheduled for removal."
 msgstr ""
 
@@ -4704,6 +4701,9 @@ msgstr ""
 msgid "Profiles|Invalid username"
 msgstr ""
 
+msgid "Profiles|Made a private contribution"
+msgstr ""
+
 msgid "Profiles|Main settings"
 msgstr ""
 

spec/features/calendar_spec.rb

@@ -153,7 +153,7 @@ describe 'Contributions Calendar', :js do
         include_context 'visit user page'
 
         it 'displays calendar activity log' do
-          expect(find('.tab-pane#activity .content_list .event-note')).to have_content issue_title
+          expect(find('.tab-pane#activity .content_list .event-target-title')).to have_content issue_title
         end
       end
     end

spec/features/dashboard/project_member_activity_index_spec.rb

@@ -14,14 +14,15 @@ describe 'Project member activity', :js do
     wait_for_requests
   end
 
-  subject { page.find(".event-title").text }
-
   context 'when a user joins the project' do
     before do
       visit_activities_and_wait_with_event(Event::JOINED)
     end
 
-    it { is_expected.to eq("#{user.name} joined project") }
+    it "presents the correct message" do
+      expect(page.find('.event-user-info').text).to eq("#{user.name} #{user.to_reference}")
+      expect(page.find('.event-title').text).to eq("joined project")
+    end
   end
 
   context 'when a user leaves the project' do
@@ -29,7 +30,10 @@ describe 'Project member activity', :js do
       visit_activities_and_wait_with_event(Event::LEFT)
     end
 
-    it { is_expected.to eq("#{user.name} left project") }
+    it "presents the correct message" do
+      expect(page.find('.event-user-info').text).to eq("#{user.name} #{user.to_reference}")
+      expect(page.find('.event-title').text).to eq("left project")
+    end
   end
 
   context 'when a users membership expires for the project' do
@@ -38,8 +42,8 @@ describe 'Project member activity', :js do
     end
 
     it "presents the correct message" do
-      message = "#{user.name} removed due to membership expiration from project"
-      is_expected.to eq(message)
+      expect(page.find('.event-user-info').text).to eq("#{user.name} #{user.to_reference}")
+      expect(page.find('.event-title').text).to eq("removed due to membership expiration from project")
     end
   end
 end

spec/features/milestones/user_creates_milestone_spec.rb

@@ -24,6 +24,6 @@ describe "User creates milestone", :js do
 
     visit(activity_project_path(project))
 
-    expect(page).to have_content("#{user.name} opened milestone")
+    expect(page).to have_content("#{user.name} #{user.to_reference} opened milestone")
   end
 end

spec/features/milestones/user_deletes_milestone_spec.rb

@@ -23,7 +23,7 @@ describe "User deletes milestone", :js do
 
       visit(activity_project_path(project))
 
-      expect(page).to have_content("#{user.name} destroyed milestone")
+      expect(page).to have_content("#{user.name} #{user.to_reference} destroyed milestone")
     end
   end
 

spec/features/projects/activity/user_sees_activity_spec.rb

@@ -19,13 +19,13 @@ describe 'Projects > Activity > User sees activity' do
   it 'shows the last push in the activity page', :js do
     visit activity_project_path(project)
 
-    expect(page).to have_content "#{user.name} pushed new branch fix"
+    expect(page).to have_content "#{user.name} #{user.to_reference} pushed new branch fix"
   end
 
   it 'allows to filter event with the "event_filter=issue" URL param', :js do
     visit activity_project_path(project, event_filter: 'issue')
 
-    expect(page).not_to have_content "#{user.name} pushed new branch fix"
-    expect(page).to have_content "#{user.name} opened issue #{issue.to_reference}"
+    expect(page).not_to have_content "#{user.name} #{user.to_reference} pushed new branch fix"
+    expect(page).to have_content "#{user.name} #{user.to_reference} opened issue #{issue.to_reference}"
   end
 end

spec/features/projects/activity/user_sees_private_activity_spec.rb

@@ -5,7 +5,7 @@ describe 'Project > Activity > User sees private activity', :js do
   let(:author) { create(:user) }
   let(:user) { create(:user) }
   let(:issue) { create(:issue, :confidential, project: project, author: author) }
-  let(:message) { "#{author.name} opened issue #{issue.to_reference}" }
+  let(:message) { "#{author.name} #{author.to_reference} opened issue #{issue.to_reference}" }
 
   before do
     project.add_developer(author)