Notifications dropdown on project page now has descriptions

This is part of #12758

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)