From 940df3e2e12ff862c9e190fdfcd9a0278164a318 Mon Sep 17 00:00:00 2001 From: Gislene Pereira Date: Fri, 19 Feb 2016 14:56:09 -0300 Subject: Close the compose/inline box right after user clicks Send button and show message later when the email is sent or not. The Growl will be yellow if success and red if the email failed to be sent. Issue #609 --- web-ui/app/js/mail_list_actions/ui/compose_trigger.js | 10 ++++++++++ web-ui/app/js/mail_view/data/mail_sender.js | 3 ++- web-ui/app/js/user_alerts/ui/user_alerts.js | 2 +- web-ui/app/scss/_alerts.scss | 19 ++++++++++++++----- web-ui/app/templates/user_alerts/message.hbs | 2 +- .../spec/mail_list_actions/ui/compose_trigger.spec.js | 15 +++++++++++++++ web-ui/test/spec/user_alerts/ui/user_alerts.spec.js | 8 +++++++- 7 files changed, 50 insertions(+), 9 deletions(-) (limited to 'web-ui') 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 33430598..ec79cb26 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 @@ -38,9 +38,19 @@ define( this.trigger(document, events.dispatchers.rightPane.openComposeBox); }; + this.showEmailSuccess = function () { + this.trigger(document, events.ui.userAlerts.displayMessage, {message: 'Your message was 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.after('initialize', function () { this.render(); this.on('click', this.enableComposing); + this.on(document, events.mail.sent, this.showEmailSuccess); + this.on(document, events.mail.send_failed, this.showEmailError); }); } } diff --git a/web-ui/app/js/mail_view/data/mail_sender.js b/web-ui/app/js/mail_view/data/mail_sender.js index 0d11c636..8bb01f70 100644 --- a/web-ui/app/js/mail_view/data/mail_sender.js +++ b/web-ui/app/js/mail_view/data/mail_sender.js @@ -36,7 +36,7 @@ define( function failureSendingMail(on) { return function(result) { - on.trigger(document, events.mail.send_failed); + on.trigger(document, events.mail.send_failed, result); }; } @@ -51,6 +51,7 @@ define( }); this.sendMail = function(event, data) { + this.trigger(events.dispatchers.rightPane.openNoMessageSelected); monitoredAjax.call(_, this, this.attr.mailsResource, { type: 'POST', dataType: 'json', 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 57701579..b02762aa 100644 --- a/web-ui/app/js/user_alerts/ui/user_alerts.js +++ b/web-ui/app/js/user_alerts/ui/user_alerts.js @@ -40,7 +40,7 @@ define( this.displayMessage = function (ev, data) { - this.render({ message: data.message}); + this.render({ message: {content: data.message, class: (data.class || 'success')}}); }; this.after('initialize', function () { diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss index bd1210df..cfb31cbe 100644 --- a/web-ui/app/scss/_alerts.scss +++ b/web-ui/app/scss/_alerts.scss @@ -4,11 +4,20 @@ position: fixed; z-index: 10000; text-align: center; - span { - background: $warning; + span{ padding: 5px 60px; - border: 1px solid darken($warning, 10%); - color: darken($warning, 50%); - @include box-shadow(1px 1px 3px darken($warning, 60%)); + &.success { + background: $warning; + color: darken($warning, 50%); + border: 1px solid darken($warning, 10%); + @include box-shadow(1px 1px 3px darken($warning, 60%)); + } + &.error { + font-weight: bold; + color: white; + background: $error; + border: 1px solid darken($error, 10%); + @include box-shadow(1px 1px 3px darken($error, 60%)); + } } } diff --git a/web-ui/app/templates/user_alerts/message.hbs b/web-ui/app/templates/user_alerts/message.hbs index d2fff04a..3a0055eb 100644 --- a/web-ui/app/templates/user_alerts/message.hbs +++ b/web-ui/app/templates/user_alerts/message.hbs @@ -1 +1 @@ -{{ message }} +{{ message.content }} diff --git a/web-ui/test/spec/mail_list_actions/ui/compose_trigger.spec.js b/web-ui/test/spec/mail_list_actions/ui/compose_trigger.spec.js index 5e65ddbb..20deeae3 100644 --- a/web-ui/test/spec/mail_list_actions/ui/compose_trigger.spec.js +++ b/web-ui/test/spec/mail_list_actions/ui/compose_trigger.spec.js @@ -13,4 +13,19 @@ describeComponent('mail_list_actions/ui/compose_trigger', function () { expect(spyEvent).toHaveBeenTriggeredOn(document); }); + it('trigger showEmailSuccess message when message is sent', function () { + var spyEvent = spyOnEvent(document, Pixelated.events.ui.userAlerts.displayMessage); + + this.component.trigger(document, Pixelated.events.mail.sent); + + expect(spyEvent).toHaveBeenTriggeredOnAndWith(document, {message: 'Your message was sent!', class: 'success'}); + }); + + it('trigger showEmailError message when message is not sent', function () { + var spyEvent = spyOnEvent(document, Pixelated.events.ui.userAlerts.displayMessage); + + this.component.trigger(document, Pixelated.events.mail.send_failed, {responseJSON: {message: 'failure'}}); + + expect(spyEvent).toHaveBeenTriggeredOnAndWith(document, {message: 'Error, message not sent: failure', class: 'error'}); + }); }); diff --git a/web-ui/test/spec/user_alerts/ui/user_alerts.spec.js b/web-ui/test/spec/user_alerts/ui/user_alerts.spec.js index 5b25b5fb..5d87795a 100644 --- a/web-ui/test/spec/user_alerts/ui/user_alerts.spec.js +++ b/web-ui/test/spec/user_alerts/ui/user_alerts.spec.js @@ -10,7 +10,13 @@ describeComponent('user_alerts/ui/user_alerts', function () { it('should render message when ui:user_alerts:displayMessage is triggered', function () { this.component.trigger(Pixelated.events.ui.userAlerts.displayMessage, { message: 'a message' }); - expect(this.component.$node.html()).toMatch('a message'); + expect(this.component.$node.html()).toEqual('a message\n'); + }); + + it('should render error message', function () { + this.component.trigger(Pixelated.events.ui.userAlerts.displayMessage, { message: 'send failed', class: 'error' }); + + expect(this.component.$node.html()).toEqual('send failed\n'); }); it('should be emptied and hidden when hide is called', function() { -- cgit v1.2.3