Commit 7392d28dcab4414dd9e1f6f019f92ccc5661c4fd
Exists in
master
and in
4 other branches
Merge pull request #2030 from tsigo/theme_feedback
Improve user feedback on the Profile > Design page
Showing
7 changed files
with
73 additions
and
12 deletions
Show diff stats
@@ -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
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 | - }) |
@@ -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 < Spinach::FeatureSteps | @@ -59,4 +59,21 @@ class Profile < 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 |