From b90f83e93319d54d558b29838d7453444f3fcf11 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 31 Mar 2017 15:13:32 -0500 Subject: [PATCH 1/6] Start adding profile icons --- app/assets/stylesheets/pages/events.scss | 16 ++++++---------- app/views/events/_event.html.haml | 5 +++-- app/views/events/event/_common.html.haml | 10 +++++++++- app/views/shared/icons/_code_fork.svg | 1 + app/views/shared/icons/_comment_o.svg | 1 + app/views/shared/icons/_icon_status_closed.svg | 1 + app/views/shared/icons/_icon_status_open.svg | 1 + app/views/shared/icons/_trash_o.svg | 1 + 8 files changed, 23 insertions(+), 13 deletions(-) create mode 100644 app/views/shared/icons/_code_fork.svg create mode 100644 app/views/shared/icons/_comment_o.svg create mode 100644 app/views/shared/icons/_icon_status_closed.svg create mode 100644 app/views/shared/icons/_icon_status_open.svg create mode 100644 app/views/shared/icons/_trash_o.svg diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 08398bb43a2..14ff6ac9a9a 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -4,16 +4,11 @@ */ .event-item { font-size: $gl-font-size; - padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top); + padding: $gl-padding; border-bottom: 1px solid $white-normal; color: $list-text-color; &.event-inline { - .avatar { - position: relative; - top: -2px; - } - .event-title, .event-item-timestamp { line-height: 40px; @@ -24,16 +19,17 @@ color: $gl-text-color; } - .avatar { - margin-left: -($gl-avatar-size + $gl-padding-top); - } - .event-title { @include str-truncated(calc(100% - 174px)); font-weight: 600; color: $list-text-color; } + svg { + height: 16px; + width: 16px; + } + .event-body { margin-right: 174px; diff --git a/app/views/events/_event.html.haml b/app/views/events/_event.html.haml index a0bd14df209..bf7a9af99cd 100644 --- a/app/views/events/_event.html.haml +++ b/app/views/events/_event.html.haml @@ -3,13 +3,14 @@ .event-item-timestamp #{time_ago_with_tooltip(event.created_at)} - = author_avatar(event, size: 40) - - if event.created_project? + = custom_icon("icon_status_open") = render "events/event/created_project", event: event - elsif event.push? + = custom_icon("icon_commit") = render "events/event/push", event: event - elsif event.commented? + = custom_icon("comment_o") = render "events/event/note", event: event - else = render "events/event/common", event: event diff --git a/app/views/events/event/_common.html.haml b/app/views/events/event/_common.html.haml index 2fb6b5647da..0d230e3f3f2 100644 --- a/app/views/events/event/_common.html.haml +++ b/app/views/events/event/_common.html.haml @@ -1,5 +1,13 @@ +- if event.target + - if event.target_type == "MergeRequest" + - if event.action_name == "opened" + = custom_icon("icon_status_open") + - elsif event.action_name == "closed" + = custom_icon("icon_status_closed") + - else + = custom_icon("code_fork") + .event-title - %span.author_name= link_to_author event %span{ class: event.action_name } - if event.target = event.action_name diff --git a/app/views/shared/icons/_code_fork.svg b/app/views/shared/icons/_code_fork.svg new file mode 100644 index 00000000000..8347dce2d5b --- /dev/null +++ b/app/views/shared/icons/_code_fork.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/views/shared/icons/_comment_o.svg b/app/views/shared/icons/_comment_o.svg new file mode 100644 index 00000000000..55807f0840a --- /dev/null +++ b/app/views/shared/icons/_comment_o.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/views/shared/icons/_icon_status_closed.svg b/app/views/shared/icons/_icon_status_closed.svg new file mode 100644 index 00000000000..de448ee1194 --- /dev/null +++ b/app/views/shared/icons/_icon_status_closed.svg @@ -0,0 +1 @@ + diff --git a/app/views/shared/icons/_icon_status_open.svg b/app/views/shared/icons/_icon_status_open.svg new file mode 100644 index 00000000000..ed58d23c626 --- /dev/null +++ b/app/views/shared/icons/_icon_status_open.svg @@ -0,0 +1 @@ + diff --git a/app/views/shared/icons/_trash_o.svg b/app/views/shared/icons/_trash_o.svg new file mode 100644 index 00000000000..ea073d7fe67 --- /dev/null +++ b/app/views/shared/icons/_trash_o.svg @@ -0,0 +1 @@ + \ No newline at end of file From 633457563a9e9ef9473a00019dd243430aa08e80 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 31 Mar 2017 15:39:31 -0500 Subject: [PATCH 2/6] Differentiate between event types --- app/assets/stylesheets/pages/events.scss | 7 ++++++- app/views/events/_event.html.haml | 3 --- app/views/events/event/_common.html.haml | 14 ++++++++------ app/views/events/event/_created_project.html.haml | 4 +++- app/views/events/event/_note.html.haml | 4 +++- app/views/events/event/_push.html.haml | 5 +++-- 6 files changed, 23 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 14ff6ac9a9a..35571748118 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; + padding: $gl-padding 0; border-bottom: 1px solid $white-normal; color: $list-text-color; @@ -25,6 +25,11 @@ color: $list-text-color; } + .event-icon { + display: inline-block; + margin: 0 10px; + } + svg { height: 16px; width: 16px; diff --git a/app/views/events/_event.html.haml b/app/views/events/_event.html.haml index bf7a9af99cd..53a33adc14d 100644 --- a/app/views/events/_event.html.haml +++ b/app/views/events/_event.html.haml @@ -4,13 +4,10 @@ #{time_ago_with_tooltip(event.created_at)} - if event.created_project? - = custom_icon("icon_status_open") = render "events/event/created_project", event: event - elsif event.push? - = custom_icon("icon_commit") = render "events/event/push", event: event - elsif event.commented? - = custom_icon("comment_o") = render "events/event/note", event: event - else = render "events/event/common", event: event diff --git a/app/views/events/event/_common.html.haml b/app/views/events/event/_common.html.haml index 0d230e3f3f2..98a4dda5b4d 100644 --- a/app/views/events/event/_common.html.haml +++ b/app/views/events/event/_common.html.haml @@ -1,11 +1,13 @@ - if event.target - - if event.target_type == "MergeRequest" - - if event.action_name == "opened" + - if event.action_name == "opened" + .event-icon.open-icon = custom_icon("icon_status_open") - - elsif event.action_name == "closed" - = custom_icon("icon_status_closed") - - else - = custom_icon("code_fork") + - elsif event.action_name == "closed" + .event-icon.closed-icon + = custom_icon("icon_status_closed") + - else + .event-icon.fork-icon + = custom_icon("code_fork") .event-title %span{ class: event.action_name } diff --git a/app/views/events/event/_created_project.html.haml b/app/views/events/event/_created_project.html.haml index 80cf2344fe1..6fb084df374 100644 --- a/app/views/events/event/_created_project.html.haml +++ b/app/views/events/event/_created_project.html.haml @@ -1,5 +1,7 @@ +.event-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) diff --git a/app/views/events/event/_note.html.haml b/app/views/events/event/_note.html.haml index 64b5a733b77..755750b88d1 100644 --- a/app/views/events/event/_note.html.haml +++ b/app/views/events/event/_note.html.haml @@ -1,5 +1,7 @@ +.event-icon + = custom_icon("comment_o") + .event-title - %span.author_name= link_to_author event = event.action_name = event_note_title_html(event) diff --git a/app/views/events/event/_push.html.haml b/app/views/events/event/_push.html.haml index efd13aabf20..be1730541ef 100644 --- a/app/views/events/event/_push.html.haml +++ b/app/views/events/event/_push.html.haml @@ -1,7 +1,9 @@ - project = event.project +.event-icon + = 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 +50,3 @@ .event-body %ul.well-list.event_commits = render "events/commit", commit: last_commit, project: project, event: event - From 32bb33f717ccae968949d30d058e828e31d72cf2 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 31 Mar 2017 16:09:58 -0500 Subject: [PATCH 3/6] Change color of icons --- app/assets/stylesheets/pages/events.scss | 43 +++++++++++++------ app/views/events/event/_common.html.haml | 10 ++--- .../events/event/_created_project.html.haml | 4 +- app/views/events/event/_note.html.haml | 2 +- app/views/events/event/_push.html.haml | 2 +- 5 files changed, 40 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 35571748118..14ad26bcd6b 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -4,11 +4,16 @@ */ .event-item { font-size: $gl-font-size; - padding: $gl-padding 0; + padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top); border-bottom: 1px solid $white-normal; color: $list-text-color; + position: relative; &.event-inline { + .profile-icon { + top: 20px; + } + .event-title, .event-item-timestamp { line-height: 40px; @@ -19,22 +24,36 @@ color: $gl-text-color; } + .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 { @include str-truncated(calc(100% - 174px)); font-weight: 600; color: $list-text-color; } - .event-icon { - display: inline-block; - margin: 0 10px; - } - - svg { - height: 16px; - width: 16px; - } - .event-body { margin-right: 174px; @@ -164,7 +183,7 @@ max-width: 100%; } - .avatar { + .profile-icon { display: none; } diff --git a/app/views/events/event/_common.html.haml b/app/views/events/event/_common.html.haml index 98a4dda5b4d..2a98e58a03a 100644 --- a/app/views/events/event/_common.html.haml +++ b/app/views/events/event/_common.html.haml @@ -1,13 +1,13 @@ - if event.target - if event.action_name == "opened" - .event-icon.open-icon + .profile-icon.open-icon = custom_icon("icon_status_open") - elsif event.action_name == "closed" - .event-icon.closed-icon - = custom_icon("icon_status_closed") + .profile-icon.closed-icon + = custom_icon("icon_status_closed") - else - .event-icon.fork-icon - = custom_icon("code_fork") + .profile-icon.fork-icon + = custom_icon("code_fork") .event-title %span{ class: event.action_name } diff --git a/app/views/events/event/_created_project.html.haml b/app/views/events/event/_created_project.html.haml index 6fb084df374..340d8c61026 100644 --- a/app/views/events/event/_created_project.html.haml +++ b/app/views/events/event/_created_project.html.haml @@ -1,5 +1,5 @@ -.event-icon.open-icon -= custom_icon("icon_status_open") +.profile-icon.open-icon + = custom_icon("icon_status_open") .event-title %span{ class: event.action_name } diff --git a/app/views/events/event/_note.html.haml b/app/views/events/event/_note.html.haml index 755750b88d1..603bed6d705 100644 --- a/app/views/events/event/_note.html.haml +++ b/app/views/events/event/_note.html.haml @@ -1,4 +1,4 @@ -.event-icon +.profile-icon = custom_icon("comment_o") .event-title diff --git a/app/views/events/event/_push.html.haml b/app/views/events/event/_push.html.haml index be1730541ef..4abda4d9db4 100644 --- a/app/views/events/event/_push.html.haml +++ b/app/views/events/event/_push.html.haml @@ -1,6 +1,6 @@ - project = event.project -.event-icon +.profile-icon = custom_icon("icon_commit") .event-title From 99ff4d30b45bcef8d01ef24801842f7b9ffc66f5 Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 31 Mar 2017 16:17:34 -0500 Subject: [PATCH 4/6] Add deleted branch icon --- app/views/events/event/_push.html.haml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/views/events/event/_push.html.haml b/app/views/events/event/_push.html.haml index 4abda4d9db4..1583f380737 100644 --- a/app/views/events/event/_push.html.haml +++ b/app/views/events/event/_push.html.haml @@ -1,7 +1,10 @@ - project = event.project .profile-icon - = custom_icon("icon_commit") + - if event.action_name == "deleted" + = custom_icon("trash_o") + - else + = custom_icon("icon_commit") .event-title %span.pushed #{event.action_name} #{event.ref_type} From c998ce66ada6b5281c7b1a2a8227866b0159c9ce Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Fri, 31 Mar 2017 16:24:15 -0500 Subject: [PATCH 5/6] Add changelog --- app/assets/stylesheets/pages/events.scss | 2 +- changelogs/unreleased/29128-profile-page-icons.yml | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 changelogs/unreleased/29128-profile-page-icons.yml diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 14ad26bcd6b..e7f9bbbc62f 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 ($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; diff --git a/changelogs/unreleased/29128-profile-page-icons.yml b/changelogs/unreleased/29128-profile-page-icons.yml new file mode 100644 index 00000000000..0215f5c0e8f --- /dev/null +++ b/changelogs/unreleased/29128-profile-page-icons.yml @@ -0,0 +1,4 @@ +--- +title: Add helpful icons to profile events +merge_request: +author: From d4377b8c12e106892098d66321059ca6bc1affdd Mon Sep 17 00:00:00 2001 From: Annabel Dunstone Gray Date: Mon, 3 Apr 2017 08:33:02 -0500 Subject: [PATCH 6/6] Update commit icon; fix specs --- app/views/shared/icons/_icon_commit.svg | 4 +--- features/steps/shared/project.rb | 2 +- .../dashboard/project_member_activity_index_spec.rb | 6 +++--- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/app/views/shared/icons/_icon_commit.svg b/app/views/shared/icons/_icon_commit.svg index 0e96035b7b7..15e83dfdb53 100644 --- a/app/views/shared/icons/_icon_commit.svg +++ b/app/views/shared/icons/_icon_commit.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/features/steps/shared/project.rb b/features/steps/shared/project.rb index 345a28f27dc..47bdc708e09 100644 --- a/features/steps/shared/project.rb +++ b/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 diff --git a/spec/features/dashboard/project_member_activity_index_spec.rb b/spec/features/dashboard/project_member_activity_index_spec.rb index 49d93db58a9..d62839a09ef 100644 --- a/spec/features/dashboard/project_member_activity_index_spec.rb +++ b/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