feature 2559: minor redesign on configuration screens

* hide "rate_anonymous" when "rate" is deactivated
* hide "email_admin_on_new_user" when "allow_user_registration" is deactivated
* move history settings on main tab
* turn the 3 lines for history into a single line with 3 checkboxes
* for comments, turn the "notify admin" settings into a single line with 4 checkboxes

TODO: remove obsolete language keys


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

1 files changed, 183 insertions, 109 deletions

diff --git a/admin/themes/default/template/configuration.tpl b/admin/themes/default/template/configuration.tpl
index ea4e32fab..f880bea05 100644
--- a/admin/themes/default/template/configuration.tpl
+++ b/admin/themes/default/template/configuration.tpl
@@ -14,78 +14,106 @@
   <legend></legend>
   <ul>
     <li>
-      <span class="property">
+      
         <label for="gallery_title">{'Gallery title'|@translate}</label>
-      </span>
+      <br>
       <input type="text" maxlength="255" size="50" name="gallery_title" id="gallery_title" value="{$main.CONF_GALLERY_TITLE}">
     </li>
 
     <li>
-      <span class="property">
+      
         <label for="page_banner">{'Page banner'|@translate}</label>
-      </span>
+      <br>
       <textarea rows="5" cols="50" class="description" name="page_banner" id="page_banner">{$main.CONF_PAGE_BANNER}</textarea>
     </li>
-  </ul>
-</fieldset>
 
-<fieldset id="mainConfCheck">
-  <legend></legend>
-  <ul>
     <li>
       <label>
-        <span class="property">{'Allow rating'|@translate}</span>
         <input type="checkbox" name="rate" {if ($main.rate)}checked="checked"{/if}>
+        {'Allow rating'|@translate}
       </label>
     </li>
 
-    <li>
+    <li id="rate_anonymous">
       <label>
-        <span class="property">{'Rating by guests'|@translate}</span>
         <input type="checkbox" name="rate_anonymous" {if ($main.rate_anonymous)}checked="checked"{/if}>
