root
/
gitlab-ce
mirror of https://gitlab.com/free-releases/gitlab-ce.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Resolve "Redesign activity feed"

This commit is contained in:
Martin Wortschack 2018-11-06 14:33:42 +00:00 committed by Annabel Dunstone Gray
parent c8b6b9f243
commit 31532b2d04
20 changed files with 146 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/framework/images.scss
View File

@ -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);

1
app/assets/stylesheets/framework/variables.scss
View File

@ -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

78
app/assets/stylesheets/pages/events.scss
View File

@ -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;
&.event-inline {
.system-note-image {
top: 20px;
}
.user-avatar {
top: 14px;
}
.event-title,
.event-item-timestamp {
line-height: 40px;
}
}
a {
color: $gl-text-color;
}
line-height: $gl-line-height;
.system-note-image {
position: absolute;
left: 0;
top: 14px;
svg {
width: 20px;
height: 20px;
fill: $gl-text-color-secondary;
}
}
.system-note-image-inline {
svg {
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-user-info {
margin-bottom: $gl-padding-8;
.author_name {
a {
color: $gl-text-color;
font-weight: $gl-font-weight-bold;
}
}
}
.event-title {
@include str-truncated(calc(100% - 174px));
font-weight: $gl-font-weight-bold;
color: $gl-text-color;
.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;
}

12
app/assets/stylesheets/pages/profile.scss
View File

@ -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;
}
}
}
}

42
app/helpers/events_helper.rb
View File

@ -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
end
link_to(text, event_note_target_url(event), title: event.target_title, class: 'has-tooltip')
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
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

2
app/views/events/_event.html.haml
View File

@ -1,5 +1,5 @@
- 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)}

27
app/views/events/event/_common.html.haml
View File

@ -1,20 +1,19 @@
= 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
= 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
= event.target.reference_link_text
%span.event-type.d-inline-block.append-right-4{ class: event.action_name }
= event.action_name
%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
= event_action_name(event)
%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

8
app/views/events/event/_created_project.html.haml
View File

@ -1,8 +1,10 @@
= 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

10
app/views/events/event/_note.html.haml
View File

@ -1,9 +1,13 @@
= icon_for_profile_event(event)
.event-title
%span.author_name= link_to_author(event)
= 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_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

13
app/views/events/event/_private.html.haml
View File

@ -1,10 +1,11 @@
.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')

12
app/views/events/event/_push.html.haml
View File

@ -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

6
app/views/users/_overview.html.haml
View File

@ -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 } }

4
changelogs/unreleased/49403-redesign-activity-feed.yml Normal file
View File

@ -0,0 +1,4 @@
title: Redesign activity feed
merge_request: 22217
author:
type: other

6
locale/gitlab.pot
View File

@ -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 ""

2
spec/features/calendar_spec.rb
View File

@ -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

16
spec/features/dashboard/project_member_activity_index_spec.rb
View File

@ -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

2
spec/features/milestones/user_creates_milestone_spec.rb
View File

@ -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

2
spec/features/milestones/user_deletes_milestone_spec.rb
View File

@ -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

6
spec/features/projects/activity/user_sees_activity_spec.rb
View File

@ -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

2
spec/features/projects/activity/user_sees_private_activity_spec.rb
View File

@ -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)