Prepare UI for notification settings

Dmitriy Zaporozhets
1 parent d55ade16
Showing 8 changed files with 80 additions and 19 deletions Show diff stats
app/assets/javascripts/behaviors/toggler_behavior.coffee
app/assets/javascripts/extensions/jquery.js.coffee
app/assets/javascripts/main.js.coffee
app/assets/javascripts/profile.js.coffee
app/controllers/notifications_controller.rb
app/views/notifications/show.html.haml
app/views/notifications/update.js.haml
spec/requests/notifications_spec.rb
@@ -3,3 +3,11 @@ $ -&gt;
     container = $(@).closest(".js-toggler-container")
  
     container.toggleClass("on")
+  
+  $("body").on "click", ".js-toggle-visibility-link", (e) ->
+    $(@).find('i').
+      toggleClass('icon-chevron-down').
+      toggleClass('icon-chevron-up')
+    container = $(".js-toggle-visibility-container")
+    container.toggleClass("hide")
+    e.preventDefault()
@@ -0,0 +1,9 @@
+$.fn.showAndHide = ->
+  $(@).show().
+    delay(3000).
+    fadeOut()
+
+$.fn.enableButton = ->
+  $(@).removeAttr('disabled').
+    removeClass('disabled')
+
@@ -7,6 +7,8 @@ window.slugify = (text) -&gt;
 window.ajaxGet = (url) ->
   $.ajax({type: "GET", url: url, dataType: "script"})
  
+window.showAndHide = (selector) ->
+
 window.errorMessage = (message) ->
   ehtml = $("<p>")
   ehtml.addClass("error_message")
@@ -15,6 +15,8 @@ $ -&gt;
     $(this).find('.update-failed').hide()
  
   $('.update-username form').on 'ajax:complete', ->
-    $(this).find('.save-btn').removeAttr('disabled')
-    $(this).find('.save-btn').removeClass('disabled')
+    $(this).find('.btn-save').enableButton()
     $(this).find('.loading-gif').hide()
+  
+  $('.update-notifications').on 'ajax:complete', ->
+    $(this).find('.btn-save').enableButton()
@@ -3,9 +3,11 @@ class NotificationsController &lt; ApplicationController
  
   def show
     @notification = current_user.notification
+    @projects = current_user.authorized_projects
   end
  
   def update
-    @notification = current_user.notification
+    current_user.notification_level = params[:notification_level]
+    @saved = current_user.save
   end
 end
 %h3.page_title Setup your notification level
-%hr
  
+%br
  
-= form_tag profile_notifications_path do
+%p.light
+  %strong Disabled
+  &ndash; You will not get any notifications via email
+%p.light
+  %strong Participating
+  &ndash; You will receive only notifications from related resources(ex. from assigned issue or your commit)
+%p.light
+  %strong Watch
+  &ndash; You will receive all notifications from projects in which you participate
+%hr
  
-  %ul.unstyled
+= form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications' do
+  %ul.well-list
     %li
       .row
-        .span3
+        .span4
           %h5 Global
-        .span9
+        .span7
           = label_tag do
             = radio_button_tag :notification_level, Notification::N_DISABLED, @notification.disabled?
             %span Disabled
@@ -22,5 +32,37 @@
             = radio_button_tag :notification_level, Notification::N_WATCH, @notification.watch?
             %span Watch
  
+
+  = link_to '#', class: 'js-toggle-visibility-link' do
+    %h6.btn.btn-tiny
+      %i.icon-chevron-down
+      %span Per project notifications settings
+  %ul.well-list.js-toggle-visibility-container.hide
+    - @projects.each do |project|
+      %li
+        .row
+          .span4
+            %span
+              = project.name_with_namespace
+          .span7
+            = label_tag do
+              = radio_button_tag :"notification_level[#{project.id}]", Notification::N_DISABLED, @notification.disabled?, disabled: true
+              %span Disabled
+
+            = label_tag do
+              = radio_button_tag :"notification_level[#{project.id}]", Notification::N_PARTICIPATING, @notification.participating?, disabled: true
+              %span Participating
+
+            = label_tag do
+              = radio_button_tag :"notification_level[#{project.id}]", Notification::N_WATCH, @notification.watch?, disabled: true
+              %span Watch
+
+
   .form-actions
     = submit_tag 'Save', class: 'btn btn-save'
+    %span.update-success.cgreen.hide
+      %i.icon-ok
+      Saved
+    %span.update-failed.cred.hide
+      %i.icon-remove
+      Failed
@@ -0,0 +1,7 @@
+- if @saved
+  :plain
+    $('.update-notifications .update-success').showAndHide();
+- else
+  :plain
+    $('.update-notifications .update-failed').showAndHide();
+
@@ -1,11 +0,0 @@
-require 'spec_helper'
-
-describe "Notifications" do
-  describe "GET /notifications" do
-    it "works! (now write some real specs)" do
-      # Run the generator again with the --webrat flag if you want to use webrat methods/matchers
-      get notifications_path
-      response.status.should be(200)
-    end
-  end
-end
...	...	@@ -3,3 +3,11 @@ $ ->
3	3	container = $(@).closest(".js-toggler-container")
4	4
5	5	container.toggleClass("on")
	6	+
	7	+ $("body").on "click", ".js-toggle-visibility-link", (e) ->
	8	+ $(@).find('i').
	9	+ toggleClass('icon-chevron-down').
	10	+ toggleClass('icon-chevron-up')
	11	+ container = $(".js-toggle-visibility-container")
	12	+ container.toggleClass("hide")
	13	+ e.preventDefault()
