bug fixed: replace obsolet tn_width and tn_height language keys by their new

equivalent.

improvement: HTML properties forms rewritten to offer labelled Yes/No click
on checkboxes.

improvement: onblur onfocus attribute used on every HTML properties form.


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

3 files changed, 98 insertions, 63 deletions

diff --git a/template/yoga/admin/configuration.tpl b/template/yoga/admin/configuration.tpl
index fb9b0f590..a0578692d 100644
--- a/template/yoga/admin/configuration.tpl
+++ b/template/yoga/admin/configuration.tpl
@@ -14,44 +14,48 @@
 
   <ul>
     <li>
-      <label for="gallery_title"><strong>{lang:Gallery title}</strong></label>
-      <input type="text" maxlength="255" size="50" name="gallery_title" id="gallery_title" value="{general.CONF_GALLERY_TITLE}" />
+      <span class="property">
+        <label for="gallery_title">{lang:Gallery title}</label>
+      </span>
+      <input type="text" maxlength="255" size="50" name="gallery_title" id="gallery_title" value="{general.CONF_GALLERY_TITLE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label for="page_banner"><strong>{lang:Page banner}</strong></label>
-      <textarea cols="50" rows="5" name="page_banner" id="page_banner">{general.CONF_PAGE_BANNER}</textarea>
+      <span class="property">
+        <label for="page_banner">{lang:Page banner}</label>
+      </span>
+      <textarea cols="50" rows="5" name="page_banner" id="page_banner" onfocus="this.className='focus';" onblur="this.className='nofocus';">{general.CONF_PAGE_BANNER}</textarea>
     </li>
 
     <li>
