Threads controller UI and removing attachments

chrome/app.css

@@ -159,6 +159,67 @@ div.big-icon > img {
   cursor: pointer;
 }
 
+.attach-icon {
+  margin-top: 13px;
+}
+
 .attach-icon:hover {
   fill: #66afe9;
 }
+
+.sidebtn {
+  width: 70px;
+  height: 30px;
+  font-size: 12px;
+}
+
+.single-attachment {
+  background-color: #f5f5f5;
+  border: 1px solid #dcdcdc;
+  font-weight: bold;
+  font-size: 13px;
+  margin: 0 7px 6px;
+  color: #1155CC !important;
+  text-align: left;
+  padding: 2px 6px;
+  max-width: 448px;
+  width: 80%;
+  height: 23px;
+  display: flex;
+}
+
+#textareaSpace {
+  min-height: 250px;
+  max-height: 500px;
+  overflow: auto;
+  background-color: white;
+}
+
+#textareaElement {
+  flex;flex-direction: column;
+  min-height: 250px;
+  text-align: left;
+  border: none;
+  background-color: white;
+  outline: none;
+  resize: none;
+  margin-bottom: 0px;
+}
+
+#attachmentRepeat {
+  background-color: white;
+  min-height: 20px;
+  padding-top: 10px;
+  display: flex;
+  flex-direction: column;
+}
+
+.removeAttachment {
+  border: none;
+  font-size: 13px;
+  color: gray;
+  background-color: inherit;
+  margin: 0 !important;
+  padding: 0;
+  float: right;
+}

chrome/pages/threads/threads-controller.js

@@ -176,7 +176,7 @@ e2email.pages.threads.ThreadsCtrl = function(
  *   invalidRecipient: ?string,
  *   subject: ?string,
  *   message: ?string,
- *   attachments: Array<Object>
+ *   attachments: Array<e2email.models.mail.Attachment>
 * }}
  */
 e2email.pages.threads.ThreadsCtrl.Compose;
@@ -478,6 +478,16 @@ ThreadsCtrl.prototype.onFileUpload = function(name, type, contents, size) {
 };
 
 
+/**
+ * Removes the attachment object from the list of attachments.
+ * @param {number} index The index of the file.
+ * @export
+ */
+ThreadsCtrl.prototype.removeObj = function(index) {
+  this.compose.attachments.splice(index, 1);
+};
+
+
 /**
  * Requests the contents of the compose model to be delivered.
  * @export

chrome/pages/threads/threads.css

@@ -174,3 +174,27 @@ input.email-select[type="checkbox"]:checked + label.email-select > span {
 .email-no-threads {
   margin-top: 1em;
 }
+
+.composebtn {
+  width: 100px;
+  height: 35px;
+  font-size: 15px;
+  padding: 0px;
+}
+
+.compose-content {
+  max-height: 700px;
+  overflow: auto;
+}
+
+#attachName {
+  margin: 0px;
+  padding:0px;
+  overflow-y: hidden;
+  width: 60%;
+}
+
+#attachSize {
+  width:30%;
+  overflow-y: hidden;
+}

chrome/pages/threads/threads.html

@@ -56,21 +56,28 @@
     </div>
 
     <input tabindex="2" type="text" class="form-control ac-tabbable email-main-subject-input" placeholder="Subject" required="required" ng-hide="threadsCtrl.compose.missingRecipient" ng-model="threadsCtrl.compose.subject" ng-keypress="threadsCtrl.onSubjectKeyPress($event)"/>
+    <div class="compose-content">
     <div tabindex="3" id="textareaSpace">
       <textarea id="textareaElement" class="form-control email-main-compose-textarea" placeholder="{{threadsCtrl.compose.validRecipient ? 'typeMessagePlaceholder' : 'invalidRecipientPlaceholder' | translate}}" rows="10" ng-disabled="!threadsCtrl.compose.validRecipient" ng-model="threadsCtrl.compose.message" ng-hide="threadsCtrl.compose.missingRecipient" required="required">
-      </textarea>
+      </textarea> </div>
       <div id="attachmentRepeat">
-        <div ng-repeat="x in threadsCtrl.compose.attachments" class="single-attachment">{{x.filename + ' (' + x.size + 'K)'}}</div>
-         </div>
+      <div ng-repeat="x in threadsCtrl.compose.attachments" class="single-attachment"><span id="attachName">{{ x.filename | limitTo: 20 }}{{x.filename.length > 20 ? '...' : ''}} </span> <span id="attachSize"> {{'(' + x.size + ')'}} </span> <span style="width:10%;">
+        <button ng-click="threadsCtrl.removeObj($index)" class="removeAttachment"> x </button> </span></div>
       </div>
-  <div class="row email-main-compose-form-button-row" ng-hide="threadsCtrl.compose.missingRecipient">
+      </div>
+  <div class="row email-main-compose-form-button-row">
     <div class="col-xs-12">
       <button tabindex="4" type="submit" class="col-xs-3 btn btn-primary btn-focus sidebtn">{{'send' | translate}}</button>
-      <button tabindex="5" ng-click="threadsCtrl.showCompose(false)" class="btn btn-link btn-focus sidebtn">{{'cancel' | translate}}</button>
-      <img tabindex="6" src="assets/img/attach.png" class="attach-img" as-upload="threadsCtrl.onFileUpload(name, type, contents, size)"/>
+      <button tabindex="5" ng-click="threadsCtrl.showCompose(false)" class="btn btn-link btn-focus sidebtn pull-left">{{'cancel' | translate}}</button>
+        <span tabindex="6" class="attach-img" as-upload="threadsCtrl.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>
+        </span>
     </div>
   </div>
-</form>
+  </form>
 
 <ul class="list-unstyled">
   <li class="email-subject-entry btn-focus" ng-repeat="thread in threadsCtrl.threads|orderBy:'-updated'"  ng-click="threadsCtrl.showMessages(thread.id)">