Merge branch 'notification-dropdown-labels' into 'master'

Notifications dropdown on project page now has descriptions

## What does this MR do?

Adds descriptions to the notification settings dropdown on project pages. Also changed the order of them to make more sense.

## What are the relevant issue numbers?

Part of #12758

## Screenshots (if relevant)

![Screen_Shot_2016-05-31_at_09.35.24](/uploads/b30d82701a13ec15f672139e1225acf5/Screen_Shot_2016-05-31_at_09.35.24.png)

See merge request !4374

6 files changed, 47 insertions, 12 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 6c1e9c04d40..de3aeab0d46 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -55,6 +55,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
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 28634d0c59f..1ce7c57ebcd 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,14 @@
     background-color: $calendar-unselectable-bg;
   }
 }
+
+.dropdown-menu-inner-title {
+  display: block;
+  color: $gl-title-color;
+  font-weight: 600;
+}
+
+.dropdown-menu-inner-content {
+  display: block;
+  color: $gl-placeholder-color;
+}
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..3b97dc9328f 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.btn-default.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)
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