...	...
...	...	@@ -0,0 +1,9 @@
	1	+$.fn.showAndHide = ->
	2	+ $(@).show().
	3	+ delay(3000).
	4	+ fadeOut()
	5	+
	6	+$.fn.enableButton = ->
	7	+ $(@).removeAttr('disabled').
	8	+ removeClass('disabled')
	9	+
...	...
...	...	@@ -7,6 +7,8 @@ window.slugify = (text) ->
7	7	window.ajaxGet = (url) ->
8	8	$.ajax({type: "GET", url: url, dataType: "script"})
9	9
	10	+window.showAndHide = (selector) ->
	11	+
10	12	window.errorMessage = (message) ->
11	13	ehtml = $("<p>")
12	14	ehtml.addClass("error_message")
...	...
...	...	@@ -15,6 +15,8 @@ $ ->
15	15	$(this).find('.update-failed').hide()
16	16
17	17	$('.update-username form').on 'ajax:complete', ->
18		- $(this).find('.save-btn').removeAttr('disabled')
19		- $(this).find('.save-btn').removeClass('disabled')
	18	+ $(this).find('.btn-save').enableButton()
20	19	$(this).find('.loading-gif').hide()
	20	+
	21	+ $('.update-notifications').on 'ajax:complete', ->
	22	+ $(this).find('.btn-save').enableButton()
...	...
...	...	@@ -3,9 +3,11 @@ class NotificationsController < ApplicationController
3	3
4	4	def show
5	5	@notification = current_user.notification
	6	+ @projects = current_user.authorized_projects
6	7	end
7	8
8	9	def update
9		- @notification = current_user.notification
	10	+ current_user.notification_level = params[:notification_level]
	11	+ @saved = current_user.save
10	12	end
11	13	end
...	...
1	1	%h3.page_title Setup your notification level
2		-%hr
3	2
	3	+%br
4	4
5		-= form_tag profile_notifications_path do
	5	+%p.light
	6	+ %strong Disabled
	7	+ – You will not get any notifications via email
	8	+%p.light
	9	+ %strong Participating
	10	+ – You will receive only notifications from related resources(ex. from assigned issue or your commit)
	11	+%p.light
	12	+ %strong Watch
	13	+ – You will receive all notifications from projects in which you participate
	14	+%hr
6	15
7		- %ul.unstyled
	16	+= form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications' do
	17	+ %ul.well-list
8	18	%li
9	19	.row
10		- .span3
	20	+ .span4
11	21	%h5 Global
12		- .span9
	22	+ .span7
13	23	= label_tag do
14	24	= radio_button_tag :notification_level, Notification::N_DISABLED, @notification.disabled?
15	25	%span Disabled
...	...	@@ -22,5 +32,37 @@
22	32	= radio_button_tag :notification_level, Notification::N_WATCH, @notification.watch?
23	33	%span Watch
24	34
	35	+
	36	+ = link_to '#', class: 'js-toggle-visibility-link' do
	37	+ %h6.btn.btn-tiny
	38	+ %i.icon-chevron-down
	39	+ %span Per project notifications settings
	40	+ %ul.well-list.js-toggle-visibility-container.hide
	41	+ - @projects.each do \|project\|
	42	+ %li
	43	+ .row
	44	+ .span4
	45	+ %span
	46	+ = project.name_with_namespace
	47	+ .span7
	48	+ = label_tag do
	49	+ = radio_button_tag :"notification_level[#{project.id}]", Notification::N_DISABLED, @notification.disabled?, disabled: true
	50	+ %span Disabled
	51	+
	52	+ = label_tag do
	53	+ = radio_button_tag :"notification_level[#{project.id}]", Notification::N_PARTICIPATING, @notification.participating?, disabled: true
	54	+ %span Participating
	55	+
	56	+ = label_tag do
	57	+ = radio_button_tag :"notification_level[#{project.id}]", Notification::N_WATCH, @notification.watch?, disabled: true
	58	+ %span Watch
	59	+
	60	+
25	61	.form-actions
26	62	= submit_tag 'Save', class: 'btn btn-save'
	63	+ %span.update-success.cgreen.hide
	64	+ %i.icon-ok
	65	+ Saved
	66	+ %span.update-failed.cred.hide
	67	+ %i.icon-remove
	68	+ Failed
...	...
...	...	@@ -0,0 +1,7 @@
	1	+- if @saved
	2	+ :plain
	3	+ $('.update-notifications .update-success').showAndHide();
	4	+- else
	5	+ :plain
	6	+ $('.update-notifications .update-failed').showAndHide();
	7	+
...	...
...	...	@@ -1,11 +0,0 @@
1		-require 'spec_helper'
2		-
3		-describe "Notifications" do
4		- describe "GET /notifications" do
5		- it "works! (now write some real specs)" do
6		- # Run the generator again with the --webrat flag if you want to use webrat methods/matchers
7		- get notifications_path
8		- response.status.should be(200)
9		- end
10		- end
11		-end