526 lines
17 KiB
HTML
526 lines
17 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
|
|
<html>
|
|
<head>
|
|
<title>RECOLL: result list customisation tips</title>
|
|
|
|
<meta name="generator" content="HTML Tidy, see www.w3.org">
|
|
<meta name="Author" content="Jean-Francois Dockes">
|
|
<meta name="Description" content=
|
|
"recoll is a simple full-text search system for unix and linux
|
|
based on the powerful and mature xapian engine">
|
|
<meta name="Keywords" content=
|
|
"full text search, desktop search, unix, linux">
|
|
<meta http-equiv="Content-language" content="en">
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<meta name="robots" content="All,Index,Follow">
|
|
|
|
<link type="text/css" rel="stylesheet" href="styles/style.css">
|
|
|
|
|
|
<style type="text/css">
|
|
/* Photo-Caption PZ3 CSS v080630
|
|
* copyright: http://randsco.com/copyright
|
|
* www.randsco.com
|
|
*/
|
|
|
|
.PZ3-l { float:left; margin-right:10px; }
|
|
.PZ3-r { float:right; margin-left:10px; direction:rtl; }
|
|
html>/**/body .PZ3-r { position:relative; }
|
|
|
|
.PZ3zoom { border:1px solid #369; }
|
|
.PZ3zoom a,.PZ3zoom a:visited { display:block;
|
|
padding:0; overflow:hidden; text-decoration:none;
|
|
height:100%; width:100%; }
|
|
html>/**/body .PZ3-r a { right:0; }
|
|
|
|
.PZ3zoom a:hover { position:absolute;
|
|
z-index:999; padding:0; background:none;
|
|
cursor:default; height:auto; width:auto;
|
|
overflow:visible; border:1px solid #369;
|
|
margin:-1px 0 0 -1px; }
|
|
html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }
|
|
|
|
.PZ3zoom a img { border:0; height:100%; width:100%; }
|
|
.PZ3zoom a:hover img { height:auto; width:auto;
|
|
border:0; }
|
|
|
|
a:hover .PZ3cap,
|
|
a:hover .PZ31cap { display:block;
|
|
direction:ltr; font:10pt verdana,sans-serif;
|
|
margin-top:-3px; background:#369; color:#fff;
|
|
text-align:left; }
|
|
a:hover .PZ3cap { padding:3px 5px; }
|
|
.PZ3inr { display:block; padding:2px 5px; }
|
|
|
|
.noCap a:hover .PZ3cap,
|
|
.noCap a:hover .PZ31cap { display:none; }
|
|
.noBdr,.noBdr a:hover { border:0; }
|
|
.Lnk a:hover { cursor:pointer; }
|
|
|
|
/* End Photo-Caption Zoom CSS */
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="rightlinks">
|
|
<ul>
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="pics/index.html">Screenshots</a></li>
|
|
<li><a href="download.html">Downloads</a></li>
|
|
<li><a href="usermanual/index.html">User manual</a></li>
|
|
<li><a href="index.html#support">Support</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="content">
|
|
|
|
<h1>Recoll result list customising exemples</h1>
|
|
|
|
<p>The Recoll result list is actually made of html text
|
|
displayed inside a Qt Widget. In all Recoll versions, you
|
|
can specify the format for the list entries: what data is
|
|
displayed for each hit document and how. This used to include
|
|
"almost full" support for HTML capabilities, with a few
|
|
restrictions due to the Qt QTextBrowser object. The details
|
|
are described in the
|
|
<a href="http://www.recoll.org/usermanual/RCL.SEARCH.html#RCL.SEARCH.GUI.CUSTOM.RESLIST">
|
|
Recoll manual</a>.</p>
|
|
|
|
<p>As of Recoll 1.17, the result list is a WebKit object by
|
|
default (WebKit is the basis for several major browsers),
|
|
which yields full CSS and even Javascript support.</p>
|
|
|
|
<h2>New in Recoll 1.17: the WebKit result list</h2>
|
|
|
|
|
|
<p>For newer Recoll versions, you can specify the
|
|
individual result format, as for previous versions. You can
|
|
also define code to be included in the HTML
|
|
header (ie: CSS or Javascript), using
|
|
<tt>Preferences->Query Configuration->Result List->Edit result page html header insert</tt></p>
|
|
|
|
<p>This, plus the full Javascript and CSS support in WebKit,
|
|
open a world of possibilities for result list formatting and
|
|
even behaviour.</p>
|
|
|
|
<p>The examples which follow are probably not generally
|
|
very useful but they show the kinds of things you can do, if
|
|
you can use Javascript/CSS which is not my case.</p>
|
|
|
|
<h3>Using the icons as links</h3>
|
|
<p>You can now make the list icons links that activate the
|
|
preview or open action (or the document url which you can then
|
|
drag/drop to other windows). Using images as links did
|
|
not work with QTextBrowser.</p>
|
|
|
|
<h3>Alternating result backgrounds</h3>
|
|
<p>Using the following Javascript inside the header will yield
|
|
alternating backgrounds for the results:</p>
|
|
|
|
<pre>
|
|
<script type="text/javascript">
|
|
function altRows() {
|
|
var rows = document.getElementsByClassName("rclresult");
|
|
for (i = 0; i < rows.length; i++) {
|
|
if (i % 2 == 0) {
|
|
rows[i].style.backgroundColor = "#d4e3e5";
|
|
}
|
|
}
|
|
}
|
|
|
|
window.onload = function() {
|
|
altRows();
|
|
}
|
|
</script>
|
|
</pre>
|
|
|
|
|
|
<h3>Zooming the paragraph font size</h3>
|
|
<p>If you are using a format with small fonts, it may be useful
|
|
to be able to zoom the text when the mouse hovers over it. A
|
|
very basic way to do this -<em>with the standard paragraph
|
|
format, which is a table</em>- would be to include the following
|
|
code in the header:</p>
|
|
<pre>
|
|
<style type="text/css">
|
|
table:hover {font-size: 130%;}
|
|
</style>
|
|
</pre>
|
|
|
|
<p>Of course, the selector should be adapted to your own
|
|
result format. You should know that every result will be
|
|
enclosed by Recoll inside a <tt><div
|
|
class="rclresult" rcldocnum="nn"></tt> element.</p>
|
|
|
|
<h3>Zooming the thumbnails</h3>
|
|
|
|
<p>Recoll 1.17 and newer will display document
|
|
thumbnails instead of the type icon if the thumbnail exists in
|
|
the standard Freedesktop location. The icons/thumbnails are
|
|
64x64 pixels in size, which is a bit small. The standard
|
|
thumbnail files are actually 128x128, which is much more
|
|
detailed. Using them statically would consume too much list
|
|
space though. Using CSS, you can get them to expand when the
|
|
mouse is over them. Recipee:</p>
|
|
|
|
<blockquote>
|
|
<p>Retrieve the CSS code
|
|
from <a href="http://randsco.com/_miscPgs/cssZoomPZ3.html">randsco
|
|
pure CSS photo-caption zoom</a>, and include it inside the
|
|
result list html header by using the "Edit result page html
|
|
header insert" from the GUI preferences. Don't forget to
|
|
enclose the CSS code between <code><style type="text/css">
|
|
</style></code> tags.</p>
|
|
|
|
<p>Use something like the following result paragraph format
|
|
(only the code around the img tag is relevant, the rest can be
|
|
what you want):</p>
|
|
|
|
<pre>
|
|
<!--
|
|
<table><tr><td>
|
|
<div class="PZ3zoom PZ3-l noBdr noCap noLnk" style="width:64px;height:64px;">
|
|
<a href="%U"> <img src='%I' width='64'></a>
|
|
</div>
|
|
</td><td>
|
|
%R %S %L <b>%T</b><br>%M %D <i>%U</i> %i<br>%A %K
|
|
</td></tr></table>
|
|
-->
|
|
<table><tr><td>
|
|
|
|
<div class="PZ3zoom PZ3-l noBdr noCap noLnk" style="width:64px;height:64px;">
|
|
<a href="%U"> <img src='%I' width='64'></a>
|
|
</div>
|
|
|
|
</td><td>
|
|
%R %S %L &nbsp;&nbsp;<b>%T</b><br>%M&nbsp;%D&nbsp;&nbsp;&nbsp;<i>%U</i>&nbsp;%i<br>%A %K
|
|
</td></tr></table>
|
|
</pre>
|
|
|
|
</blockquote>
|
|
<div class="PZ3zoom PZ3-r noCap noLnk" style="width:100px;height:40px;">
|
|
<a href="resparpics/pz3.png" onclick="return false">
|
|
<img src="resparpics/pz3.png" alt="hover zoom" />
|
|
</a>
|
|
</div>
|
|
|
|
<p>Et voilà! The icons will grow to their full size when the mouse is
|
|
over them.</p>
|
|
|
|
<h2>Alternate icons theme</h2>
|
|
<p>There is an alternate set of icons
|
|
at <a href="http://kde-look.org/content/show.php?content=145669">
|
|
kde-look.org</a>. If you are running KDE desktop, it should
|
|
be more consistent with the rest of your applications.</p>
|
|
<p>You do not need to replace the standard Recoll set of icons
|
|
to use it, just extract it somewhere, and use
|
|
the <tt>iconsdir</tt> variable in <i>~/.recoll/recoll.conf</i> to
|
|
point Recoll to it. e.g.:
|
|
<blockquote><pre>
|
|
<tt>iconsdir = /path/to/my/icons</tt>
|
|
</pre></blockquote>
|
|
</p>
|
|
|
|
<h2>Result list paragraph format samples (for all versions)</h2>
|
|
|
|
<p>The format for paragraphs inside the Recoll GUI result list is
|
|
customisable by specifying an html fragment (menu:
|
|
<tt>Preferences->Query configuration->User interface->Result paragraph format string</tt>)</p>
|
|
|
|
<p>Here follow some sample formats. Most of them were contributed by
|
|
kind users, and I'll be happy to show their names if they so
|
|
wish (abstaining by default).</p>
|
|
|
|
<h3>Recoll 1.15 default</h3>
|
|
<pre>
|
|
|
|
<!--
|
|
<table>
|
|
<tr>
|
|
<td><img src='%I'></td>
|
|
<td>%R %S %L <b>%T</b><br>
|
|
%M %D <i>%U</i><br>
|
|
%A %K
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
-->
|
|
<table>
|
|
<tr>
|
|
<td><img src='%I'></td>
|
|
<td>%R %S %L&nbsp;&nbsp;<b>%T</b><br>
|
|
%M&nbsp;%D&nbsp;&nbsp;&nbsp;<i>%U</i><br>
|
|
%A %K
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</pre>
|
|
|
|
<br clear="all">
|
|
<img src="resparpics/default.png"/>
|
|
|
|
<h3>A simpler format, suggested in Bitbucket issue #69</h3>
|
|
|
|
<pre>
|
|
<!--
|
|
<img src="%I" align="left">%R %L <b>%T</b><br>
|
|
<i><font color="#808080">%U</font></i> %i<br>
|
|
%A %K
|
|
-->
|
|
<img src="%I" align="left">%R %L&nbsp;&nbsp;<b>%T</b><br>
|
|
&nbsp;&nbsp;<i><font color="#808080">%U</font></i>&nbsp;%i<br>
|
|
%A %K
|
|
</pre>
|
|
<br clear="all">
|
|
<img src="resparpics/issue73.png"/>
|
|
|
|
|
|
<h3>Simple+table</h3>
|
|
|
|
<p>Same format, but using a table to avoid text flowing into the icon
|
|
area.</p>
|
|
|
|
<pre>
|
|
<!--
|
|
<table>
|
|
<tr>
|
|
<td><img src="%I" align="left"></td>
|
|
<td>%R %L <b>%T</b><br>
|
|
<i><font color="#808080">%U</font></i> %i<br>
|
|
%A %K
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
-->
|
|
<table>
|
|
<tr>
|
|
<td><img src="%I" align="left"></td>
|
|
<td>%R %L&nbsp;&nbsp;<b>%T</b><br>
|
|
&nbsp;&nbsp;<i><font color="#808080">%U</font></i>&nbsp;%i<br>
|
|
%A %K
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</pre>
|
|
|
|
<br clear="all">
|
|
<img src="resparpics/issue73+table.png"/>
|
|
|
|
|
|
|
|
<h3>Using a small font to make the size/date details less obstrusive</h3>
|
|
|
|
<pre>
|
|
<!--
|
|
<table>
|
|
<tr>
|
|
<td><img src="%I" align="left"></td>
|
|
<td><table bgcolor="#bababa">
|
|
<tr><td><div>
|
|
<font face="Tahoma, sans-serif"><u><b><a href="P%N">%T</a></b></u><br>
|
|
<font color=#008000>%L</font><br>
|
|
<font color=#510101>%A %K</font><br>
|
|
<font color=#0100FF>%U</font>
|
|
<p align="right"><font size=1><font color=#000000>%S
|
|
- %D
|
|
- %M</font></p>
|
|
</div></td></tr>
|
|
</table></td>
|
|
</tr>
|
|
</table>
|
|
-->
|
|
<table>
|
|
<tr>
|
|
<td><img src="%I" align="left"></td>
|
|
<td><table bgcolor="#bababa">
|
|
<tr><td><div>
|
|
<font face="Tahoma, sans-serif"><u><b><a href="P%N">%T</a></b></u><br>
|
|
<font color=#008000>%L</font><br>
|
|
<font color=#510101>%A %K</font><br>
|
|
<font color=#0100FF>%U</font>
|
|
<p align="right"><font size=1><font color=#000000>%S
|
|
&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp; %D
|
|
&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp; %M</font></p>
|
|
</div></td></tr>
|
|
</table></td>
|
|
</tr>
|
|
</table>
|
|
</pre>
|
|
|
|
<br clear="all">
|
|
<img src="resparpics/detailSmallGreyTable.png"/>
|
|
|
|
|
|
<h3>A very structured table</h3>
|
|
|
|
<pre>
|
|
<!--
|
|
<table border="1" bgcolor="lightyellow">
|
|
<tr>
|
|
<td rowspan="4" width="40px" align="center" valign="center">
|
|
<img src="%I" width="32" height="32">
|
|
<p><b>%R</b></p>
|
|
<p><a href="P%N">Aperçu</a></p>
|
|
</td>
|
|
<th colspan="3" bgcolor="lightgrey">%T</th>
|
|
</tr>
|
|
<tr>
|
|
<td align="center">%M</td>
|
|
<td align="center">%D</td>
|
|
<td align="center">%S</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3"><a href="E%N">%U</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3">%A</td>
|
|
</tr>
|
|
</table>
|
|
-->
|
|
<table border="1" bgcolor="lightyellow">
|
|
<tr>
|
|
<td rowspan="4" width="40px" align="center" valign="center">
|
|
<img src="%I" width="32" height="32">
|
|
<p><b>%R</b></p>
|
|
<p><a href="P%N">Aperçu</a></p>
|
|
</td>
|
|
<th colspan="3" bgcolor="lightgrey">%T</th>
|
|
</tr>
|
|
<tr>
|
|
<td align="center">%M</td>
|
|
<td align="center">%D</td>
|
|
<td align="center">%S</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3"><a href="E%N">%U</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="3">%A</td>
|
|
</tr>
|
|
</table>
|
|
</pre>
|
|
<br clear="all">
|
|
<img src="resparpics/structuredTable.png"/>
|
|
|
|
|
|
<h3>Web-like from the user manual</h3>
|
|
|
|
<pre>
|
|
<!--
|
|
<u><b><a href="P%N">%T</a></b></u><br>
|
|
%U<br>
|
|
%A <font color=#008000>%S</font> - <a href="E%N">Edit</a>
|
|
-->
|
|
<u><b><a href="P%N">%T</a></b></u><br>
|
|
%U<br>
|
|
%A <font color=#008000>%S</font> - <a href="E%N">Edit</a>
|
|
</pre>
|
|
<br clear="all">
|
|
<img src="resparpics/weblike.png"/>
|
|
|
|
|
|
<h3>Clean-Looking from the user manual</h3>
|
|
|
|
<pre>
|
|
<!--
|
|
<table>
|
|
<tr><td><img src="%I" align="left"></td>
|
|
<td>%L <font color="#900000">%R</font> <b>%T</b><br>
|
|
%S <font color="#808080"><i>%U</i></font>
|
|
<table bgcolor="#e0e0e0">
|
|
<tr><td><div>%A</div> %K </td></tr>
|
|
</table></td>
|
|
</table>
|
|
-->
|
|
<table>
|
|
<tr><td><img src="%I" align="left"></td>
|
|
<td>%L <font color="#900000">%R</font> <b>%T</b><br>
|
|
%S <font color="#808080"><i>%U</i></font>
|
|
<table bgcolor="#e0e0e0">
|
|
<tr><td><div>%A</div> %K </td></tr>
|
|
</table></td>
|
|
</table>
|
|
|
|
</pre>
|
|
<br clear="all">
|
|
<img src="resparpics/clean.png"/>
|
|
|
|
|
|
|
|
<h3>Another clean and nice one, using both a bit of header code and a
|
|
custom paragraph format</h3>
|
|
|
|
<p>This one also uses the custom icons set from
|
|
<a href="http://kde-look.org/content/show.php?content=145669">
|
|
this kde-look page</a>.</p>
|
|
|
|
<p>The header code:</p>
|
|
|
|
<pre>
|
|
<style type="text/css">
|
|
body {
|
|
color: rgb(0, 0, 0);
|
|
background-color: rgb(224, 224, 224);
|
|
}
|
|
</style>
|
|
</pre>
|
|
|
|
<p>The paragraph code:</p>
|
|
|
|
<pre>
|
|
<table style="background-color: white; width: 950px;"
|
|
border-style="none" border-color:="" border="0">
|
|
<tbody>
|
|
<tr>
|
|
<td rowspan="4"
|
|
style="width: 68px; text-align: center; background-color: rgb(238, 238, 238);">
|
|
<img src="%I" height="32" width="32">
|
|
<p style="font-family: sans-serif;"><b>%R</b></p>
|
|
<p style="font-family: sans-serif; color: rgb(0, 153, 0);"><br>
|
|
</p>
|
|
</td>
|
|
<td style="vertical-align: top;"><br>
|
|
</td>
|
|
<th
|
|
style="font-family: sans-serif; background-color: white; text-align: left;"
|
|
colspan="3" bgcolor="lightgrey">%T</th>
|
|
</tr>
|
|
<tr>
|
|
<td style="vertical-align: top; width: 11px;"><br>
|
|
</td>
|
|
<td
|
|
style="text-align: center; font-family: sans-serif; background-color: rgb(249, 249, 249);">%M</td>
|
|
<td
|
|
style="text-align: center; font-family: sans-serif; background-color: rgb(249, 249, 249);">%D</td>
|
|
<td
|
|
style="font-family: sans-serif; text-align: right; background-color: rgb(249, 249, 249);">%S</td>
|
|
</tr>
|
|
<tr style="font-family: sans-serif; color: rgb(0, 153, 0);">
|
|
<td style="vertical-align: top;"><br>
|
|
</td>
|
|
<td colspan="3"><a href="E%N">%U</a></td>
|
|
</tr>
|
|
<tr style="font-family: sans-serif;" 8="">
|
|
<td style="vertical-align: top;"><br>
|
|
</td>
|
|
<td colspan="3">%A</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<br>
|
|
</pre>
|
|
|
|
<br clear="all">
|
|
<img src="resparpics/christopher.png"/>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|