New ergonomic form for search queries.

git-svn-id: http://piwigo.org/svn/trunk@621 68402e56-0260-453c-a942-63ccdbb3a9ee

2 files changed, 91 insertions, 142 deletions

diff --git a/template/default/default.css b/template/default/default.css
index abf187d63..d1f0aa84c 100644
--- a/template/default/default.css
+++ b/template/default/default.css
@@ -78,6 +78,10 @@ a.thumbLink:hover { text-decoration:none;}
 
 /* Navigation styles */
 
+.small{
+  font-size:10px;
+}
+
 .titreMenu,.titrePage
 {
   padding-right: 10px;
@@ -322,10 +326,7 @@ color : #FFF48E;
   text-align:center;
   font-size:16px;
 }
-.menuInfoCat {
-  font-family:sans-serif;
-  font-size:11px;
-}
+
 .totalImages {
   text-align:center;
   margin-top:5px;
@@ -333,12 +334,6 @@ color : #FFF48E;
   font-size:11px;
 }
 
-.infoCat {
-  margin-top:10px;
-  margin-bottom:10px;
-  text-align:left;
-}
-
 .copyright {
   font-size:10px;
   text-align:center;
@@ -424,36 +419,4 @@ div.remoteLocal {
 /* for debugging purpose */
 pre {
   text-align:left;
-}
-
-.confMenu {
-  background-color:#444444;
-  text-align:center;
-}
-
-.confMenu a {
-  padding:2px;
-  border:1px solid gray;
-  background-color:#505050;
-  color:#fff48e;
-  color:lightgray;
-}
-
-.confMenu a:hover {
-  color:orange;
-  text-decoration:none;
-}
-
-.confMenu a.opened {
-  background-color:gray;
-  color:white;
-  text-decoration:none;
-}
-
-.optionTrue {
-  color:lightgreen;
-}
-
-.optionFalse {
-  color:#ffe1e1;
 }
\ No newline at end of file
diff --git a/template/default/search.tpl b/template/default/search.tpl
index dfb465528..d79aeb017 100644
--- a/template/default/search.tpl
+++ b/template/default/search.tpl
@@ -1,6 +1,6 @@
-<div class="titrePage">{L_TITLE}</div>
+<div class="titrePage">{L_SEARCH_TITLE}</div>
 <br />
-<form method="post" action="{F_ACTION}" style="text-align:center">
+<form method="post" name="post" action="{S_SEARCH_ACTION}">
 <!-- BEGIN errors -->
 <div class="errors">
   <ul>
@@ -10,109 +10,95 @@
   </ul>
 </div>
 <!-- END errors -->
-<table>
-  <!-- BEGIN textfield -->
-  <tr>
-    <td></td>
-    <td>{textfield.L_NAME} *</td>
-    <td>
-      <input type="text" name="{textfield.NAME}-content" value="{textfield.VALUE}" size="40" />
-      <input class="radio" type="radio" name="{textfield.NAME}-mode" value="OR" {textfield.OR_CHECKED} /> {L_SEARCH_OR}
-      <input class="radio" type="radio" name="{textfield.NAME}-mode" value="AND" {textfield.AND_CHECKED} /> {L_SEARCH_AND}
-    </td>
+<table width="100%" align="center" cellpadding="2">
+  <tr class="admin">
+    <th colspan="4">{L_SEARCH_TITLE}</th>
   </tr>
-  <!-- END textfield -->
-  <tr>
-   <td colspan="3" style="text-align:center;">* {L_SEARCH_COMMENTS}</td>
+  <tr> 
+    <td width="50%" colspan="2"><b>{L_SEARCH_KEYWORDS} : </b><br /><span class="small">{L_SEARCH_KEYWORDS_HINT}</span></td>
+    <td colspan="2" valign="top">
+	  <input type="text" style="width: 300px" name="search_keywords" size="30" />
+	  <br />
+	  <input type="radio" name="mode" value="AND" checked="checked" /> {L_SEARCH_ALL_TERMS}<br />
+	  <input type="radio" name="mode" value="OR" /> {L_SEARCH_ANY_TERMS}
+	</td>
   </tr>
-  <!-- BEGIN datefield -->
-  <tr>
-    <td></td>
-    <td>{datefield.L_NAME}</td>
-    <td>
-      <table>
-        <tr>
-          <td style="text-align:left;"><input type="checkbox" name="{datefield.NAME}-check" value="1" {datefield.CHECKED} /> {L_SEARCH_DATE_IS}</td>
-          <td style="text-align:left;">
-            <select name="{datefield.NAME}:year">
-              <!-- BEGIN year_option -->
-              <option{datefield.year_option.SELECTED}>{datefield.year_option.OPTION}</option>
-              <!-- END year_option -->
-            </select>
-            <select name="{datefield.NAME}:month">
-              <!-- BEGIN month_option -->
-              <option{datefield.month_option.SELECTED}>{datefield.month_option.OPTION}</option>
-              <!-- END month_option -->
-            </select>
-            <select name="{datefield.NAME}:day">
-              <!-- BEGIN day_option -->
-              <option{datefield.day_option.SELECTED}>{datefield.day_option.OPTION}</option>
-              <!-- END day_option -->
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td style="text-align:left;"><input type="checkbox" name="{datefield.NAME}-after-check" value="1" {datefield.AFTER_CHECKED} /> {L_SEARCH_DATE_IS_AFTER}</td>
-          <td style="text-align:left;">
-            <select name="{datefield.NAME}-after:year">
-              <!-- BEGIN after_year_option -->
-              <option{datefield.after_year_option.SELECTED}>{datefield.after_year_option.OPTION}</option>
-              <!-- END after_year_option -->
-            </select>
-            <select name="{datefield.NAME}-after:month">
-              <!-- BEGIN after_month_option -->
-              <option{datefield.after_month_option.SELECTED}>{datefield.after_month_option.OPTION}</option>
-              <!-- END after_month_option -->
-            </select>
-            <select name="{datefield.NAME}-after:day">
-              <!-- BEGIN after_day_option -->
-              <option{datefield.after_day_option.SELECTED}>{datefield.after_day_option.OPTION}</option>
-              <!-- END after_day_option -->
-            </select>
-            <input type="checkbox" name="{datefield.NAME}-after-included" value="1" {datefield.AFTER_INCLUDED_CHECKED} /> {L_SEARCH_DATE_INCLUDED}
-          </td>
-        </tr>
-        <tr>
-          <td style="text-align:left;"><input type="checkbox" name="{datefield.NAME}-before-check" value="1" {datefield.BEFORE_CHECKED} /> {L_SEARCH_DATE_IS_BEFORE}</td>
-          <td style="text-align:left;">
-            <select name="{datefield.NAME}-before:year">
-              <!-- BEGIN before_year_option -->
-              <option{datefield.before_year_option.SELECTED}>{datefield.before_year_option.OPTION}</option>
-              <!-- END before_year_option -->
-            </select>
-            <select name="{datefield.NAME}-before:month">
-              <!-- BEGIN before_month_option -->
-              <option{datefield.before_month_option.SELECTED}>{datefield.before_month_option.OPTION}</option>
-              <!-- END before_month_option -->
-            </select>
-            <select name="{datefield.NAME}-before:day">
-              <!-- BEGIN before_day_option -->
-              <option{datefield.before_day_option.SELECTED}>{datefield.before_day_option.OPTION}</option>
-              <!-- END before_day_option -->
-            </select>
-            <input type="checkbox" name="{datefield.NAME}-before-included" value="1" {datefield.BEFORE_INCLUDED_CHECKED} /> {L_SEARCH_DATE_INCLUDED}
-          </td>
-        </tr>
-      </table>
-    </td>
+  <tr> 
+    <td colspan="2"><b>{L_SEARCH_AUTHOR} :</b><br /><span class="small">{L_SEARCH_AUTHOR_HINT}</span></td>
+    <td colspan="2" valign="middle">
+	  <input type="text" style="width: 300px" name="search_author" size="30" />
+	</td>
   </tr>
-  <tr>
+  <tr> 
+    <td colspan="2"><b>{L_SEARCH_DATE} :</b><br /><span class="small">{L_SEARCH_DATE_HINT}</span></td>
+    <td colspan="2" valign="middle">
+	<table><tr><td>
+	  {L_SEARCH_DATE_FROM} :</td><td>
+	  {S_CALENDAR_DAY}{S_CALENDAR_MONTH}{S_CALENDAR_YEAR}&nbsp;
+	  <a href="#" name="#" onClick="document.post.start_day.value={TODAY_DAY};document.post.start_month.value={TODAY_MONTH};document.post.start_year.value={TODAY_YEAR};" />{L_TODAY}</a>
+	  </tr><tr><td>
+	  {L_SEARCH_DURATION} : </td><td>
+	  <input name="duration_day" type="post" maxlength="5" size="3" value="{DURATION_DAY}" />&nbsp;{L_DAYS}
+	  </td></tr></table>
+	</td>
   </tr>
-  <!-- END datefield -->
-  <tr>
-    <td><input type="checkbox" name="categories-check" value="1" {CATEGORIES_SELECTED} /></td>
-    <td>{L_SEARCH_CATEGORIES}</td>
-    <td>
-      <select style="width:500px" name="cat[]" multiple="multiple" size="10">
-        <!-- BEGIN category_option -->
-        <option {category_option.SELECTED} value="{category_option.VALUE}">{category_option.OPTION}</option>
-        <!-- END category_option -->
+  <tr class="admin"> 
+    <th colspan="4">{L_SEARCH_OPTIONS}</th>
+  </tr>
+  <tr> 
+    <td width="25%" ><b>{L_SEARCH_CATEGORIES} : </b><br /><span class="small">{L_SEARCH_CATEGORIES_HINT}</span></td>
+    <td width="25%" nowrap="nowrap">
+	  <select style="width:200px" name="cat[]" multiple="multiple" size="8">
+      <!-- BEGIN category_option -->
+        <option value="{category_option.VALUE}">{category_option.OPTION}</option>
+      <!-- END category_option -->
       </select>
-      <input type="checkbox" name="subcats-included" value="1" {CATEGORIES_SUBCATS_SELECTED} /> {L_SEARCH_SUBCATS_INCLUDED}
-    </td>
+	</td>
+    <td width="25%" nowrap="nowrap"><b>{L_SEARCH_SUBFORUMS} : </b></td>
+    <td width="25%" nowrap="nowrap">
+	  <input type="radio" name="subcats-included" value="1" checked="checked" />{L_YES}&nbsp;&nbsp;
+	  <input type="radio" name="subcats-included" value="0" />{L_NO}
+	</td>
+   </tr>
+   <tr> 
+    <td width="25%" nowrap="nowrap"><b>{L_SEARCH_DATE_TYPE} : </b></td>
+    <td width="25%" nowrap="nowrap">
+	  <input type="radio" name="date_type" value="date_creation" />{L_SEARCH_CREATION}<br />
+	  <input type="radio" name="date_type" value="date_available" checked="checked" />{L_SEARCH_AVAILABILITY}
+	</td>
+	<td><b>{L_RESULT_SORT} : </b></td>
+    <td nowrap="nowrap">
+	  <input type="radio" name="sd" value="AND" />{L_SORT_ASCENDING}<br />
+	  <input type="radio" name="sd" value="d" checked="checked" />{L_SORT_DESCENDING}
+	</td>
   </tr>
+<!--  <tr> 
+    <td width="25%" nowrap="nowrap"><b>{L_SEARCH_WITHIN} : </b></td>
+    <td width="25%" nowrap="nowrap">
+	  <input type="radio" name="search_fields" value="all" checked="checked" />{L_SEARCH_ALL}<br />
+	  <input type="radio" name="search_fields" value="imgonly" />{L_SEARCH_IMG_ONLY}<br />
+	  <input type="radio" name="search_fields" value="commentsonly" />{L_SEARCH_COMMENTS_ONLY}
+	</td>
+  </tr>
+  <tr>
+    <td><b>{L_RESULT_SORT} : </b></td>
+    <td nowrap="nowrap">
+	  {S_SELECT_SORT_KEY}<br />
+	  <input type="radio" name="sd" value="a" />{L_SORT_ASCENDING}<br />
+	  <input type="radio" name="sd" value="d" checked="checked" />{L_SORT_DESCENDING}
+	</td>
+    <td nowrap="nowrap"><b>{L_DISPLAY_RESULTS} : </b></td>
+    <td nowrap="nowrap">
+	  <input type="radio" name="show_results" value="images" checked="checked" />{L_IMAGES}&nbsp;&nbsp;
+	  <input type="radio" name="show_results" value="comments" /> {L_COMMENTS}
+	</td>
+  </tr>  
+  -->
+<tr> 
+<td align="center" valign="bottom" colspan="4" height="38">
+<input type="submit" name="submit" value="{L_SUBMIT}" class="bouton" />&nbsp;&nbsp;
+<input type="reset" value="{L_RESET}" class="bouton" />
+</td>
 </table>
-<input class="radio" type="radio" name="mode" value="OR" {OR_CHECKED} /> {L_SEARCH_OR_CLAUSES}
-<input class="radio" type="radio" name="mode" value="AND" {AND_CHECKED} /> {L_SEARCH_AND_CLAUSES}<br /><br />
-<input type="submit" name="submit" value="{L_SUBMIT}" class="bouton" /><br /><br />
+</form>
 <a href="{U_HOME}" title="{L_RETURN_HINT}">[ {L_RETURN} ]</a>