Merge pull request #19373 from owncloud/sidebar-preview-cover

Cover both width and height for the sidebar preview

2 files changed, 27 insertions, 6 deletions

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index faa26678562..485c20e6865 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -40,7 +40,7 @@
 	height: auto;
 }
 
-#app-sidebar .image.landscape .thumbnail::before {
+#app-sidebar .image .thumbnail .stretcher {
 	content: '';
 	display: block;
 	padding-bottom: 56.25%; /* sets height of .thumbnail to 9/16 of the width */
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index 82cca0d0fb3..39a00d0a5a5 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -10,7 +10,7 @@
 
 (function() {
 	var TEMPLATE =
-		'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"></a></div>' +
+		'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"><div class="stretcher"/></a></div>' +
 		'<div class="file-details-container">' +
 		'<div class="fileName"><h3 title="{{name}}" class="ellipsis">{{name}}</h3></div>' +
 		'	<div class="file-details ellipsis">' +
@@ -140,13 +140,18 @@
 		},
 
 		loadPreview: function(path, mime, etag, $iconDiv, $container, isImage) {
-			var maxImageHeight = ($container.parent().width() + 50) / (16/9); // 30px for negative margin
+			var maxImageWidth  = $container.parent().width() + 50;  // 50px for negative margins
+			var maxImageHeight = maxImageWidth / (16/9);
 			var smallPreviewSize = 75;
 
 			var isLandscape = function(img) {
 				return img.width > (img.height * 1.2);
 			};
 
+			var isSmall = function(img) {
+				return (img.width * 1.1) < (maxImageWidth * window.devicePixelRatio);
+			};
+
 			var getTargetHeight = function(img) {
 				if(isImage) {
 					var targetHeight = img.height / window.devicePixelRatio;
@@ -159,13 +164,23 @@
 				}
 			};
 
+			var getTargetRatio = function(img){
+				var ratio = img.width / img.height;
+				if (ratio > 16/9) {
+					return ratio;
+				} else {
+					return 16/9;
+				}
+			};
+
 			this._fileList.lazyLoadPreview({
 				path: path,
 				mime: mime,
 				etag: etag,
 				y: isImage ? maxImageHeight : smallPreviewSize,
-				x: isImage ? 99999 /* only limit on y */ : smallPreviewSize,
+				x: isImage ? maxImageWidth : smallPreviewSize,
 				a: isImage ? 1 : null,
+				mode: isImage ? 'cover' : null,
 				callback: function (previewUrl, img) {
 					$iconDiv.previewImg = previewUrl;
 
@@ -176,7 +191,7 @@
 					$iconDiv.removeClass('icon-loading icon-32');
 					var targetHeight = getTargetHeight(img);
 					if (this.model.isImage() && targetHeight > smallPreviewSize) {
-						$container.addClass(isLandscape(img)? 'landscape': 'portrait');
+						$container.addClass((isLandscape(img) && !isSmall(img))? 'landscape': 'portrait');
 						$container.addClass('image');
 					}
 
@@ -184,7 +199,13 @@
 					// when we dont have a preview we show the mime icon in the error handler
 					$iconDiv.css({
 						'background-image': 'url("' + previewUrl + '")',
-						height: (isLandscape(img) && targetHeight > smallPreviewSize)? 'auto': targetHeight
+						height: (targetHeight > smallPreviewSize)? 'auto': targetHeight,
+						'max-height': isSmall(img)? targetHeight: null
+					});
+
+					var targetRatio = getTargetRatio(img);
+					$iconDiv.find('.stretcher').css({
+						'padding-bottom': (100 / targetRatio) + '%'
 					});
 				}.bind(this),
 				error: function () {