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

1 files changed, 43 insertions, 21 deletions

diff --git a/template/yoga/profile.tpl b/template/yoga/profile.tpl
index 5233e49bb..3cfece113 100644
--- a/template/yoga/profile.tpl
+++ b/template/yoga/profile.tpl
@@ -26,27 +26,35 @@
 
     <ul>
       <li>
-        <label>{lang:Username}</label>
-        <strong>{USERNAME}</strong>
+        <span class="property">{lang:Username}</span>
+        {USERNAME}
       </li>
 
       <li>
-        <label for="mail_address">{lang:Email address}</label>
+        <span class="property">
+          <label for="mail_address">{lang:Email address}</label>
+        </span>
         <input type="text" name="mail_address" id="mail_address" value="{EMAIL}" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="password">{L_CURRENT_PASSWORD}</label>
+        <span class="property">
+          <label for="password">{L_CURRENT_PASSWORD}</label>
+        </span>
         <input type="password" name="password" id="password" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="use_new_pwd">{L_NEW_PASSWORD}</label>
+        <span class="property">
+          <label for="use_new_pwd">{L_NEW_PASSWORD}</label>
+        </span>
         <input type="password" name="use_new_pwd" id="use_new_pwd" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="passwordConf">{L_CONFIRM_PASSWORD}</label>
+        <span class="property">
+          <label for="passwordConf">{L_CONFIRM_PASSWORD}</label>
+        </span>
         <input type="password" name="passwordConf" id="passwordConf" value="" onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
     </ul>
@@ -57,20 +65,26 @@
 
     <ul>
       <li>
-        <label for="nb_image_line">{L_NB_IMAGE_LINE}</label>
+        <span class="property">
+          <label for="nb_image_line">{L_NB_IMAGE_LINE}</label>
+        </span>
         <input type="text" size="3" maxlength="2" name="nb_image_line" id="nb_image_line" value="{NB_IMAGE_LINE}"
                onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="nb_line_page">{L_NB_ROW_PAGE}</label>
+        <span class="property">
+          <label for="nb_line_page">{L_NB_ROW_PAGE}</label>
+        </span>
         <input type="text" size="3" maxlength="2" name="nb_line_page" id="nb_line_page" value="{NB_ROW_PAGE}"
                onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="template">{L_STYLE_SELECT}</label>
-        <select name="template" id="template"> <!-- FIXME: if onfocus is used, the behaviour becomes weird in Firefox -->
+        <span class="property">
+          <label for="template">{L_STYLE_SELECT}</label>
+        </span>
+        <select name="template" id="template" onfocus="this.className='focus';" onblur="this.className='nofocus';">
           <!-- BEGIN template_option -->
           <option value="{template_option.VALUE}" {template_option.SELECTED}>{template_option.CONTENT}</option>
           <!-- END template_option -->
@@ -78,8 +92,10 @@
       </li>
 
       <li>
-        <label for="language">{L_LANG_SELECT}</label>
-        <select name="language" id="language"> <!-- same FIXME -->
+        <span class="property">
+          <label for="language">{L_LANG_SELECT}</label>
+        </span>
+        <select name="language" id="language" onfocus="this.className='focus';" onblur="this.className='nofocus';">
           <!-- BEGIN language_option -->
           <option value="{language_option.VALUE}" {language_option.SELECTED}>{language_option.CONTENT}</option>
           <!-- END language_option -->
@@ -87,31 +103,37 @@
       </li>
 
       <li>
-        <label for="recent_period">{L_RECENT_PERIOD}</label>
+        <span class="property">
+          <label for="recent_period">{L_RECENT_PERIOD}</label>
+        </span>
         <input type="text" size="3" maxlength="2" name="recent_period" id="recent_period" value="{RECENT_PERIOD}"
                onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label>{L_EXPAND_TREE}</label>
-        <input type="radio" class="radio" name="expand" value="true" {EXPAND_TREE_YES}> {L_YES}
-        <input type="radio" class="radio" name="expand" value="false" {EXPAND_TREE_NO}> {L_NO}
+        <span class="property">{L_EXPAND_TREE}</span>
+        <label><input type="radio" class="radio" name="expand" value="true" {EXPAND_TREE_YES}> {L_YES}</label>
+        <label><input type="radio" class="radio" name="expand" value="false" {EXPAND_TREE_NO}> {L_NO}</label>
       </li>
 
       <li>
-        <label>{L_NB_COMMENTS}</label>
-        <input type="radio" class="radio" name="show_nb_comments" value="true" {NB_COMMENTS_YES}> {L_YES}
-        <input type="radio" class="radio" name="show_nb_comments" value="false" {NB_COMMENTS_NO}> {L_NO}
+        <span class="property">{L_NB_COMMENTS}</span>
+        <label><input type="radio" class="radio" name="show_nb_comments" value="true" {NB_COMMENTS_YES}> {L_YES}</label>
+        <label><input type="radio" class="radio" name="show_nb_comments" value="false" {NB_COMMENTS_NO}> {L_NO}</label>
       </li>
  
       <li>
-        <label for="maxwidth">{L_MAXWIDTH}</label>
+        <span class="property">
+          <label for="maxwidth">{L_MAXWIDTH}</label>
+        </span>
         <input type="text" size="4" maxlength="4" name="maxwidth" id="maxwidth" value="{MAXWIDTH}"
                onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>
 
       <li>
-        <label for="maxheight">{L_MAXHEIGHT}</label>
+        <span class="property">
+          <label for="maxheight">{L_MAXHEIGHT}</label>
+        </span>
         <input type="text" size="4" maxlength="4" name="maxheight" id="maxheight" value="{MAXHEIGHT}"
                onfocus="this.className='focus';" onblur="this.className='nofocus';">
       </li>