Merge pull request #18979 from owncloud/sidebare-preview-fixes

Sidebare preview fixes

4 files changed, 83 insertions, 48 deletions

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index 8eded7acda1..ea9d48b470c 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -25,18 +25,26 @@
 	margin-top: -15px;
 }
 
+#app-sidebar .thumbnailContainer.image.portrait {
+	margin: 0; /* if we dont fit the image anyway we give it back the margin */
+}
+
 #app-sidebar .image .thumbnail {
 	width:100%;
 	display:block;
 	height: 250px;
 	background-repeat: no-repeat;
-	background-position: 50% top;
+	background-position: center;
 	background-size: 100%;
 	float: none;
 	margin: 0;
 }
 
 #app-sidebar .image.portrait .thumbnail {
+	background-position: 50% top;
+}
+
+#app-sidebar .image.portrait .thumbnail {
 	background-size: contain;
 }
 
@@ -64,10 +72,13 @@
 #app-sidebar .fileName h3 {
 	max-width: 300px;
 	float:left;
+	padding: 5px 0;
+	margin: -5px 0;
 }
 
 #app-sidebar .file-details {
 	margin-top: 3px;
+	margin-bottom: 15px;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	opacity: .5;
 	float:left;
diff --git a/apps/files/js/fileinfomodel.js b/apps/files/js/fileinfomodel.js
index 22b1ca9ff0c..de1b143a160 100644
--- a/apps/files/js/fileinfomodel.js
+++ b/apps/files/js/fileinfomodel.js
@@ -57,7 +57,13 @@
 		 * @return {boolean} true if this is an image, false otherwise
 		 */
 		isImage: function() {
-			return this.has('mimetype') ? this.get('mimetype').substr(0, 6) === 'image/' : false;
+			if (!this.has('mimetype')) {
+				return false;
+			}
+			return this.get('mimetype').substr(0, 6) === 'image/'
+				|| this.get('mimetype') === 'application/postscript'
+				|| this.get('mimetype') === 'application/illustrator'
+				|| this.get('mimetype') === 'application/x-photoshop';
 		},
 
 		/**
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 3e12573c046..194c658e3a1 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -346,7 +346,7 @@
 			// and contain existing models that can be used.
 			// This method would in the future simply retrieve the matching model from the collection.
 			var model = new OCA.Files.FileInfoModel(this.elementToFile($tr));
-			if (!model.has('path')) {
+			if (!model.get('path')) {
 				model.set('path', this.getCurrentDirectory(), {silent: true});
 			}
 
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index efdbb5e2ad1..830f074f3f1 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -124,52 +124,10 @@
 
 				// TODO: we really need OC.Previews
 				var $iconDiv = this.$el.find('.thumbnail');
-				$iconDiv.addClass('icon-loading icon-32');
-				$container = this.$el.find('.thumbnailContainer');
+				var $container = this.$el.find('.thumbnailContainer');
 				if (!this.model.isDirectory()) {
-					this._fileList.lazyLoadPreview({
-						path: this.model.getFullPath(),
-						mime: this.model.get('mimetype'),
-						etag: this.model.get('etag'),
-						y: this.model.isImage() ? 250: 75,
-						x: this.model.isImage() ? 99999 /* only limit on y */ : 75,
-						a: this.model.isImage() ? 1 : null,
-						callback: function(previewUrl, img) {
-							$iconDiv.previewImg = previewUrl;
-							if (img) {
-								$iconDiv.removeClass('icon-loading icon-32');
-								if(img.height > img.width) {
-									$container.addClass('portrait');
-								}
-							}
-							if (this.model.isImage() && img) {
-								$iconDiv.parent().addClass('image');
-								var targetHeight = img.height / window.devicePixelRatio;
-								if (targetHeight <= 75) {
-									$container.removeClass('image'); // small enough to fit in normaly
-									targetHeight = 75;
-								}
-							} else {
-								targetHeight = 75;
-							}
-
-							// only set background when we have an actual preview
-							// when we dont have a preview we show the mime icon in the error handler
-							if (img) {
-								$iconDiv.css({
-									'background-image': 'url("' + previewUrl + '")',
-									'height': targetHeight
-								});
-							}
-						}.bind(this),
-						error: function() {
-							$iconDiv.removeClass('icon-loading icon-32');
-							this.$el.find('.thumbnailContainer').removeClass('image'); //fall back to regular view
-							$iconDiv.css({
-								'background-image': 'url("' + $iconDiv.previewImg + '")'
-							});
-						}.bind(this)
-					});
+					$iconDiv.addClass('icon-loading icon-32');
+					this.loadPreview(this.model.getFullPath(), this.model.get('mimetype'), this.model.get('etag'), $iconDiv, $container, this.model.isImage());
 				} else {
 					// TODO: special icons / shared / external
 					$iconDiv.css('background-image', 'url("' + OC.MimeType.getIconUrl('dir') + '")');
@@ -179,6 +137,66 @@
 				this.$el.empty();
 			}
 			this.delegateEvents();
+		},
+
+		loadPreview: function(path, mime, etag, $iconDiv, $container, isImage) {
+			var maxImageHeight = ($container.parent().width() + 50) / (16/9); // 30px for negative margin
+			var smallPreviewSize = 75;
+
+			var isLandscape = function(img) {
+				return img.width > (img.height * 1.2);
+			};
+
+			var getTargetHeight = function(img) {
+				if(isImage) {
+					var targetHeight = img.height / window.devicePixelRatio;
+					if (targetHeight <= smallPreviewSize) {
+						targetHeight = smallPreviewSize;
+					}
+					return targetHeight;
+				}else{
+					return smallPreviewSize;
+				}
+			};
+
+			this._fileList.lazyLoadPreview({
+				path: path,
+				mime: mime,
+				etag: etag,
+				y: isImage ? maxImageHeight : smallPreviewSize,
+				x: isImage ? 99999 /* only limit on y */ : smallPreviewSize,
+				a: isImage ? 1 : null,
+				callback: function (previewUrl, img) {
+					$iconDiv.previewImg = previewUrl;
+
+					// as long as we only have the mimetype icon, we only save it in case there is no preview
+					if (!img) {
+						return;
+					}
+					$iconDiv.removeClass('icon-loading icon-32');
+					var targetHeight = getTargetHeight(img);
+					if (this.model.isImage() && targetHeight > smallPreviewSize) {
+						if (!isLandscape(img)) {
+							$container.addClass('portrait');
+						}
+						$container.addClass('image');
+					}
+
+					// only set background when we have an actual preview
+					// when we dont have a preview we show the mime icon in the error handler
+					$iconDiv.css({
+						'background-image': 'url("' + previewUrl + '")',
+						'height': targetHeight
+					});
+				}.bind(this),
+				error: function () {
+					$iconDiv.removeClass('icon-loading icon-32');
+					this.$el.find('.thumbnailContainer').removeClass('image'); //fall back to regular view
+					$iconDiv.css({
+						'background-image': 'url("' + $iconDiv.previewImg + '")'
+					});
+				}.bind(this)
+			});
 		}
 	});