From d609238ed4a6277e7334274224d079573ba86c85 Mon Sep 17 00:00:00 2001 From: Steffen van Bergerem Date: Sat, 26 Nov 2016 19:18:50 +0100 Subject: [PATCH] Refactor mobile alerts for error responses, add them to container with fixed position --- app/assets/javascripts/mobile/mobile_alert.js | 10 +++++++++- .../mobile/mobile_conversations.js | 5 ++--- .../stylesheets/mobile/flash_messages.scss | 20 +++++++++++++++++++ app/assets/stylesheets/mobile/mobile.scss | 1 + app/views/conversations/new.mobile.haml | 1 - app/views/layouts/application.mobile.haml | 3 +++ spec/javascripts/mobile/mobile_alert_spec.js | 14 +++++++++++++ .../mobile/mobile_conversations_spec.js | 13 +++++++++--- 8 files changed, 59 insertions(+), 8 deletions(-) create mode 100644 app/assets/stylesheets/mobile/flash_messages.scss diff --git a/app/assets/javascripts/mobile/mobile_alert.js b/app/assets/javascripts/mobile/mobile_alert.js index 67e23a58a..354b90cb9 100644 --- a/app/assets/javascripts/mobile/mobile_alert.js +++ b/app/assets/javascripts/mobile/mobile_alert.js @@ -14,6 +14,14 @@ success: function(message) { this._flash(message, "success"); }, - error: function(message) { this._flash(message, "danger"); } + error: function(message) { this._flash(message, "danger"); }, + + handleAjaxError: function(response) { + if (response.status === 0) { + this.error(Diaspora.I18n.t("errors.connection")); + } else { + this.error(response.responseText); + } + } }; })(); diff --git a/app/assets/javascripts/mobile/mobile_conversations.js b/app/assets/javascripts/mobile/mobile_conversations.js index 4fef1b5b3..bf88bb5ff 100644 --- a/app/assets/javascripts/mobile/mobile_conversations.js +++ b/app/assets/javascripts/mobile/mobile_conversations.js @@ -10,9 +10,8 @@ Diaspora.Mobile.changeLocation(Routes.conversation(data.id)); }, - conversationCreateError: function(evt, resp) { - Diaspora.Mobile.Alert.error(resp.responseText); - $("html").animate({scrollTop: 0}); + conversationCreateError: function(evt, response) { + Diaspora.Mobile.Alert.handleAjaxError(response); } }; })(); diff --git a/app/assets/stylesheets/mobile/flash_messages.scss b/app/assets/stylesheets/mobile/flash_messages.scss new file mode 100644 index 000000000..945c2d1d5 --- /dev/null +++ b/app/assets/stylesheets/mobile/flash_messages.scss @@ -0,0 +1,20 @@ +.flash-messages-container { + background-color: rgba($black, .5); + padding: 0 10px; + position: fixed; + top: $mobile-navbar-height; + width: 100%; + z-index: 9; + + .flash-messages { + width: 100%; + } + + .alert { + margin-bottom: 10px; + } + + .alert:first-of-type { + margin-top: 10px; + } +} diff --git a/app/assets/stylesheets/mobile/mobile.scss b/app/assets/stylesheets/mobile/mobile.scss index 1e1fc8d4a..e48c64596 100644 --- a/app/assets/stylesheets/mobile/mobile.scss +++ b/app/assets/stylesheets/mobile/mobile.scss @@ -11,6 +11,7 @@ @import "mobile/header"; @import "mobile/tags"; @import "mobile/conversations"; +@import 'mobile/flash_messages'; @import "mobile/settings"; @import "mobile/stream_element"; @import "mobile/comments"; diff --git a/app/views/conversations/new.mobile.haml b/app/views/conversations/new.mobile.haml index 1da58fcfa..d8e8feb04 100644 --- a/app/views/conversations/new.mobile.haml +++ b/app/views/conversations/new.mobile.haml @@ -24,7 +24,6 @@ }); .col-md-6.col-md-offset-3#new_conversation_pane - #flash-messages .container-fluid.row %h3 = t("conversations.index.new_conversation") diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml index 618327572..55e4e7189 100644 --- a/app/views/layouts/application.mobile.haml +++ b/app/views/layouts/application.mobile.haml @@ -28,6 +28,9 @@ - if user_signed_in? = render "layouts/drawer" + .flash-messages-container + .flash-messages#flash-messages + #main{:role => "main"} - if current_page?(:activity_stream) %h3 diff --git a/spec/javascripts/mobile/mobile_alert_spec.js b/spec/javascripts/mobile/mobile_alert_spec.js index ffb789ef7..26e127d8b 100644 --- a/spec/javascripts/mobile/mobile_alert_spec.js +++ b/spec/javascripts/mobile/mobile_alert_spec.js @@ -26,4 +26,18 @@ describe("Diaspora.Mobile.Alert", function() { expect(Diaspora.Mobile.Alert._flash).toHaveBeenCalledWith("Oh noez!", "danger"); }); }); + + describe("handleAjaxError", function() { + it("shows a generic error if the connection failed", function() { + spyOn(Diaspora.Mobile.Alert, "error"); + Diaspora.Mobile.Alert.handleAjaxError({status: 0}); + expect(Diaspora.Mobile.Alert.error).toHaveBeenCalledWith(Diaspora.I18n.t("errors.connection")); + }); + + it("shows the error given in the responseText otherwise", function() { + spyOn(Diaspora.Mobile.Alert, "error"); + Diaspora.Mobile.Alert.handleAjaxError({status: 400, responseText: "some specific ajax error"}); + expect(Diaspora.Mobile.Alert.error).toHaveBeenCalledWith("some specific ajax error"); + }); + }); }); diff --git a/spec/javascripts/mobile/mobile_conversations_spec.js b/spec/javascripts/mobile/mobile_conversations_spec.js index 34281e27f..060a56950 100644 --- a/spec/javascripts/mobile/mobile_conversations_spec.js +++ b/spec/javascripts/mobile/mobile_conversations_spec.js @@ -4,6 +4,11 @@ describe("Diaspora.Mobile.Conversations", function() { Diaspora.Page = "ConversationsNew"; }); + afterEach(function() { + $(document).off("ajax:success", Diaspora.Mobile.Conversations.conversationCreateSuccess); + $(document).off("ajax:error", Diaspora.Mobile.Conversations.conversationCreateError); + }); + describe("conversationCreateSuccess", function() { it("is called when there was a successful ajax request for the conversation form", function() { spyOn(Diaspora.Mobile.Conversations, "conversationCreateSuccess"); @@ -43,10 +48,12 @@ describe("Diaspora.Mobile.Conversations", function() { }); it("shows a flash message", function() { - spyOn(Diaspora.Mobile.Alert, "error"); + spyOn(Diaspora.Mobile.Alert, "handleAjaxError").and.callThrough(); Diaspora.Mobile.Conversations.initialize(); - $("#new-conversation").trigger("ajax:error", [{responseText: "Oh noez! Something went wrong!"}]); - expect(Diaspora.Mobile.Alert.error).toHaveBeenCalledWith("Oh noez! Something went wrong!"); + var response = {status: 422, responseText: "Oh noez! Something went wrong!"}; + $("#new-conversation").trigger("ajax:error", response); + expect(Diaspora.Mobile.Alert.handleAjaxError).toHaveBeenCalledWith(response); + expect($("#flash-messages")).toHaveText("Oh noez! Something went wrong!"); }); }); });