Improved document thumbs, added popup

app/css/app.css

@@ -1043,16 +1043,37 @@ div.im_message_video_thumb {
   background-position: -2px -542px;
 }
 
+.im_message_document_link_disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
 .im_message_document_info {
   float: left;
 }
 
-
+.im_message_document_thumb_wrap {
-.im_message_document_thumb {
   border-radius: 2px;
   overflow: hidden;
+  background: #f2f2f2;
+  width: 100px;
+  min-height: 38px;
+  max-height: 100px;
+  margin-right: 10px;
+  text-align: center;
+  float: left;
+  line-height: 0;
+}
+img.im_message_document_thumb {
   max-width: 100px;
   max-height: 100px;
+  vertical-align: middle;
+  /*-webkit-filter: blur(1px);
+  -moz-filter: blur(1px);
+  -o-filter: blur(1px);
+  -ms-filter: blur(1px);
+  filter: blur(1px);
+  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1');*/
 }
 .im_message_document_name_wrap {
   overflow: hidden;
@@ -1062,6 +1083,7 @@ div.im_message_video_thumb {
   padding: 0 0 1px;
 }
 
+
 .im_message_document_name {
   color: #222;
   display: inline-block;
@@ -1076,6 +1098,9 @@ div.im_message_video_thumb {
   color: #999;
   padding-left: 2px;
 }
+.im_message_document_actions a {
+  margin-right: 10px;
+}
 
 .icon-audio {
   display: block;
@@ -1130,6 +1155,16 @@ div.im_message_video_thumb {
   width: 290px;
 }
 
+.im_message_document_thumbed .im_message_document_name_wrap,
+.im_message_document_thumbed .im_message_audio_name_wrap,
+.im_message_document_thumbed .im_message_upload_progress_wrap,
+.im_message_document_thumbed .im_message_download_progress_wrap {
+  width: 230px;
+}
+.im_message_document_thumbed .im_message_document_name {
+  max-width: 150px;
+}
+
 .tg_up_progress,
 .tg_down_progress {
   height: 5px;

app/js/services.js

@@ -1119,8 +1119,8 @@ angular.module('myApp.services', [])
         attachType, fileName, fileName;
 
     if (!options.isMedia) {
-      attachType = 'doc';
+      attachType = 'document';
-      fileName = 'doc.' + file.type.split('/')[1];
+      fileName = 'document.' + file.type.split('/')[1];
     } else if (['image/jpeg', 'image/gif', 'image/png', 'image/bmp'].indexOf(file.type) >= 0) {
       attachType = 'photo';
       fileName = 'photo.' + file.type.split('/')[1];
@@ -1131,8 +1131,8 @@ angular.module('myApp.services', [])
       attachType = 'audio';
       fileName = 'audio.mp3';
     } else {
-      attachType = 'doc';
+      attachType = 'document';
-      fileName = 'doc.' + file.type.split('/')[1];
+      fileName = 'document.' + file.type.split('/')[1];
     }
 
     if (!file.name) {
@@ -1197,7 +1197,7 @@ angular.module('myApp.services', [])
               inputMedia = {_: 'inputMediaUploadedAudio', file: inputFile, duration: 0};
               break;
 
-            case 'doc':
+            case 'document':
             default:
               inputMedia = {_: 'inputMediaUploadedDocument', file: inputFile, file_name: file.name, mime_type: file.type};
           }
@@ -1935,7 +1935,7 @@ angular.module('myApp.services', [])
         height = 100,
         thumbPhotoSize = doc.thumb,
         thumb = {
-          placeholder: 'img/placeholders/DocThumbConversation.jpg',
+          // placeholder: 'img/placeholders/DocThumbConversation.jpg',
           width: width,
           height: height
         };
@@ -1952,13 +1952,15 @@ angular.module('myApp.services', [])
     } else {
       thumb = false;
     }
-
     doc.thumb = thumb;
 
+    doc.canDownload = !(window.chrome && chrome.fileSystem && chrome.fileSystem.chooseEntry);
+    doc.withPreview = doc.canDownload && doc.mime_type.match(/^(image\/|application\/pdf)/);
+
     return docsForHistory[docID] = doc;
   }
 
-  function openDoc (docID, accessHash) {
+  function openDoc (docID, accessHash, popup) {
     var doc = docs[docID],
         historyDoc = docsForHistory[docID] || doc || {},
         inputFileLocation = {
@@ -2000,6 +2002,11 @@ angular.module('myApp.services', [])
       MtpApiFileManager.downloadFile(doc.dc_id, inputFileLocation, doc.size, null, {mime: doc.mime_type}).then(function (url) {
         delete historyDoc.progress;
 
+        if (popup) {
+          window.open(url, '_blank');
+          return
+        }
+
         var a = $('<a>Download</a>').css({position: 'absolute', top: 1, left: 1}).attr('href', url).attr('target', '_blank').attr('download', doc.file_name).appendTo('body');
         a[0].dataset.downloadurl = ['png', doc.file_name, url].join(':');
         a[0].click();

app/partials/message.html

@@ -120,11 +120,19 @@
             </div>
           </a>
 
-          <div ng-switch-when="messageMediaDocument" class="im_message_document">
+          <div ng-switch-when="messageMediaDocument" class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb}">
-            <a href="" ng-click="openDoc(historyMessage.media.document.id)" ng-if="!historyMessage.media.document.progress.enabled">
+            <a href="" ng-click="openDoc(historyMessage.media.document.id, false, historyMessage.media.document.withPreview)" ng-class="{im_message_document_link_disabled: historyMessage.media.document.progress.enabled}">
-              <i class="icon icon-document"></i>
+              <i class="icon icon-document" ng-if="!historyMessage.media.document.thumb"></i>
+              <div class="im_message_document_thumb_wrap" ng-if="historyMessage.media.document.thumb">
+                <img
+                  class="im_message_document_thumb"
+                  my-load-thumb
+                  thumb="historyMessage.media.document.thumb"
+                  width="{{historyMessage.media.document.thumb.width}}"
+                  height="{{historyMessage.media.document.thumb.height}}"
+                />
+              </div>
             </a>
-            <i class="icon icon-document" ng-if="historyMessage.media.document.progress.enabled"></i>
 
             <div class="im_message_document_info">
               <div class="im_message_document_name_wrap">
@@ -140,6 +148,7 @@
               </div>
               <div class="im_message_document_actions" ng-if="!historyMessage.media.document.progress.enabled">
                 <a href="" ng-click="openDoc(historyMessage.media.document.id)">Download</a>
+                <a href="" ng-click="openDoc(historyMessage.media.document.id, false, true)" ng-if="historyMessage.media.document.withPreview">Open</a>
               </div>
               <div class="im_message_download_progress_wrap" ng-if="historyMessage.media.document.progress.enabled">
                 <div class="progress tg_down_progress">