translate mime types to icons, update some icons, move file preview (upload progress) below table header

3 files changed, 70 insertions, 21 deletions

diff --git a/include/attach.php b/include/attach.php
index b3ddfee88..7123d59fe 100644
--- a/include/attach.php
+++ b/include/attach.php
@@ -74,6 +74,7 @@ function z_mime_content_type($filename) {
 //	'webm' => 'audio/webm',
 	'mp4' => 'video/mp4',
 //	'mp4' => 'audio/mp4',
+	'mkv' => 'video/x-matroska',
 
 	// adobe
 	'pdf' => 'application/pdf',
diff --git a/include/text.php b/include/text.php
index dd7d9eaa8..1eec2ba0a 100644
--- a/include/text.php
+++ b/include/text.php
@@ -2608,32 +2608,33 @@ function getIconFromType($type) {
 		'application/octet-stream' => 'fa-file-o',
 		//Text
 		'text/plain' => 'fa-file-text-o',
-		'application/msword' => 'fa-file-text-o',
-		'application/pdf' => 'fa-file-text-o',
-		'application/vnd.oasis.opendocument.text' => 'fa-file-text-o',
+		'application/msword' => 'fa-file-word-o',
+		'application/pdf' => 'fa-file-pdf-o',
+		'application/vnd.oasis.opendocument.text' => 'fa-file-word-o',
 		'application/epub+zip' => 'fa-book',
 		//Spreadsheet
-		'application/vnd.oasis.opendocument.spreadsheet' => 'fa-table',
-		'application/vnd.ms-excel' => 'fa-table',
+		'application/vnd.oasis.opendocument.spreadsheet' => 'fa-file-excel-o',
+		'application/vnd.ms-excel' => 'fa-file-excel-o',
 		//Image
 		'image/jpeg' => 'fa-picture-o',
 		'image/png' => 'fa-picture-o',
 		'image/gif' => 'fa-picture-o',
 		'image/svg+xml' => 'fa-picture-o',
 		//Archive
-		'application/zip' => 'fa-archive',
-		'application/x-rar-compressed' => 'fa-archive',
+		'application/zip' => 'fa-file-archive-o',
+		'application/x-rar-compressed' => 'fa-file-archive-o',
 		//Audio
-		'audio/mpeg' => 'fa-music',
-		'audio/wav' => 'fa-music',
-		'application/ogg' => 'fa-music',
-		'audio/ogg' => 'fa-music',
-		'audio/webm' => 'fa-music',
-		'audio/mp4' => 'fa-music',
+		'audio/mpeg' => 'fa-file-audio-o',
+		'audio/wav' => 'fa-file-audio-o',
+		'application/ogg' => 'fa-file-audio-o',
+		'audio/ogg' => 'fa-file-audio-o',
+		'audio/webm' => 'fa-file-audio-o',
+		'audio/mp4' => 'fa-file-audio-o',
 		//Video
-		'video/quicktime' => 'fa-film',
-		'video/webm' => 'fa-film',
-		'video/mp4' => 'fa-film'
+		'video/quicktime' => 'fa-file-video-o',
+		'video/webm' => 'fa-file-video-o',
+		'video/mp4' => 'fa-file-video-o',
+		'video/x-matroska' => 'fa-file-video-o'
 	);
 
 	$iconFromType = 'fa-file-o';
diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js
index 4ef87ec4b..e29efd664 100644
--- a/view/js/mod_cloud.js
+++ b/view/js/mod_cloud.js
@@ -83,11 +83,13 @@ function UploadFileSelectHandler(e) {
 }
 
 function prepareHtml(f, i) {
-	$("#cloud-index").prepend(
-		"<tr class='new-upload'>" + "<td id='upload-progress-" + i + "'></td><td>" + f.name +
-		"</td><td>" + f.type +
-		"</td><td></td><td></td><td></td><td></td><td>" + formatSizeUnits(f.size) +
-		"</td><td></td></tr>"
+	$("#cloud-index tr:nth-child(2)").after(
+		"<tr class='new-upload'>" +
+		"<td><i class='fa " + getIconFromType(f.type) + "' title='" + f.type + "'></i></td>" +
+		"<td>" + f.name + "</td>" +
+		"<td id='upload-progress-" + i + "'></td><td></td><td></td><td></td><td></td>" +
+		"<td class='hiiden-xs'>" + formatSizeUnits(f.size) + "</td><td class='hiiden-xs'></td>" +
+		"</tr>"
 	);
 }
 
@@ -101,6 +103,51 @@ function formatSizeUnits(bytes){
         return bytes;
 }
 
+// this is basically a js port of include/text.php getIconFromType() function
+function getIconFromType(type) {
+	var map = {
+		//Common file
+		'application/octet-stream': 'fa-file-o',
+		//Text
+		'text/plain': 'fa-file-text-o',
+		'application/msword': 'fa-file-word-o',
+		'application/pdf': 'fa-file-pdf-o',
+		'application/vnd.oasis.opendocument.text': 'fa-file-word-o',
+		'application/epub+zip': 'fa-book',
+		//Spreadsheet
+		'application/vnd.oasis.opendocument.spreadsheet': 'fa-file-excel-o',
+		'application/vnd.ms-excel': 'fa-file-excel-o',
+		//Image
+		'image/jpeg': 'fa-picture-o',
+		'image/png': 'fa-picture-o',
+		'image/gif': 'fa-picture-o',
+		'image/svg+xml': 'fa-picture-o',
+		//Archive
+		'application/zip': 'fa-file-archive-o',
+		'application/x-rar-compressed': 'fa-file-archive-o',
+		//Audio
+		'audio/mpeg': 'fa-file-audio-o',
+		'audio/wav': 'fa-file-audio-o',
+		'application/ogg': 'fa-file-audio-o',
+		'audio/ogg': 'fa-file-audio-o',
+		'audio/webm': 'fa-file-audio-o',
+		'audio/mp4': 'fa-file-audio-o',
+		//Video
+		'video/quicktime': 'fa-file-video-o',
+		'video/webm': 'fa-file-video-o',
+		'video/mp4': 'fa-file-video-o',
+		'video/x-matroska': 'fa-file-video-o'
+	};
+
+	var iconFromType = 'fa-file-o';
+
+	if (type in map) {
+		iconFromType = map[type];
+	}
+
+	return iconFromType;
+}
+
 // upload  files
 function UploadFile(file, idx) {