fix(attachments): Fix several bugs in attachment components

- Fix several styling issues
- Adjust the generated size of the thumbnail preview to fill all of the
available space

src/components/attachment-items.jsx

@@ -38,12 +38,13 @@ const SPACE = ' '
 
 function ProgressBar(props) {
   const {download} = props
-  if (!download) {
+  const isDownloading = download ? download.state === 'downloading' : false;
+  if (!isDownloading) {
     return <span />
   }
   const {state: downloadState, percent: downloadPercent} = download
   const downloadProgressStyle = {
-    width: `${downloadPercent}%`,
+    width: `${Math.min(downloadPercent, 97.5)}%`,
   }
   return (
     <span className={`progress-bar-wrap state-${downloadState}`}>
@@ -109,7 +110,11 @@ export class AttachmentItem extends Component {
 
   _canPreview() {
     const {filePath, previewable} = this.props
-    return previewable && process.platform === 'darwin' && fs.existsSync(filePath)
+    return (
+      previewable &&
+      process.platform === 'darwin' &&
+      fs.existsSync(filePath)
+    )
   }
 
   _previewAttachment() {
@@ -183,6 +188,7 @@ export class AttachmentItem extends Component {
     })
     const style = draggable ? {WebkitUserDrag: 'element'} : null;
     const tabIndex = focusable ? 0 : null
+    const {devicePixelRatio} = window
 
     return (
       <div
@@ -197,6 +203,7 @@ export class AttachmentItem extends Component {
             <img
               role="presentation"
               src={`file://${filePreviewPath}`}
+              style={{zoom: (1 / devicePixelRatio)}}
             />
           </div> :
           null
@@ -218,7 +225,7 @@ export class AttachmentItem extends Component {
                 name={fileIconName}
               />
               <span className="file-name">{displayName}</span>
-              <span className="file-size">({displaySize})</span>
+              <span className="file-size">{displaySize ? `(${displaySize})` : ''}</span>
               {this._canPreview() ?
                 <RetinaImg
                   className="quicklook-icon"

src/flux/stores/file-download-store.es6

@@ -34,9 +34,10 @@ const NonPreviewableExtensions = [
   'bz2',
   'dmg',
   'exe',
+  'ics',
 ]
 
-const PreviewThumbnailSize = 128
+const THUMBNAIL_WIDTH = 320
 
 
 // Expose the Download class for our tests, and possibly for other things someday
@@ -276,6 +277,7 @@ class FileDownloadStore extends NylasStore {
     }
 
     const filePath = this.pathForFile(file)
+    const escapedPath = filePath.replace(/ /g, '\\ ')
     return fs.accessAsync(filePath, fs.F_OK)
     .then(() => {
       const previewPath = `${filePath}.png`
@@ -289,7 +291,8 @@ class FileDownloadStore extends NylasStore {
         // If the preview file doesn't exist yet, generate it
         const fileDir = path.dirname(filePath)
         return new Promise((resolve) => {
-          exec(`qlmanage -t -s ${PreviewThumbnailSize} -o ${fileDir} ${filePath}`, (error, stdout, stderr) => {
+          const previewSize = THUMBNAIL_WIDTH * (11 / 8.5)
+          exec(`qlmanage -t -f ${window.devicePixelRatio} -s ${previewSize} -o ${fileDir} ${escapedPath}`, (error, stdout, stderr) => {
             if (error) {
               // Ignore errors, we don't really mind if we can't generate a preview
               // for a file

static/components/attachment-items.less

@@ -17,8 +17,8 @@
     .file-info-wrap,.file-action-icon,.file-thumbnail-preview {
       border-color: lighten(@component-active-color, 10%);
     }
-    .file-info-wrap,.file-action-icon {
-      border-top-color: @attachment-border-color;
+    .file-action-icon {
+      border-left-color: @attachment-border-color;
     }
   }
 
@@ -32,7 +32,12 @@
     border-top-right-radius: 8px;
   }
 
-  &.has-preview {
+  &.file-attachment-item.has-preview {
+    &:focus {
+      .file-info-wrap,.file-action-icon {
+        border-top-color: @attachment-border-color;
+      }
+    }
     .file-info-wrap {
       border-top-left-radius: 0;
     }
@@ -135,7 +140,7 @@
 
     .progress-foreground {
       position: absolute;
-      left: 0;
+      left: 4px;
       bottom: 0;
       height: 2px;
       width: 0; // Changed by React
@@ -148,10 +153,10 @@
     }
     .progress-background {
       position: absolute;
-      left: 0;
+      left: 4px;
       bottom: 0;
       height: 2px;
-      width: 100%;
+      width: 97.5%;
       z-index: 2;
       display: block;
       background: @background-color-pending;
@@ -209,7 +214,7 @@ body.platform-win32 {
     top: -8px;
     width: 26px;
     border-radius: 0 0 0 3px;
-    box-shadow: none;
+    border: none;
     img {
       background: none;
     }