Resolve UX discussions

12 files changed, 102 insertions, 34 deletions

diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 1e93bf2b751..a20920e2503 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/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);
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index f5e4c78f2a8..be782202da0 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -4,7 +4,7 @@
  */
 .event-item {
   font-size: $gl-font-size;
-  padding: $gl-padding-top 0 $gl-padding-top 56px;
+  padding: $gl-padding 0 $gl-padding 56px;
   border-bottom: 1px solid $white-normal;
   color: $gl-text-color-secondary;
   position: relative;
@@ -19,12 +19,9 @@
   }
 
   .system-note-image-inline {
-    vertical-align: middle;
-    margin-right: 4px;
+    display: flex;
 
     svg {
-      width: 14px;
-      height: 14px;
       fill: $gl-text-color-secondary;
     }
   }
@@ -55,14 +52,20 @@
     line-height: 16px;
     margin-bottom: 8px;
 
-    .author_name a {
-      color: $gl-text-color;
-      font-weight: $gl-font-weight-bold;
+    .author_name {
+      margin-right: 4px;
+
+      a {
+        color: $gl-text-color;
+        font-weight: $gl-font-weight-bold;
+      }
     }
   }
 
   .event-title {
     line-height: 16px;
+    display: flex;
+    align-items: center;
 
     .event-type {
       display: inline-block;
@@ -71,6 +74,13 @@
         text-transform: capitalize;
       }
     }
+
+    .system-note-image-inline,
+    .event-type,
+    .ref-name,
+    .event-target-link {
+      margin-right: 4px;
+    }
   }
 
   .event-body {
@@ -173,6 +183,11 @@
     float: right;
     line-height: 16px;
   }
