diff options
Diffstat (limited to 'apps/files/js/mainfileinfodetailview.js')
| -rw-r--r-- | apps/files/js/mainfileinfodetailview.js | 65 |
1 files changed, 52 insertions, 13 deletions
diff --git a/apps/files/js/mainfileinfodetailview.js b/apps/files/js/mainfileinfodetailview.js index 513f833299a..785eed8d712 100644 --- a/apps/files/js/mainfileinfodetailview.js +++ b/apps/files/js/mainfileinfodetailview.js @@ -10,14 +10,17 @@ (function() { var TEMPLATE = - '<a href="#" class="thumbnail action-default"></a><div title="{{name}}" class="fileName ellipsis">{{name}}</div>' + - '<div class="file-details ellipsis">' + - ' <a href="#" ' + - ' alt="{{starAltText}}"' + - ' class="action action-favorite favorite">' + - ' <img class="svg" src="{{starIcon}}" />' + - ' </a>' + - ' {{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' + + '<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">' + + ' <a href="#" ' + + ' alt="{{starAltText}}"' + + ' class="action action-favorite favorite">' + + ' <img class="svg" src="{{starIcon}}" />' + + ' </a>' + + ' {{#if hasSize}}<span class="size" title="{{altSize}}">{{size}}</span>, {{/if}}<span class="date" title="{{altDate}}">{{date}}</span>' + + ' </div>' + '</div>'; /** @@ -103,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'), @@ -120,16 +124,51 @@ // 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 { // TODO: special icons / shared / external |