Merge pull request #2030 from tsigo/theme_feedback

Improve user feedback on the Profile > Design page

Merge pull request #2030 from tsigo/theme_feedback
Improve user feedback on the Profile > Design page
Dmitriy Zaporozhets
2 parents d7ce2c5c 30a66c06
Showing 7 changed files with 73 additions and 12 deletions Show diff stats
app/assets/javascripts/profile.js.coffee
app/assets/stylesheets/sections/themes.scss
app/controllers/profile_controller.rb
app/views/profile/design.html.haml
app/views/profile/update.js.erb
features/profile/profile.feature
features/steps/profile/profile.rb
@@ -0,0 +1,10 @@
+$ ->
+  $('.edit_user .application-theme input, .edit_user .code-preview-theme input').click ->
+    # Hide any previous submission feedback
+    $('.edit_user .update-feedback').hide()
+
+    # Submit the form
+    $('.edit_user').submit()
+
+    # Go up the hierarchy and show the corresponding submission feedback element
+    $(@).closest('fieldset').find('.update-feedback').show('highlight', {color: '#DFF0D8'}, 500)
+.application-theme, .code-preview-theme {
+  .update-feedback {
+    color: #468847;
+    float: right;
+  }
+}
+
 .themes_opts {
   padding-left:20px;
  
@@ -9,7 +9,11 @@ class ProfileController &lt; ApplicationController
  
   def update
     @user.update_attributes(params[:user])
-    redirect_to :back
+
+    respond_to do |format|
+      format.html { redirect_to :back }
+      format.js
+    end
   end
  
   def token
 = form_for @user, url: profile_update_path, remote: true, method: :put do |f|
-  %fieldset
-    %legend Application theme
+  %fieldset.application-theme
+    %legend
+      Application theme
+      .update-feedback.hide
+        %i.icon-ok
+        Saved
     .themes_opts
       = label_tag do
         .prev.default
@@ -29,8 +33,12 @@
     %br
     .clearfix
  
-  %fieldset
-    %legend Code review
+  %fieldset.code-preview-theme
+    %legend
+      Code preview theme
+      .update-feedback.hide
+        %i.icon-ok
+        Saved
     .code_highlight_opts
       = label_tag do
         .prev
@@ -42,10 +50,3 @@
           = image_tag "dark.png"
         = f.radio_button :dark_scheme, true
         Dark code preview
-
-:javascript
-  $(function(){
-    $(".edit_user input").bind("click", function() {
-      $(".edit_user").submit();
-    });
-  })
@@ -0,0 +1,9 @@
+// Remove body class for any previous theme, re-add current one
+$('body').removeClass('ui_basic ui_mars ui_modern ui_gray ui_color')
+$('body').addClass('<%= app_theme %>')
+
+// Re-render the header to reflect the new theme
+$('header').html('<%= escape_javascript(render("layouts/head_panel", title: "Profile")) %>')
+
+// Re-initialize header tooltips
+$('.has_bottom_tooltip').tooltip({placement: 'bottom'})
@@ -30,3 +30,16 @@ Feature: Profile
     Given I have activity
     When I visit profile history page
     Then I should see my activity
+
+  @javascript
+  Scenario: I change my application theme
+    Given I visit profile design page
+    When I change my application theme
+    Then I should see the theme change immediately
+    And I should receive feedback that the changes were saved
+
+  @javascript
+  Scenario: I change my code preview theme
+    Given I visit profile design page
+    When I change my code preview theme
+    Then I should receive feedback that the changes were saved
@@ -59,4 +59,21 @@ class Profile &lt; Spinach::FeatureSteps
   Then 'I should see my activity' do
     page.should have_content "#{current_user.name} closed issue"
   end
+
+  When "I change my application theme" do
+    choose "Violet"
+  end
+
+  When "I change my code preview theme" do
+    choose "Dark code preview"
+  end
+
+  Then "I should see the theme change immediately" do
+    page.should have_selector('body.ui_color')
+    page.should_not have_selector('body.ui_basic')
+  end
+
+  Then "I should receive feedback that the changes were saved" do
+    page.should have_content("Saved")
+  end
 end
...	...	@@ -0,0 +1,10 @@
	1	+$ ->
	2	+ $('.edit_user .application-theme input, .edit_user .code-preview-theme input').click ->
	3	+ # Hide any previous submission feedback
	4	+ $('.edit_user .update-feedback').hide()
	5	+
	6	+ # Submit the form
	7	+ $('.edit_user').submit()
	8	+
	9	+ # Go up the hierarchy and show the corresponding submission feedback element
	10	+ $(@).closest('fieldset').find('.update-feedback').show('highlight', {color: '#DFF0D8'}, 500)
...	...
	1	+.application-theme, .code-preview-theme {
	2	+ .update-feedback {
	3	+ color: #468847;
	4	+ float: right;
	5	+ }
	6	+}
	7	+
1	8	.themes_opts {
2	9	padding-left:20px;
3	10
...	...
...	...	@@ -9,7 +9,11 @@ class ProfileController < ApplicationController
9	9
10	10	def update
11	11	@user.update_attributes(params[:user])
12		- redirect_to :back
	12	+
	13	+ respond_to do \|format\|
	14	+ format.html { redirect_to :back }
	15	+ format.js
	16	+ end
13	17	end
14	18
15	19	def token
...	...
1	1	= form_for @user, url: profile_update_path, remote: true, method: :put do \|f\|
2		- %fieldset
3		- %legend Application theme
	2	+ %fieldset.application-theme
	3	+ %legend
	4	+ Application theme
	5	+ .update-feedback.hide
	6	+ %i.icon-ok
	7	+ Saved
4	8	.themes_opts
5	9	= label_tag do
6	10	.prev.default
...	...	@@ -29,8 +33,12 @@
29	33	%br
30	34	.clearfix
31	35
32		- %fieldset
33		- %legend Code review
	36	+ %fieldset.code-preview-theme
	37	+ %legend
	38	+ Code preview theme
	39	+ .update-feedback.hide
	40	+ %i.icon-ok
	41	+ Saved
34	42	.code_highlight_opts
35	43	= label_tag do
36	44	.prev
...	...	@@ -42,10 +50,3 @@
42	50	= image_tag "dark.png"
43	51	= f.radio_button :dark_scheme, true
44	52	Dark code preview
45		-
46		-:javascript
47		- $(function(){
48		- $(".edit_user input").bind("click", function() {
49		- $(".edit_user").submit();
50		- });
51		- })
...	...
...	...	@@ -0,0 +1,9 @@
	1	+// Remove body class for any previous theme, re-add current one
	2	+$('body').removeClass('ui_basic ui_mars ui_modern ui_gray ui_color')
	3	+$('body').addClass('<%= app_theme %>')
	4	+
	5	+// Re-render the header to reflect the new theme
	6	+$('header').html('<%= escape_javascript(render("layouts/head_panel", title: "Profile")) %>')
	7	+
	8	+// Re-initialize header tooltips
	9	+$('.has_bottom_tooltip').tooltip({placement: 'bottom'})
...	...
...	...	@@ -30,3 +30,16 @@ Feature: Profile
30	30	Given I have activity
31	31	When I visit profile history page
32	32	Then I should see my activity
	33	+
	34	+ @javascript
	35	+ Scenario: I change my application theme
	36	+ Given I visit profile design page
	37	+ When I change my application theme
	38	+ Then I should see the theme change immediately
	39	+ And I should receive feedback that the changes were saved
	40	+
	41	+ @javascript
	42	+ Scenario: I change my code preview theme
	43	+ Given I visit profile design page
	44	+ When I change my code preview theme
	45	+ Then I should receive feedback that the changes were saved
...	...
...	...	@@ -59,4 +59,21 @@ class Profile < Spinach::FeatureSteps
59	59	Then 'I should see my activity' do
60	60	page.should have_content "#{current_user.name} closed issue"
61	61	end
	62	+
	63	+ When "I change my application theme" do
	64	+ choose "Violet"
	65	+ end
	66	+
	67	+ When "I change my code preview theme" do
	68	+ choose "Dark code preview"
	69	+ end
	70	+
	71	+ Then "I should see the theme change immediately" do
	72	+ page.should have_selector('body.ui_color')
	73	+ page.should_not have_selector('body.ui_basic')
	74	+ end
	75	+
	76	+ Then "I should receive feedback that the changes were saved" do
	77	+ page.should have_content("Saved")
	78	+ end
62	79	end
...	...