feature 2564: redesign on photo administration screen.

* one screen with several tabs (for now: properties + coi)

* double select boxes for album associations and representation have been
  converted to simple multiple select boxes with jQuery Chosen

* more details about the photo in an introduction text


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

2 files changed, 86 insertions, 163 deletions

diff --git a/admin/themes/default/template/picture_coi.tpl b/admin/themes/default/template/picture_coi.tpl
index 8465a5765..76d8ecc11 100644
--- a/admin/themes/default/template/picture_coi.tpl
+++ b/admin/themes/default/template/picture_coi.tpl
@@ -3,10 +3,7 @@
 {/html_head}
 {combine_script id='jquery.jcrop' load='footer' require='jquery' path='themes/default/js/plugins/jquery.Jcrop.min.js'}
 
-<h2>{'Center of interest'|@translate}</h2>
-<div>
-<a href="{$U_EDIT}">{'Edit photo information'|@translate}</a>
-</div>
+<h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
 
 <form method="post">
 
diff --git a/admin/themes/default/template/picture_modify.tpl b/admin/themes/default/template/picture_modify.tpl
index 28e6bfc76..11a0fcdb2 100644
--- a/admin/themes/default/template/picture_modify.tpl
+++ b/admin/themes/default/template/picture_modify.tpl
@@ -2,6 +2,15 @@
 {include file='include/dbselect.inc.tpl'}
 {include file='include/datepicker.inc.tpl'}
 
