Attachments in compose and reply

chrome/app.css

@@ -152,3 +152,13 @@ div.big-icon > img {
   display: block;
   margin: auto;
 }
+
+.attach-img {
+  height: 23px;
+  margin-top: 10px;
+  cursor: pointer;
+}
+
+.attach-icon:hover {
+  fill: #66afe9;
+}

chrome/models/mail/mail-model.js

@@ -18,11 +18,28 @@
  * @fileoverview Typedefs for a user's mailbox.
  */
 
+goog.provide('e2email.models.mail.Attachment');
 goog.provide('e2email.models.mail.Mail');
 goog.provide('e2email.models.mail.Mailbox');
 goog.provide('e2email.models.mail.Thread');
 
 
+/**
+ * This is the model for the attachments support.
+ * The filename is the attachment's name, size is its size in bytes,
+ * encoding is the encoding of the attachment, content is the string
+ * with its content, type is the atttachment's type.
+ * @typedef {{
+ * filename: string,
+ * type: string,
+ * encoding: string,
+ * content: string,
+ * size: number
+ * }}
+ */
+e2email.models.mail.Attachment;
+
+
 /**
  * @typedef {{
  *   id: string,
@@ -41,6 +58,20 @@ goog.provide('e2email.models.mail.Thread');
 e2email.models.mail.Mail;
 
 
+/**
+ * This is the model for a Safe Mail user's mailbox. The email is the
+ * user's email address, the threads represents all the mail threads
+ * in the user's mailbox, and the status describes any (transient)
+ * operations in the background.
+ * @typedef {{
+ *   email: string,
+ *   threads: !Array.<!e2email.models.mail.Thread>,
+ *   status: ?string
+ * }}
+ */
+e2email.models.mail.Mailbox;
+
+
 /**
  * @typedef {{
  *   id: string,
@@ -59,15 +90,4 @@ e2email.models.mail.Mail;
 e2email.models.mail.Thread;
 
 
-/**
- * This is the model for a Safe Mail user's mailbox. The email is the
- * user's email address, the threads represents all the mail threads
- * in the user's mailbox, and the status describes any (transient)
- * operations in the background.
- * @typedef {{
- *   email: string,
- *   threads: !Array.<!e2email.models.mail.Thread>,
- *   status: ?string
- * }}
- */
-e2email.models.mail.Mailbox;
+

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<e2email.models.mail.Attachment>}}
    */
   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,37 @@ MessagesCtrl.prototype.cancelReply = function(opt_event) {
   this.reply['baseTitle'] = 'reply';
   this.reply['content'] = null;
   this.reply['showText'] = false;
+  this.reply['attachments'] = [];
+};
+
+
+/**
+ * @param {string} name The name of the file.
+ * @param {string} type The type of the file.
+ * @param {string} contents The contents of the file.
+ * @param {number} size The 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);
+};
+
+
+/**
+ * Removes the attachment object from the list of attachments.
+ * @export
+ */
+MessagesCtrl.prototype.removeObj = function() {
+  if (this.reply.attachments != []) {
+    this.reply.attachments.pop();
+  }
 };
 
 
@@ -109,6 +141,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 +150,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,10 +3,6 @@
   margin-bottom: 1em;
 }
 
-.email-detail-from {
-
-}
-
 .email-detail-from .glyphicon {
   font-size: 10px;
   padding-left: 0.25em;
@@ -49,3 +45,31 @@
   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;
+}
+
+#file-description {
+  margin: 0px;
+  padding:0px;
+  overflow-y: hidden;
+  width:60%;
+}
+
+#file-size {
+  width:30%;
+  overflow-y:hidden;
+}

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,31 @@ <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}}">{{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 id="file-description">{{ x.filename | limitTo: 20 }}{{x.filename.length > 20 ? '...' : ''}} </span> <span id="file-size"> {{' (' + 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>
+        <div class="attach-img" ng-show="messagesCtrl.reply.showText" as-upload="messagesCtrl.onFileUpload(name, type, contents, size)">
+          <svg class="attach-icon" xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#757575">
+            <path d="M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z"/>
+            <path d="M0 0h24v24H0z" fill="none"/>
+          </svg>
+        </div>
       </div>
     </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>

chrome/pages/threads/threads.css

@@ -174,8 +174,3 @@ input.email-select[type="checkbox"]:checked + label.email-select > span {
 .email-no-threads {
   margin-top: 1em;
 }
-
-.attach-img {
-    height: 23px;
-    margin-top: 10px;
-}