Worked on improved attachment UI feedback in Thread & Composer, #654

mailpile · Oct 18, 2014 · 0ee5e74 · 0ee5e74
1 parent cd58a42
commit 0ee5e74
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 53 deletions.
diff --git a/static/default/html/jsapi/compose/attachments.js b/static/default/html/jsapi/compose/attachments.js
@@ -1,45 +1,41 @@
 /* Compose - Attachments */
 
-Mailpile.Composer.Attachments.uploader = function(settings) {
+Mailpile.Composer.Attachments.uploader_image_preview = function(file, mid) {
 
-  var dom = {
-    uploader: $('#compose-attachments-' + settings.mid),
-    uploads: $('#compose-attachments-files-' + settings.mid)
-  };
+  var item = $('<li class="compose-attachment"><a href="#" data-mid="XXX" data-aid="XXX" class="compose-attachment-remove"><span class="icon-circle-x"></span></a></li>').prependTo($('#compose-attachments-files-' + mid));
+  var image = $(new Image()).appendTo(item);
 
-  var upload_image_preview = function(file) {
+  // Create an instance of the mOxie Image object. This
+  // utility object provides several means of reading in
+  // and loading image data from various sources.
+  // Wiki: https://github.com/moxiecode/moxie/wiki/Image
+  var preloader = new mOxie.Image();
 
-    var item = $('<li class="compose-attachment"><a href="#" data-mid="XXX" data-aid="XXX" class="compose-attachment-remove"><span class="icon-circle-x"></span></a></li>').prependTo(dom.uploads);
-    var image = $(new Image()).appendTo(item);
+  // Define the onload BEFORE you execute the load()
+  // command as load() does not execute async.
+  preloader.onload = function() {
 
-    // Create an instance of the mOxie Image object. This
-    // utility object provides several means of reading in
-    // and loading image data from various sources.
-    // Wiki: https://github.com/moxiecode/moxie/wiki/Image
-    var preloader = new mOxie.Image();
+      // This will scale the image (in memory) before it
+      // tries to render it. This just reduces the amount
+      // of Base64 data that needs to be rendered.
+      preloader.downsize(100, 100);
 
-    // Define the onload BEFORE you execute the load()
-    // command as load() does not execute async.
-    preloader.onload = function() {
+      // Now that the image is preloaded, grab the Base64
+      // encoded data URL. This will show the image
+      // without making an Network request using the
+      // client-side file binary.
+      image.prop("src", preloader.getAsDataURL());
+  };
 
-        // This will scale the image (in memory) before it
-        // tries to render it. This just reduces the amount
-        // of Base64 data that needs to be rendered.
-        preloader.downsize(100, 100);
+  // Calling the .getSource() on the file will return an
+  // instance of mOxie.File, which is a unified file
+  // wrapper that can be used across the various runtime
+  // Wiki: https://github.com/moxiecode/plupload/wiki/File
+  preloader.load(file.getSource());
+};
 
-        // Now that the image is preloaded, grab the Base64
-        // encoded data URL. This will show the image
-        // without making an Network request using the
-        // client-side file binary.
-        image.prop("src", preloader.getAsDataURL());
-    };
 
-    // Calling the .getSource() on the file will return an
-    // instance of mOxie.File, which is a unified file
-    // wrapper that can be used across the various runtime
-    // Wiki: https://github.com/moxiecode/plupload/wiki/File
-    preloader.load(file.getSource());
-  };
+Mailpile.Composer.Attachments.uploader = function(settings) {
 
   var uploader = new plupload.Uploader({
   	runtimes : 'html5',
@@ -81,15 +77,17 @@ Mailpile.Composer.Attachments.uploader = function(settings) {
       FilesAdded: function(up, files) {
         var start_upload = true;
 
+        // Upload files
       	plupload.each(files, function(file) {
 
-          // Show Preview while uploading
-          upload_image_preview(file);
-
-          // Add to attachments
-          var attachment_html = '<li class="compose-attachment" aid="' + file.id + '">' + file.name + ' ' + plupload.formatSize(file.size) + '</li>';
-      		$('#compose-attachments-files').append(attachment_html);
-
+          // Show image preview
+          if (_.indexOf(['image/jpg', 'image/jpeg', 'image/gif', 'image/png'], file.type) > -1) {
+            Mailpile.Composer.Attachments.uploader_image_preview(file, settings.mid);
+          } else {
+            var attachment_html = '<li class="compose-attachment" aid="' + file.id + '"> <div class="compose-attachment-filename">' + file.name + '</div> ' + plupload.formatSize(file.size) + '</li>';
+        		$('#compose-attachments-files-' + settings.mid).append(attachment_html);
+          }
+
           // Show Warning for 10mb or larger
           if (file.size > 10485760) {
             start_upload = false;

diff --git a/static/default/html/message/draft.html b/static/default/html/message/draft.html
@@ -21,6 +21,7 @@
       {% if metadata.flags.draft %}
         {% do found_editable.append(mid) %}
         {% set composer_view = "draft" %}
+        {% set attachments = message.attachments %}
         {% set editing_strings = message.editing_strings %}
         {% set editing_addresses = result.data.addresses %}
         {% include("partials/compose.html") %}

diff --git a/static/default/less/app/compose.less b/static/default/less/app/compose.less
@@ -120,7 +120,6 @@
 
   .compose-options ul {
     display: inline-block;
-    margin-left: 10px;
     margin-bottom: 0px;
     padding: 0px;
   }
@@ -200,39 +199,62 @@
   }
 
 
-/* Compose - Body - Attachments */
+/* Compose - Attachments */
 
-  .compose-attachments {
+  div.compose-attachments {
     margin-top: 0px;
-    padding: 10px 10px 10px 10px;
+    padding: 0px 10px 10px 10px;
     font-size: 14px;
   }
 
-  .compose-attachments ul {
+  div.compose-attachments ul.horizontal {
     margin-bottom: 0px;
   }
 
-  li.compose-attachment {
+  ul.horizontal li.compose-attachment {
     width: 100px;
-    padding: @base-padding;
+    padding: 0;
     margin-right: 15px;
+    margin-bottom: 15px;
+    border: 1px solid @grayMid;
+  }
+
+  li.compose-attachment div.preview {
+    height: 100px;
+    display: table-cell;
+    overflow: hidden;
+    text-align: center;
+    vertical-align: middle;
+  }
+
+  li.compose-attachment div.preview span.icon {
+    margin: auto;
+    font-size: 60px;
+    line-height: 60px;
+    color: @gray;
   }
 
   li.compose-attachment img {
-    width: 100px;
+    height: 100px;
+    margin-bottom: 5px;
   }
 
-  .compose-attachment-remove {
+  a.compose-attachment-remove {
     float: right;
-    position: relative;
-    top: 15px;
-    right: 10px;
+    display: inline;
+    background: @white;
+    padding: 3px;
+    border-left: 1px solid @grayMid;
+    border-bottom: 1px solid @grayMid;
+    border-bottom-left-radius: 4px;
+    font-size: 12px;
+    line-height: 12px;
   }
 
-  .compose-attachment-filename {
+  div.compose-attachment-filename {
     overflow: hidden;
     white-space: nowrap;
-    font-size: 12px;
+    font-size: 11px;
   }
 
   .attachment-browswer-unsupported {