Improve notification settings page

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

Improve notification settings page
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Dmitriy Zaporozhets
1 parent 0744eac9
Showing 7 changed files with 88 additions and 83 deletions Show diff stats
app/assets/stylesheets/sections/dashboard.scss
app/assets/stylesheets/sections/profile.scss
app/helpers/notifications_helper.rb
app/models/notification.rb
app/views/profiles/notifications/_settings.html.haml
app/views/profiles/notifications/show.html.haml
features/steps/profile/profile_notifications.rb
@@ -67,6 +67,7 @@
  
   a {
     display: block;
+    color: #333;
   }
  
   .project-name, .group-name {
@@ -114,3 +114,14 @@
     height: 50px;
   }
 }
+
+.global-notifications-form .level-title {
+  font-size: 15px;
+  color: #333;
+  font-weight: bold;
+}
+
+.notification-icon-holder {
+  width: 20px;
+  float: left;
+}
 module NotificationsHelper
   def notification_icon(notification)
     if notification.disabled?
-      content_tag :i, nil, class: 'icon-circle cred'
+      content_tag :i, nil, class: 'icon-volume-off cred'
     elsif notification.participating?
-      content_tag :i, nil, class: 'icon-circle cblue'
+      content_tag :i, nil, class: 'icon-volume-down cblue'
     elsif notification.watch?
-      content_tag :i, nil, class: 'icon-circle cgreen'
+      content_tag :i, nil, class: 'icon-volume-up cgreen'
     else
       content_tag :i, nil, class: 'icon-circle-blank cblue'
     end
@@ -9,12 +9,23 @@ class Notification
  
   attr_accessor :target
  
-  def self.notification_levels
-    [N_DISABLED, N_PARTICIPATING, N_WATCH]
-  end
-
-  def self.project_notification_levels
-    [N_DISABLED, N_PARTICIPATING, N_WATCH, N_GLOBAL]
+  class << self
+    def notification_levels
+      [N_DISABLED, N_PARTICIPATING, N_WATCH]
+    end
+
+    def options_with_labels
+      {
+        disabled: N_DISABLED,
+        participating: N_PARTICIPATING,
+        watch: N_WATCH,
+        global: N_GLOBAL
+      }
+    end
+
+    def project_notification_levels
+      [N_DISABLED, N_PARTICIPATING, N_WATCH, N_GLOBAL]
+    end
   end
  
   def initialize(target)
@@ -36,4 +47,8 @@ class Notification
   def global?
     target.notification_level == N_GLOBAL
   end
+
+  def level
+    target.notification_level
+  end
 end
 %li
-  .row
-    .col-sm-4
-      %span
-        = notification_icon(notification)
-
-        - if membership.kind_of? UsersGroup
-          = link_to membership.group.name, membership.group
-        - else
-          = link_to_project(membership.project)
-    .col-sm-8
-      = form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications' do
-        = hidden_field_tag :notification_type, type, id: dom_id(membership, 'notification_type')
-        = hidden_field_tag :notification_id, membership.id, id: dom_id(membership, 'notification_id')
-
-        = label_tag nil, class: 'radio-inline' do
-          = radio_button_tag :notification_level, Notification::N_GLOBAL, notification.global?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
-          %span Use global setting
-
-        = label_tag nil, class: 'radio-inline' do
-          = radio_button_tag :notification_level, Notification::N_DISABLED, notification.disabled?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
-          %span Disabled
-
-        = label_tag nil, class: 'radio-inline' do
-          = radio_button_tag :notification_level, Notification::N_PARTICIPATING, notification.participating?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
-          %span Participating
-
-        = label_tag nil, class: 'radio-inline' do
-          = radio_button_tag :notification_level, Notification::N_WATCH, notification.watch?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
-          %span Watch
+  %span.notification-icon-holder
+    - if notification.global?
+      = notification_icon(@notification)
+    - else
+      = notification_icon(notification)
  
+  %span.str-truncated
+    - if membership.kind_of? UsersGroup
+      = link_to membership.group.name, membership.group
+    - else
+      = link_to_project(membership.project)
+  .pull-right
+    = form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications' do
+      = hidden_field_tag :notification_type, type, id: dom_id(membership, 'notification_type')
+      = hidden_field_tag :notification_id, membership.id, id: dom_id(membership, 'notification_id')
+      = select_tag :notification_level, options_for_select(Notification.options_with_labels, notification.level), class: 'trigger-submit'
@@ -3,56 +3,49 @@
 %p.light
   GitLab uses the email specified in your profile for notifications
 %hr
