Refactor UI hint on status message submit.

Now we close the publisher on submit and reopen it on error. The spinner is shown while submission is in progress. Fixes #4949

app/assets/javascripts/app/views/publisher_view.js

@@ -69,6 +69,18 @@ app.views.Publisher = Backbone.View.extend({
           _this.tryClose()
         }
     });
+    
+    // close publisher on post
+    this.on('publisher:add', function() {
+      this.close();
+      this.showSpinner(true);
+    });
+    
+    // open publisher on post error
+    this.on('publisher:error', function() {
+      this.open();
+      this.showSpinner(false);
+    });
 
     this.initSubviews();
     return this;
@@ -134,6 +146,7 @@ app.views.Publisher = Backbone.View.extend({
   },
 
   createStatusMessage : function(evt) {
+    this.setButtonsEnabled(false);
     var self = this;
 
     if(evt){ evt.preventDefault(); }
@@ -144,8 +157,6 @@ app.views.Publisher = Backbone.View.extend({
     var serializedForm = $(evt.target).closest("form").serializeObject();
     // disable input while posting, must be after the form is serialized
     this.setInputEnabled(false);
-    this.setButtonsEnabled(false);
-    this.$('#publisher_spinner').removeClass('hidden');
 
     // lulz this code should be killed.
     var statusMessage = new app.models.Post();
@@ -180,10 +191,11 @@ app.views.Publisher = Backbone.View.extend({
       },
       error: function() {
         if( app.publisher ) app.publisher.trigger('publisher:error');
-        self.setInputEnabled(true);
         self.setButtonsEnabled(true);
-        self.$('#publisher_spinner').addClass('hidden');
+        self.setInputEnabled(true);
         Diaspora.page.flashMessages.render({ 'success':false, 'notice':Diaspora.I18n.t('failed_to_post_message') });
+        self.setButtonsEnabled(true);
+        self.setInputEnabled(true);
       }
     });
   },
@@ -349,14 +361,14 @@ app.views.Publisher = Backbone.View.extend({
     // disable submitting
     this.checkSubmitAvailability();
 
+    // hide spinner
+    this.showSpinner(false);
+
     // enable input
     this.setInputEnabled(true);
     
     // enable buttons
-    this.setButtonsEnabled(false);
-    
-    // hide spinner
-    this.$('#publisher_spinner').addClass('hidden');
+    this.setButtonsEnabled(true);
 
     // clear location
     this.destroyLocation();
@@ -397,7 +409,14 @@ app.views.Publisher = Backbone.View.extend({
     this.view_poll_creator.$el.removeClass('active');
     return this;
   },
-
+  
+  showSpinner: function(bool) {
+    if (bool)
+      this.$('#publisher_spinner').removeClass('hidden');
+    else
+      this.$('#publisher_spinner').addClass('hidden');
+  },
+  
   checkSubmitAvailability: function() {
     if( this._submittable() ) {
       this.setButtonsEnabled(true);

app/assets/stylesheets/publisher_blueprint.css.scss

@@ -42,6 +42,15 @@
     width: 483px;
   }
 
+  #publisher_spinner {
+    clear: both;
+    margin-bottom: -2px;
+    min-height: 21px;
+    padding-top: 6px;
+    position: relative;
+    text-align: center;
+  }
+
   .options_and_submit {
     min-height: 21px;
     clear: both;
@@ -70,12 +79,6 @@
       }
     }
 
-    #publisher_spinner {
-      position: relative;
-      top: 3px;
-      margin-right: 10px;
-    }
-
     #publisher_service_icons {
       position: relative;
       top: 3px;

app/views/publisher/_publisher_blueprint.html.haml

@@ -47,10 +47,10 @@
         - for aspect_id in aspect_ids
           = hidden_field_tag 'aspect_ids[]', aspect_id.to_s
 
+      #publisher_spinner{:class => 'hidden'}
+        = image_tag 'ajax-loader.gif'
       .options_and_submit
         .public_toggle
-          %span#publisher_spinner{:class => 'hidden'}
-            = image_tag 'ajax-loader.gif'
           %span#publisher_service_icons
             - if current_user.services
               - for service in current_user.services