Merge pull request #1025 from pixelated/send-mail-feedback

[#830] Send mail feedback

7 files changed, 27 insertions, 10 deletions

diff --git a/web-ui/app/js/mail_list_actions/ui/compose_trigger.js b/web-ui/app/js/mail_list_actions/ui/compose_trigger.js
index ec79cb26..f0a96e79 100644
--- a/web-ui/app/js/mail_list_actions/ui/compose_trigger.js
+++ b/web-ui/app/js/mail_list_actions/ui/compose_trigger.js
@@ -18,10 +18,11 @@ define(
   [
     'flight/lib/component',
     'views/templates',
-    'page/events'
+    'page/events',
+    'views/i18n'
   ],
 
-  function(defineComponent, templates, events) {
+  function(defineComponent, templates, events, i18n) {
     'use strict';
 
     return defineComponent(composeTrigger);
@@ -39,11 +40,11 @@ define(
       };
 
       this.showEmailSuccess = function () {
-        this.trigger(document, events.ui.userAlerts.displayMessage, {message: 'Your message was sent!', class: 'success'});
+        this.trigger(document, events.ui.userAlerts.displayMessage, {message: i18n.t('mail-sent'), class: 'success'});
       };
 
       this.showEmailError = function (ev, data) {
-        this.trigger(document, events.ui.userAlerts.displayMessage, {message: 'Error,  message not sent: ' + data.responseJSON.message, class: 'error'});
+        this.trigger(document, events.ui.userAlerts.displayMessage, {message: i18n.t('mail-not-sent') + ' ' + data.responseJSON.message, class: 'error'});
       };
 
       this.after('initialize', function () {
diff --git a/web-ui/app/js/mail_view/ui/send_button.js b/web-ui/app/js/mail_view/ui/send_button.js
index 66fe1233..034f472c 100644
--- a/web-ui/app/js/mail_view/ui/send_button.js
+++ b/web-ui/app/js/mail_view/ui/send_button.js
@@ -91,6 +91,9 @@ define([
         this.disableButton();
         this.$node.text(viewHelper.i18n.t('sending-mail'));
 
+        this.trigger(document, events.ui.userAlerts.displayMessage,
+          {message: viewHelper.i18n.t('sending-mail'), class: 'success', dismissTimeout: 60000});
+
         this.attr.sendingInProgress = true;
 
         this.trigger(document, events.ui.recipients.doCompleteInput);
diff --git a/web-ui/app/js/mixins/with_mail_edit_base.js b/web-ui/app/js/mixins/with_mail_edit_base.js
index a088080e..c7f5447f 100644
--- a/web-ui/app/js/mixins/with_mail_edit_base.js
+++ b/web-ui/app/js/mixins/with_mail_edit_base.js
@@ -209,7 +209,7 @@ define(
             };
 
             this.mailSent = function () {
-                this.trigger(document, events.ui.userAlerts.displayMessage, {message: 'Your message was sent!'});
+                this.trigger(document, events.ui.userAlerts.displayMessage, {message: i18n.t('mail-sent')});
             };
 
             this.enableFloatlabel = function (element) {
diff --git a/web-ui/app/js/user_alerts/ui/user_alerts.js b/web-ui/app/js/user_alerts/ui/user_alerts.js
index e944a7a5..bef3efcd 100644
--- a/web-ui/app/js/user_alerts/ui/user_alerts.js
+++ b/web-ui/app/js/user_alerts/ui/user_alerts.js
@@ -29,21 +29,22 @@ define(
 
     function userAlerts() {
       this.defaultAttrs({
-        dismissTimeout: 3000
+        dismissTimeout: 4000
       });
 
       this.render = function(message) {
+        clearTimeout(this.attr.timeout);
         this.$node.html(templates.userAlerts.message(message));
         this.show();
-        setTimeout(this.hide.bind(this), this.attr.dismissTimeout);
+        this.attr.timeout = setTimeout(this.hide.bind(this), message.dismissTimeout || this.attr.dismissTimeout);
       };
 
-
       this.displayMessage = function(ev, data) {
         this.render({
           message: {
             content: data.message,
-            class: 'message-panel__growl--' + (data.class || 'success')
+            class: 'message-panel__growl--' + (data.class || 'success'),
+            dismissTimeout: data.dismissTimeout
           }
         });
       };
@@ -54,4 +55,3 @@ define(
     }
   }
 );
-
diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json
index d69b7472..5e23d39f 100644
--- a/web-ui/app/locales/en_US/translation.json
+++ b/web-ui/app/locales/en_US/translation.json
@@ -44,6 +44,8 @@
     "not-signed-label-tooltip": "The sender could not be verified.",
     "signed-label-tooltip": "You are communicating with the real sender.",
     "sending-mail": "Sending...",
+    "mail-sent": "Your message was sent!",
+    "mail-not-sent": "Error,  message not sent:",
     "trash-button": "Delete it",
     "search-placeholder" : "Search...",
     "search-results-for": "Search results for",
diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json
index 4e179363..dcf551af 100644
--- a/web-ui/app/locales/pt_BR/translation.json
+++ b/web-ui/app/locales/pt_BR/translation.json
@@ -44,6 +44,8 @@
     "not-signed-label-tooltip": "O remetente não pode ser verificado.",
     "signed-label-tooltip": "Você está se comunicando com o remetente real.",
     "sending-mail": "Enviando...",
+    "mail-sent": "Sua mensagem foi enviada!",
+    "mail-not-sent": "Erro, sua mensagem não foi enviada:",
     "trash-button": "Deletar",
     "search-placeholder" : "Pesquisar...",
     "search-results-for": "Resultado da pesquisa por",
diff --git a/web-ui/test/spec/mail_view/ui/send_button.spec.js b/web-ui/test/spec/mail_view/ui/send_button.spec.js
index f869362e..54e97e3a 100644
--- a/web-ui/test/spec/mail_view/ui/send_button.spec.js
+++ b/web-ui/test/spec/mail_view/ui/send_button.spec.js
@@ -95,6 +95,15 @@ describeComponent('mail_view/ui/send_button', function () {
         expect(this.$node.prop('disabled')).toBeTruthy();
       });
 
+      it('displays sending message', function () {
+        var displayMessageEvent = spyOnEvent(document, Pixelated.events.ui.userAlerts.displayMessage);
+
+        this.$node.click();
+
+        expect(displayMessageEvent).toHaveBeenTriggeredOnAndWith(document,
+          { message: 'Sending...', class: 'success', dismissTimeout: 60000 });
+      });
+
       it('enables again if sending errors out', function() {
         expect(this.$node.text()).toBe(i18n.t('send'));