enable/disable send button when attachment is uploading

Issue #548

4 files changed, 33 insertions, 4 deletions

diff --git a/web-ui/app/js/mail_view/ui/attachment.js b/web-ui/app/js/mail_view/ui/attachment.js
index f57fea5b..fcb0fe68 100644
--- a/web-ui/app/js/mail_view/ui/attachment.js
+++ b/web-ui/app/js/mail_view/ui/attachment.js
@@ -42,13 +42,18 @@ define(
                     dataType: 'json',
                     done: function (e, response) {
                         var data = response.result;
-                        $('#files').html('<span>' + data.filename + ' (' + humanReadable(data.filesize) + ')' + '</span>');
+                        var link = '<a href="/attachment/'+ data.attachment_id + '?filename='+ data.filename +'&encoding=base64">' + data.filename + ' (' + humanReadable(data.filesize) + ')' + '</a>';
+                        $('#attachment-list-item').html(link);
                         on.trigger(document, events.mail.uploadedAttachment, data);
                     },
                     progressall: function (e, data) {
                         var progress = parseInt(data.loaded / data.total * 100, 10);
                         $('#progress .progress-bar').css('width', progress + '%');
                     }
+                }).bind('fileuploadstart', function(e) {
+                    on.trigger(document, events.mail.uploadingAttachment);
+                }).bind('fileuploadadd', function(e) {
+                    $('.attachmentsAreaWrap').show();
                 });
             }
 
@@ -60,6 +65,7 @@ define(
             this.after('initialize', function () {
                 if (features.isEnabled('attachment')) {
                     this.render();
+                    $('.attachmentsAreaWrap').hide();
                 }
                 this.on(this.$node, 'click', this.upload);
             });
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 5c1c3506..b16ea055 100644
--- a/web-ui/app/js/mail_view/ui/send_button.js
+++ b/web-ui/app/js/mail_view/ui/send_button.js
@@ -47,7 +47,7 @@ define([
 
       this.updateButton = function () {
         if (this.attr.sendingInProgress === false) {
-          if (this.atLeastOneInputFieldHasCharacters() || this.atLeastOneInputFieldHasRecipients()) {
+          if (this.attr.uploading === false && (this.atLeastOneInputFieldHasCharacters() || this.atLeastOneInputFieldHasRecipients())) {
             this.enableButton();
           } else {
             this.disableButton();
@@ -65,6 +65,16 @@ define([
         this.updateButton();
       };
 
+      this.uploadInProgress = function (ev, data) {
+        this.attr.uploading = true;
+        this.updateButton();
+      };
+
+      this.uploadFinished = function (ev, data) {
+        this.attr.uploading = false;
+        this.updateButton();
+      };
+
       this.updateRecipientsForField = function (ev, data) {
         this.attr.recipients[data.recipientsName] = data.newRecipients;
         this.attr.inputFieldHasCharacters[data.recipientsName] = false;
@@ -89,6 +99,7 @@ define([
 
       this.resetButton = function () {
         this.attr.sendingInProgress = false;
+        this.attr.uploading = false;
         this.$node.html(viewHelper.i18n('send-button'));
         this.enableButton();
       };
@@ -104,6 +115,9 @@ define([
 
         this.on(this.$node, 'click', this.updateRecipientsAndSendMail);
 
+        this.on(document, events.mail.uploadingAttachment, this.uploadInProgress);
+        this.on(document, events.mail.uploadedAttachment, this.uploadFinished);
+
         this.on(document, events.dispatchers.rightPane.clear, this.teardown);
         this.on(document, events.ui.sendbutton.enable, this.resetButton);
         this.on(document, events.mail.send_failed, this.resetButton);
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index 4d817b91..85c190bb 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -143,7 +143,8 @@ define(function () {
         update: 'mail:tags:update',
         updated: 'mail:tags:updated'
       },
-      uploadedAttachment: 'mail:uploaded:attachment'
+      uploadedAttachment: 'mail:uploaded:attachment',
+      uploadingAttachment: 'mail:uploading:attachment'
     },
     mails: {
       available: 'mails:available',
diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs
index ea14e4fe..d985ed52 100644
--- a/web-ui/app/templates/compose/compose_box.hbs
+++ b/web-ui/app/templates/compose/compose_box.hbs
@@ -31,7 +31,15 @@
         <div class="progress-bar progress-bar-success"></div>
     </div>
     <!-- The container for the uploaded files -->
-    <div id="files" class="files"></div>
+    <div class="attachmentsAreaWrap">
+      <div class="attachmentsArea column large-12">
+        <p><strong><i class="fa fa-paperclip"></i> Attachment(s):</strong></p>
+        <ul>
+          <li id="attachment-list-item"> </li>
+        </ul>
+      </div>
+    </div>
+ 
     <br>
 </div>