DG MS; added more feedback to photo uploader

app/views/photos/_new_profile_photo.haml

@@ -3,11 +3,63 @@
 -#   the COPYRIGHT file.
 
 
+- content_for :head do
+  :javascript
+    function createUploader(){
+     var uploader = new qq.FileUploaderBasic({
+         element: document.getElementById('file-upload'),
+         params: {'photo' : {'pending' : true, 'aspect_ids' : "all", 'set_profile_photo': true}},
+         allowedExtensions: ['jpg', 'jpeg', 'png'],
+         action: "#{photos_path}",
+         button: document.getElementById('file-upload'),
+         sizeLimit: 4194304,
+
+         onProgress: function(id, fileName, loaded, total){
+          var progress = Math.round(loaded / total * 100 );
+           $('#fileInfo').text(fileName + ' ' + progress + '%');
+         },
+
+         messages: {
+             typeError: "#{t('photos.new_photo.invalid_ext')}",
+             sizeError: "#{t('photos.new_photo.size_error')}",
+             emptyError: "#{t('photos.new_photo.empty')}"
+         },
+
+         onSubmit: function(id, fileName){
+          $('#file-upload').addClass("loading");
+          $("#profile_photo_upload").find(".avatar").addClass('loading');
+          $("#file-upload-spinner").removeClass("hidden");
+         },
+
+         onComplete: function(id, fileName, responseJSON){
+          $("#file-upload-spinner").addClass("hidden");
+          $('#fileInfo').text(fileName + ' completed').fadeOut(2000);
+          $('#file-upload').removeClass("loading");
+          var id = responseJSON.data.photo.id;
+          var url = responseJSON.data.photo.unprocessed_image.url;
+          var oldPhoto = $('#photo_id');
+          console.log(responseJSON);
+          if(oldPhoto.length == 0) {
+            $('#update_profile_form').prepend("<input type='hidden' value='" + id + "' id='photo_id' name='photo_id'/>");
+          }else{
+            oldPhoto.val(id);
+          }
+
+          $("#profile_photo_upload").find(".avatar").removeClass('loading');
+          $("#profile_photo_upload").find(".avatar").attr("src",url);
+         }
+     });
+    }
+    window.onload = createUploader;
+
 #profile_photo_upload
   = owner_image_tag(:thumb_medium)
-  
+
   #file-upload.button
     =t('.upload')
+
+  = image_tag('mobile-spinner.gif', :class => 'hidden', :style => "z-index:-1", :id => 'file-upload-spinner')
+
   %br
   %br
   %p
@@ -21,51 +73,4 @@
       = link_to t('_photos'), person_photos_path(person)
 
   #publisher_photo_upload
-    :javascript
-        function createUploader(){
-         var uploader = new qq.FileUploaderBasic({
-             element: document.getElementById('file-upload'),
-             params: {'photo' : {'pending' : true, 'aspect_ids' : "all", 'set_profile_photo': true}},
-             allowedExtensions: ['jpg', 'jpeg', 'png'],
-             action: "#{photos_path}",
-             debug: true,
-             button: document.getElementById('file-upload'),
-             sizeLimit: 4194304,
-
-            
-             onProgress: function(id, fileName, loaded, total){
-              var progress = Math.round(loaded / total * 100 );
-               $('#fileInfo').text(fileName + ' ' + progress + '%');
-             },
-             
-             messages: {
-                 typeError: "#{t('photos.new_photo.invalid_ext')}",
-                 sizeError: "#{t('photos.new_photo.size_error')}",
-                 emptyError: "#{t('photos.new_photo.empty')}"
-             },
-
-             onSubmit: function(id, fileName){
-              $('#file-upload').addClass("loading");
-              $("#profile_photo_upload").find(".avatar").fadeTo(200,0.5);
-             },
-             
-             onComplete: function(id, fileName, responseJSON){
-              $('#fileInfo').text(fileName + ' completed').fadeOut(2000);
-              $('#file-upload').removeClass("loading");
-              var id = responseJSON.data.photo.id;
-              var url = responseJSON.data.photo.unprocessed_image.url;
-              var oldPhoto = $('#photo_id');
-              console.log(responseJSON);
-              if(oldPhoto.length == 0) {
-                $('#update_profile_form').prepend("<input type='hidden' value='" + id + "' id='photo_id' name='photo_id'/>");
-              }else{
-                oldPhoto.val(id);
-              }
 
-              $("#profile_photo_upload").find(".avatar").fadeTo(200,1);
-              $("#profile_photo_upload").find(".avatar").attr("src",url);
-             }
-             
-         });
-       }
-       window.onload = createUploader;

app/views/profiles/_edit_public.haml

@@ -10,7 +10,6 @@
     var data = $.parseJSON( '#{@tags_array.to_json.gsub("'", "\\\\'")}' ),
         autocompleteInput = $("#profile_tag_string");
 
-
     autocompleteInput.autoSuggest("#{tags_path}", {
       selectedItemProp: "name",
       searchObjProps: "name",

public/stylesheets/sass/application.sass

@@ -1011,7 +1011,6 @@ label
       @include opacity(0.5)
 
 #publisher_textarea_wrapper
-
   #hide_publisher
     @include opacity(0.3)
     :padding 3px
@@ -1547,6 +1546,11 @@ ul.aspects
     :height 100px
     :width 100px
 
+    &.avatar
+      @include transition(opacity, 0.5s)
+      &.loading
+        @include opacity(0.3)
+
   :padding
     :left 120px
 
@@ -2628,7 +2632,6 @@ h1.tag
     :border
       :bottom 2px dotted $blue
 
-
 .info
   .tag
     :background