-.alert.alert-info
-  %p
-    %i.icon-circle.cred
-    %strong Disabled
-    &ndash; You will not get any notifications via email
-  %p
-    %i.icon-circle.cblue
-    %strong Participating
-    &ndash; You will only receive notifications from related resources (e.g. from your commits or assigned issues)
-  %p
-    %i.icon-circle.cgreen
-    %strong Watch
-    &ndash; You will receive all notifications from projects in which you participate
+= form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications form-horizontal global-notifications-form' do
+  = hidden_field_tag :notification_type, 'global'
  
-.row
-  .col-sm-4
-    %h4
-      = notification_icon(@notification)
-      Global setting
-  .col-sm-8
-    = form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications' do
-      = hidden_field_tag :notification_type, 'global'
-
-      = label_tag nil, class: 'radio-inline' do
+  = label_tag :notification_level, 'Notification level', class: 'control-label'
+  .col-sm-10
+    .radio
+      = label_tag nil, class: '' do
         = radio_button_tag :notification_level, Notification::N_DISABLED, @notification.disabled?, class: 'trigger-submit'
-        %span Disabled
+        .level-title
+          Disabled
+        %p You will not get any notifications via email
  
-      = label_tag nil, class: 'radio-inline' do
+    .radio
+      = label_tag nil, class: '' do
         = radio_button_tag :notification_level, Notification::N_PARTICIPATING, @notification.participating?, class: 'trigger-submit'
-        %span Participating
+        .level-title
+          Participating
+        %p You will only receive notifications from related resources (e.g. from your commits or assigned issues)
  
-      = label_tag nil, class: 'radio-inline' do
+    .radio
+      = label_tag nil, class: '' do
         = radio_button_tag :notification_level, Notification::N_WATCH, @notification.watch?, class: 'trigger-submit'
-        %span Watch
+        .level-title
+          Watch
+        %p You will receive all notifications from projects in which you participate
  
-%br
-= link_to '#', class: 'js-toggle-visibility-link' do
-  %span.btn.btn-tiny
-    %i.icon-chevron-down
-    %span Advanced notifications settings
-.js-toggle-visibility-container.hide
+.clearfix
   %hr
-  %h4 Groups:
-  %ul.bordered-list
-    - @users_groups.each do |users_group|
-      - notification = Notification.new(users_group)
-      = render 'settings', type: 'group', membership: users_group, notification: notification
+  %p
+    You can also specify notification level per group or per project
+    %br
+    By default all projects and groups uses notification level set above
+.row.all-notifications
+  .col-md-6
+    %h4 Groups:
+    %ul.bordered-list
+      - @users_groups.each do |users_group|
+        - notification = Notification.new(users_group)
+        = render 'settings', type: 'group', membership: users_group, notification: notification
  
-  %h4 Projects:
-  %ul.bordered-list
-    - @users_projects.each do |users_project|
-      - notification = Notification.new(users_project)
-      = render 'settings', type: 'project', membership: users_project, notification: notification
+  .col-md-6
+    %h4 Projects:
+    %ul.bordered-list
+      - @users_projects.each do |users_project|
+        - notification = Notification.new(users_project)
+        = render 'settings', type: 'project', membership: users_project, notification: notification
@@ -8,6 +8,5 @@ class ProfileNotifications &lt; Spinach::FeatureSteps
  
   step 'I should see global notifications settings' do
     page.should have_content "Notifications settings"
-    page.should have_content "Global setting"
   end
 end
...	...	@@ -67,6 +67,7 @@
67	67
68	68	a {
69	69	display: block;
	70	+ color: #333;
70	71	}
71	72
72	73	.project-name, .group-name {
...	...
...	...	@@ -114,3 +114,14 @@
114	114	height: 50px;
115	115	}
116	116	}
	117	+
	118	+.global-notifications-form .level-title {
	119	+ font-size: 15px;
	120	+ color: #333;
	121	+ font-weight: bold;
	122	+}
	123	+
	124	+.notification-icon-holder {
	125	+ width: 20px;
	126	+ float: left;
	127	+}
