Merge branch 'issue_12758' into 'master'

Implement custom notification level options

![Screen_Shot_2016-06-17_at_15.31.43](/uploads/3fc47d2f461b3e8b67bb8acaa304cf99/Screen_Shot_2016-06-17_at_15.31.43.png)

![Screenshot_from_2016-06-15_10-52-27](/uploads/88dbdd21d97e80ee772fe08fa0c9b393/Screenshot_from_2016-06-15_10-52-27.png)

part of #12758 

See merge request !4389

6 files changed, 102 insertions, 22 deletions

diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index b560500cce6..7fbff9214cf 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -78,6 +78,7 @@ class Dispatcher
       when 'projects:show'
         shortcut_handler = new ShortcutsNavigation()
 
+        new NotificationsForm()
         new TreeView() if $('#tree-slider').length
       when 'groups:activity'
         new Activities()
@@ -129,6 +130,8 @@ class Dispatcher
         shortcut_handler = new ShortcutsDashboardNavigation()
       when 'profiles'
         new Profile()
+        new NotificationsForm()
+        new NotificationsDropdown()
       when 'projects'
         new Project()
         new ProjectAvatar()
@@ -136,8 +139,12 @@ class Dispatcher
           when 'edit'
             shortcut_handler = new ShortcutsNavigation()
             new ProjectNew()
-          when 'new', 'show'
+          when 'new'
             new ProjectNew()
+          when 'show'
+            new ProjectNew()
+            new ProjectShow()
+            new NotificationsDropdown()
           when 'wikis'
             new Wikis()
             shortcut_handler = new ShortcutsNavigation()
diff --git a/app/assets/javascripts/notifications_dropdown.js.coffee b/app/assets/javascripts/notifications_dropdown.js.coffee
new file mode 100644
index 00000000000..74d2298c1fa
--- /dev/null
+++ b/app/assets/javascripts/notifications_dropdown.js.coffee
@@ -0,0 +1,24 @@
+class @NotificationsDropdown
+  $ ->
+    $(document)
+      .off 'click', '.update-notification'
+      .on 'click', '.update-notification', (e) ->
+        e.preventDefault()
+
+        return if $(this).is('.is-active') and $(this).data('notification-level') is 'custom'
+
+        notificationLevel = $(@).data 'notification-level'
+        label = $(@).data 'notification-title'
+        form = $(this).parents('.notification-form:first')
+        form.find('.js-notification-loading').toggleClass 'fa-bell fa-spin fa-spinner'
+        form.find('#notification_setting_level').val(notificationLevel)
+        form.submit()
+
+    $(document)
+      .off 'ajax:success', '.notification-form'
+      .on 'ajax:success', '.notification-form', (e, data) ->
+        if data.saved
+          new Flash('Notification settings saved', 'notice')
+          $(e.currentTarget).closest('.notification-dropdown').replaceWith(data.html)
+        else
+          new Flash('Failed to save new settings', 'alert')
diff --git a/app/assets/javascripts/notifications_form.js.coffee b/app/assets/javascripts/notifications_form.js.coffee
new file mode 100644
index 00000000000..3432428702a
--- /dev/null
+++ b/app/assets/javascripts/notifications_form.js.coffee
@@ -0,0 +1,49 @@
+class @NotificationsForm
+  constructor: ->
+    @removeEventListeners()
+    @initEventListeners()
+
+  removeEventListeners: ->
+    $(document).off 'change', '.js-custom-notification-event'
+
+  initEventListeners: ->
+    $(document).on 'change', '.js-custom-notification-event', @toggleCheckbox
+
+  toggleCheckbox: (e) =>
+    $checkbox = $(e.currentTarget)
+    $parent = $checkbox.closest('.checkbox')
+    @saveEvent($checkbox, $parent)
+
+  showCheckboxLoadingSpinner: ($parent) ->
+    $parent
+      .addClass 'is-loading'
+      .find '.custom-notification-event-loading'
+      .removeClass 'fa-check'
+      .addClass 'fa-spin fa-spinner'
+      .removeClass 'is-done'
+
+  saveEvent: ($checkbox, $parent) ->
+    form = $parent.parents('form:first')
+
+    $.ajax(
+      url: form.attr('action')
+      method: form.attr('method')
+      dataType: 'json'
+      data: form.serialize()
+
+      beforeSend: =>
+        @showCheckboxLoadingSpinner($parent)
+    ).done (data) ->
+      $checkbox.enable()
+
+      if data.saved
+        $parent
+          .find '.custom-notification-event-loading'
+          .toggleClass 'fa-spin fa-spinner fa-check is-done'
+
+        setTimeout(->
+          $parent
+            .removeClass 'is-loading'
+            .find '.custom-notification-event-loading'
+            .toggleClass 'fa-spin fa-spinner fa-check is-done'
+        , 2000)
diff --git a/app/assets/javascripts/profile.js.coffee b/app/assets/javascripts/profile.js.coffee
index 26a12423521..1583d1ba6f9 100644
--- a/app/assets/javascripts/profile.js.coffee
+++ b/app/assets/javascripts/profile.js.coffee
@@ -8,6 +8,10 @@ class @Profile
     $('.js-preferences-form').on 'change.preference', 'input[type=radio]', ->
       $(this).parents('form').submit()
 
+    # Automatically submit email form when it changes
+    $('#user_notification_email').on 'change', ->
+      $(this).parents('form').submit()
+
     $('.update-username').on 'ajax:before', ->
       $('.loading-username').show()
       $(this).find('.update-success').hide()
diff --git a/app/assets/javascripts/project.js.coffee b/app/assets/javascripts/project.js.coffee
index 07be85a32a5..d12bad97a05 100644
--- a/app/assets/javascripts/project.js.coffee
+++ b/app/assets/javascripts/project.js.coffee
@@ -34,22 +34,6 @@ class @Project
       $(@).parents('.no-password-message').remove()
       e.preventDefault()
 
-    $('.update-notification').on 'click', (e) ->
-      e.preventDefault()
-      notification_level = $(@).data 'notification-level'
-      label = $(@).data 'notification-title'
-      $('#notification_setting_level').val(notification_level)
-      $('#notification-form').submit()
-      $('#notifications-button').empty().append("<i class='fa fa-bell'></i>" + label + "<i class='fa fa-angle-down'></i>")
-      $(@).parents('ul').find('li.active').removeClass 'active'
-      $(@).parent().addClass 'active'
-
-    $('#notification-form').on 'ajax:success', (e, data) ->
-      if data.saved
-        new Flash("Notification settings saved", "notice")
-      else
-        new Flash("Failed to save new settings", "alert")
-
 
     @projectSelectDropdown()
 
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 0d947c816c7..776e19288de 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -133,11 +133,6 @@
       }
     }
 
-    .btn-group:not(:first-child):not(:last-child) > .btn {
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
-    }
-
     form {
       margin-left: 10px;
     }
@@ -607,3 +602,20 @@ pre.light-well {
     }
   }
 }
+
+.custom-notifications-form {
+  .is-loading {
+    .custom-notification-event-loading {
+      display: inline-block;
+    }
+  }
+}
+
+.custom-notification-event-loading {
+  display: none;
+  margin-left: 5px;
+
+  &.is-done {
+    color: $gl-text-green;
+  }
+}