Browse Source

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

Sidebare preview fixes
remotes/origin/db-empty-migrate
Thomas Müller 10 years ago
parent
commit
d1f7087b6c
  1. 13
      apps/files/css/detailsView.css
  2. 8
      apps/files/js/fileinfomodel.js
  3. 2
      apps/files/js/filelist.js
  4. 108
      apps/files/js/mainfileinfodetailview.js

13
apps/files/css/detailsView.css

@ -25,17 +25,25 @@
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;

8
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';
},
/**

2
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});
}

108
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)
});
}
});

Loading…
Cancel
Save