...	...
1	1	module NotificationsHelper
2	2	def notification_icon(notification)
3	3	if notification.disabled?
4		- content_tag :i, nil, class: 'icon-circle cred'
	4	+ content_tag :i, nil, class: 'icon-volume-off cred'
5	5	elsif notification.participating?
6		- content_tag :i, nil, class: 'icon-circle cblue'
	6	+ content_tag :i, nil, class: 'icon-volume-down cblue'
7	7	elsif notification.watch?
8		- content_tag :i, nil, class: 'icon-circle cgreen'
	8	+ content_tag :i, nil, class: 'icon-volume-up cgreen'
9	9	else
10	10	content_tag :i, nil, class: 'icon-circle-blank cblue'
11	11	end
...	...
...	...	@@ -9,12 +9,23 @@ class Notification
9	9
10	10	attr_accessor :target
11	11
12		- def self.notification_levels
13		- [N_DISABLED, N_PARTICIPATING, N_WATCH]
14		- end
15		-
16		- def self.project_notification_levels
17		- [N_DISABLED, N_PARTICIPATING, N_WATCH, N_GLOBAL]
	12	+ class << self
	13	+ def notification_levels
	14	+ [N_DISABLED, N_PARTICIPATING, N_WATCH]
	15	+ end
	16	+
	17	+ def options_with_labels
	18	+ {
	19	+ disabled: N_DISABLED,
	20	+ participating: N_PARTICIPATING,
	21	+ watch: N_WATCH,
	22	+ global: N_GLOBAL
	23	+ }
	24	+ end
	25	+
	26	+ def project_notification_levels
	27	+ [N_DISABLED, N_PARTICIPATING, N_WATCH, N_GLOBAL]
	28	+ end
18	29	end
19	30
20	31	def initialize(target)
...	...	@@ -36,4 +47,8 @@ class Notification
36	47	def global?
37	48	target.notification_level == N_GLOBAL
38	49	end
	50	+
	51	+ def level
	52	+ target.notification_level
	53	+ end
39	54	end
...	...
1	1	%li
2		- .row
3		- .col-sm-4
4		- %span
5		- = notification_icon(notification)
6		-
7		- - if membership.kind_of? UsersGroup
8		- = link_to membership.group.name, membership.group
9		- - else
10		- = link_to_project(membership.project)
11		- .col-sm-8
12		- = form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications' do
13		- = hidden_field_tag :notification_type, type, id: dom_id(membership, 'notification_type')
14		- = hidden_field_tag :notification_id, membership.id, id: dom_id(membership, 'notification_id')
15		-
16		- = label_tag nil, class: 'radio-inline' do
17		- = radio_button_tag :notification_level, Notification::N_GLOBAL, notification.global?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
18		- %span Use global setting
19		-
20		- = label_tag nil, class: 'radio-inline' do
21		- = radio_button_tag :notification_level, Notification::N_DISABLED, notification.disabled?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
22		- %span Disabled
23		-
24		- = label_tag nil, class: 'radio-inline' do
25		- = radio_button_tag :notification_level, Notification::N_PARTICIPATING, notification.participating?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
26		- %span Participating
27		-
28		- = label_tag nil, class: 'radio-inline' do
29		- = radio_button_tag :notification_level, Notification::N_WATCH, notification.watch?, id: dom_id(membership, 'notification_level'), class: 'trigger-submit'
30		- %span Watch
	2	+ %span.notification-icon-holder
	3	+ - if notification.global?
	4	+ = notification_icon(@notification)
	5	+ - else
	6	+ = notification_icon(notification)
31	7
	8	+ %span.str-truncated
	9	+ - if membership.kind_of? UsersGroup
	10	+ = link_to membership.group.name, membership.group
	11	+ - else
	12	+ = link_to_project(membership.project)
	13	+ .pull-right
	14	+ = form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications' do
	15	+ = hidden_field_tag :notification_type, type, id: dom_id(membership, 'notification_type')
	16	+ = hidden_field_tag :notification_id, membership.id, id: dom_id(membership, 'notification_id')
	17	+ = select_tag :notification_level, options_for_select(Notification.options_with_labels, notification.level), class: 'trigger-submit'
