diff options
author | Robert Speicher <rspeicher@gmail.com> | 2012-11-22 00:01:40 +0400 |
---|---|---|
committer | Robert Speicher <rspeicher@gmail.com> | 2012-11-22 00:01:40 +0400 |
commit | 30a66c065a14be05f05099118938fb20c8989b3e (patch) | |
tree | c559b7110b6fc6f8c80771dabe744c3d234c403a | |
parent | 00464099704ec16ad64faa3fe8c19d931ee7037a (diff) |
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
-rw-r--r-- | app/assets/javascripts/profile.js.coffee | 10 | ||||
-rw-r--r-- | app/assets/stylesheets/sections/themes.scss | 7 | ||||
-rw-r--r-- | app/controllers/profile_controller.rb | 6 | ||||
-rw-r--r-- | app/views/profile/design.html.haml | 23 | ||||
-rw-r--r-- | app/views/profile/update.js.erb | 9 | ||||
-rw-r--r-- | features/profile/profile.feature | 13 | ||||
-rw-r--r-- | features/steps/profile/profile.rb | 17 |
7 files changed, 73 insertions, 12 deletions
diff --git a/app/assets/javascripts/profile.js.coffee b/app/assets/javascripts/profile.js.coffee new file mode 100644 index 00000000000..e536afad939 --- /dev/null +++ b/app/assets/javascripts/profile.js.coffee @@ -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) diff --git a/app/assets/stylesheets/sections/themes.scss b/app/assets/stylesheets/sections/themes.scss index 62dd27d0789..2d121519b02 100644 --- a/app/assets/stylesheets/sections/themes.scss +++ b/app/assets/stylesheets/sections/themes.scss @@ -1,3 +1,10 @@ +.application-theme, .code-preview-theme { + .update-feedback { + color: #468847; + float: right; + } +} + .themes_opts { padding-left:20px; diff --git a/app/controllers/profile_controller.rb b/app/controllers/profile_controller.rb index 38cfa896b11..5f8b11fdded 100644 --- a/app/controllers/profile_controller.rb +++ b/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 diff --git a/app/views/profile/design.html.haml b/app/views/profile/design.html.haml index 5099ea5d60d..502cca42f2d 100644 --- a/app/views/profile/design.html.haml +++ b/app/views/profile/design.html.haml @@ -1,6 +1,10 @@ = 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(); - }); - }) diff --git a/app/views/profile/update.js.erb b/app/views/profile/update.js.erb new file mode 100644 index 00000000000..04b5cf4827d --- /dev/null +++ b/app/views/profile/update.js.erb @@ -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'}) diff --git a/features/profile/profile.feature b/features/profile/profile.feature index a98988b8ded..95b85a9f911 100644 --- a/features/profile/profile.feature +++ b/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 diff --git a/features/steps/profile/profile.rb b/features/steps/profile/profile.rb index 151182f687b..b6833f2bde2 100644 --- a/features/steps/profile/profile.rb +++ b/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 |