Improve user feedback on the Profile > Design page

- Header changes immediately without a page reload
- Lets the user know that we actually saved their setting when changed

app/assets/javascripts/profile.js.coffee

+$ ->
+  $('.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)

app/assets/stylesheets/sections/themes.scss

+.application-theme, .code-preview-theme {
+  .update-feedback {
+    color: #468847;
+    float: right;
+  }
+}
+
 .themes_opts {
   padding-left:20px;
 

app/controllers/profile_controller.rb

@@ -9,7 +9,11 @@ class ProfileController < 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

app/views/profile/design.html.haml

 = 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();
-    });
-  })

app/views/profile/update.js.erb

+// 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'})

features/profile/profile.feature

@@ -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

features/steps/profile/profile.rb

@@ -59,4 +59,21 @@ class Profile < 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