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
2026-03-28 17:42:57 +01:00 · 2020-06-09 16:25:17 +02:00
parent 5aef3ebbbd
commit 97ef03eead
4 changed files with 206 additions and 62 deletions
--- a/admin/picture_modify.php
+++ b/admin/picture_modify.php
@@ -235,7 +235,7 @@ $template->assign(

    'PATH'=>$row['path'],

-    'TN_SRC' => DerivativeImage::url(IMG_THUMB, $src_image),
+    'TN_SRC' => DerivativeImage::url(IMG_MEDIUM, $src_image),
    'FILE_SRC' => DerivativeImage::url(IMG_LARGE, $src_image),

    'NAME' =>
@@ -246,6 +246,8 @@ $template->assign(

    'DIMENSIONS' => @$row['width'].' * '.@$row['height'],

+    'FORMAT' => ($row['width'] >= $row['height'])? 1:0,//0:horizontal, 1:vertical
+
    'FILESIZE' => @$row['filesize'].' KB',

    'REGISTRATION_DATE' => format_date($row['date_available']),
--- a/admin/themes/default/template/picture_modify.tpl
+++ b/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>
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -1760,26 +1760,118 @@ a#showPermissions:hover {text-decoration: none;}
  border:2px solid #ddd;
 }

-#albumLinks {
-  vertical-align:top;
-  border-left:2px solid #ddd;
-  padding-left:10px;
+#pictureModify {
+  display: flex;
+  margin: 0;
+  justify-content: space-evenly;
 }

-#albumLinks ul, .photoLinks ul {
-  padding-left:0;
+#picture-preview {
+  width: 35vw;
+  position: relative;
+  background-color: #3c3c3c;
+  height: 35vw;
+  flex-shrink: 0;
+  overflow: hidden;
 }

-#albumLinks li, .photoLinks li {
-  list-style:none;
+#picture-preview .preview-box{
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  left: 50%;
 }

-.photoLinks {
-  vertical-align:top;
+
+.picture-preview-actions {
+  position: absolute;
+  padding: 10px;
+  right: 0;
+  top: 0;
+  font-size: 18px;
+  z-index: 100;
 }

-.photoLinks ul {
-  margin:0;
+.picture-preview-actions a {
+  color: #ffffff;
+  padding: 5px;
+}
+
+#picture-content {
+  width: 50%;
+}
+
+#picture-content * {
+  text-align: left;
+}
+
+#picture-content input[type=text], #picture-content textarea {
+  width: 100%;
+  background-color: #f8f8f8;
+  padding: 8px;
+  border-radius: 4px;
+  border-color: #DDD;
+  transition: ease 0.2s;
+}
+
+#picture-content .date-input {
+  position: relative;
+}
+
+#picture-content .date-input input{
+  padding-left: 35px;
+  width: calc(100% - 28px);
+}
+
+#picture-content .date-input i{
+  position: absolute;
+  font-size: 20px;
+  top: 50%;
+  transform: translate(6px, -50%);
+  opacity: 0.6;
+}
+
+#picture-content input:focus {
+  border-color: #888;
+}
+
+#picture-infos {
+  display: flex;
+  justify-content: space-around;
+}
+
+.picture-infos-category {
+  display: flex;
+  border: #EEE solid 2px;
+  padding: 20px;
+  border-radius: 5px;
+  margin: 5px;
+}
+
+.picture-infos-icon {
+  font-size: 34px;
+  margin-right: 20px;
+  display: flex;
+  color: #3c3c3c;
+}
+
+.picture-infos-icon span {
+  margin: auto;
+}
+
+.picture-infos-container {
+  margin: 0;
+}
+
+.picture-infos-container div {
+  margin: 0;
+}
+
+.picture-infos-title {
+  color: #3c3c3c;
+  font-weight: bold;
 }

 /* Album Manager */
@@ -2914,6 +3006,7 @@ a.group_users {
  display:block;
  position:relative;
 }
+
 .preview-box.icon-zoom-in:before {
  opacity:0;
  position:absolute;
--- a/admin/themes/roma/theme.css
+++ b/admin/themes/roma/theme.css
@@ -331,6 +331,19 @@ div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-co
  border-color:#333;
 }

+#picture-content input[type=text], #picture-content textarea {
+  background-color: #444444;
+  border: 1px solid #666;
+}
+
+.picture-infos-title, .picture-infos-icon {
+  color: #c1c1c1;
+}
+
+.picture-infos-category {
+  border-color: #333;
+}
+
 .selectedComment {background-color:#555; color:#fff;}

 .groups .Group-name>p {