Improve layout, fix mime icon

4 files changed, 35 insertions, 17 deletions

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index 8d412a83667..51aaf393751 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -30,26 +30,36 @@
 }
 
 .app-files .detailsView .detailFileInfoContainer {
-	min-height: 80px;
-	padding: 10px;
+	min-height: 60px;
+	padding: 15px;
 }
 
 .app-files .detailsView .detailFileInfoContainer > div {
 	clear: both;
-	margin-left: 5px;
+}
+
+.app-files .detailsView .mainFileInfoView {
+	margin-right: 20px; /* accomodate for close icon */
 }
 
 .app-files .detailsView .thumbnail {
 	width: 50px;
 	height: 50px;
 	float: left;
-	margin: 5px;
+	margin-right: 10px;
 	background-size: 50px;
 }
 
+.app-files .detailsView .ellipsis {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
 .app-files .detailsView .fileName {
 	font-weight: bold;
 	font-size: 17px;
+	overflow: hidden;
 }
 
 .app-files .detailsView .detailList {
@@ -60,5 +70,5 @@
 	position: absolute;
 	top: 0;
 	right: 0;
-	margin: 10px;
+	margin: 15px;
 }
diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index c28de71ab7d..2142c9824f9 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -84,6 +84,7 @@
 				event.preventDefault();
 			});
 
+			// uncomment to add some dummy tabs for testing
 			this._addTestTabs();
 		},
 
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index e228b8e852b..a03c4e1754f 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -1305,6 +1305,12 @@
 			ready(iconURL); // set mimeicon URL
 
 			urlSpec.file = OCA.Files.Files.fixPath(path);
+			if (options.x) {
+				urlSpec.x = options.x;
+			}
+			if (options.y) {
+				urlSpec.y = options.y;
+			}
 
 			if (etag){
 				// use etag as cache buster
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index 88463bda9e6..4707e3e9f0d 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -10,8 +10,8 @@
 
 (function() {
 	var TEMPLATE =
-		'<div class="thumbnail"></div><div class="fileName">{{name}}</div>' +
-		'<div>' +
+		'<div class="thumbnail"></div><div title="{{name}}" class="fileName ellipsis">{{name}}</div>' +
+		'<div class="ellipsis">' +
 		'    <a href="#" ' +
 		'    alt="{{starAltText}}"' +
 		'    class="action action-favorite {{#isFavorite}}permanent{{/isFavorite}}">' +
@@ -55,14 +55,13 @@
 			}
 
 			if (this._fileInfo) {
-				var isFavorite = (this._fileInfo.tags || []).indexOf(OC.TAG_FAVORITE) >= 0
+				var isFavorite = (this._fileInfo.tags || []).indexOf(OC.TAG_FAVORITE) >= 0;
 				this.$el.append(this._template({
 					nameLabel: t('files', 'Name'),
 					name: this._fileInfo.name,
 					pathLabel: t('files', 'Path'),
 					path: this._fileInfo.path,
 					sizeLabel: t('files', 'Size'),
-					// TODO: refactor and use size formatter
 					size: OC.Util.humanFileSize(this._fileInfo.size, true),
 					altSize: n('files', '%n byte', '%n bytes', this._fileInfo.size),
 					dateLabel: t('files', 'Modified'),
@@ -73,18 +72,20 @@
 					starIcon: OC.imagePath('core', isFavorite ? 'actions/starred' : 'actions/star')
 				}));
 
-				var $iconDiv = this.$el.find('.thumbnail');
 				// TODO: we really need OC.Previews
+				var $iconDiv = this.$el.find('.thumbnail');
 				if (this._fileInfo.mimetype !== 'httpd/unix-directory') {
-					// FIXME: use proper way, this is only for demo purposes
-					var previewUrl = FileList.generatePreviewUrl({
-						file: this._fileInfo.path + '/' + this._fileInfo.name,
-						c: this._fileInfo.etag,
+					// TODO: inject utility class?
+					FileList.lazyLoadPreview({
+						path: this._fileInfo.path + '/' + this._fileInfo.name,
+						mime: this._fileInfo.mimetype,
+						etag: this._fileInfo.etag,
 						x: 50,
-						y: 50
+						y: 50,
+						callback: function(previewUrl) {
+							$iconDiv.css('background-image', 'url("' + previewUrl + '")');
+						}
 					});
-					previewUrl = previewUrl.replace('(', '%28').replace(')', '%29');
-					$iconDiv.css('background-image', 'url("' + previewUrl + '")');
 				} else {
 					// TODO: special icons / shared / external
 					$iconDiv.css('background-image', 'url("' + OC.MimeType.getIconUrl('dir') + '")');