+{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
+{combine_css path="themes/default/js/plugins/chosen.css"}
+
+{footer_script}{literal}
+jQuery(document).ready(function() {
+  jQuery(".chzn-select").chosen();
+});
+{/literal}{/footer_script}
+
 {combine_script id='jquery.tokeninput' load='async' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'}
 {footer_script require='jquery.tokeninput'}
 jQuery(document).ready(function() {ldelim}
@@ -24,22 +33,9 @@ jQuery(document).ready(function() {ldelim}
 pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
 {/footer_script}
 
-<h2>{'Edit photo information'|@translate}</h2>
+<h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
 
-<img src="{$TN_SRC}" alt="{'Thumbnail'|@translate}" class="Thumbnail">
-
-<ul class="categoryActions">
-  {if isset($U_JUMPTO) }
-  <li><a href="{$U_JUMPTO}" title="{'jump to photo'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_jump-to.png" alt="{'jump to photo'|@translate}"></a></li>
-  {/if}
-  {if !url_is_remote($PATH)}
-  <li><a href="{$U_SYNC}" title="{'Synchronize'|@translate}"><img src="{$themeconf.admin_icon_dir}/sync_metadata.png" alt="{'Synchronize'|@translate}"></a></li>
-
-  <li><a href="{$U_DELETE}" title="{'delete photo'|@translate}"><img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/category_delete.png" alt="{'delete photo'|@translate}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');"></a></li>
-  {/if}
-</ul>
-
-<form action="{$F_ACTION}" method="post" id="properties">
+<form action="{$F_ACTION}" method="post" id="catModify">
 
   <fieldset>
     <legend>{'Informations'|@translate}</legend>
@@ -47,48 +43,27 @@ pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#da
     <table>
 
       <tr>
-        <td><strong>{'Path'|@translate}</strong></td>
-        <td>{$PATH}</td>
-      </tr>
+        <td id="albumThumbnail">
+<img src="{$TN_SRC}" alt="{'Thumbnail'|@translate}" class="Thumbnail">
+        </td>
 
-      <tr>
-        <td><strong>{'Post date'|@translate}</strong></td>
-        <td>{$REGISTRATION_DATE}</td>
-      </tr>
+        <td id="albumLinks">
+<p style="text-align:left">{$INTRO}</p>
 
-      <tr>
-        <td><strong>{'Dimensions'|@translate}</strong></td>
-        <td>{$DIMENSIONS}</td>
-      </tr>
+<ul style="padding-left:15px;">
+{if isset($U_JUMPTO) }
+  <li><a href="{$U_JUMPTO}">{'jump to photo'|@translate} →</a></li>
+{/if}
 
-      <tr>
-        <td><strong>{'Filesize'|@translate}</strong></td>
-        <td>{$FILESIZE}</td>
-      </tr>
+{if !url_is_remote($PATH)}
+  <li><a href="{$U_SYNC}">{'Synchronize metadata'|@translate}</a></li>
 
-      <tr>
-        <td><strong>{'Storage album'|@translate}</strong></td>
-        <td>{$STORAGE_CATEGORY}</td>
-      </tr>
+  <li><a href="{$U_DELETE}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');">{'delete photo'|@translate}</a></li>
+  {/if}
 
-      {if isset($related_categories) }
-      <tr>
-        <td><strong>{'Linked albums'|@translate}</strong></td>
-        <td>
-          <ul>
-            {foreach from=$related_categories item=name}
-            <li>{$name}</li>
-            {/foreach}
-          </ul>
+</ul>
         </td>
       </tr>
-      {/if}
-{if isset($U_COI)}
-      <tr>
-        <td></td>
-        <td><a href="{$U_COI}">{'Not cropped correctly?'|@translate}</a></td>
-      </tr>
-{/if}
     </table>
 
   </fieldset>
@@ -96,129 +71,80 @@ pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#da
   <fieldset>
     <legend>{'Properties'|@translate}</legend>
 
-    <table>
+    <p>
+      <strong>{'Title'|@translate}</strong>
+      <br>
+      <input type="text" class="large" name="name" value="{$NAME}">
+    </p>
 
-      <tr>
-        <td><strong>{'Name'|@translate}</strong></td>
-        <td><input type="text" class="large" name="name" value="{$NAME}"></td>
-      </tr>
+    <p>
+      <strong>{'Author'|@translate}</strong>
+      <br>
+      <input type="text" class="large" name="author" value="{$AUTHOR}">
+    </p>
 
-      <tr>
-        <td><strong>{'Author'|@translate}</strong></td>
-        <td><input type="text" class="large" name="author" value="{$AUTHOR}"></td>
-      </tr>
+    <p>
+      <strong>{'Creation date'|@translate}</strong>
+      <br>
+      <select id="date_creation_day" name="date_creation_day">
+        <option value="0">--</option>
+{section name=day start=1 loop=32}
+        <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY_VALUE}selected="selected"{/if}>{$smarty.section.day.index}</option>
+{/section}
+      </select>
 
-      <tr>
-        <td><strong>{'Creation date'|@translate}</strong></td>
-        <td>
-          <label><input type="radio" name="date_creation_action" value="unset"> {'unset'|@translate}</label>
-          <input type="radio" name="date_creation_action" value="set" id="date_creation_action_set"> {'set to'|@translate}
-          <select id="date_creation_day" name="date_creation_day">
-            <option value="0">--</option>
-            {section name=day start=1 loop=32}
-              <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY_VALUE}selected="selected"{/if}>{$smarty.section.day.index}</option>
-            {/section}
-          </select>
-          <select id="date_creation_month" name="date_creation_month">
-            {html_options options=$month_list selected=$DATE_CREATION_MONTH_VALUE}
-          </select>
-          <input id="date_creation_year"
-                 name="date_creation_year"
-                 type="text"
-                 size="4"
-                 maxlength="4"
-                 value="{$DATE_CREATION_YEAR_VALUE}">
-          <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
-        </td>
-      </tr>
+      <select id="date_creation_month" name="date_creation_month">
+        {html_options options=$month_list selected=$DATE_CREATION_MONTH_VALUE}
+      </select>
 
-      <tr>
-        <td><strong>{'Tags'|@translate}</strong></td>
-        <td>
+      <input id="date_creation_year" name="date_creation_year" type="text" size="4" maxlength="4" value="{$DATE_CREATION_YEAR_VALUE}">
+      <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
+    <a href="#" id="unset_date_creation" style="display:none">unset</a>
+    </p>
+
+    <p>
+      <strong>{'Linked albums'|@translate}</strong>
+      <br>
+      <select data-placeholder="Select albums..." class="chzn-select" multiple style="width:700px;" name="associate[]">
+        {html_options options=$associate_options selected=$associate_options_selected}
+      </select>
+    </p>
+
+    <p>
+      <strong>{'Representation of albums'|@translate}</strong>
+      <br>
+      <select data-placeholder="Select albums..." class="chzn-select" multiple style="width:700px;" name="represent[]">
+        {html_options options=$represent_options selected=$represent_options_selected}
+      </select>
+    </p>
+
+    <p>
+      <strong>{'Tags'|@translate}</strong>
+      <br>
 <select id="tags" name="tags">
 {foreach from=$tag_selection item=tag}
   <option value="{$tag.id}" class="selected">{$tag.name}</option>
 {/foreach}
 </select>
-        </td>
-      </tr>
-
+    </p>
 
-      <tr>
-        <td><strong>{'Description'|@translate}</strong></td>
-        <td><textarea name="description" id="description" class="description">{$DESCRIPTION}</textarea></td>
-      </tr>
+    <p>
+      <strong>{'Description'|@translate}</strong>
+      <br>
+      <textarea name="description" id="description" class="description">{$DESCRIPTION}</textarea>
+    </p>
 
-  <tr>
-    <td><strong>{'Who can see this photo?'|@translate}</strong></td>
-    <td>
+    <p>
+      <strong>{'Who can see this photo?'|@translate}</strong>
+      <br>
       <select name="level" size="1">
         {html_options options=$level_options selected=$level_options_selected}
       </select>
-    </td>
-  </tr>
-
-    </table>
-
-    <p style="text-align:center;">
-      <input class="submit" type="submit" value="{'Submit'|@translate}" name="submit">
-      <input class="submit" type="reset" value="{'Reset'|@translate}" name="reset">
-    </p>
-
-  </fieldset>
-
-</form>
+   </p>
 
-<form id="associations" method="post" action="{$F_ACTION}#associations">
-  <fieldset>
-    <legend>{'Linked albums'|@translate}</legend>
-
-    <table class="doubleSelect">
-      <tr>
-        <td>
-          <h3>{'Associated'|@translate}</h3>
-          <select class="categoryList" name="cat_associated[]" multiple="multiple" size="30">
-            {html_options options=$associated_options}
-          </select>
-          <p><input class="submit" type="submit" value="&raquo;" name="dissociate" style="font-size:15px;"></p>
-        </td>
-
-        <td>
-          <h3>{'Dissociated'|@translate}</h3>
-          <select class="categoryList" name="cat_dissociated[]" multiple="multiple" size="30">
-            {html_options options=$dissociated_options}
-          </select>
-          <p><input class="submit" type="submit" value="&laquo;" name="associate" style="font-size:15px;"></p>
-        </td>
-      </tr>
-    </table>
-
-  </fieldset>
-</form>
+  <p style="margin:40px 0 0 0">
+    <input class="submit" type="submit" value="{'Save Settings'|@translate}" name="submit">
+  </p>
+</fieldset>
 
-<form id="representation" method="post" action="{$F_ACTION}#representation">
-  <fieldset>
-    <legend>{'Representation of albums'|@translate}</legend>
-
-    <table class="doubleSelect">
-      <tr>
-        <td>
-          <h3>{'Represents'|@translate}</h3>
-          <select class="categoryList" name="cat_elected[]" multiple="multiple" size="30">
-            {html_options options=$elected_options}
-          </select>
-          <p><input class="submit" type="submit" value="&raquo;" name="dismiss" style="font-size:15px;"></p>
-        </td>
-
-        <td>
-          <h3>{'Does not represent'|@translate}</h3>
-          <select class="categoryList" name="cat_dismissed[]" multiple="multiple" size="30">
-            {html_options options=$dismissed_options}
-          </select>
-          <p><input class="submit" type="submit" value="&laquo;" name="elect" style="font-size:15px;"></p>
-        </td>
-      </tr>
-    </table>
-
-  </fieldset>
 </form>