From e141a1c6f14df7b83cbb24190f9786b6fc36cd49 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Fri, 27 May 2016 15:56:43 +0100 Subject: [PATCH 1/4] Notifications dropdown on project page now has descriptions This is part of #12758 --- .../stylesheets/framework/dropdowns.scss | 26 +++++++++++++++---- app/helpers/notifications_helper.rb | 22 +++++++++++++--- app/models/notification_setting.rb | 2 +- .../projects/buttons/_notifications.html.haml | 4 +-- 4 files changed, 43 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 28634d0c59f..cf664627f81 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -122,10 +122,8 @@ a { display: block; position: relative; - padding-left: 10px; - padding-right: 10px; + padding: 5px 10px; color: $dropdown-link-color; - line-height: 34px; text-overflow: ellipsis; border-radius: 2px; white-space: nowrap; @@ -162,6 +160,16 @@ } } +.dropdown-menu-large { + width: 340px; +} + +.dropdown-menu-no-wrap { + a { + white-space: normal; + } +} + .dropdown-menu-full-width { width: 100%; } @@ -236,8 +244,7 @@ &::before { position: absolute; left: 5px; - top: 50%; - margin-top: -7px; + top: 8px; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; @@ -532,3 +539,12 @@ background-color: $calendar-unselectable-bg; } } + +.dropdown-menu-inner-title { + display: block; + font-weight: 600; +} + +.dropdown-menu-inner-content { + display: block; +} diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb index 54ab9179efc..b8e64b3890a 100644 --- a/app/helpers/notifications_helper.rb +++ b/app/helpers/notifications_helper.rb @@ -31,6 +31,21 @@ module NotificationsHelper end end + def notification_description(level) + case level.to_sym + when :participating + 'You will only receive notifications from related resources' + when :mention + 'You will receive notifications only for comments in which you were @mentioned' + when :watch + 'You will receive notifications for any activity' + when :disabled + 'You will not get any notifications via email' + when :global + 'Use your global notification setting' + end + end + def notification_list_item(level, setting) title = notification_title(level) @@ -39,9 +54,10 @@ module NotificationsHelper notification_title: title } - content_tag(:li, class: ('active' if setting.level == level)) do - link_to '#', class: 'update-notification', data: data do - notification_icon(level, title) + content_tag(:li, role: "menuitem") do + link_to '#', class: "update-notification #{('is-active' if setting.level == level)}", data: data do + link_output = content_tag(:strong, title, class: 'dropdown-menu-inner-title') + link_output << content_tag(:span, notification_description(level), class: 'dropdown-menu-inner-content') end end end diff --git a/app/models/notification_setting.rb b/app/models/notification_setting.rb index 5001738f411..17fb15b08df 100644 --- a/app/models/notification_setting.rb +++ b/app/models/notification_setting.rb @@ -1,5 +1,5 @@ class NotificationSetting < ActiveRecord::Base - enum level: { disabled: 0, participating: 1, watch: 2, global: 3, mention: 4 } + enum level: { global: 3, watch: 2, mention: 4, participating: 1, disabled: 0 } default_value_for :level, NotificationSetting.levels[:global] diff --git a/app/views/projects/buttons/_notifications.html.haml b/app/views/projects/buttons/_notifications.html.haml index 1d05da50581..2348ceaa92b 100644 --- a/app/views/projects/buttons/_notifications.html.haml +++ b/app/views/projects/buttons/_notifications.html.haml @@ -2,10 +2,10 @@ = form_for @notification_setting, url: namespace_project_notification_setting_path(@project.namespace.becomes(Namespace), @project), method: :patch, remote: true, html: { class: 'inline', id: 'notification-form' } do |f| = f.hidden_field :level .dropdown - %a.dropdown-new.btn.notifications-btn#notifications-button{href: '#', "data-toggle" => "dropdown"} + %button.btn.notifications-btn#notifications-button{ data: { toggle: "dropdown" }, aria: { haspopup: "true", expanded: "false" } } = icon('bell') = notification_title(@notification_setting.level) = icon('caret-down') - %ul.dropdown-menu.dropdown-menu-align-right.project-home-dropdown + %ul.dropdown-menu.dropdown-menu-no-wrap.dropdown-menu-align-right.dropdown-menu-selectable.dropdown-menu-large{ role: "menu" } - NotificationSetting.levels.each do |level| = notification_list_item(level.first, @notification_setting) From 8fa8cba02ecdeecbbe020a049f5923afeceb6a1b Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 31 May 2016 09:36:59 +0100 Subject: [PATCH 2/4] CHANGELOG item --- CHANGELOG | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG b/CHANGELOG index ce8f2823c25..c55eb09ef8a 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -52,6 +52,7 @@ v 8.8.4 (unreleased) - Import GitHub repositories respecting the API rate limit - Fix importer for GitHub comments on diff - Disable Webhooks before proceeding with the GitHub import + - Added descriptions to notification settings dropdown v 8.8.3 - Fix 404 page when viewing TODOs that contain milestones or labels in different projects. !4312 From 51a62fce040a307955d6e66d0a22f1bbfa068b38 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Tue, 31 May 2016 11:38:54 +0100 Subject: [PATCH 3/4] Fixed failing tests --- app/views/projects/buttons/_notifications.html.haml | 2 +- features/steps/project/project.rb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/projects/buttons/_notifications.html.haml b/app/views/projects/buttons/_notifications.html.haml index 2348ceaa92b..3b97dc9328f 100644 --- a/app/views/projects/buttons/_notifications.html.haml +++ b/app/views/projects/buttons/_notifications.html.haml @@ -2,7 +2,7 @@ = form_for @notification_setting, url: namespace_project_notification_setting_path(@project.namespace.becomes(Namespace), @project), method: :patch, remote: true, html: { class: 'inline', id: 'notification-form' } do |f| = f.hidden_field :level .dropdown - %button.btn.notifications-btn#notifications-button{ data: { toggle: "dropdown" }, aria: { haspopup: "true", expanded: "false" } } + %button.btn.btn-default.notifications-btn#notifications-button{ data: { toggle: "dropdown" }, aria: { haspopup: "true", expanded: "false" } } = icon('bell') = notification_title(@notification_setting.level) = icon('caret-down') diff --git a/features/steps/project/project.rb b/features/steps/project/project.rb index a1785311c2b..2a1a8e776f0 100644 --- a/features/steps/project/project.rb +++ b/features/steps/project/project.rb @@ -126,7 +126,7 @@ class Spinach::Features::Project < Spinach::FeatureSteps end step 'I click notifications drop down button' do - click_link 'notifications-button' + find('#notifications-button').click end step 'I choose Mention setting' do From f62df363b5daa83b5ba81d75c63816976648446d Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 6 Jun 2016 08:39:05 +0100 Subject: [PATCH 4/4] Updated colors --- app/assets/stylesheets/framework/dropdowns.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index cf664627f81..1ce7c57ebcd 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -542,9 +542,11 @@ .dropdown-menu-inner-title { display: block; + color: $gl-title-color; font-weight: 600; } .dropdown-menu-inner-content { display: block; + color: $gl-placeholder-color; }