DG MS; added more feedback to photo uploader

app/views/photos/_new_profile_photo.haml

@@ -3,24 +3,7 @@
 -#   the COPYRIGHT file.
 
 
-#profile_photo_upload
-  = owner_image_tag(:thumb_medium)
-  
-  #file-upload.button
-    =t('.upload')
-  %br
-  %br
-  %p
-    #fileInfo
-
-  -if !aspect.nil? && aspect != :getting_started && current_user.person.has_photos?
-    %br
-    %br
-    %p
-      \...#{t('.or_select_one')}
-      = link_to t('_photos'), person_photos_path(person)
-
-  #publisher_photo_upload
+- content_for :head do
   :javascript
     function createUploader(){
      var uploader = new qq.FileUploaderBasic({
@@ -28,11 +11,9 @@
          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 + '%');
@@ -46,10 +27,12 @@
 
          onSubmit: function(id, fileName){
           $('#file-upload').addClass("loading");
-              $("#profile_photo_upload").find(".avatar").fadeTo(200,0.5);
+          $("#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;
@@ -62,10 +45,32 @@
             oldPhoto.val(id);
           }
 
-              $("#profile_photo_upload").find(".avatar").fadeTo(200,1);
+          $("#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
+    #fileInfo
+
+  -if !aspect.nil? && aspect != :getting_started && current_user.person.has_photos?
+    %br
+    %br
+    %p
+      \...#{t('.or_select_one')}
+      = link_to t('_photos'), person_photos_path(person)
+
+  #publisher_photo_upload
+

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