+
+  .ref-name,
+  .commit-sha {
+    font-size: inherit;
+  }
 }
 
 /*
@@ -194,18 +209,32 @@
   .event-item {
     padding-left: 0;
 
+    .event-user-info {
+      margin-bottom: 4px;
+    }
+
     .event-title {
       white-space: normal;
       overflow: visible;
       max-width: 100%;
+      display: block;
+
+      .system-note-image-inline,
+      .event-type,
+      .ref-name,
+      .event-target-link {
+        margin-right: 0;
+      }
     }
 
-    .system-note-image {
+    .system-note-image,
+    .system-note-image-inline {
       display: none;
     }
 
     .event-body {
-      margin: 0;
+      margin-top: 4px;
+      margin-right: 0;
       padding-left: 0;
     }
 
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index f084adaf5d3..1d691d1d8b8 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/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;
+      }
+    }
   }
 }
 
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index 77f15a253ee..ab556938d8c 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -170,7 +170,7 @@ module EventsHelper
           event.note_target_reference
         end
 
-      link_to(text, event_note_target_url(event), title: event.target_title, class: 'has-tooltip')
+      link_to(text, event_note_target_url(event), title: event.target_title, class: 'has-tooltip event-target-link')
     else
       content_tag(:strong, '(deleted)')
     end
@@ -183,9 +183,9 @@ module EventsHelper
     "--broken encoding"
   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, size: 24) if icon_name
+    sprite_icon(icon_name, size: size) if icon_name
   end
 
   def icon_for_profile_event(event)
@@ -203,8 +203,19 @@ module EventsHelper
   def inline_event_icon(event)
     unless current_path?('users#show')
       content_tag :span, class: "system-note-image-inline #{event.action_name.parameterize}-icon" do
-        icon_for_event(event.action_name)
+        icon_for_event(event.action_name, size: 14)
       end
     end
   end
+
+  def event_user_info(event)
+    output = []
+
+    output << content_tag(:span, link_to_author(event), class: "author_name")
+    output << content_tag(:span, event.author.to_reference, class: "username")
+
+    content_tag(:div, class: "event-user-info") do
+      output.join.html_safe
+    end
+  end
 end
diff --git a/app/views/events/_event.html.haml b/app/views/events/_event.html.haml
index 2fcb1d1fd2b..2f8f56a98f1 100644
--- a/app/views/events/_event.html.haml
+++ b/app/views/events/_event.html.haml
@@ -9,6 +9,8 @@
       = render "events/event/push", event: event
     - elsif event.commented?
       = render "events/event/note", event: event
+    - elsif event.merge_request? && (event.created? || event.closed?)
+      = render "events/event/merge_request", event: event
     - else
       = render "events/event/common", event: event
 - elsif @user&.include_private_contributions?
diff --git a/app/views/events/event/_common.html.haml b/app/views/events/event/_common.html.haml
index 2e294034765..7741004884e 100644
--- a/app/views/events/event/_common.html.haml
+++ b/app/views/events/event/_common.html.haml
@@ -1,14 +1,13 @@
 = icon_for_profile_event(event)
 
-.event-user-info
-  %span.author_name= link_to_author(event)
-  %span.username= event.author.to_reference
+= event_user_info(event)
+
 .event-title
   = inline_event_icon(event)
   - if event.target
     %span.event-type{ class: event.action_name }
       = event.action_name
-    = link_to [event.project.namespace.becomes(Namespace), event.project, event.target], class: 'has-tooltip', title: event.target_title do
+    = link_to [event.project.namespace.becomes(Namespace), event.project, event.target], class: 'has-tooltip event-target-link', title: event.target_title do
       = event.target_type.titleize.downcase
       = event.target.reference_link_text
   - else
diff --git a/app/views/events/event/_created_project.html.haml b/app/views/events/event/_created_project.html.haml
index dbdee836a1d..ce3a078fa46 100644
--- a/app/views/events/event/_created_project.html.haml
+++ b/app/views/events/event/_created_project.html.haml
@@ -1,8 +1,7 @@
 = icon_for_profile_event(event)
 
-.event-user-info
-  %span.author_name= link_to_author(event)
-  %span.username= event.author.to_reference
+= event_user_info(event)
+
 .event-title
   = inline_event_icon(event)
   %span.event-type{ class: event.action_name }
diff --git a/app/views/events/event/_merge_request.html.haml b/app/views/events/event/_merge_request.html.haml
new file mode 100644
index 00000000000..0b3431e3858
--- /dev/null
+++ b/app/views/events/event/_merge_request.html.haml
@@ -0,0 +1,18 @@
+= icon_for_profile_event(event)
+
+= event_user_info(event)
+
+.event-title
+  = inline_event_icon(event)
+  - if event.target
+    %span.event-type{ class: event.action_name }
+      = event.action_name
+    = link_to [event.project.namespace.becomes(Namespace), event.project, event.target], class: 'has-tooltip event-target-link', title: event.target_title do
+      = event.target_type.titleize.downcase
+      = event.target.reference_link_text
+    = event.target.title
+  - else
+    %span.event-type{ class: event.action_name }
+      = event_action_name(event)
+
+  = render "events/event_scope", event: event
diff --git a/app/views/events/event/_note.html.haml b/app/views/events/event/_note.html.haml
index b195de7a081..8b6054e38c8 100644
--- a/app/views/events/event/_note.html.haml
+++ b/app/views/events/event/_note.html.haml
@@ -1,13 +1,13 @@
 = icon_for_profile_event(event)
 
-.event-user-info
-  %span.author_name= link_to_author(event)
-  %span.username= event.author.to_reference
+= event_user_info(event)
+
 .event-title
   = inline_event_icon(event)
   %span.event-type{ class: event.action_name }
     = event.action_name
   = event_note_title_html(event)
+  = event.target.title
 
   = render "events/event_scope", event: event
 
diff --git a/app/views/events/event/_private.html.haml b/app/views/events/event/_private.html.haml
index fe39ded930a..f83d77a43d9 100644
--- a/app/views/events/event/_private.html.haml
+++ b/app/views/events/event/_private.html.haml
@@ -4,9 +4,8 @@
 
   .system-note-image= sprite_icon('eye-slash', size: 24, css_class: 'icon')
 
-  .event-user-info
-    %span.author_name= link_to_author(event)
-    %span.username= event.author.to_reference
+  = event_user_info(event)
+
   .event-title
     = inline_event_icon(event)
     = s_('Profiles|Made a private contribution')
diff --git a/app/views/events/event/_push.html.haml b/app/views/events/event/_push.html.haml
index 9ca72d63217..ebeb4696345 100644
--- a/app/views/events/event/_push.html.haml
+++ b/app/views/events/event/_push.html.haml
@@ -2,9 +2,8 @@
 
 = icon_for_profile_event(event)
 
-.event-user-info
-  %span.author_name= link_to_author(event)
-  %span.username= event.author.to_reference
+= event_user_info(event)
+
 .event-title
   = inline_event_icon(event)
   %span.event-type.pushed #{event.action_name} #{event.ref_type}
diff --git a/app/views/users/_overview.html.haml b/app/views/users/_overview.html.haml
index f8b3754840d..cf525f2bb2d 100644
--- a/app/views/users/_overview.html.haml
+++ b/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 } }