From b40925ae1747ae44a52fb1f8dcf7645d022c6f13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn=20Friedrich=20Dreyer?= Date: Wed, 31 Jul 2013 22:24:52 +0200 Subject: [PATCH 1/4] initial scrollto implementation: use places/folder icon, move link construction to JS, only show icon on hover, use 'searchresult' as css class name, add filter/unfilter methods, highlight searched files in current filelist only filter when correct FileList is present --- apps/files/css/files.css | 3 +++ apps/files/js/filelist.js | 41 +++++++++++++++++++++++++++---- apps/files/js/files.js | 5 ++++ core/js/js.js | 13 ++++++++++ lib/search/provider/file.php | 3 ++- lib/search/result.php | 4 ++- search/css/results.css | 22 +++++++++++++++-- search/js/result.js | 38 +++++++++++++++++++++++----- search/templates/part.results.php | 3 ++- 9 files changed, 116 insertions(+), 16 deletions(-) diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 41d9808c56b..0acb3c5d829 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -76,6 +76,9 @@ #filestable tbody tr.selected { background-color: rgb(230,230,230); } +#filestable tbody tr.searchresult { + background-color: rgb(240,240,240); +} tbody a { color:#000; } span.extension, span.uploading, td.date { color:#999; } span.extension { text-transform:lowercase; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; -webkit-transition:opacity 300ms; -moz-transition:opacity 300ms; -o-transition:opacity 300ms; transition:opacity 300ms; } diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index b50d46c98d3..9a2d39c3652 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -643,6 +643,37 @@ var FileList={ if (FileList._maskTimeout){ window.clearTimeout(FileList._maskTimeout); } + }, + scrollTo:function(file) { + //scroll to and highlight preselected file + var scrolltorow = $('tr[data-file="'+file+'"]'); + if (scrolltorow.length > 0) { + scrolltorow.addClass('searchresult'); + $(window).scrollTop(scrolltorow.position().top); + //remove highlight when hovered over + scrolltorow.one('hover', function(){ + scrolltorow.removeClass('searchresult'); + }); + } + }, + filter:function(query){ + $('#fileList tr:not(.summary)').each(function(i,e){ + if ($(e).data('file').toLowerCase().indexOf(query.toLowerCase()) !== -1) { + $(e).addClass("searchresult"); + } else { + $(e).removeClass("searchresult"); + } + }); + //do not use scrollto to prevent removing searchresult css class + var first = $('#fileList tr.searchresult').first(); + if (first.length !== 0) { + $(window).scrollTop(first.position().top); + } + }, + unfilter:function(){ + $('#fileList tr.searchresult').each(function(i,e){ + $(e).removeClass("searchresult"); + }); } }; @@ -818,16 +849,16 @@ $(document).ready(function(){ FileList.replaceIsNewFile = null; } FileList.lastAction = null; - OC.Notification.hide(); + OC.Notification.hide(); }); $('#notification:first-child').on('click', '.replace', function() { - OC.Notification.hide(function() { - FileList.replace($('#notification > span').attr('data-oldName'), $('#notification > span').attr('data-newName'), $('#notification > span').attr('data-isNewFile')); - }); + OC.Notification.hide(function() { + FileList.replace($('#notification > span').attr('data-oldName'), $('#notification > span').attr('data-newName'), $('#notification > span').attr('data-isNewFile')); + }); }); $('#notification:first-child').on('click', '.suggest', function() { $('tr').filterAttr('data-file', $('#notification > span').attr('data-oldName')).show(); - OC.Notification.hide(); + OC.Notification.hide(); }); $('#notification:first-child').on('click', '.cancel', function() { if ($('#notification > span').attr('data-isNewFile')) { diff --git a/apps/files/js/files.js b/apps/files/js/files.js index c2418cfa751..a4fdf383339 100644 --- a/apps/files/js/files.js +++ b/apps/files/js/files.js @@ -384,6 +384,11 @@ $(document).ready(function() { } }); } + + //scroll to and highlight preselected file + if (getURLParameter('scrollto')) { + FileList.scrollTo(getURLParameter('scrollto')); + } }); function scanFiles(force, dir, users){ diff --git a/core/js/js.js b/core/js/js.js index c09f80369f9..c23cf9eebd9 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -723,11 +723,17 @@ $(document).ready(function(){ } }else if(event.keyCode===27){//esc OC.search.hide(); + if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system + FileList.unfilter(); + } }else{ var query=$('#searchbox').val(); if(OC.search.lastQuery!==query){ OC.search.lastQuery=query; OC.search.currentResult=-1; + if (FileList && typeof FileList.filter === 'function') { //TODO add hook system + FileList.filter(query); + } if(query.length>2){ OC.search(query); }else{ @@ -840,6 +846,13 @@ function formatDate(date){ return $.datepicker.formatDate(datepickerFormatDate, date)+' '+date.getHours()+':'+((date.getMinutes()<10)?'0':'')+date.getMinutes(); } +// taken from http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery +function getURLParameter(name) { + return decodeURI( + (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search) || [, null])[1] + ); +} + /** * takes an absolute timestamp and return a string with a human-friendly relative date * @param int a Unix timestamp diff --git a/lib/search/provider/file.php b/lib/search/provider/file.php index 4d88c2a87f1..9bd50931517 100644 --- a/lib/search/provider/file.php +++ b/lib/search/provider/file.php @@ -10,6 +10,7 @@ class OC_Search_Provider_File extends OC_Search_Provider{ $mime = $fileData['mimetype']; $name = basename($path); + $container = dirname($path); $text = ''; $skip = false; if($mime=='httpd/unix-directory') { @@ -37,7 +38,7 @@ class OC_Search_Provider_File extends OC_Search_Provider{ } } if(!$skip) { - $results[] = new OC_Search_Result($name, $text, $link, $type); + $results[] = new OC_Search_Result($name, $text, $link, $type, $container); } } return $results; diff --git a/lib/search/result.php b/lib/search/result.php index 08beaea151c..42275c2df11 100644 --- a/lib/search/result.php +++ b/lib/search/result.php @@ -7,6 +7,7 @@ class OC_Search_Result{ public $text; public $link; public $type; + public $container; /** * create a new search result @@ -15,10 +16,11 @@ class OC_Search_Result{ * @param string $link link for the result * @param string $type the type of result as human readable string ('File', 'Music', etc) */ - public function __construct($name, $text, $link, $type) { + public function __construct($name, $text, $link, $type, $container) { $this->name=$name; $this->text=$text; $this->link=$link; $this->type=$type; + $this->container=$container; } } diff --git a/search/css/results.css b/search/css/results.css index 4ae7d67afb3..8a32b0b995d 100644 --- a/search/css/results.css +++ b/search/css/results.css @@ -14,7 +14,7 @@ position:fixed; right:0; text-overflow:ellipsis; - top:20px; + top:45px; width:380px; z-index:75; } @@ -43,10 +43,16 @@ } #searchresults td { - vertical-align:top; padding:0 .3em; + height: 32px; +} +#searchresults tr.template { + display: none; } +#searchresults td.result { + width:250px; +} #searchresults td.result div.text { padding-left:1em; white-space:nowrap; @@ -56,6 +62,18 @@ cursor:pointer; } +#searchresults td.container { + width:20px; +} + +#searchresults td.container img { + vertical-align: middle; + display:none; +} +#searchresults tr:hover td.container img { + display:inline; +} + #searchresults td.type { border-bottom:none; border-right:1px solid #aaa; diff --git a/search/js/result.js b/search/js/result.js index 78fa8efc8e9..78d9149f220 100644 --- a/search/js/result.js +++ b/search/js/result.js @@ -8,15 +8,23 @@ OC.search.catagorizeResults=function(results){ types[type].push(results[i]); } return types; -} +}; OC.search.hide=function(){ $('#searchresults').hide(); if($('#searchbox').val().length>2){ $('#searchbox').val(''); + if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system + FileList.unfilter(); + } }; -} + if ($('#searchbox').val().length === 0) { + if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system + FileList.unfilter(); + } + } +}; OC.search.showResults=function(results){ - if(results.length==0){ + if(results.length === 0){ return; } if(!OC.search.showResults.loaded){ @@ -30,6 +38,9 @@ OC.search.showResults=function(results){ }); $(document).click(function(event){ OC.search.hide(); + if (FileList && typeof FileList.unfilter === 'function') { //TODO add hook system + FileList.unfilter(); + } }); OC.search.lastResults=results; OC.search.showResults(results); @@ -46,12 +57,27 @@ OC.search.showResults=function(results){ var row=$('#searchresults tr.template').clone(); row.removeClass('template'); row.addClass('result'); - if (i == 0){ + if (i === 0){ row.children('td.type').text(name); } row.find('td.result a').attr('href',type[i].link); row.find('td.result div.name').text(type[i].name); row.find('td.result div.text').text(type[i].text); + if (type[i].container) { + var td = row.find('td.container'); + td.append(''); + td.find('img').attr('src',OC.imagePath('core','places/folder')); + var containerName = OC.basename(type[i].container); + if (containerName === '') { + containerName = '/'; + } + var containerLink = OC.linkTo('files','index.php') + +'?dir='+encodeURIComponent(type[i].container) + +'&scrollto='+encodeURIComponent(type[i].name); + row.find('td.container a') + .attr('href',containerLink) + .attr('title',t('core','Show in {folder}',{folder: containerName})); + } row.data('index',index); index++; if(OC.search.customResults[name]){//give plugins the ability to customize the entries in here @@ -62,7 +88,7 @@ OC.search.showResults=function(results){ } } } -} +}; OC.search.showResults.loaded=false; OC.search.renderCurrent=function(){ @@ -71,4 +97,4 @@ OC.search.renderCurrent=function(){ $('#searchresults tr.result').removeClass('current'); $(result).addClass('current'); } -} +}; diff --git a/search/templates/part.results.php b/search/templates/part.results.php index 9e39a1c2c8b..1469e3468d3 100644 --- a/search/templates/part.results.php +++ b/search/templates/part.results.php @@ -1,7 +1,7 @@
- + +
@@ -9,6 +9,7 @@
From 00772a84701cbfbd794db1d9c40f8cd98a40b9b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn=20Friedrich=20Dreyer?= Date: Tue, 17 Sep 2013 17:25:47 +0200 Subject: [PATCH 2/4] use correct doublequotes in template, remove container --- search/templates/part.results.php | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/search/templates/part.results.php b/search/templates/part.results.php index 1469e3468d3..b6e7bad4a2f 100644 --- a/search/templates/part.results.php +++ b/search/templates/part.results.php @@ -1,15 +1,14 @@ -
+
- - - + + -
+
-
-
+
+
From 8bdafaf4e0b14d1437612483a6187c21533846db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn=20Friedrich=20Dreyer?= Date: Tue, 17 Sep 2013 17:27:47 +0200 Subject: [PATCH 3/4] make 'open in folder' action default for files --- search/js/result.js | 37 ++++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/search/js/result.js b/search/js/result.js index 78d9149f220..bfd81f4851e 100644 --- a/search/js/result.js +++ b/search/js/result.js @@ -50,43 +50,50 @@ OC.search.showResults=function(results){ $('#searchresults').show(); $('#searchresults tr.result').remove(); var index=0; - for(var name in types){ - var type=types[name]; + for(var typeid in types){ + var type=types[typeid]; if(type.length>0){ for(var i=0;i'); - td.find('img').attr('src',OC.imagePath('core','places/folder')); var containerName = OC.basename(type[i].container); if (containerName === '') { containerName = '/'; } - var containerLink = OC.linkTo('files','index.php') - +'?dir='+encodeURIComponent(type[i].container) - +'&scrollto='+encodeURIComponent(type[i].name); - row.find('td.container a') - .attr('href',containerLink) - .attr('title',t('core','Show in {folder}',{folder: containerName})); + var containerLink = OC.linkTo('files', 'index.php') + +'?dir='+encodeURIComponent(type[i].container) + +'&scrollto='+encodeURIComponent(type[i].name); + row.find('td.result a') + .attr('href', containerLink) + .attr('title', t('core', 'Show in {folder}', {folder: containerName})); + } else { + row.find('td.result a').attr('href', type[i].link); } row.data('index',index); index++; - if(OC.search.customResults[name]){//give plugins the ability to customize the entries in here - OC.search.customResults[name](row,type[i]); + if(OC.search.customResults[typeid]){//give plugins the ability to customize the entries in here + OC.search.customResults[typeid](row,type[i]); } $('#searchresults tbody').append(row); } } } + $('#searchresults').on('click', 'result', function () { + if ($(this).data('type') === 'Files') { + + } + }); } }; OC.search.showResults.loaded=false; From c2e413e8528835929e6ca60ade0f5a3ad7a210bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rn=20Friedrich=20Dreyer?= Date: Tue, 17 Sep 2013 18:45:38 +0200 Subject: [PATCH 4/4] add fixme --- search/js/result.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/search/js/result.js b/search/js/result.js index bfd81f4851e..780f513edcf 100644 --- a/search/js/result.js +++ b/search/js/result.js @@ -91,7 +91,7 @@ OC.search.showResults=function(results){ } $('#searchresults').on('click', 'result', function () { if ($(this).data('type') === 'Files') { - + //FIXME use ajax to navigate to folder & highlight file } }); }