Minor change on formats tab

* Deleting translation keys from en_GB to en_UK
* Adding a confirm popin on the format deletion
* Minor design changes

admin/picture_formats.php

@@ -47,7 +47,7 @@ foreach ($formats as &$format)
     $format['label'] = $lang[$lang_key];
   }
   
-  $format['filesize'] = sprintf('%.1fMB', $format['filesize']/1024);
+  $format['filesize'] = round($format['filesize']/1024, 2);
 }
 
 $template->assign(array(

admin/themes/default/js/picture_formats.js

@@ -11,14 +11,35 @@ $('.format-card').each((i, node) => {
     let card = $(node)
     let button = card.find(".format-delete")
     button.click(() => {
-        console.log(card.data('id'));
+        $.confirm({
-        button.find('i').attr("class", "icon-spin6 animate-spin")
+            title: str_confirm_delete_format.replace("%s",card.find('.format-card-ext span').html()),
+            content: "",
+            buttons: {
+              confirm: {
+                text: str_confirm_msg,
+                btnClass: 'btn-red',
+                action: function () {
+                    deleteFormat(card)
+                },
+              },
+              cancel: {
+                text: str_cancel_msg
+              }
+            },
+            ...jConfirm_confirm_options
+          })
+        
+    })
+})
+
+function deleteFormat(card) {
+    card.find('.format-delete i').attr("class", "icon-spin6 animate-spin")
     $.ajax({
         url: "ws.php?format=json&method=pwg.images.formats.delete",
         type: "POST",
         data: {
             pwg_token : pwg_token,
-                format_id: card.data('id'),
+            format_id: card.data("id"),
         },
         success: function (raw_data) {
             card.fadeOut("slow", () => {
@@ -31,5 +52,4 @@ $('.format-card').each((i, node) => {
             console.log(message);
         }
     })
-    })
+}
-})

admin/themes/default/template/picture_formats.tpl

@@ -1,13 +1,19 @@
 {combine_css path="admin/themes/default/fontello/css/animation.css" order=10} {* order 10 is required, see issue 1080 *}
 {combine_script id='picture_formats' load='footer' path='admin/themes/default/js/picture_formats.js'}
+{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"}
+{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
 
 <script>
     const nbFormats = {count($FORMATS)}
     const pwg_token = "{$PWG_TOKEN}"
+    const str_confirm_delete_format = "{'Delete %s format ?'|@translate}"
+    const str_confirm_msg = '{"Yes, I am sure"|@translate}';
+    const str_cancel_msg = "{"No, I have changed my mind"|@translate}";
 </script>
 
 <div class="formats-header">
-    <a class="head-button-1 icon-plus-circled" href="{$ADD_FORMATS_URL}">{"Add formats"|@translate}</a>
+    <a class="{if (count($FORMATS) != 0)}head-button-1{else}head-button-2{/if} icon-plus-circled" href="{$ADD_FORMATS_URL}">{"Add formats"|@translate}</a>
 </div>
 <div class="formats-content">
     <div class="no-formats" {if (count($FORMATS) != 0)}style="display:none"{/if}>
@@ -17,7 +23,7 @@
     <div class="formats-list" {if (count($FORMATS) == 0)}style="display:none"{/if}>
         {foreach from=$FORMATS item=$format}
             <div class="format-card" data-id="{$format["format_id"]}" style="background-image: url('{$IMG_SQUARE_SRC}')">
-                <span class="format-card-size">{$format["filesize"]}</span>
+                <span class="format-card-size">{'%s MB'|@translate:$format["filesize"]}</span>
                 <div class="format-card-ext"><span>{$format["label"]}</span></div>
                 <div class="format-card-actions">
                     <a href="{$format["download_url"]}" rel="nofollow"> <i class="icon-download"></i> </a>

admin/themes/default/theme.css

@@ -4022,7 +4022,7 @@ a#showPermissions:hover {text-decoration: none;}
 }
 
 .formats-content {
-  margin: 10px 30px;
+  margin: 25px 30px;
 }
 
 .formats-list {
@@ -4047,7 +4047,7 @@ a#showPermissions:hover {text-decoration: none;}
   position: absolute;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.7);
 }
 
 .format-card-ext {

language/en_GB/admin.lang.php

@@ -233,14 +233,3 @@ $lang['%d users deleted'] = '%d users deleted';
 $lang['%d users were not updated.'] = '%d users not updated.';
 $lang['%d users were updated.'] = '%d users updated.';
 $lang['%d waiting for validation'] = '%d waiting for validation';
-$lang['Upload Formats'] = 'Upload Formats';
-$lang['Add formats'] = 'Add formats';
-$lang['No format for this picture'] = 'No format for this picture';
-$lang['Add another set of formats'] = 'Add another set of formats';
-$lang['%d formats uploaded for %d photos'] = '%d formats uploaded for %d photos';
-$lang['Error when trying to detect formats'] = 'Error when trying to detect formats';
-$lang['There is multiple image in the database with the following names : %s.'] = 'There is multiple image in the database with the following names : %s.';
-$lang['No picture found with the following name : %s.'] = 'No picture found with the following name : %s.';
-$lang['and %d more'] = 'and %d more';
-$lang['Picture to associate formats with'] = 'Picture to associate formats with';
-$lang['The original picture will be detected with the filename (without extension).'] = 'The original picture will be detected with the filename (without extension).';

language/en_UK/admin.lang.php

@@ -1304,4 +1304,16 @@ $lang['Discover'] = 'Discover';
 $lang['Latest Piwigo news'] = 'Latest Piwigo news';
 $lang['Understood, do not show again'] = 'Understood, do not show again';
 $lang['%s pixels, %.2f MB'] = '%s pixels, %.2f MB';
+$lang['Upload Formats'] = 'Upload Formats';
+$lang['Add formats'] = 'Add formats';
+$lang['No format for this picture'] = 'No format for this picture';
+$lang['Add another set of formats'] = 'Add another set of formats';
+$lang['%d formats uploaded for %d photos'] = '%d formats uploaded for %d photos';
+$lang['Error when trying to detect formats'] = 'Error when trying to detect formats';
+$lang['There is multiple image in the database with the following names : %s.'] = 'There is multiple image in the database with the following names : %s.';
+$lang['No picture found with the following name : %s.'] = 'No picture found with the following name : %s.';
+$lang['and %d more'] = 'and %d more';
+$lang['Picture to associate formats with'] = 'Picture to associate formats with';
+$lang['The original picture will be detected with the filename (without extension).'] = 'The original picture will be detected with the filename (without extension).';
+$lang['Delete %s format ?'] = 'Delete %s format ?';
 // Leave this line empty

language/fr_FR/admin.lang.php

@@ -1312,4 +1312,5 @@ $lang['No picture found with the following name : %s.'] = 'Pas de photos trouvé
 $lang['and %d more'] = 'et %d autre(s)';
 $lang['Picture to associate formats with'] = 'Photo à associer avec les formats';
 $lang['The original picture will be detected with the filename (without extension).'] = 'La photo originale sera détectée en comparant les noms des fichiers (sans extension).';
+$lang['Delete %s format ?'] = 'Supprimer le format %s ?';
 // Leave this line empty