Issue #1044 : Picture edition redesign

* Add a larger and responsive image preview
 * Use Jconfirm popin for deletion confirmation
 * Change general actions to icons on the image preview

admin/themes/default/template/picture_modify.tpl

@@ -7,6 +7,9 @@
 {combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
 {combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.{$themeconf.colorscheme}.css"}
 
+{combine_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'}
+{combine_css path="themes/default/js/plugins/jquery-confirm.min.css"}
+
 {footer_script}
 (function(){
 {* <!-- CATEGORIES --> *}
@@ -41,53 +44,86 @@ jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
 jQuery("a.preview-box").colorbox({
 	photo: true
 });
+
+str_are_you_sure = '{'Are you sure?'|translate}';
+str_yes = '{'Yes, delete'|translate}';
+str_no = '{'No, I have changed my mind'|translate}';
+url_delete = '{$U_DELETE}';
+
+{literal}
+$('#action-delete-picture').on('click', function() {
+  $.confirm({
+    title: str_are_you_sure,
+    draggable: false,
+    titleClass: "groupDeleteConfirm",
+    theme: "modern",
+    content: "",
+    animation: "zoom",
+    boxWidth: '30%',
+    useBootstrap: false,
+    type: 'red',
+    animateFromElement: false,
+    backgroundDismiss: true,
+    typeAnimated: false,
+    buttons: {
+        confirm: {
+          text: str_yes,
+          btnClass: 'btn-red',
+          action: function () {
+            window.location.href = url_delete.replaceAll('amp;', '');
+          }
+        },
+        cancel: {
+          text: str_no
+        }
+    }
+  });
+})
+{/literal}
+
 }());
 {/footer_script}
 
 <h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
 
-<form action="{$F_ACTION}" method="post" id="catModify">
+<form action="{$F_ACTION}" method="post" id="pictureModify">
+  <div id='picture-preview'>
+    <div class='picture-preview-actions'>
+      <a class="icon-eye" href="{$U_JUMPTO}" title="{'jump to photo'|@translate}"></a>
+      <a class="icon-download" href="{$U_DOWNLOAD}" title="{'Download'|translate}"></a>
+      <a class="icon-arrows-cw" href="{$U_SYNC}" title="{'Synchronize metadata'|@translate}"</a>
+      <a class="icon-trash" title="{'delete photo'|@translate}" id='action-delete-picture'></a>
+    </div>
+    <a href="{$FILE_SRC}" class="preview-box icon-zoom-in" title="{$TITLE|htmlspecialchars}" style="{if $FORMAT}width{else}height{/if}:35vw">
+      <img src="{$TN_SRC}" alt="{'Thumbnail'|translate}" style="{if $FORMAT}width{else}height{/if}:100%">
+    </a>
+  </div>
+  <div id='picture-content'>
+    <div id='picture-infos'>
+      <div class='picture-infos-category'>
+        <div class='picture-infos-icon'>
+          <span class='icon-picture'></span>
+        </div>
+        <div class='picture-infos-container'>
+          <div class='picture-infos-title'>{$INTRO.file}</div>
+          <div>{$INTRO.size}</div>
+          <div>{$INTRO.formats}</div>
+          <div>{$INTRO.id}</div>
+        </div>
+      </div>
 
-  <fieldset>
-    <legend>{'Informations'|@translate}</legend>
+      <div class='picture-infos-category'>
+        <div class='picture-infos-icon'>
+          <span class='icon-calendar'></span>
+        </div>
+        <div class='picture-infos-container'>
+          <div class='picture-infos-title'>{$INTRO.add_date}</div>
+          <div>{$INTRO.added_by}</div>
+          <div>{$INTRO.stats}</div>
+        </div>
+      </div>
+    </div>
 
-    <table>
-
-      <tr>
-        <td id="albumThumbnail">
-          <a href="{$FILE_SRC}" class="preview-box icon-zoom-in" title="{$TITLE|htmlspecialchars}"><img src="{$TN_SRC}" alt="{'Thumbnail'|translate}"></a>
-        </td>
-        <td id="albumLinks" style="width:400px;vertical-align:top;">
-          <ul style="padding-left:15px;margin:0;">
-            <li>{$INTRO.file}</li>
-            <li>{$INTRO.add_date}</li>
-            <li>{$INTRO.added_by}</li>
-            <li>{$INTRO.size}</li>
-            <li>{$INTRO.formats}</li>
-            <li>{$INTRO.stats}</li>
-            <li>{$INTRO.id}</li>
-          </ul>
-        </td>
-        <td class="photoLinks">
-          <ul>
-          {if isset($U_JUMPTO) }
-            <li><a class="icon-eye" href="{$U_JUMPTO}">{'jump to photo'|@translate} →</a></li>
-          {/if}
-          <li><a class="icon-download" href="{$U_DOWNLOAD}">{'Download'|translate}</a></li>
-          {if !url_is_remote($PATH)}
-            <li><a class="icon-arrows-cw" href="{$U_SYNC}">{'Synchronize metadata'|@translate}</a></li>
-
-            <li><a class="icon-trash" href="{$U_DELETE}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');">{'delete photo'|@translate}</a></li>
-          {/if}
-          </ul>
-        </td>
-      </tr>
-    </table>
-
-  </fieldset>
-
-  <fieldset>
-    <legend>{'Properties'|@translate}</legend>
 
     <p>
       <strong>{'Title'|@translate}</strong>
@@ -105,7 +141,7 @@ jQuery("a.preview-box").colorbox({
       <strong>{'Creation date'|@translate}</strong>
       <br>
       <input type="hidden" name="date_creation" value="{$DATE_CREATION}">
-      <label>
+      <label class="date-input">
         <i class="icon-calendar"></i>
         <input type="text" data-datepicker="date_creation" data-datepicker-unset="date_creation_unset" readonly>
       </label>
@@ -117,7 +153,7 @@ jQuery("a.preview-box").colorbox({
       <br>
       <select data-selectize="categories" data-value="{$associated_albums|@json_encode|escape:html}"
         placeholder="{'Type in a search term'|translate}"
-        data-default="{$STORAGE_ALBUM}" name="associate[]" multiple style="width:600px;"></select>
+        data-default="{$STORAGE_ALBUM}" name="associate[]" multiple style="width:100%;"></select>
     </p>
 
     <p>
@@ -125,7 +161,7 @@ jQuery("a.preview-box").colorbox({
       <br>
       <select data-selectize="categories" data-value="{$represented_albums|@json_encode|escape:html}"
         placeholder="{'Type in a search term'|translate}"
-        name="represent[]" multiple style="width:600px;"></select>
+        name="represent[]" multiple style="width:100%;"></select>
     </p>
 
     <p>
@@ -133,7 +169,7 @@ jQuery("a.preview-box").colorbox({
       <br>
       <select data-selectize="tags" data-value="{$tag_selection|@json_encode|escape:html}"
         placeholder="{'Type in a search term'|translate}"
-        data-create="true" name="tags[]" multiple style="width:600px;"></select>
+        data-create="true" name="tags[]" multiple style="width:100%;"></select>
     </p>
 
     <p>
@@ -150,10 +186,10 @@ jQuery("a.preview-box").colorbox({
       </select>
    </p>
 
-  <p style="margin:40px 0 0 0">
-    <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
-    <input class="submit" type="submit" value="{'Save Settings'|@translate}" name="submit">
-  </p>
-</fieldset>
+    <p>
+      <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
+      <input class="submit" type="submit" value="{'Save Settings'|@translate}" name="submit">
+    </p>
+  </div>
 
 </form>