diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb index e76b953c..7a7d7750 100644 --- a/app/controllers/users_controller.rb +++ b/app/controllers/users_controller.rb @@ -6,9 +6,25 @@ class UsersController < ApplicationController end def update - @user.update_attributes params[:user] - flash[:success] = "Settings successfully saved" - redirect_back! user_closet_hangers_path(@user) + success = @user.update_attributes params[:user] + respond_to do |format| + format.html { + if success + flash[:success] = "Settings successfully saved" + redirect_back! user_closet_hangers_path(@user) + else + flash[:alert] = "Error saving user settings: #{@user.errors.full_messages.to_sentence}" + end + } + + format.json { + if success + render :json => true + else + render :json => {:errors => @user.errors.full_messages}, :status => :unprocessable_entity + end + } + end end protected diff --git a/app/stylesheets/closet_hangers/_index.sass b/app/stylesheets/closet_hangers/_index.sass index 7fd8aa3d..e5f396d7 100644 --- a/app/stylesheets/closet_hangers/_index.sass +++ b/app/stylesheets/closet_hangers/_index.sass @@ -52,6 +52,31 @@ body.closet_hangers-index &:after content: ":" + #edit-contact-link, #cancel-contact-link + cursor: pointer + display: none + text-decoration: underline + + &:hover + text-decoration: none + + #edit-contact-link + #contact-link-has-value + display: none + + #contact-link-no-value + display: inline + + &.has-value + #contact-link-has-value + display: inline + + #contact-link-no-value + display: none + + #cancel-contact-link + margin-left: 1em + #closet-hangers clear: both text-align: center @@ -74,7 +99,8 @@ body.closet_hangers-index form display: none - &.current-user + &.current-user + #closet-hangers .object:hover form display: inline @@ -103,7 +129,8 @@ body.closet_hangers-index input[type=submit] font-size: 85% - &.js + &.js + #closet-hangers .object:hover .quantity input[type=number] width: 2.5em @@ -118,3 +145,17 @@ body.closet_hangers-index .quantity span:after content: "…" + #closet-hangers-contact + form + display: none + + #edit-contact-link, #cancel-contact-link + display: inline + + &.editing + form + display: block + + #edit-contact-link + display: none + diff --git a/app/views/closet_hangers/index.html.haml b/app/views/closet_hangers/index.html.haml index 1b44a3da..f3754dcb 100644 --- a/app/views/closet_hangers/index.html.haml +++ b/app/views/closet_hangers/index.html.haml @@ -1,5 +1,6 @@ - unless public_perspective? - title 'Your Items' + - add_body_class 'current-user' - content_for :before_flashes do = link_to "Import closet from Neopets", new_closet_page_path, :id => 'import-link' = form_tag items_path, :method => :get, :id => 'closet-hangers-items-search', 'data-current-user-id' => current_user.id do @@ -14,10 +15,19 @@ - if @user.neopets_username? = link_to "Neomail #{@user.neopets_username}", send_neomail_url(@user) - else + %span#edit-contact-link{:class => @user.neopets_username? ? 'has-value' : nil} + %span#contact-link-no-value + Add your Neopets username + %span#contact-link-has-value + Edit + = surround '"' do + Neomail + %span= @user.neopets_username = form_for @user do |f| = f.label :neopets_username = f.text_field :neopets_username = f.submit "Save" + %span#cancel-contact-link cancel #closet-hangers{:class => public_perspective? ? nil : 'current-user'} - if public_perspective? diff --git a/public/javascripts/closet_hangers/index.js b/public/javascripts/closet_hangers/index.js index b26eb31e..bc2cbeca 100644 --- a/public/javascripts/closet_hangers/index.js +++ b/public/javascripts/closet_hangers/index.js @@ -1,7 +1,9 @@ (function () { - var hangersElQuery = '#closet-hangers.current-user'; + var body = $(document.body).addClass("js"); + if(!body.hasClass("current-user")) return false; + + var hangersElQuery = '#closet-hangers'; var hangersEl = $(hangersElQuery); - hangersEl.addClass('js'); $.fn.disableForms = function () { return this.data("formsDisabled", true).find("input").attr("disabled", "disabled").end(); @@ -29,7 +31,7 @@ }); } - function handleHangerError(xhr, action) { + function handleSaveError(xhr, action) { try { var data = $.parseJSON(xhr.responseText); } catch(e) { @@ -76,7 +78,7 @@ input.revertValue(); span.text(input.val()); - handleHangerError(xhr, "updating the quantity"); + handleSaveError(xhr, "updating the quantity"); } }); } @@ -147,7 +149,7 @@ itemsSearchField.val(""); }, error: function (xhr) { - handleHangerError(xhr, "adding the item"); + handleSaveError(xhr, "adding the item"); } }); }, @@ -168,5 +170,51 @@ .append( "Add " + item.label + "" ) .appendTo( ul ); } + + var contactEl = $('#closet-hangers-contact'); + var editContactLink = $('#edit-contact-link'); + var contactForm = contactEl.children('form'); + var cancelContactLink = $('#cancel-contact-link'); + var contactFormUsername = contactForm.children('input[type=text]'); + var editContactLinkUsername = $('#contact-link-has-value span'); + + function closeContactForm() { + contactEl.removeClass('editing'); + } + + editContactLink.click(function () { + contactEl.addClass('editing'); + contactFormUsername.focus(); + }); + + cancelContactLink.click(closeContactForm); + + contactForm.submit(function (e) { + var data = contactForm.serialize(); + contactForm.disableForms(); + $.ajax({ + url: contactForm.attr('action') + '.json', + type: 'post', + data: data, + dataType: 'json', + complete: function () { + contactForm.enableForms(); + }, + success: function () { + var newName = contactFormUsername.val(); + if(newName.length > 0) { + editContactLink.addClass('has-value'); + editContactLinkUsername.text(newName); + } else { + editContactLink.removeClass('has-value'); + } + closeContactForm(); + }, + error: function (xhr) { + handleSaveError(xhr, 'saving Neopets username'); + } + }); + e.preventDefault(); + }); })(); diff --git a/public/stylesheets/compiled/screen.css b/public/stylesheets/compiled/screen.css index 75465c48..9a3d13da 100644 --- a/public/stylesheets/compiled/screen.css +++ b/public/stylesheets/compiled/screen.css @@ -639,11 +639,41 @@ body.closet_hangers-index #closet-hangers-contact label:after { content: ":"; } /* line 55, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index #edit-contact-link, body.closet_hangers-index #cancel-contact-link { + cursor: pointer; + display: none; + text-decoration: underline; +} +/* line 60, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index #edit-contact-link:hover, body.closet_hangers-index #cancel-contact-link:hover { + text-decoration: none; +} +/* line 64, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index #edit-contact-link #contact-link-has-value { + display: none; +} +/* line 67, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index #edit-contact-link #contact-link-no-value { + display: inline; +} +/* line 71, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index #edit-contact-link.has-value #contact-link-has-value { + display: inline; +} +/* line 74, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index #edit-contact-link.has-value #contact-link-no-value { + display: none; +} +/* line 77, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index #cancel-contact-link { + margin-left: 1em; +} +/* line 80, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index #closet-hangers { clear: both; text-align: center; } -/* line 60, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 85, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index #closet-hangers .object .quantity { -moz-opacity: 0.75; -webkit-opacity: 0.75; @@ -657,27 +687,27 @@ body.closet_hangers-index #closet-hangers .object .quantity { text-align: left; top: 60px; } -/* line 70, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 95, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index #closet-hangers .object .quantity span, body.closet_hangers-index #closet-hangers .object .quantity input[type=number] { font-size: 16px; font-weight: bold; } -/* line 74, ../../../app/stylesheets/closet_hangers/_index.sass */ +/* line 99, ../../../app/stylesheets/closet_hangers/_index.sass */ body.closet_hangers-index #closet-hangers .object form { display: none; } -/* line 79, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover form { +/* line 105, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user #closet-hangers .object:hover form { display: inline; } -/* line 82, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-hanger-destroy { +/* line 108, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy { position: absolute; right: 18px; top: 0; } -/* line 87, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-hanger-destroy input { +/* line 113, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input { /* http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html */ -moz-border-radius: 5px; -webkit-border-radius: 5px; @@ -702,23 +732,23 @@ body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-han font-size: 80%; } /* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-hanger-destroy input:hover { +body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:hover { background-color: #005300; } /* line 53, ../../../app/stylesheets/partials/clean/_mixins.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-hanger-destroy input:hover { +body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:hover { color: white; } /* line 55, ../../../app/stylesheets/partials/clean/_mixins.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-hanger-destroy input:active { +body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:active { top: 1px; } /* line 34, ../../../app/stylesheets/partials/clean/_mixins.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover .closet-hanger-destroy input:hover { +body.closet_hangers-index.current-user #closet-hangers .object:hover .closet-hanger-destroy input:hover { background-color: #999999; } -/* line 90, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover .quantity { +/* line 116, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity { -moz-opacity: 1; -webkit-opacity: 1; -o-opacity: 1; @@ -727,36 +757,52 @@ body.closet_hangers-index #closet-hangers.current-user .object:hover .quantity { top: 56px; padding: 0; } -/* line 96, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover .quantity span { +/* line 122, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity span { display: none; } -/* line 99, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover .quantity input[type=number] { +/* line 125, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=number] { padding: 2px; width: 2em; } -/* line 103, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user .object:hover .quantity input[type=submit] { +/* line 129, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user #closet-hangers .object:hover .quantity input[type=submit] { font-size: 85%; } -/* line 108, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user.js .object:hover .quantity input[type=number] { +/* line 135, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=number] { width: 2.5em; } -/* line 111, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user.js .object:hover .quantity input[type=submit] { +/* line 138, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user.js #closet-hangers .object:hover .quantity input[type=submit] { display: none; } -/* line 114, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user.js .object.loading { +/* line 141, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user.js #closet-hangers .object.loading { background: #eeffee; outline: 1px solid #006600; } -/* line 118, ../../../app/stylesheets/closet_hangers/_index.sass */ -body.closet_hangers-index #closet-hangers.current-user.js .object.loading .quantity span:after { +/* line 145, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user.js #closet-hangers .object.loading .quantity span:after { content: "…"; } +/* line 149, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user.js #closet-hangers-contact form { + display: none; +} +/* line 152, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user.js #closet-hangers-contact #edit-contact-link, body.closet_hangers-index.current-user.js #closet-hangers-contact #cancel-contact-link { + display: inline; +} +/* line 156, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user.js #closet-hangers-contact.editing form { + display: block; +} +/* line 159, ../../../app/stylesheets/closet_hangers/_index.sass */ +body.closet_hangers-index.current-user.js #closet-hangers-contact.editing #edit-contact-link { + display: none; +} /* line 3, ../../../app/stylesheets/closet_pages/_new.sass */ body.closet_pages-new #title, body.closet_pages-create #title {