full page search results

search/css/results.css

@@ -4,26 +4,16 @@
 
 #searchresults {
 	background-color:#fff;
-	border-bottom-left-radius:11px;
-	box-shadow:0 0 10px #000;
-	list-style:none;
-	max-height:80%;
 	overflow-x:hidden;
 	overflow-y: auto;
-	padding-bottom:6px;
 	position:fixed;
-	right:0;
 	text-overflow:ellipsis;
-	top:45px;
-	width:380px;
-	max-width: 95%;
+	top:0;
+	padding-top: 45px;
+	height: 100%;
 	z-index:75;
 }
 
-.ie8 #searchresults {
-	border: 1px solid #666 !important;
-}
-
 #searchresults li.resultHeader {
 	background-color:#eee;
 	border-bottom:solid 1px #CCC;
@@ -44,22 +34,34 @@
 }
 
 #searchresults td {
-	padding:0 .3em;
-	height: 44px;
+	border-top: 20px solid white;
+	border-bottom: none;
 }
 #searchresults tr.template {
 	display: none;
 }
 
 #searchresults .name,
-#searchresults .text {
+#searchresults .text,
+#searchresults .path {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+#searchresults .name {
+	font-size: larger;
+}
 #searchresults .text {
-	padding-left: 16px;
-	color: #999;
+	white-space: normal;
+	color: #545454;
+}
+#searchresults .path {
+	color: green;
+}
+#searchresults .text em {
+	color: #545454;
+	font-weight: bold;
+	opacity: 1;
 }
 
 #searchresults td.result * {
@@ -79,8 +81,6 @@
 }
 
 #searchresults td.type {
-	border-bottom:none;
-	border-right:1px solid #aaa;
 	font-weight:700;
 	text-align:right;
 	width:3.5em;

search/js/result.js

@@ -45,8 +45,8 @@ OC.search.showResults=function(results){
 		return;
 	}
 	if(!OC.search.showResults.loaded){
-		var parent=$('<div/>');
-		$('body').append(parent);
+		var parent=$('<div class="searchresults-wrapper"/>');
+		$('#app-content').append(parent);
 		parent.load(OC.filePath('search','templates','part.results.php'),function(){
 			OC.search.showResults.loaded=true;
 			$('#searchresults').click(function(event){
@@ -74,19 +74,37 @@ OC.search.showResults=function(results){
 					var row=$('#searchresults tr.template').clone();
 					row.removeClass('template');
 					row.addClass('result');
-					
+
 					row.data('type', typeid);
 					row.data('name', type[i].name);
+					row.data('path', type[i].path);
 					row.data('text', type[i].text);
 					row.data('index',index);
-					
+
 					if (i === 0){
 						var typeName = OC.search.resultTypes[typeid];
 						row.children('td.type').text(t('lib', typeName));
 					}
+
+					if (type[i].path) {
+						OCA.Files.App.fileList.lazyLoadPreview({
+							path: type[i].path,
+							mime: type[i].mime_type,
+							callback: function (url) {
+								row.find('td.type').css('background-image', 'url(' + url + ')');
+							}
+						});
+					}
+
 					row.find('td.result div.name').text(type[i].name);
-					row.find('td.result div.text').text(type[i].text);
-					
+					row.find('td.result div.path').text(type[i].path);
+					if (typeof type[i].highlights === 'object') {
+						var highlights = type[i].highlights.join(' … ');
+						row.find('td.result div.text').html(highlights);
+					} else {
+						row.find('td.result div.text').text(type[i].text);
+					}
+
 					if (type[i].path) {
 						var parent = OC.dirname(type[i].path);
 						if (parent === '') {
@@ -105,7 +123,7 @@ OC.search.showResults=function(results){
 					} else {
 						row.find('td.result a').attr('href', type[i].link);
 					}
-					
+
 					index++;
 					/** 
 					 * Give plugins the ability to customize the search results. For example:

search/templates/part.results.php

@@ -5,7 +5,8 @@
 				<td class="type"></td>
 				<td class="result">
 					<a>
-						<div class="name"></div>
+						<div class="name"></div><div class="storage"></div>
+						<div class="path"></div>
 						<div class="text"></div>
 					</a>
 				</td>