Refactor mobile alerts for error responses, add them to container with fixed position

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);
+      }
+    }
   };
 })();

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);
     }
   };
 })();

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;
+  }
+}

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";

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")

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

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");
+    });
+  });
 });

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!");
     });
   });
 });