larger preview for images in the sidebar

4 files changed, 81 insertions, 7 deletions

diff --git a/apps/files/css/detailsView.css b/apps/files/css/detailsView.css
index ffead923124..8eded7acda1 100644
--- a/apps/files/css/detailsView.css
+++ b/apps/files/css/detailsView.css
@@ -19,6 +19,27 @@
 	float: left;
 }
 
+#app-sidebar .thumbnailContainer.image {
+	margin-left: -15px;
+	margin-right: -35px; /* 15 + 20 for the close button */
+	margin-top: -15px;
+}
+
+#app-sidebar .image .thumbnail {
+	width:100%;
+	display:block;
+	height: 250px;
+	background-repeat: no-repeat;
+	background-position: 50% top;
+	background-size: 100%;
+	float: none;
+	margin: 0;
+}
+
+#app-sidebar .image.portrait .thumbnail {
+	background-size: contain;
+}
+
 #app-sidebar .thumbnail {
 	width: 75px;
 	height: 75px;
diff --git a/apps/files/js/fileinfomodel.js b/apps/files/js/fileinfomodel.js
index 05060854fba..1c850239cdc 100644
--- a/apps/files/js/fileinfomodel.js
+++ b/apps/files/js/fileinfomodel.js
@@ -53,6 +53,15 @@
 		},
 
 		/**
+		 * Returns whether this file is an image
+		 *
+		 * @return {boolean} true if this is an image, false otherwise
+		 */
+		isImage: function() {
+			return this.get('mimetype').substr(0, 6) === 'image/';
+		},
+
+		/**
 		 * Returns the full path to this file
 		 *
 		 * @return {string} full path
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index ac96d587015..9593ee79e66 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -1359,6 +1359,12 @@
 			if (options.y) {
 				urlSpec.y = options.y;
 			}
+			if (options.a) {
+				urlSpec.a = options.a;
+			}
+			if (options.mode) {
+				urlSpec.mode = options.mode;
+			}
 
 			if (etag){
 				// use etag as cache buster
@@ -1377,9 +1383,14 @@
 			img.onload = function(){
 				// if loading the preview image failed (no preview for the mimetype) then img.width will < 5
 				if (img.width > 5) {
-					ready(previewURL);
+					ready(previewURL, img);
+				} else if (options.error) {
+					options.error();
 				}
 			};
+			if (options.error) {
+				img.onerror = options.error;
+			}
 			img.src = previewURL;
 		},
 
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js
index e33c0edb1d6..785eed8d712 100644
--- a/apps/files/js/mainfileinfodetailview.js
+++ b/apps/files/js/mainfileinfodetailview.js
@@ -10,7 +10,7 @@
 
 (function() {
 	var TEMPLATE =
-		'<a href="#" class="thumbnail action-default"></a>' +
+		'<div class="thumbnailContainer"><a href="#" class="thumbnail action-default"></a></div>' +
 		'<div class="file-details-container">' +
 		'<div class="fileName"><h3 title="{{name}}" class="ellipsis">{{name}}</h3></div>' +
 		'	<div class="file-details ellipsis">' +
@@ -106,6 +106,7 @@
 			if (this.model) {
 				var isFavorite = (this.model.get('tags') || []).indexOf(OC.TAG_FAVORITE) >= 0;
 				this.$el.html(this.template({
+					type: this.model.isImage()? 'image': '',
 					nameLabel: t('files', 'Name'),
 					name: this.model.get('displayName') || this.model.get('name'),
 					pathLabel: t('files', 'Path'),
@@ -123,18 +124,50 @@
 
 				// TODO: we really need OC.Previews
 				var $iconDiv = this.$el.find('.thumbnail');
+				$iconDiv.addClass('icon-loading');
+				$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'),
-						x: 75,
-						y: 75,
-						callback: function(previewUrl) {
-							$iconDiv.css('background-image', 'url("' + previewUrl + '")');
-						},
+						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');
+								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');
 							this.$el.find('.thumbnailContainer').removeClass('image'); //fall back to regular view
+							$iconDiv.css({
+								'background-image': 'url("' + $iconDiv.previewImg + '")'
+							});
 						}.bind(this)
 					});
 				} else {