Commit fe459293 authored by Morris Jobke's avatar Morris Jobke
Browse files

Merge pull request #12653 from owncloud/full_content_search_results

Full content width search results
parents 622c4cf7 04e2f59f
......@@ -540,7 +540,7 @@ a.action>img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: .3;
height: 70px;
height: 60px;
}
.summary:hover,
......@@ -551,8 +551,6 @@ table tr.summary td {
}
.summary td {
padding-top: 20px;
padding-bottom: 150px;
border-bottom: none;
}
.summary .info {
......@@ -601,3 +599,26 @@ table.dragshadow td.size {
.mask.transparent{
opacity: 0;
}
.nofilterresults {
font-size: 16px;
color: #888;
position: absolute;
text-align: center;
top: 30%;
width: 100%;
}
.nofilterresults h2 {
font-size: 22px;
margin-bottom: 10px;
}
.nofilterresults [class^="icon-"],
.nofilterresults [class*=" icon-"] {
background-size: 64px;
height: 64px;
width: 64px;
margin: 0 auto 15px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
\ No newline at end of file
......@@ -38,6 +38,7 @@ OCP\Util::addscript('files', 'jquery-visibility');
OCP\Util::addscript('files', 'filesummary');
OCP\Util::addscript('files', 'breadcrumb');
OCP\Util::addscript('files', 'filelist');
OCP\Util::addscript('files', 'search');
\OCP\Util::addScript('files', 'favoritesfilelist');
\OCP\Util::addScript('files', 'tagsplugin');
......
......@@ -111,6 +111,12 @@
*/
_selectionSummary: null,
/**
* If not empty, only files containing this string will be shown
* @type String
*/
_filter: '',
/**
* Sort attribute
* @type String
......@@ -208,6 +214,8 @@
this.$el.on('show', this._onResize);
this.updateSearch();
this.$fileList.on('click','td.filename>a.name', _.bind(this._onClickFile, this));
this.$fileList.on('change', 'td.filename>.selectCheckBox', _.bind(this._onClickFileCheckbox, this));
this.$el.on('urlChanged', _.bind(this._onUrlChanged, this));
......@@ -268,6 +276,8 @@
containerWidth -= $('#app-navigation-toggle').width();
this.breadcrumb.setMaxWidth(containerWidth - actionsWidth - 10);
this.updateSearch();
},
/**
......@@ -458,6 +468,7 @@
e.preventDefault();
this.changeDirectory($targetDir);
}
this.updateSearch();
},
/**
......@@ -551,6 +562,7 @@
_nextPage: function(animate) {
var index = this.$fileList.children().length,
count = this.pageSize(),
hidden,
tr,
fileData,
newTrs = [],
......@@ -562,7 +574,12 @@
while (count > 0 && index < this.files.length) {
fileData = this.files[index];
tr = this._renderRow(fileData, {updateSummary: false, silent: true});
if (this._filter) {
hidden = fileData.name.toLowerCase().indexOf(this._filter.toLowerCase()) === -1;
} else {
hidden = false;
}
tr = this._renderRow(fileData, {updateSummary: false, silent: true, hidden: hidden});
this.$fileList.append(tr);
if (isAllSelected || this._selectedFiles[fileData.id]) {
tr.addClass('selected');
......@@ -1638,24 +1655,68 @@
});
});
},
/**
* @deprecated use setFilter(filter)
*/
filter:function(query) {
this.setFilter('');
},
/**
* @deprecated use setFilter('')
*/
unfilter:function() {
this.setFilter('');
},
/**
* hide files matching the given filter
* @param filter
*/
setFilter:function(filter) {
this._filter = filter;
this.fileSummary.setFilter(filter, this.files);
this.hideIrrelevantUIWhenNoFilesMatch();
var that = this;
this.$fileList.find('tr').each(function(i,e) {
if ($(e).data('file').toString().toLowerCase().indexOf(query.toLowerCase()) !== -1) {
$(e).addClass("searchresult");
var $e = $(e);
if ($e.data('file').toString().toLowerCase().indexOf(filter.toLowerCase()) === -1) {
$e.addClass('hidden');
that.$container.trigger('scroll');
} else {
$(e).removeClass("searchresult");
$e.removeClass('hidden');
}
});
//do not use scrollto to prevent removing searchresult css class
var first = this.$fileList.find('tr.searchresult').first();
if (first.exists()) {
$(window).scrollTop(first.position().top);
},
hideIrrelevantUIWhenNoFilesMatch:function() {
if (this._filter && this.fileSummary.summary.totalDirs + this.fileSummary.summary.totalFiles === 0) {
this.$el.find('#filestable thead th').addClass('hidden');
this.$el.find('#emptycontent').addClass('hidden');
if ( $('#searchresults').length === 0 || $('#searchresults').hasClass('hidden')) {
this.$el.find('.nofilterresults').removeClass('hidden').
find('p').text(t('files', "No entries in this folder match '{filter}'", {filter:this._filter}));
}
} else {
this.$el.find('#filestable thead th').toggleClass('hidden', this.isEmpty);
this.$el.find('#emptycontent').toggleClass('hidden', !this.isEmpty);
this.$el.find('.nofilterresults').addClass('hidden');
}
},
unfilter:function() {
this.$fileList.find('tr.searchresult').each(function(i,e) {
$(e).removeClass("searchresult");
});
/**
* get the current filter
* @param filter
*/
getFilter:function(filter) {
return this._filter;
},
/**
* update the search object to use this filelist when filtering
*/
updateSearch:function() {
if (OCA.Search.files) {
OCA.Search.files.setFileList(this);
}
if (OC.Search) {
OC.Search.clear();
}
},
/**
* Update UI based on the current selection
......
......@@ -39,7 +39,8 @@
summary: {
totalFiles: 0,
totalDirs: 0,
totalSize: 0
totalSize: 0,
filter:''
},
/**
......@@ -48,6 +49,9 @@
* @param update whether to update the display
*/
add: function(file, update) {
if (file.name && file.name.toLowerCase().indexOf(this.summary.filter) === -1) {
return;
}
if (file.type === 'dir' || file.mime === 'httpd/unix-directory') {
this.summary.totalDirs++;
}
......@@ -65,6 +69,9 @@
* @param update whether to update the display
*/
remove: function(file, update) {
if (file.name && file.name.toLowerCase().indexOf(this.summary.filter) === -1) {
return;
}
if (file.type === 'dir' || file.mime === 'httpd/unix-directory') {
this.summary.totalDirs--;
}
......@@ -76,6 +83,10 @@
this.update();
}
},
setFilter: function(filter, files){
this.summary.filter = filter.toLowerCase();
this.calculate(files);
},
/**
* Returns the total of files and directories
*/
......@@ -91,11 +102,15 @@
var summary = {
totalDirs: 0,
totalFiles: 0,
totalSize: 0
totalSize: 0,
filter: this.summary.filter
};
for (var i = 0; i < files.length; i++) {
file = files[i];
if (file.name && file.name.toLowerCase().indexOf(this.summary.filter) === -1) {
continue;
}
if (file.type === 'dir' || file.mime === 'httpd/unix-directory') {
summary.totalDirs++;
}
......@@ -118,6 +133,9 @@
*/
setSummary: function(summary) {
this.summary = summary;
if (typeof this.summary.filter === 'undefined') {
this.summary.filter = '';
}
this.update();
},
......@@ -137,6 +155,7 @@
var $dirInfo = this.$el.find('.dirinfo');
var $fileInfo = this.$el.find('.fileinfo');
var $connector = this.$el.find('.connector');
var $filterInfo = this.$el.find('.filter');
// Substitute old content with new translations
$dirInfo.html(n('files', '%n folder', '%n folders', this.summary.totalDirs));
......@@ -159,6 +178,13 @@
if (this.summary.totalDirs > 0 && this.summary.totalFiles > 0) {
$connector.removeClass('hidden');
}
if (this.summary.filter === '') {
$filterInfo.html('');
$filterInfo.addClass('hidden');
} else {
$filterInfo.html(n('files', ' matches \'{filter}\'', ' match \'{filter}\'', this.summary.totalDirs + this.summary.totalFiles, {filter: this.summary.filter}));
$filterInfo.removeClass('hidden');
}
},
render: function() {
if (!this.$el) {
......@@ -168,6 +194,11 @@
var summary = this.summary;
var directoryInfo = n('files', '%n folder', '%n folders', summary.totalDirs);
var fileInfo = n('files', '%n file', '%n files', summary.totalFiles);
if (this.summary.filter === '') {
var filterInfo = '';
} else {
var filterInfo = n('files', ' matches \'{filter}\'', ' match \'{filter}\'', summary.totalFiles + summary.totalDirs, {filter: summary.filter});
}
var infoVars = {
dirs: '<span class="dirinfo">'+directoryInfo+'</span><span class="connector">',
......@@ -182,7 +213,7 @@
var info = t('files', '{dirs} and {files}', infoVars);
var $summary = $('<td><span class="info">'+info+'</span></td>'+fileSize+'<td class="date"></td>');
var $summary = $('<td><span class="info">'+info+'<span class="filter">'+filterInfo+'</span></span></td>'+fileSize+'<td class="date"></td>');
if (!this.summary.totalFiles && !this.summary.totalDirs) {
this.$el.addClass('hidden');
......
/*
* Copyright (c) 2014
*
* This file is licensed under the Affero General Public License version 3
* or later.
*
* See the COPYING-README file.
*
*/
(function() {
/**
* Construct a new FileActions instance
* @constructs Files
*/
var Files = function() {
this.initialize();
};
/**
* @memberof OCA.Search
*/
Files.prototype = {
fileList: null,
/**
* Initialize the file search
*/
initialize: function() {
var self = this;
this.fileAppLoaded = function() {
return !!OCA.Files && !!OCA.Files.App;
};
function inFileList($row, result) {
if (! self.fileAppLoaded()) {
return false;
}
var dir = self.fileList.getCurrentDirectory().replace(/\/+$/,'');
var resultDir = OC.dirname(result.path);
return dir === resultDir && self.fileList.inList(result.name);
}
function updateLegacyMimetype(result) {
// backward compatibility:
if (!result.mime && result.mime_type) {
result.mime = result.mime_type;
}
}
function hideNoFilterResults() {
var $nofilterresults = $('.nofilterresults');
if ( ! $nofilterresults.hasClass('hidden') ) {
$nofilterresults.addClass('hidden');
}
}
this.renderFolderResult = function($row, result) {
if (inFileList($row, result)) {
return null;
}
hideNoFilterResults();
/*render folder icon, show path beneath filename,
show size and last modified date on the right */
this.updateLegacyMimetype(result);
var $pathDiv = $('<div class="path"></div>').text(result.path);
$row.find('td.info div.name').after($pathDiv).text(result.name);
$row.find('td.result a').attr('href', result.link);
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/folder') + ')');
return $row;
};
this.renderFileResult = function($row, result) {
if (inFileList($row, result)) {
return null;
}
hideNoFilterResults();
/*render preview icon, show path beneath filename,
show size and last modified date on the right */
this.updateLegacyMimetype(result);
var $pathDiv = $('<div class="path"></div>').text(result.path);
$row.find('td.info div.name').after($pathDiv).text(result.name);
$row.find('td.result a').attr('href', result.link);
if (self.fileAppLoaded()) {
self.fileList.lazyLoadPreview({
path: result.path,
mime: result.mime,
callback: function (url) {
$row.find('td.icon').css('background-image', 'url(' + url + ')');
}
});
} else {
// FIXME how to get mime icon if not in files app
var mimeicon = result.mime.replace('/', '-');
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/' + mimeicon) + ')');
var dir = OC.dirname(result.path);
if (dir === '') {
dir = '/';
}
$row.find('td.info a').attr('href',
OC.generateUrl('/apps/files/?dir={dir}&scrollto={scrollto}', {dir: dir, scrollto: result.name})
);
}
return $row;
};
this.renderAudioResult = function($row, result) {
/*render preview icon, show path beneath filename,
show size and last modified date on the right
show Artist and Album */
$row = this.renderFileResult($row, result);
if ($row) {
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/audio') + ')');
}
return $row;
};
this.renderImageResult = function($row, result) {
/*render preview icon, show path beneath filename,
show size and last modified date on the right
show width and height */
$row = this.renderFileResult($row, result);
if ($row && !self.fileAppLoaded()) {
$row.find('td.icon').css('background-image', 'url(' + OC.imagePath('core', 'filetypes/image') + ')');
}
return $row;
};
this.handleFolderClick = function($row, result, event) {
// open folder
if (self.fileAppLoaded()) {
self.fileList.changeDirectory(result.path);
return false;
} else {
return true;
}
};
this.handleFileClick = function($row, result, event) {
if (self.fileAppLoaded()) {
self.fileList.changeDirectory(OC.dirname(result.path));
self.fileList.scrollTo(result.name);
return false;
} else {
return true;
}
};
this.updateLegacyMimetype = function (result) {
// backward compatibility:
if (!result.mime && result.mime_type) {
result.mime = result.mime_type;
}
};
this.setFileList = function (fileList) {
this.fileList = fileList;
};
OC.Plugins.register('OCA.Search', this);
},
attach: function(search) {
var self = this;
search.setFilter('files', function (query) {
if (self.fileAppLoaded()) {
self.fileList.setFilter(query);
if (query.length > 2) {
//search is not started until 500msec have passed
window.setTimeout(function() {
$('.nofilterresults').addClass('hidden');
}, 500);
}
}
});
search.setRenderer('folder', this.renderFolderResult.bind(this));
search.setRenderer('file', this.renderFileResult.bind(this));
search.setRenderer('audio', this.renderAudioResult.bind(this));
search.setRenderer('image', this.renderImageResult.bind(this));
search.setHandler('folder', this.handleFolderClick.bind(this));
search.setHandler(['file', 'audio', 'image'], this.handleFileClick.bind(this));
}
};
OCA.Search.Files = Files;
OCA.Search.files = new Files();
})();
......@@ -60,6 +60,12 @@
<p><?php p($l->t('Upload some content or sync with your devices!')); ?></p>
</div>
<div class="nofilterresults hidden">
<div class="icon-search"></div>
<h2><?php p($l->t('No entries found in this folder')); ?></h2>
<p></p>
</div>
<table id="filestable" data-allow-public-upload="<?php p($_['publicUploadEnabled'])?>" data-preview-x="36" data-preview-y="36">
<thead>
<tr>
......
......@@ -11,6 +11,12 @@
<input type="hidden" name="dir" value="" id="dir">
<div class="nofilterresults hidden">
<div class="icon-search"></div>
<h2><?php p($l->t('No entries found in this folder')); ?></h2>
<p></p>
</div>
<table id="filestable">
<thead>
<tr>
......
......@@ -85,4 +85,67 @@ describe('OCA.Files.FileSummary tests', function() {
expect(s.summary.totalFiles).toEqual(1);
expect(s.summary.totalSize).toEqual(127900);
});
it('renders filtered summary as text', function() {
var s = new FileSummary($container);
s.setSummary({
totalDirs: 5,
totalFiles: 2,
totalSize: 256000,
filter: 'foo'
});
expect($container.hasClass('hidden')).toEqual(false);
expect($container.find('.info').text()).toEqual('5 folders and 2 files match \'foo\'');
expect($container.find('.filesize').text()).toEqual('250 kB');
});
it('hides filtered summary when no files or folders', function() {
var s = new FileSummary($container);
s.setSummary({
totalDirs: 0,
totalFiles: 0,
totalSize: 0,
filter: 'foo'
});
expect($container.hasClass('hidden')).toEqual(true);
});
it('increases filtered summary when adding files', function() {
var s = new FileSummary($container);
s.setSummary({
totalDirs: 5,
totalFiles: 2,
totalSize: 256000,
filter: 'foo'
});
s.add({name: 'bar.txt', type: 'file', size: 256000});
s.add({name: 'foo.txt', type: 'file', size: 256001});
s.add({name: 'bar', type: 'dir', size: 100});
s.add({name: 'foo', type: 'dir', size: 102});
s.update();
expect($container.hasClass('hidden')).toEqual(false);
expect($container.find('.info').text()).toEqual('6 folders and 3 files match \'foo\'');
expect($container.find('.filesize').text()).toEqual('500 kB');
expect(s.summary.totalDirs).toEqual(6);
expect(s.summary.totalFiles).toEqual(3);
expect(s.summary.totalSize).toEqual(512103);
});
it('decreases filtered summary when removing files', function() {
var s = new FileSummary($container);
s.setSummary({
totalDirs: 5,
totalFiles: 2,
totalSize: 256000,
filter: 'foo'
});
s.remove({name: 'bar.txt', type: 'file', size: 128000});
s.remove({name: 'foo.txt', type: 'file', size: 127999});
s.remove({name: 'bar', type: 'dir', size: 100});
s.remove({name: 'foo', type: 'dir', size: 98});
s.update();
expect($container.hasClass('hidden')).toEqual(false);
expect($container.find('.info').text()).toEqual('4 folders and 1 file match \'foo\'');
expect($container.find('.filesize').text()).toEqual('125 kB');
expect(s.summary.totalDirs).toEqual(4);
expect(s.summary.totalFiles).toEqual(1);
expect(s.summary.totalSize).toEqual(127903);
});
});
......@@ -8,6 +8,12 @@
<input type="hidden" name="dir" value="" id="dir">
<div class="nofilterresults hidden">
<div class="icon-search"></div>
<h2><?php p($l->t('No entries found in this folder')); ?></h2>
<p></p>
</div>
<table id="filestable">