+        {'Rating by guests'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Allow user registration'|@translate}</span>
         <input type="checkbox" name="allow_user_registration" {if ($main.allow_user_registration)}checked="checked"{/if}>
+        {'Allow user registration'|@translate}
       </label>
     </li>
 
-    <li>
+    <li id="email_admin_on_new_user">
       <label>
-        <span class="property">{'Allow user customization'|@translate}</span>
-        <input type="checkbox" name="allow_user_customization" {if ($main.allow_user_customization)}checked="checked"{/if}>
+        <input type="checkbox" name="email_admin_on_new_user" {if ($main.email_admin_on_new_user)}checked="checked"{/if}>
+        {'Email admins when a new user registers'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Mail address is obligatory for all users'|@translate}</span>
-        <input type="checkbox" name="obligatory_user_mail_address" {if ($main.obligatory_user_mail_address)}checked="checked"{/if}>
+        <input type="checkbox" name="allow_user_customization" {if ($main.allow_user_customization)}checked="checked"{/if}>
+        {'Allow user customization'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Email admins when a new user registers'|@translate}</span>
-        <input type="checkbox" name="email_admin_on_new_user" {if ($main.email_admin_on_new_user)}checked="checked"{/if}>
+        <input type="checkbox" name="obligatory_user_mail_address" {if ($main.obligatory_user_mail_address)}checked="checked"{/if}>
+        {'Mail address is obligatory for all users'|@translate}
       </label>
     </li>
 
     <li>
-      &nbsp;
-      <span class="property">
-        {'Week starts on'|@translate}
-        {html_options name="week_starts_on" options=$main.week_starts_on_options selected=$main.week_starts_on_options_selected}
-      </span>
+      <label>{'Week starts on'|@translate}
+      {html_options name="week_starts_on" options=$main.week_starts_on_options selected=$main.week_starts_on_options_selected}</label>
     </li>
     
+{footer_script}{literal}
+jQuery(document).ready(function(){
+  /* rate_anonymous visible only if rate is permitted */
+  if (jQuery('input[name="rate"]').is(':checked')) {
+    jQuery('#rate_anonymous').show();
+  }
+  else {
+    jQuery('#rate_anonymous').hide();
+  }
+
+  jQuery('input[name="rate"]').change(function(){
+    if ($(this).is(':checked')) {
+      jQuery('#rate_anonymous').show();
+    }
+    else {
+      jQuery('#rate_anonymous').hide();
+    }
+  });
+
+  /* email_admin_on_new_user checkbox only if allow_user_registration */
+  if (jQuery('input[name="allow_user_registration"]').is(':checked')) {
+    jQuery('#email_admin_on_new_user').show();
+  }
+  else {
+    jQuery('#email_admin_on_new_user').hide();
+  }
+
+  jQuery('input[name="allow_user_registration"]').change(function(){
+    if ($(this).is(':checked')) {
+      jQuery('#email_admin_on_new_user').show();
+    }
+    else {
+      jQuery('#email_admin_on_new_user').hide();
+    }
+  });
+});
+{/literal}{/footer_script}
+
     <li>
-      &nbsp;
-      <span class="property">
-        {'Default photos order'|@translate}
+        <label>{'Default photos order'|@translate}</label>
         
         {foreach from=$main.order_by item=order}
         <span class="filter {if $ORDER_BY_IS_CUSTOM}transparent{/if}">          
@@ -104,7 +132,6 @@
         {else}
           <span class="order_by_is_custom">{'You can\'t define a default photo order because you have a custom setting in your local configuration.'|@translate}</span>
         {/if}
-      </span>
     </li>
     
 {if !$ORDER_BY_IS_CUSTOM}
@@ -147,25 +174,26 @@ jQuery(document).ready(function () {
 {/literal}
 {/footer_script}
 {/if}
-  </ul>
-</fieldset>
-{/if}
 
-{if isset($history)}
-<fieldset id="historyConf">
-  <legend></legend>
-  <ul>
-      <li>
-        <label><span class="property">{'Save page visits by guests'|@translate}</span><input type="checkbox" name="history_guest" {if ($history.history_guest)}checked="checked"{/if}></label>
-      </li>
+    <li>
+      <strong>{'Save visits in history for'|@translate}</strong>
 
-      <li>
-        <label><span class="property">{'Save page visits by users'|@translate}</span><input type="checkbox" name="log" {if ($history.log)}checked="checked"{/if}></label>
-      </li>
+      <label>
+        <input type="checkbox" name="history_guest" {if ($main.history_guest)}checked="checked"{/if}>
+        {'simple visitors'|@translate}
+      </label>
 
-      <li>
-        <label><span class="property">{'Save page visits by administrators'|@translate}</span><input type="checkbox" name="history_admin" {if ($history.history_admin)}checked="checked"{/if}></label>
-      </li>
+      <label>
+        <input type="checkbox" name="log" {if ($main.log)}checked="checked"{/if}>
+        {'registered users'|@translate}
+      </label>
+
+      <label>
+        <input type="checkbox" name="history_admin" {if ($main.history_admin)}checked="checked"{/if}>
+        {'administrators'|@translate}
+      </label>
+
+    </li>
   </ul>
 </fieldset>
 {/if}
@@ -176,8 +204,8 @@ jQuery(document).ready(function () {
   <ul>
     <li>
       <label>
-        <span class="property">{'Activate comments'|@translate}</span>
         <input type="checkbox" name="activate_comments" id="activate_comments"{if ($comments.activate_comments)}checked="checked"{/if}>
+        {'Activate comments'|@translate}
       </label>
     </li>
   </ul>
@@ -185,71 +213,66 @@ jQuery(document).ready(function () {
   <ul id="comments_param_warp"{if not ($comments.activate_comments)} style="display:none;"{/if}>
     <li>
       <label>
-        <span class="property">{'Comments for all'|@translate}</span>
         <input type="checkbox" name="comments_forall" {if ($comments.comments_forall)}checked="checked"{/if}>
+        {'Comments for all'|@translate}
       </label>
     </li>
 
     <li>
-      <span class="property">
-        <label for="nb_comment_page">{'Number of comments per page'|@translate}</label>
-      </span>
-      <input type="text" size="3" maxlength="4" name="nb_comment_page" id="nb_comment_page" value="{$comments.NB_COMMENTS_PAGE}">
-    </li>
-    
-    <li>
-      <span class="property">{'Default comments order'|@translate}</span>
-      <select name="comments_order">
-        {html_options options=$comments.comments_order_options selected=$comments.comments_order}
-      </select>
-    </li>
-
-    <li>
       <label>
-        <span class="property">{'Validation'|@translate}</span>
-        <input type="checkbox" name="comments_validation" {if ($comments.comments_validation)}checked="checked"{/if}>
+        {'Number of comments per page'|@translate}
+        <input type="text" size="3" maxlength="4" name="nb_comment_page" id="nb_comment_page" value="{$comments.NB_COMMENTS_PAGE}">
       </label>
     </li>
-
+    
     <li>
       <label>
-        <span class="property">{'Email admins when a valid comment is entered'|@translate}</span>
-        <input type="checkbox" name="email_admin_on_comment" {if ($comments.email_admin_on_comment)}checked="checked"{/if}>
+        {'Default comments order'|@translate}
+        <select name="comments_order">
+          {html_options options=$comments.comments_order_options selected=$comments.comments_order}
+        </select>
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Email admins when a comment requires validation'|@translate}</span>
-        <input type="checkbox" name="email_admin_on_comment_validation" {if ($comments.email_admin_on_comment_validation)}checked="checked"{/if}>
+        <input type="checkbox" name="comments_validation" {if ($comments.comments_validation)}checked="checked"{/if}>
+        {'Validation'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Allow users to edit their own comments'|@translate}</span>
         <input type="checkbox" name="user_can_edit_comment" {if ($comments.user_can_edit_comment)}checked="checked"{/if}>
+        {'Allow users to edit their own comments'|@translate}
       </label>
     </li>
     <li>
       <label>
-        <span class="property">{'Allow users to delete their own comments'|@translate}</span>
         <input type="checkbox" name="user_can_delete_comment" {if ($comments.user_can_delete_comment)}checked="checked"{/if}>
+        {'Allow users to delete their own comments'|@translate}
       </label>
     </li>
+
     <li>
-      <label>
-        <span class="property">{'Email administrators when a comment is modified'|@translate}</span>
-        <input type="checkbox" name="email_admin_on_comment_edition" {if ($comments.email_admin_on_comment_edition)}checked="checked"{/if}>
+      <strong>{'Notify administrators when a comment is'|@translate}</strong>
+
+      <label id="email_admin_on_comment_validation">
+        <input type="checkbox" name="email_admin_on_comment_validation" {if ($comments.email_admin_on_comment_validation)}checked="checked"{/if}> {'pending validation'|@translate}
       </label>
-    </li>
-    <li>
+
       <label>
-        <span class="property">{'Email administrators when a comment is deleted'|@translate}</span>
-        <input type="checkbox" name="email_admin_on_comment_deletion" {if ($comments.email_admin_on_comment_deletion)}checked="checked"{/if}>
+        <input type="checkbox" name="email_admin_on_comment" {if ($comments.email_admin_on_comment)}checked="checked"{/if}> {'added'|@translate}
       </label>
-    </li>
 
+      <label id="email_admin_on_comment_edition">
+        <input type="checkbox" name="email_admin_on_comment_edition" {if ($comments.email_admin_on_comment_edition)}checked="checked"{/if}> {'modified'|@translate}
+      </label>
+
+      <label id="email_admin_on_comment_deletion">
+        <input type="checkbox" name="email_admin_on_comment_deletion" {if ($comments.email_admin_on_comment_deletion)}checked="checked"{/if}> {'deleted'|@translate}
+      </label>
+    </li>
   </ul>
 </fieldset>
 {footer_script}{literal}
@@ -261,12 +284,61 @@ jQuery(document).ready(function(){
       jQuery("#comments_param_warp").hide();
     }
   });
+
+  /* notify on validation checkbox */
+  if (jQuery('input[name="comments_validation"]').is(':checked')) {
+    jQuery('#email_admin_on_comment_validation').show();
+  }
+  else {
+    jQuery('#email_admin_on_comment_validation').hide();
+  }
+
+  jQuery('input[name="comments_validation"]').change(function(){
+    if ($(this).is(':checked')) {
+      jQuery('#email_admin_on_comment_validation').show();
+    }
+    else {
+      jQuery('#email_admin_on_comment_validation').hide();
+    }
+  });
+
+  /* notify on edition checkbox */
+  if (jQuery('input[name="user_can_edit_comment"]').is(':checked')) {
+    jQuery('#email_admin_on_comment_edition').show();
+  }
+  else {
+    jQuery('#email_admin_on_comment_edition').hide();
+  }
+
+  jQuery('input[name="user_can_edit_comment"]').change(function(){
+    if ($(this).is(':checked')) {
+      jQuery('#email_admin_on_comment_edition').show();
+    }
+    else {
+      jQuery('#email_admin_on_comment_edition').hide();
+    }
+  });
+  
+  /* notify on deletion checkbox */
+  if (jQuery('input[name="user_can_delete_comment"]').is(':checked')) {
+    jQuery('#email_admin_on_comment_deletion').show();
+  }
+  else {
+    jQuery('#email_admin_on_comment_deletion').hide();
+  }
+
+  jQuery('input[name="user_can_delete_comment"]').change(function(){
+    if ($(this).is(':checked')) {
+      jQuery('#email_admin_on_comment_deletion').show();
+    }
+    else {
+      jQuery('#email_admin_on_comment_deletion').hide();
+    }
+  });
 });
 {/literal}{/footer_script}
 {/if}
 
-</div> <!-- configContent -->
-
 {if isset($sizes)}
 
 {footer_script}{literal}
@@ -313,60 +385,56 @@ jQuery(document).ready(function(){
 </fieldset>
 {/if}
 
-{if isset($default)}
-{$PROFILE_CONTENT}
-{/if}
-
 {if isset($display)}
 <fieldset id="indexDisplayConf">
   <legend>{'Main Page'|@translate}</legend>
   <ul>
     <li>
       <label>
-        <span class="property">{'display only recently posted photos'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}</span>
         <input type="checkbox" name="menubar_filter_icon" {if ($display.menubar_filter_icon)}checked="checked"{/if}>
+        {'display only recently posted photos'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}
       </label>
     </li>    
     
     <li>
       <label>
-        <span class="property">{'Activate icon "new" next to albums and pictures'|@translate}</span>
         <input type="checkbox" name="index_new_icon" {if ($display.index_new_icon)}checked="checked"{/if}>
+        {'Activate icon "new" next to albums and pictures'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Sort order'|@translate|@string_format:$pwg->l10n('Activate icon "%s"')}</span>
         <input type="checkbox" name="index_sort_order_input" {if ($display.index_sort_order_input)}checked="checked"{/if}>
+        {'Sort order'|@translate|@string_format:$pwg->l10n('Activate icon "%s"')}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'display all photos in all sub-albums'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}</span>
         <input type="checkbox" name="index_flat_icon" {if ($display.index_flat_icon)}checked="checked"{/if}>
+        {'display all photos in all sub-albums'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'display a calendar by posted date'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}</span>
         <input type="checkbox" name="index_posted_date_icon" {if ($display.index_posted_date_icon)}checked="checked"{/if}>
+        {'display a calendar by posted date'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'display a calendar by creation date'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}</span>
         <input type="checkbox" name="index_created_date_icon" {if ($display.index_created_date_icon)}checked="checked"{/if}>
+        {'display a calendar by creation date'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'slideshow'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}</span>
         <input type="checkbox" name="index_slideshow_icon" {if ($display.index_slideshow_icon)}checked="checked"{/if}>
+        {'slideshow'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}
       </label>
     </li>
   </ul>
@@ -377,50 +445,50 @@ jQuery(document).ready(function(){
   <ul>
     <li>
       <label>
-        <span class="property">{'slideshow'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}</span>
         <input type="checkbox" name="picture_slideshow_icon" {if ($display.picture_slideshow_icon)}checked="checked"{/if}>
+        {'slideshow'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Show file metadata'|@translate|@string_format:$pwg->l10n('Activate icon "%s"')}</span>
         <input type="checkbox" name="picture_metadata_icon" {if ($display.picture_metadata_icon)}checked="checked"{/if}>
+        {'Show file metadata'|@translate|@string_format:$pwg->l10n('Activate icon "%s"')}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Download this file'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}</span>
         <input type="checkbox" name="picture_download_icon" {if ($display.picture_download_icon)}checked="checked"{/if}>
+        {'Download this file'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'add this photo to your favorites'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}</span>
         <input type="checkbox" name="picture_favorite_icon" {if ($display.picture_favorite_icon)}checked="checked"{/if}>
+        {'add this photo to your favorites'|@translate|@ucfirst|@string_format:$pwg->l10n('Activate icon "%s"')}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Activate Navigation Bar'|@translate}</span>
         <input type="checkbox" name="picture_navigation_icons" {if ($display.picture_navigation_icons)}checked="checked"{/if}>
+        {'Activate Navigation Bar'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Activate Navigation Thumbnails'|@translate}</span>
         <input type="checkbox" name="picture_navigation_thumb" {if ($display.picture_navigation_thumb)}checked="checked"{/if}>
+        {'Activate Navigation Thumbnails'|@translate}
       </label>
     </li>
     
     <li>
       <label>
-        <span class="property">{'Show menubar'|@translate}</span>
         <input type="checkbox" name="picture_menu" {if ($display.picture_menu)}checked="checked"{/if}>
+        {'Show menubar'|@translate}
       </label>
     </li>
   </ul>
@@ -431,78 +499,78 @@ jQuery(document).ready(function(){
   <ul>
     <li>
       <label>
-        <span class="property">{'Author'|@translate}</span>
         <input type="checkbox" name="picture_informations[author]" {if ($display.picture_informations.author)}checked="checked"{/if}>
+        {'Author'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Created on'|@translate}</span>
         <input type="checkbox" name="picture_informations[created_on]" {if ($display.picture_informations.created_on)}checked="checked"{/if}>
+        {'Created on'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Posted on'|@translate}</span>
         <input type="checkbox" name="picture_informations[posted_on]" {if ($display.picture_informations.posted_on)}checked="checked"{/if}>
+        {'Posted on'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Dimensions'|@translate}</span>
         <input type="checkbox" name="picture_informations[dimensions]" {if ($display.picture_informations.dimensions)}checked="checked"{/if}>
+        {'Dimensions'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'File'|@translate}</span>
         <input type="checkbox" name="picture_informations[file]" {if ($display.picture_informations.file)}checked="checked"{/if}>
+        {'File'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Filesize'|@translate}</span>
         <input type="checkbox" name="picture_informations[filesize]" {if ($display.picture_informations.filesize)}checked="checked"{/if}>
+        {'Filesize'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Tags'|@translate}</span>
         <input type="checkbox" name="picture_informations[tags]" {if ($display.picture_informations.tags)}checked="checked"{/if}>
+        {'Tags'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Albums'|@translate}</span>
         <input type="checkbox" name="picture_informations[categories]" {if ($display.picture_informations.categories)}checked="checked"{/if}>
+        {'Albums'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Visits'|@translate}</span>
         <input type="checkbox" name="picture_informations[visits]" {if ($display.picture_informations.visits)}checked="checked"{/if}>
+        {'Visits'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Rating score'|@translate}</span>
         <input type="checkbox" name="picture_informations[rating_score]" {if ($display.picture_informations.rating_score)}checked="checked"{/if}>
+        {'Rating score'|@translate}
       </label>
     </li>
 
     <li>
       <label>
-        <span class="property">{'Who can see this photo?'|@translate} ({'available for administrators only'|@translate})</span>
         <input type="checkbox" name="picture_informations[privacy_level]" {if ($display.picture_informations.privacy_level)}checked="checked"{/if}>
+        {'Who can see this photo?'|@translate} ({'available for administrators only'|@translate})
       </label>
     </li>
   </ul>
@@ -516,3 +584,9 @@ jQuery(document).ready(function(){
   </p>
 </form>
 {/if}
+
+</div> <!-- configContent -->
+
+{if isset($default)}
+{$PROFILE_CONTENT}
+{/if}