From b73e478e26144202cfb8ac43e9bed0c04338edf7 Mon Sep 17 00:00:00 2001 From: Jason Robinson Date: Sat, 31 May 2014 15:17:49 +0300 Subject: [PATCH 1/7] Add spinner to publisher when posting a message Fixes #4949 --- app/assets/javascripts/app/views/publisher_view.js | 10 ++++++++++ app/assets/stylesheets/publisher_blueprint.css.scss | 6 ++++++ app/views/publisher/_publisher_blueprint.html.haml | 2 ++ app/views/publisher/_publisher_bootstrap.html.haml | 2 ++ 4 files changed, 20 insertions(+) diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index 901a8c11b..e54737660 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/app/assets/javascripts/app/views/publisher_view.js @@ -144,6 +144,8 @@ 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(); @@ -179,6 +181,8 @@ 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'); } }); }, @@ -346,6 +350,12 @@ app.views.Publisher = Backbone.View.extend({ // enable input this.setInputEnabled(true); + + // enable buttons + this.setButtonsEnabled(false); + + // hide spinner + this.$('#publisher_spinner').addClass('hidden'); // clear location this.destroyLocation(); diff --git a/app/assets/stylesheets/publisher_blueprint.css.scss b/app/assets/stylesheets/publisher_blueprint.css.scss index 3cbb468a2..15a51daf7 100644 --- a/app/assets/stylesheets/publisher_blueprint.css.scss +++ b/app/assets/stylesheets/publisher_blueprint.css.scss @@ -70,6 +70,12 @@ } } + #publisher_spinner { + position: relative; + top: 3px; + margin-right: 10px; + } + #publisher_service_icons { position: relative; top: 3px; diff --git a/app/views/publisher/_publisher_blueprint.html.haml b/app/views/publisher/_publisher_blueprint.html.haml index 68ea93d6f..bbfe3c9d7 100644 --- a/app/views/publisher/_publisher_blueprint.html.haml +++ b/app/views/publisher/_publisher_blueprint.html.haml @@ -49,6 +49,8 @@ .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 diff --git a/app/views/publisher/_publisher_bootstrap.html.haml b/app/views/publisher/_publisher_bootstrap.html.haml index a35f22d36..7528e9706 100644 --- a/app/views/publisher/_publisher_bootstrap.html.haml +++ b/app/views/publisher/_publisher_bootstrap.html.haml @@ -60,6 +60,8 @@ =t('cancel') .btn-toolbar.pull-right + %span#publisher_spinner{:class => 'hidden'} + = image_tag 'ajax-loader.gif' %span#publisher_service_icons - if current_user.services - for service in current_user.services From 6fd48949977f899173d661c20a1453a64e87c54a Mon Sep 17 00:00:00 2001 From: Jason Robinson Date: Sat, 31 May 2014 21:06:47 +0300 Subject: [PATCH 2/7] Add error flash message to publisher on error from server --- app/assets/javascripts/app/views/publisher_view.js | 1 + config/locales/javascript/javascript.en.yml | 8 +++----- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index e54737660..da32dd286 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/app/assets/javascripts/app/views/publisher_view.js @@ -183,6 +183,7 @@ app.views.Publisher = Backbone.View.extend({ self.setInputEnabled(true); self.setButtonsEnabled(true); self.$('#publisher_spinner').addClass('hidden'); + Diaspora.page.flashMessages.render({ 'success':false, 'notice':Diaspora.I18n.t('failed_to_post_message') }); } }); }, diff --git a/config/locales/javascript/javascript.en.yml b/config/locales/javascript/javascript.en.yml index a9647a999..6ca5e7330 100644 --- a/config/locales/javascript/javascript.en.yml +++ b/config/locales/javascript/javascript.en.yml @@ -50,6 +50,9 @@ en: limited: "Limited - your post will only be seen by people you are sharing with" public: "Public - your post will be visible to everyone and found by search engines" near_from: "Posted from: <%= location %>" + option: "Option <%= nr %>" + add_option: "Add option" + question: "Question" bookmarklet: post_submit: "Submitting post..." post_success: "Posted! Closing popup window..." @@ -110,11 +113,6 @@ en: mark_read: "Mark read" mark_unread: "Mark unread" - publisher: - option: "Option <%= nr %>" - add_option: "Add option" - question: "Question" - stream: hide: "Hide" public: "Public" From 128be9204c0d5746054d1cce3b7d297c0c484e76 Mon Sep 17 00:00:00 2001 From: Jason Robinson Date: Sun, 1 Jun 2014 14:25:34 +0300 Subject: [PATCH 3/7] 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 --- .../javascripts/app/views/publisher_view.js | 37 ++++++++++++++----- .../stylesheets/publisher_blueprint.css.scss | 15 +++++--- .../publisher/_publisher_blueprint.html.haml | 4 +- 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index da32dd286..06dcc6400 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/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); diff --git a/app/assets/stylesheets/publisher_blueprint.css.scss b/app/assets/stylesheets/publisher_blueprint.css.scss index 15a51daf7..9c81db04c 100644 --- a/app/assets/stylesheets/publisher_blueprint.css.scss +++ b/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; diff --git a/app/views/publisher/_publisher_blueprint.html.haml b/app/views/publisher/_publisher_blueprint.html.haml index bbfe3c9d7..a97beb2e7 100644 --- a/app/views/publisher/_publisher_blueprint.html.haml +++ b/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 From 8fead54ab68193f50243453c626143e0610fed74 Mon Sep 17 00:00:00 2001 From: Jason Robinson Date: Sun, 1 Jun 2014 14:52:59 +0300 Subject: [PATCH 4/7] Make publisher spinner also work in bootstrap publisher --- app/assets/stylesheets/publisher.css.scss | 4 ++++ app/views/publisher/_publisher_bootstrap.html.haml | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/publisher.css.scss b/app/assets/stylesheets/publisher.css.scss index 550221777..696f573d6 100644 --- a/app/assets/stylesheets/publisher.css.scss +++ b/app/assets/stylesheets/publisher.css.scss @@ -23,6 +23,10 @@ margin-top: 10px; } + #publisher_spinner { + text-align: center; + } + .options_and_submit { #publisher_service_icons { .btn-link { text-decoration: none; } diff --git a/app/views/publisher/_publisher_bootstrap.html.haml b/app/views/publisher/_publisher_bootstrap.html.haml index 7528e9706..3c2478cb9 100644 --- a/app/views/publisher/_publisher_bootstrap.html.haml +++ b/app/views/publisher/_publisher_bootstrap.html.haml @@ -53,6 +53,8 @@ - for aspect_id in aspect_ids = hidden_field_tag 'aspect_ids[]', aspect_id.to_s + .row-fluid#publisher_spinner{:class => 'hidden'} + = image_tag 'ajax-loader.gif' .row-fluid.options_and_submit .public_toggle %button.btn.btn-default.pull-left#hide_publisher{:title => t('shared.publisher.discard_post')} @@ -60,8 +62,6 @@ =t('cancel') .btn-toolbar.pull-right - %span#publisher_spinner{:class => 'hidden'} - = image_tag 'ajax-loader.gif' %span#publisher_service_icons - if current_user.services - for service in current_user.services From 6cf484c9a3ce5aa141363ae67c58fa94d055a105 Mon Sep 17 00:00:00 2001 From: Jason Robinson Date: Sun, 1 Jun 2014 15:02:40 +0300 Subject: [PATCH 5/7] Make sure publisher is totally hidden in bookmarklet after post success --- app/assets/javascripts/app/views/bookmarklet_view.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/assets/javascripts/app/views/bookmarklet_view.js b/app/assets/javascripts/app/views/bookmarklet_view.js index 29e63daca..71a9a7ffd 100644 --- a/app/assets/javascripts/app/views/bookmarklet_view.js +++ b/app/assets/javascripts/app/views/bookmarklet_view.js @@ -35,6 +35,7 @@ app.views.Bookmarklet = Backbone.View.extend({ _postSuccess: function(evt) { this.$('h4').text(Diaspora.I18n.t('bookmarklet.post_success')); app.publisher.close(); + this.$("#publisher").addClass("hidden"); _.delay(window.close, 2000); }, From f130ab384209763149aa6ea6c003e875592eeb91 Mon Sep 17 00:00:00 2001 From: Jason Robinson Date: Sun, 1 Jun 2014 15:17:16 +0300 Subject: [PATCH 6/7] Remove double setButtonsEnabled in publisher error --- app/assets/javascripts/app/views/publisher_view.js | 1 - 1 file changed, 1 deletion(-) diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js index 06dcc6400..6c8497a61 100644 --- a/app/assets/javascripts/app/views/publisher_view.js +++ b/app/assets/javascripts/app/views/publisher_view.js @@ -191,7 +191,6 @@ app.views.Publisher = Backbone.View.extend({ }, error: function() { if( app.publisher ) app.publisher.trigger('publisher:error'); - self.setButtonsEnabled(true); self.setInputEnabled(true); Diaspora.page.flashMessages.render({ 'success':false, 'notice':Diaspora.I18n.t('failed_to_post_message') }); self.setButtonsEnabled(true); From ad0982f35e6e64f36071cd0f2107bf2705697864 Mon Sep 17 00:00:00 2001 From: Jason Robinson Date: Sun, 1 Jun 2014 15:37:54 +0300 Subject: [PATCH 7/7] Remove custom bookmarklet error message. Flash error is shown on bookmarklet post error. On error, return post_something message to form --- app/assets/javascripts/app/views/bookmarklet_view.js | 2 +- config/locales/javascript/javascript.en.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/app/views/bookmarklet_view.js b/app/assets/javascripts/app/views/bookmarklet_view.js index 71a9a7ffd..28bce5f47 100644 --- a/app/assets/javascripts/app/views/bookmarklet_view.js +++ b/app/assets/javascripts/app/views/bookmarklet_view.js @@ -40,6 +40,6 @@ app.views.Bookmarklet = Backbone.View.extend({ }, _postError: function(evt) { - this.$('h4').text(Diaspora.I18n.t('bookmarklet.post_error')); + this.$('h4').text(Diaspora.I18n.t('bookmarklet.post_something')); } }); diff --git a/config/locales/javascript/javascript.en.yml b/config/locales/javascript/javascript.en.yml index 6ca5e7330..a8e9ea909 100644 --- a/config/locales/javascript/javascript.en.yml +++ b/config/locales/javascript/javascript.en.yml @@ -54,9 +54,9 @@ en: add_option: "Add option" question: "Question" bookmarklet: + post_something: "Post to diaspora*" post_submit: "Submitting post..." post_success: "Posted! Closing popup window..." - post_error: "An error occurred, try again later." infinite_scroll: no_more: "No more posts." no_more_contacts: "No more contacts."