-      <label for="gallery_url"><strong>{lang:Gallery URL}</strong></label>
-      <input type="text" maxlength="255" size="50" name="gallery_url" id="gallery_url" value="{general.CONF_GALLERY_URL}" />
+      <span class="property">
+        <label for="gallery_url">{lang:Gallery URL}</label>
+      </span>
+      <input type="text" maxlength="255" size="50" name="gallery_url" id="gallery_url" value="{general.CONF_GALLERY_URL}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:History}</strong></label>
-      <input type="radio" class="radio" name="log" value="true" {general.HISTORY_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="log" value="false" {general.HISTORY_NO} />{lang:No}
+      <span class="property">{lang:History}</span>
+      <label><input type="radio" class="radio" name="log" value="true" {general.HISTORY_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="log" value="false" {general.HISTORY_NO} />{lang:No}</label>
     </li>
 
     <li>
-      <label><strong>{lang:Lock gallery}</strong></label>
-      <input type="radio" class="radio" name="gallery_locked" value="true" {general.GALLERY_LOCKED_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="gallery_locked" value="false" {general.GALLERY_LOCKED_NO} />{lang:No}
+      <span class="property">{lang:Lock gallery}</span>
+      <label><input type="radio" class="radio" name="gallery_locked" value="true" {general.GALLERY_LOCKED_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="gallery_locked" value="false" {general.GALLERY_LOCKED_NO} />{lang:No}</label>
     </li>
-  </ul>
-
-  <ul>
+    
     <li>
-      <label><strong>{lang:Rating}</strong></label>
-      <input type="radio" class="radio" name="rate" value="true" {general.RATE_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="rate" value="false" {general.RATE_NO} />{lang:No}
+      <span class="property">{lang:Rating}</span>
+      <label><input type="radio" class="radio" name="rate" value="true" {general.RATE_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="rate" value="false" {general.RATE_NO} />{lang:No}</label>
     </li>
 
     <li>
-      <label><strong>{lang:Rating by guests}</strong></label>
-      <input type="radio" class="radio" name="rate_anonymous" value="true" {general.RATE_ANONYMOUS_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="rate_anonymous" value="false" {general.RATE_ANONYMOUS_NO} />{lang:No}
+      <span class="property">{lang:Rating by guests}</span>
+      <label><input type="radio" class="radio" name="rate_anonymous" value="true" {general.RATE_ANONYMOUS_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="rate_anonymous" value="false" {general.RATE_ANONYMOUS_NO} />{lang:No}</label>
     </li>
   </ul>
 <!-- END general -->
@@ -61,20 +65,22 @@
 
   <ul>
     <li>
-      <label><strong>{lang:Comments for all}</strong></label>
-      <input type="radio" class="radio" name="comments_forall" value="true" {comments.COMMENTS_ALL_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="comments_forall" value="false" {comments.COMMENTS_ALL_NO} />{lang:No}
+      <span class="property">{lang:Comments for all}</span>
+      <label><input type="radio" class="radio" name="comments_forall" value="true" {comments.COMMENTS_ALL_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="comments_forall" value="false" {comments.COMMENTS_ALL_NO} />{lang:No}</label>
     </li>
 
     <li>
-      <label for="nb_comment_page"><strong>{lang:Number of comments per page}</strong></label>
-      <input type="text" size="3" maxlength="4" name="nb_comment_page" id="nb_comment_page" value="{comments.NB_COMMENTS_PAGE}" />
+      <span class="property">
+        <label for="nb_comment_page">{lang:Number of comments per page}</label>
+      </span>
+      <input type="text" size="3" maxlength="4" name="nb_comment_page" id="nb_comment_page" value="{comments.NB_COMMENTS_PAGE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:Validation}</strong></label>
-      <input type="radio" class="radio" name="comments_validation" value="true" {comments.VALIDATE_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="comments_validation" value="false" {comments.VALIDATE_NO} />{lang:No}
+      <span class="property">{lang:Validation}</span>
+      <label><input type="radio" class="radio" name="comments_validation" value="true" {comments.VALIDATE_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="comments_validation" value="false" {comments.VALIDATE_NO} />{lang:No}</label>
     </li>
   </ul>
 <!-- END comments -->
@@ -83,8 +89,10 @@
 
   <ul>
     <li>
-      <label for="language"><strong>{lang:Language}</strong></label>
-      <select name="default_language" id="default_language">
+      <span class="property">
+        <label for="default_language">{lang:Language}</label>
+      </span>
+      <select name="default_language" id="default_language" onfocus="this.className='focus';" onblur="this.className='nofocus';">
         <!-- BEGIN language_option -->
         <option value="{default.language_option.VALUE}" {default.language_option.SELECTED}>{default.language_option.CONTENT}</option>
         <!-- END language_option -->
@@ -92,18 +100,24 @@
     </li>
 
     <li>
-      <label for="nb_image_line"><strong>{lang:Number of images per row}</strong></label>
-      <input type="text" size="3" maxlength="2" name="nb_image_line" value="{default.NB_IMAGE_LINE}" />
+      <span class="property">
+        <label for="nb_image_line">{lang:Number of images per row}</label>
+      </span>
+      <input type="text" size="3" maxlength="2" id="nb_image_line" name="nb_image_line" value="{default.NB_IMAGE_LINE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:Number of rows per page}</strong></label>
-      <input type="text" size="3" maxlength="2" name="nb_line_page" value="{default.NB_ROW_PAGE}" />
+      <span class="property">
+        <label for="nb_line_page">{lang:Number of rows per page}</label>
+      </span>
+      <input type="text" size="3" maxlength="2" id="nb_line_page" name="nb_line_page" value="{default.NB_ROW_PAGE}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:Interface theme}</strong></label>
-      <select name="default_template" id="default_template">
+      <span class="property">
+        <label for="default_template">{lang:Interface theme}</label>
+      </span>
+      <select name="default_template" id="default_template" onfocus="this.className='focus';" onblur="this.className='nofocus';">
         <!-- BEGIN template_option -->
         <option value="{default.template_option.VALUE}" {default.template_option.SELECTED}>{default.template_option.CONTENT}</option>
         <!-- END template_option -->
@@ -111,30 +125,36 @@
     </li>
 
     <li>
-      <label for="recent_period"><strong>{lang:Recent period}</strong></label>
-      <input type="text" size="3" maxlength="2" name="recent_period" id="recent_period" value="{default.CONF_RECENT}" />
+      <span class="property">
+        <label for="recent_period">{lang:Recent period}</label>
+      </span>
+      <input type="text" size="3" maxlength="2" name="recent_period" id="recent_period" value="{default.CONF_RECENT}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:Expand all categories}</strong></label>
-      <input type="radio" class="radio" name="auto_expand" value="true" {default.EXPAND_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="auto_expand" value="false" {default.EXPAND_NO} />{lang:No}
+      <span class="property">{lang:Expand all categories}</span>
+      <label><input type="radio" class="radio" name="auto_expand" value="true" {default.EXPAND_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="auto_expand" value="false" {default.EXPAND_NO} />{lang:No}</label>
     </li>
 
     <li>
-      <label><strong>{lang:Show number of comments}</strong></label>
-      <input type="radio" class="radio" name="show_nb_comments" value="true" {default.SHOW_COMMENTS_YES} />{lang:Yes}
-      <input type="radio" class="radio" name="show_nb_comments" value="false" {default.SHOW_COMMENTS_NO} />{lang:No}
+      <span class="property">{lang:Show number of comments}</span>
+      <label><input type="radio" class="radio" name="show_nb_comments" value="true" {default.SHOW_COMMENTS_YES} />{lang:Yes}</label>
+      <label><input type="radio" class="radio" name="show_nb_comments" value="false" {default.SHOW_COMMENTS_NO} />{lang:No}</label>
     </li>
 
     <li>
-      <label><strong>{lang:Maximum width of the pictures}</strong></label>
-      <input type="text" size="4" maxlength="4" name="default_maxwidth" value="{default.MAXWIDTH}" />
+      <span class="property">
+        <label for="default_maxwidth">{lang:Maximum width of the pictures}</label>
+      </span>
+      <input type="text" size="4" maxlength="4" id="default_maxwidth" name="default_maxwidth" value="{default.MAXWIDTH}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
 
     <li>
-      <label><strong>{lang:Maximum height of the pictures}</strong></label>
-      <input type="text" size="4" maxlength="4" name="default_maxheight" value="{default.MAXHEIGHT}" />
+      <span class="property">
+        <label for="default_maxheight">{lang:Maximum height of the pictures}</label>
+      </span>
+      <input type="text" size="4" maxlength="4" id="default_maxheight" name="default_maxheight" value="{default.MAXHEIGHT}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
     </li>
   </ul>
 <!-- END default -->
diff --git a/template/yoga/admin/group_list.tpl b/template/yoga/admin/group_list.tpl
index 389bc1071..7b7dd67eb 100644
--- a/template/yoga/admin/group_list.tpl
+++ b/template/yoga/admin/group_list.tpl
@@ -4,8 +4,15 @@
 <form method="post" name="add_user" action="{F_ADD_ACTION}" class="properties">
   <fieldset>
     <legend>{lang:Add group}</legend>
-    <label>{lang:Group name}</label><input type="text" name="groupname" maxlength="50" size="20" />
-    <p><input type="submit" name="submit_add" value="{lang:Add}" {TAG_INPUT_ENABLED}/></p>
+
+    <span class="property">
+      <label for="groupname">{lang:Group name}</label>
+    </span>
+    <input type="text" id="groupname" name="groupname" maxlength="50" size="20" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
+
+    <p>
+      <input type="submit" name="submit_add" value="{lang:Add}" {TAG_INPUT_ENABLED}/>
+    </p>
   </fieldset>
 </form>
 
diff --git a/template/yoga/admin/thumbnail.tpl b/template/yoga/admin/thumbnail.tpl
index cd461be59..cf5345d43 100644
--- a/template/yoga/admin/thumbnail.tpl
+++ b/template/yoga/admin/thumbnail.tpl
@@ -65,27 +65,35 @@
 
     <ul>
       <li>
-        <label><strong>{L_GD}</strong></label>
-	<input type="radio" name="gd" value="2" {params.GD2_CHECKED} />2.x
-	<input type="radio" name="gd" value="1" {params.GD1_CHECKED} />1.x
+        <span class="property">{L_GD}</span>
+	<label>
+          <input type="radio" name="gd" value="2" {params.GD2_CHECKED} />2.x
+        </label>
+        <label>
+          <input type="radio" name="gd" value="1" {params.GD1_CHECKED} />1.x
+        </label>
       </li>
 
       <li>
-        <label><strong>{lang:maximum width}</strong></label>
-	<input type="text" name="width" value="{params.WIDTH_TN}"/>
+        <span class="property">
+          <label for="width">{lang:maximum width}</label>
+        </span>
+	<input type="text" id="width" name="width" value="{params.WIDTH_TN}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
       </li>
 
       <li>
-        <label><strong>{lang:maximum height}</strong></label>
-	<input type="text" name="height" value="{params.HEIGHT_TN}"/>
+        <span class="property">
+          <label for="height">{lang:maximum height}</label>
+        </span>
+	<input type="text" id="height" name="height" value="{params.HEIGHT_TN}" onfocus="this.className='focus';" onblur="this.className='nofocus';" />
       </li>
 
       <li>
-        <label><strong>{lang:Number of thumbnails to create}</strong></label>
-	<input type="radio" name="n" value="5"   {params.n_5_CHECKED} /> 5
-	<input type="radio" name="n" value="10"  {params.n_10_CHECKED} /> 10
-	<input type="radio" name="n" value="20"  {params.n_20_CHECKED} /> 20
-	<input type="radio" name="n" value="all" {params.n_all_CHECKED} /> {L_ALL}
+        <span class="property">{lang:Number of thumbnails to create}</span>
+	<label><input type="radio" name="n" value="5"   {params.n_5_CHECKED} /> 5</label>
+	<label><input type="radio" name="n" value="10"  {params.n_10_CHECKED} /> 10</label>
+	<label><input type="radio" name="n" value="20"  {params.n_20_CHECKED} /> 20</label>
+	<label><input type="radio" name="n" value="all" {params.n_all_CHECKED} /> {L_ALL}</label>
       </li>
     </ul>
   </fieldset>