...	...
...	...	@@ -3,56 +3,49 @@
3	3	%p.light
4	4	GitLab uses the email specified in your profile for notifications
5	5	%hr
6		-.alert.alert-info
7		- %p
8		- %i.icon-circle.cred
9		- %strong Disabled
10		- – You will not get any notifications via email
11		- %p
12		- %i.icon-circle.cblue
13		- %strong Participating
14		- – You will only receive notifications from related resources (e.g. from your commits or assigned issues)
15		- %p
16		- %i.icon-circle.cgreen
17		- %strong Watch
18		- – You will receive all notifications from projects in which you participate
	6	+= form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications form-horizontal global-notifications-form' do
	7	+ = hidden_field_tag :notification_type, 'global'
19	8
20		-.row
21		- .col-sm-4
22		- %h4
23		- = notification_icon(@notification)
24		- Global setting
25		- .col-sm-8
26		- = form_tag profile_notifications_path, method: :put, remote: true, class: 'update-notifications' do
27		- = hidden_field_tag :notification_type, 'global'
28		-
29		- = label_tag nil, class: 'radio-inline' do
	9	+ = label_tag :notification_level, 'Notification level', class: 'control-label'
	10	+ .col-sm-10
	11	+ .radio
	12	+ = label_tag nil, class: '' do
30	13	= radio_button_tag :notification_level, Notification::N_DISABLED, @notification.disabled?, class: 'trigger-submit'
31		- %span Disabled
	14	+ .level-title
	15	+ Disabled
	16	+ %p You will not get any notifications via email
32	17
33		- = label_tag nil, class: 'radio-inline' do
	18	+ .radio
	19	+ = label_tag nil, class: '' do
34	20	= radio_button_tag :notification_level, Notification::N_PARTICIPATING, @notification.participating?, class: 'trigger-submit'
35		- %span Participating
	21	+ .level-title
	22	+ Participating
	23	+ %p You will only receive notifications from related resources (e.g. from your commits or assigned issues)
36	24
37		- = label_tag nil, class: 'radio-inline' do
	25	+ .radio
	26	+ = label_tag nil, class: '' do
38	27	= radio_button_tag :notification_level, Notification::N_WATCH, @notification.watch?, class: 'trigger-submit'
39		- %span Watch
	28	+ .level-title
	29	+ Watch
	30	+ %p You will receive all notifications from projects in which you participate
40	31
41		-%br
42		-= link_to '#', class: 'js-toggle-visibility-link' do
43		- %span.btn.btn-tiny
44		- %i.icon-chevron-down
45		- %span Advanced notifications settings
46		-.js-toggle-visibility-container.hide
	32	+.clearfix
47	33	%hr
48		- %h4 Groups:
49		- %ul.bordered-list
50		- - @users_groups.each do \|users_group\|
51		- - notification = Notification.new(users_group)
52		- = render 'settings', type: 'group', membership: users_group, notification: notification
	34	+ %p
	35	+ You can also specify notification level per group or per project
	36	+ %br
	37	+ By default all projects and groups uses notification level set above
	38	+.row.all-notifications
	39	+ .col-md-6
	40	+ %h4 Groups:
	41	+ %ul.bordered-list
	42	+ - @users_groups.each do \|users_group\|
	43	+ - notification = Notification.new(users_group)
	44	+ = render 'settings', type: 'group', membership: users_group, notification: notification
53	45
54		- %h4 Projects:
55		- %ul.bordered-list
56		- - @users_projects.each do \|users_project\|
57		- - notification = Notification.new(users_project)
58		- = render 'settings', type: 'project', membership: users_project, notification: notification
	46	+ .col-md-6
	47	+ %h4 Projects:
	48	+ %ul.bordered-list
	49	+ - @users_projects.each do \|users_project\|
	50	+ - notification = Notification.new(users_project)
	51	+ = render 'settings', type: 'project', membership: users_project, notification: notification
...	...
...	...	@@ -8,6 +8,5 @@ class ProfileNotifications < Spinach::FeatureSteps
8	8
9	9	step 'I should see global notifications settings' do
10	10	page.should have_content "Notifications settings"
11		- page.should have_content "Global setting"
12	11	end
13	12	end
...	...