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 |