Attachments in compose and reply

chrome/app.css

@@ -102,6 +102,7 @@ body {
 h1.wizard-title {
   font-family: inherit;
   font-weight: 300;
+  padding-top: 30%;
   text-color: #777;
 }
 

chrome/pages/messages/messages-controller.js

@@ -66,12 +66,13 @@ e2email.pages.messages.MessagesCtrl = function(
   /**
    * Contains the state related to any replies by the user
    * for this thread.
-   * @type {!{baseTitle: string, showText: boolean, content: ?string}}
+   * @type {!{baseTitle: string, showText: boolean, content: ?string, attachments: Array<Object>}}
    */
   this.reply = {
     'baseTitle': 'reply',
     'content': null,
-    'showText': false
+    'showText': false,
+    'attachments': []
   };
 
   // Run an async task to fetch/decrypt messages in this thread
@@ -95,6 +96,36 @@ MessagesCtrl.prototype.cancelReply = function(opt_event) {
   this.reply['baseTitle'] = 'reply';
   this.reply['content'] = null;
   this.reply['showText'] = false;
+  this.reply['attachments'] = [];
+};
+
+
+/**
+ * @param {string} name of the file
+ * @param {string} type of the file
+ * @param {string} contents of the file in a string format
+ * @param {number} size of the file
+ * @export
+ */
+MessagesCtrl.prototype.onFileUpload = function(name, type, contents, size) {
+  var obj = {
+    'filename': name,
+    'type': type,
+    'encoding': 'base64',
+    'content': contents,
+    'size': size
+  };
+  this.reply.attachments.push(obj);
+};
+
+
+/**
+ * @export
+ */
+MessagesCtrl.prototype.removeObj = function() {
+  if (this.reply.attachments != []) {
+    this.reply.attachments.pop();
+  }
 };
 
 
@@ -109,6 +140,7 @@ MessagesCtrl.prototype.onReply = function() {
     this.reply['showText'] = true;
     this.reply['baseTitle'] = 'send';
     this.reply['content'] = null;
+    this.reply['attachments'] = [];
     setTimeout(function() {
       document.querySelector('textarea').focus();
       document.querySelector('#replyButton').scrollIntoView();
@@ -117,7 +149,8 @@ MessagesCtrl.prototype.onReply = function() {
     var messageLength = this.reply['content'].length;
     this.gmailService_.encryptAndSendMail(
         this.thread.to, this.threadId_, this.thread.messageId,
-        this.thread.subject, this.reply['content']).then(goog.bind(function() {
+        this.thread.subject, this.reply['content'], this.reply['attachments']).
+        then(goog.bind(function() {
           return this.gmailService_.refreshThread(this.threadId_);
         }, this)).then(goog.bind(this.cancelReply, this));
   }

chrome/pages/messages/messages-controller_test.js

@@ -22,12 +22,21 @@ goog.require('e2email.pages.messages.MessagesCtrl');
 
 describe('MessagesCtrl', function() {
   var q, controller, messagesController, scope, location;
-  var mockGmailService;
+  var mockGmailService, mockWindowService, mockTranslateService;
   var TEST_EMAIL = 'mail@example.com';
   var TEST_SUBJECT = 'test subject';
   var TEST_THREAD_ID = 'test-thread-id';
   var TEST_MESSAGE_ID = 'test-message-id';
   var TEST_CONTENT = 'test content';
+  var TEST_FILENAME = 'dull';
+  var TEST_TYPE = 'dull';
+  var TEST_ENCODING = 'base64';
+  var TEST_CONTENT_ATTACHMENT = 'dull';
+  var TEST_SIZE = 12;
+  var TEST_ATTACHMENTS = [{'filename': TEST_FILENAME, 'type': TEST_TYPE,
+    'encoding': TEST_ENCODING, 'content': TEST_CONTENT_ATTACHMENT,
+    'size': TEST_SIZE}];
+
   var TEST_THREAD = {
     'to': [TEST_EMAIL],
     'messageId': TEST_MESSAGE_ID,
@@ -45,6 +54,14 @@ describe('MessagesCtrl', function() {
     controller = $controller;
     location = $location;
 
+    mockWindowService = {
+      open: function(url, name, options) {
+      },
+      document: {
+        title: 'not set'
+      }
+    };
+
     mockGmailService = {
       refresh: function(force, progress) {
         return q.when(undefined);
@@ -57,10 +74,11 @@ describe('MessagesCtrl', function() {
         }
       },
       encryptAndSendMail: function(
-          recipients, threadId, messageId, subject, content) {
+          recipients, threadId, messageId, subject, content, attachments) {
         if ((recipients.length === 1) && (recipients[0] === TEST_EMAIL) &&
             (threadId == TEST_THREAD_ID) && (messageId === TEST_MESSAGE_ID) &&
-            (subject === TEST_SUBJECT) && (content === TEST_CONTENT)) {
+            (subject === TEST_SUBJECT) && (content === TEST_CONTENT) &&
+            (attachments === TEST_ATTACHMENTS)) {
           return q.when(undefined);
         } else {
           return q.reject('bad parameters');
@@ -113,6 +131,7 @@ describe('MessagesCtrl', function() {
 
     messagesController.reply['showText'] = true;
     messagesController.reply['content'] = TEST_CONTENT;
+    messagesController.reply['attachments'] = TEST_ATTACHMENTS;
     messagesController.onReply();
     // Resolve promises.
     scope.$digest();
@@ -124,5 +143,21 @@ describe('MessagesCtrl', function() {
     expect(messagesController.reply['showText']).toBe(false);
   });
 
+  it('should create an object with the properties and add it to attachments',
+     function() {
+       messagesController = controller(
+       'MessagesCtrl as messagesCtrl', {
+         $scope: scope,
+         $location: location,
+         $window: mockWindowService,
+         gmailService: mockGmailService,
+         $routeParams: { 'threadId': TEST_THREAD_ID }
+       });
+       messagesController.onFileUpload(TEST_FILENAME, TEST_TYPE,
+       TEST_CONTENT_ATTACHMENT, TEST_SIZE);
 
+       // Verify attachments to have been updated.
+       expect(messagesController.reply['attachments']).
+       toEqual(TEST_ATTACHMENTS);
+     });
 });

chrome/pages/messages/messages.css

@@ -3,7 +3,7 @@
   margin-bottom: 1em;
 }
 
-.email-detail-from {
+.email-detail-from { 
 
 }
 
@@ -25,6 +25,7 @@
 .email-subject {
   font-family: Roboto;
   color: #505050;
+  text-align: left !important;
 }
 
 .email-mime-entry {
@@ -34,6 +35,7 @@
 
 .email-text-content {
   white-space: pre-line;
+  text-align: left !important;
 }
 
 .email-image-content {
@@ -49,3 +51,19 @@
   border: 1px solid rgba(0,0,0,0.25);
   white-space: pre-line;
 }
+
+.single-attachment-received {
+  background-color: #f5f5f5;
+  border: 1px solid #dcdcdc;
+  font-weight: bold;
+  font-size: 13px;
+  margin: 0 7px 6px;
+  color: #1155CC !important;
+  overflow-y: hidden;
+  text-align: left;
+  padding: 2px 6px;
+  max-width: 448px;
+  width: 80%;
+  height: 23px;
+  margin-bottom: -5px;
+}

chrome/pages/messages/messages.html

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row">
       <div class="col-xs-12">
-        <button ng-click="messagesCtrl.showThreads()" class="btn btn-primary btn-focus col-xs-3">
+        <button ng-click="messagesCtrl.showThreads()" class="btn btn-primary btn-focus col-xs-3 sidebtnlarge">
           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
           {{'inbox' | translate}}
         </button>
@@ -38,22 +38,27 @@ <h4 class="col-xs-12 page-header email-subject selectable">{{messagesCtrl.thread
       </div>
       <div class="row email-mime-entry" ng-repeat="mime in mail.mimeContent" ng-show="mail.mimeContent">
         <img class="fade-show email-image-content" ng-src="{{mime.content}}" ng-if="mime.type=='image'">
-        <div class="email-text-content col-xs-12" ng-if="mime.type=='text'">{{mime.content}}
-        </div>
-        <div class="col-xs-12" ng-if="mime.type=='unsupported'">
-          <div class="col-xs-12 email-unsupported-content text-warning">{{mime.content}}</div>
-        </div>
+        <div class="email-text-content col-xs-12" ng-if="mime.type=='text'">{{mime.content}}</div>
+        <div class="col-xs-12 single-attachment-received" ng-if="mime.url"> <a href="{{mime.url}}" download>{{mime.filename}}</div>
         <div class="email-error-content text-danger col-xs-12" ng-if="mime.type=='error'">{{mime.content}}</div>
       </div>
     </li>
   </ul>
 
   <form class="email-detail-reply-form fade-show" ng-show="messagesCtrl.thread.mails[messagesCtrl.thread.mails.length-1].mimeContent && !messagesCtrl.thread.mails[messagesCtrl.thread.mails.length-1].hasErrors" ng-submit="messagesCtrl.onReply()">
-    <textarea ng-show="messagesCtrl.reply.showText" class="form-control fade-show" placeholder="{{'typeReplyPlaceholder' | translate}}" ng-model="messagesCtrl.reply.content" rows="10"></textarea>
+    <div id="textareaSpace"  ng-show="messagesCtrl.reply.showText">
+      <textarea id="textareaElement" class="form-control fade-show" placeholder="{{'typeReplyPlaceholder' | translate}}" ng-model="messagesCtrl.reply.content" rows="10"></textarea>
+    <div id="attachmentRepeat">
+        <div ng-repeat="x in messagesCtrl.reply.attachments" class="single-attachment"><span style="margin: 0px; padding:0px;overflow-y: hidden; width:60%;">{{ x.filename | limitTo: 20 }}{{x.filename.length > 20 ? '...' : ''}} </span> <span style="width:30%; overflow-y:hidden;"> {{' (' + x.size/1000 +
+        ' K)'}}</span> <span style="width:10%;">
+        <button ng-click="threadsCtrl.removeObj()" class="removeAttachment"> x </button> </span></div>
+      </div>
+    </div>
     <div class="row email-detail-reply-form-button-row">
       <div class="col-xs-12">
-        <button id="replyButton" type="submit" class="col-xs-3 btn btn-primary btn-focus pull-right">{{messagesCtrl.reply.baseTitle | translate}}</button>
-        <button style="margin-top: 1em;" ng-click="messagesCtrl.cancelReply($event)" ng-show="messagesCtrl.reply.showText" class="btn btn-link btn-focus pull-right fade-show">{{'cancel' | translate}}</button>
+        <button id="replyButton" type="submit" class="col-xs-3 btn btn-primary btn-focus pull-right sidebtn">{{messagesCtrl.reply.baseTitle | translate}}</button>
+        <button style="margin-top: 1em;" ng-click="messagesCtrl.cancelReply($event)" ng-show="messagesCtrl.reply.showText" class="btn btn-link btn-focus pull-right fade-show sidebtn">{{'cancel' | translate}}</button>
+        <img src="assets/img/attach2.png" class="attach-img" ng-show="messagesCtrl.reply.showText" as-upload="messagesCtrl.onFileUpload(name, type, contents, size)"/>
       </div>
     </div>
   </form>

chrome/pages/recover/recover.html

@@ -38,7 +38,6 @@ <h1 class="wizard-title text-center"><b>{{'recoverScreenTitle' | translate}}</b>
   </div>
   <div class="col-xs-12 row">
     <button id="6" ng-disabled="theform.thecode.$error.pattern || theform.thecode.$error.required || recoverCtrl.status" class="btn btn-primary btn-focus" data-ng-click="recoverCtrl.unlock()">{{'recover' | translate}}</button>
-
   </div>
 </form>
 

chrome/pages/reset/reset.html

@@ -7,7 +7,6 @@ <h1 class="wizard-title text-center"><b>{{'resetTitle' | translate}}</b></h1>
   <div class="col-xs-12 lead text-center">{{'resetHelp' | translate}}</div>
   <div class="col-xs-12 lead text-danger text-center">{{'resetWarning' | translate}}</div>
 </div>
-
 <div class="reset-row row">
   <div class="col-xs-6">
     <button class="btn btn-primary btn-focus reset-btn" ng-disabled="resetCtrl.inProgress" data-ng-click="resetCtrl.cancel()">{{'cancel' | translate}}</button>
@@ -16,4 +15,3 @@ <h1 class="wizard-title text-center"><b>{{'resetTitle' | translate}}</b></h1>
       <button class="btn btn-link btn-focus" ng-disabled="resetCtrl.inProgress" data-ng-click="resetCtrl.goAhead()"><span class="text-danger">{{'resetAnywayLink' | translate}}</span></button>
   </div>
 </div>
-</div>