diff options
Diffstat (limited to 'apps/files/js/mainfileinfodetailview.js')
| -rw-r--r-- | apps/files/js/mainfileinfodetailview.js | 45 |
1 files changed, 39 insertions, 6 deletions
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 { |