Commit 7392d28dcab4414dd9e1f6f019f92ccc5661c4fd

Authored by Dmitriy Zaporozhets
2 parents d7ce2c5c 30a66c06

Merge pull request #2030 from tsigo/theme_feedback

Improve user feedback on the Profile > Design page
app/assets/javascripts/profile.js.coffee 0 → 100644
@@ -0,0 +1,10 @@ @@ -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)
app/assets/stylesheets/sections/themes.scss
  1 +.application-theme, .code-preview-theme {
  2 + .update-feedback {
  3 + color: #468847;
  4 + float: right;
  5 + }
  6 +}
  7 +
1 .themes_opts { 8 .themes_opts {
2 padding-left:20px; 9 padding-left:20px;
3 10
app/controllers/profile_controller.rb
@@ -9,7 +9,11 @@ class ProfileController < ApplicationController @@ -9,7 +9,11 @@ class ProfileController < ApplicationController
9 9
10 def update 10 def update
11 @user.update_attributes(params[:user]) 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 end 17 end
14 18
15 def token 19 def token
app/views/profile/design.html.haml
1 = form_for @user, url: profile_update_path, remote: true, method: :put do |f| 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 .themes_opts 8 .themes_opts
5 = label_tag do 9 = label_tag do
6 .prev.default 10 .prev.default
@@ -29,8 +33,12 @@ @@ -29,8 +33,12 @@
29 %br 33 %br
30 .clearfix 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 .code_highlight_opts 42 .code_highlight_opts
35 = label_tag do 43 = label_tag do
36 .prev 44 .prev
@@ -42,10 +50,3 @@ @@ -42,10 +50,3 @@
42 = image_tag "dark.png" 50 = image_tag "dark.png"
43 = f.radio_button :dark_scheme, true 51 = f.radio_button :dark_scheme, true
44 Dark code preview 52 Dark code preview
45 -  
46 -:javascript  
47 - $(function(){  
48 - $(".edit_user input").bind("click", function() {  
49 - $(".edit_user").submit();  
50 - });  
51 - })  
app/views/profile/update.js.erb 0 → 100644
@@ -0,0 +1,9 @@ @@ -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'})
features/profile/profile.feature
@@ -30,3 +30,16 @@ Feature: Profile @@ -30,3 +30,16 @@ Feature: Profile
30 Given I have activity 30 Given I have activity
31 When I visit profile history page 31 When I visit profile history page
32 Then I should see my activity 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
features/steps/profile/profile.rb
@@ -59,4 +59,21 @@ class Profile &lt; Spinach::FeatureSteps @@ -59,4 +59,21 @@ class Profile &lt; Spinach::FeatureSteps
59 Then 'I should see my activity' do 59 Then 'I should see my activity' do
60 page.should have_content "#{current_user.name} closed issue" 60 page.should have_content "#{current_user.name} closed issue"
61 end 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 end 79 end