Add large sidebar previews for text files
This commit is contained in:
parent
860b7c36ec
commit
a4d75a60a9
|
@ -32,17 +32,17 @@
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-sidebar .thumbnailContainer.image {
|
#app-sidebar .thumbnailContainer.large {
|
||||||
margin-left: -15px;
|
margin-left: -15px;
|
||||||
margin-right: -35px; /* 15 + 20 for the close button */
|
margin-right: -35px; /* 15 + 20 for the close button */
|
||||||
margin-top: -15px;
|
margin-top: -15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-sidebar .thumbnailContainer.image.portrait {
|
#app-sidebar .thumbnailContainer.large.portrait {
|
||||||
margin: 0; /* if we don't fit the image anyway we give it back the margin */
|
margin: 0; /* if we don't fit the image anyway we give it back the margin */
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-sidebar .image .thumbnail {
|
#app-sidebar .large .thumbnail {
|
||||||
width:100%;
|
width:100%;
|
||||||
display:block;
|
display:block;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -53,20 +53,27 @@
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-sidebar .image .thumbnail .stretcher {
|
#app-sidebar .large .thumbnail .stretcher {
|
||||||
content: '';
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
padding-bottom: 56.25%; /* sets height of .thumbnail to 9/16 of the width */
|
padding-bottom: 56.25%; /* sets height of .thumbnail to 9/16 of the width */
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-sidebar .image.portrait .thumbnail {
|
#app-sidebar .large.portrait .thumbnail {
|
||||||
background-position: 50% top;
|
background-position: 50% top;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app-sidebar .image.portrait .thumbnail {
|
#app-sidebar .large.portrait .thumbnail {
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#app-sidebar .text {
|
||||||
|
overflow-y: scroll;
|
||||||
|
overflow-x: hidden;
|
||||||
|
padding-left: 5px;
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
#app-sidebar .thumbnail {
|
#app-sidebar .thumbnail {
|
||||||
width: 75px;
|
width: 75px;
|
||||||
height: 75px;
|
height: 75px;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
/*
|
/*
|
||||||
* Copyright (c) 2015
|
* Copyright (c) 2016
|
||||||
*
|
*
|
||||||
* This file is licensed under the Affero General Public License version 3
|
* This file is licensed under the Affero General Public License version 3
|
||||||
* or later.
|
* or later.
|
||||||
|
@ -11,12 +11,30 @@
|
||||||
(function () {
|
(function () {
|
||||||
SidebarPreviewManager = function (fileList) {
|
SidebarPreviewManager = function (fileList) {
|
||||||
this._fileList = fileList;
|
this._fileList = fileList;
|
||||||
|
this._previewHandlers = {};
|
||||||
|
OC.Plugins.attach('OCA.Files.SidebarPreviewManager', this);
|
||||||
};
|
};
|
||||||
|
|
||||||
SidebarPreviewManager.prototype = {
|
SidebarPreviewManager.prototype = {
|
||||||
|
addPreviewHandler: function (mime, handler) {
|
||||||
|
this._previewHandlers[mime] = handler;
|
||||||
|
},
|
||||||
|
|
||||||
|
getPreviewHandler: function (mime) {
|
||||||
|
var mimePart = mime.split('/').shift();
|
||||||
|
if (this._previewHandlers[mime]) {
|
||||||
|
return this._previewHandlers[mime];
|
||||||
|
} else if(this._previewHandlers[mimePart]) {
|
||||||
|
return this._previewHandlers[mimePart];
|
||||||
|
} else {
|
||||||
|
return this.fallbackPreview.bind(this);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
loadPreview: function (model, $thumbnailDiv, $thumbnailContainer) {
|
loadPreview: function (model, $thumbnailDiv, $thumbnailContainer) {
|
||||||
// todo allow plugins to register custom handlers by mimetype
|
var handler = this.getPreviewHandler(model.get('mimetype'));
|
||||||
this.fallbackPreview(model, $thumbnailDiv, $thumbnailContainer);
|
var fallback = this.fallbackPreview.bind(this, model, $thumbnailDiv, $thumbnailContainer);
|
||||||
|
handler(model, $thumbnailDiv, $thumbnailContainer, fallback);
|
||||||
},
|
},
|
||||||
|
|
||||||
// previews for images and mimetype icons
|
// previews for images and mimetype icons
|
||||||
|
@ -74,7 +92,7 @@
|
||||||
var targetHeight = getTargetHeight(img);
|
var targetHeight = getTargetHeight(img);
|
||||||
if (isImage && targetHeight > smallPreviewSize) {
|
if (isImage && targetHeight > smallPreviewSize) {
|
||||||
$thumbnailContainer.addClass((isLandscape(img) && !isSmall(img)) ? 'landscape' : 'portrait');
|
$thumbnailContainer.addClass((isLandscape(img) && !isSmall(img)) ? 'landscape' : 'portrait');
|
||||||
$thumbnailContainer.addClass('image');
|
$thumbnailContainer.addClass('large');
|
||||||
}
|
}
|
||||||
|
|
||||||
// only set background when we have an actual preview
|
// only set background when we have an actual preview
|
||||||
|
|
|
@ -0,0 +1,47 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2016
|
||||||
|
*
|
||||||
|
* This file is licensed under the Affero General Public License version 3
|
||||||
|
* or later.
|
||||||
|
*
|
||||||
|
* See the COPYING-README file.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
var SidebarPreview = function () {
|
||||||
|
};
|
||||||
|
|
||||||
|
SidebarPreview.prototype = {
|
||||||
|
attach: function (manager) {
|
||||||
|
manager.addPreviewHandler('text', this.handlePreview.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
handlePreview: function (model, $thumbnailDiv, $thumbnailContainer, fallback) {
|
||||||
|
console.log(model);
|
||||||
|
var previewWidth = $thumbnailContainer.parent().width() + 50; // 50px for negative margins
|
||||||
|
var previewHeight = previewWidth / (16 / 9);
|
||||||
|
|
||||||
|
this.getFileContent(model.getFullPath()).then(function (content) {
|
||||||
|
$thumbnailDiv.removeClass('icon-loading icon-32');
|
||||||
|
$thumbnailContainer.addClass('large');
|
||||||
|
$thumbnailContainer.addClass('text');
|
||||||
|
var $textPreview = $('<pre/>').text(content);
|
||||||
|
$thumbnailDiv.children('.stretcher').remove();
|
||||||
|
$thumbnailDiv.append($textPreview);
|
||||||
|
$thumbnailContainer.height(previewHeight);
|
||||||
|
}, function () {
|
||||||
|
fallback();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getFileContent: function (path) {
|
||||||
|
console.log(path);
|
||||||
|
var url = OC.linkToRemoteBase('files' + path);
|
||||||
|
console.log(url);
|
||||||
|
return $.get(url);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
OC.Plugins.register('OCA.Files.SidebarPreviewManager', new SidebarPreview());
|
||||||
|
})();
|
|
@ -175,6 +175,7 @@ class ViewController extends Controller {
|
||||||
|
|
||||||
\OCP\Util::addScript('files', 'detailfileinfoview');
|
\OCP\Util::addScript('files', 'detailfileinfoview');
|
||||||
\OCP\Util::addScript('files', 'sidebarpreviewmanager');
|
\OCP\Util::addScript('files', 'sidebarpreviewmanager');
|
||||||
|
\OCP\Util::addScript('files', 'sidebarpreviewtext');
|
||||||
\OCP\Util::addScript('files', 'detailtabview');
|
\OCP\Util::addScript('files', 'detailtabview');
|
||||||
\OCP\Util::addScript('files', 'mainfileinfodetailview');
|
\OCP\Util::addScript('files', 'mainfileinfodetailview');
|
||||||
\OCP\Util::addScript('files', 'detailsview');
|
\OCP\Util::addScript('files', 'detailsview');
|
||||||
|
|
Loading…
Reference in New Issue