issue #2072 Expand and Shrink album description field

admin/themes/default/js/cat_modify.js

@@ -462,6 +462,29 @@ jQuery(document).ready(function() {
       }
     });
   });
+
+  // Modal description
+  let form_unsaved = false;
+  const cat_modify = $('#cat-modify');
+  const desc_modal = $('#desc-modal');
+  const textareas = $('.sync-textarea');
+  $('#desc-zoom-square, #desc-modal-close').on('click', function() {
+    desc_modal.fadeToggle();
+  });
+  textareas.keyup(function() {
+    textareas.val($(this).val());
+  });
+  $(window).on('click', function(e) {
+    if(e.target == desc_modal[0]){
+      desc_modal.fadeToggle();
+    }
+  });
+  $(document).on('keyup', function (e) {
+    // 27 is 'Escape'
+    if(e.keyCode === 27) {
+      desc_modal.fadeToggle();
+    }
+  });
 });
 
 function checkAlbumLock() {

admin/themes/default/template/cat_modify.tpl

@@ -39,7 +39,7 @@ str_album_comment_disallow = '{'Comments disallowed for sub-albums'|@translate}'
 str_root = '{'Root'|@translate}';
 {/footer_script}
 
-<div class="cat-modify">
+<div class="cat-modify" id="cat-modify">
 
   <div class="cat-modify-header">
     <div class="cat-modify-ariane">
@@ -140,8 +140,8 @@ str_root = '{'Root'|@translate}';
       </div>
 
       <div class="cat-modify-input-container">
-        <label for="cat-comment">{'Description'|@translate}</label>
-        <textarea resize="false" rows="5" name="comment" id="cat-comment">{$CAT_COMMENT}</textarea>
+        <label for="cat-comment">{'Description'|@translate} <span id="desc-zoom-square" class="icon-resize-full tiptip" title="{'Expand'|@translate}"></span></label>
+        <textarea class="sync-textarea" resize="false" rows="5" name="comment" id="cat-comment">{$CAT_COMMENT}</textarea>
       </div>
 
       <div class="cat-modify-input-container">
@@ -194,9 +194,23 @@ str_root = '{'Root'|@translate}';
     <span class="buttonLike" id="cat-properties-save"><i class="icon-floppy"></i> {'Save Settings'|@translate}</span>
    </div>
   </div>
+  <div class="desc-modal" id="desc-modal">
+    <div class="desc-modal-content">
+      <div class="desc-modal-header">
+        <p>{'Description'|@translate}</p>
+      </div>
+      <div class="desc-modal-body">
+        <textarea class="sync-textarea" name="comment-modal" id="cat-comment-modal">{$CAT_COMMENT}</textarea>
+        </div>
+      <div class="desc-modal-footer">
+        <p id="desc-modal-close" class="cat-modify-footer-see-out"><span class="icon-resize-small"></span>{'Shrink'|translate}</p>
+      </div>
+    </div>
+  </div>
 </div>
 
 <style>
+
 .toggle-comment-option {
   cursor: pointer;
   position: relative;

admin/themes/default/theme.css

@@ -7109,6 +7109,72 @@ color:#FF7B00;
 #usr-list-registered:hover #icon-usr-list-registered{
   display: block !important;
 }
+/* Cat modify description modal */
+.desc-modal {
+  display: none;
+  position: fixed;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0,0,0,0.4);
+}
+
+.desc-modal-content {
+  position: absolute;
+  border-radius: 10px;
+  background-color: white;
+  margin: auto;
+  width: 75vw;
+  height: 75vh;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  display: grid;
+  grid-template-rows: min-content auto min-content;
+}
+
+.desc-modal-header {
+  font-size: 22px;
+}
+
+.desc-modal-header p {
+  margin: 35px 0;
+}
+
+.desc-modal-body {
+  margin: 0 110px;
+  overflow: auto;
+}
+
+.desc-modal-body textarea {
+    box-sizing: border-box;
+    border: none;
+    resize: none;
+    width: 100%;
+    height: 99%;
+    background-color: #F3F3F3 !important;
+    padding: 20px;
+}
+
+.desc-modal-footer {
+  display: flex;
+  justify-content: end;
+  margin: 20px 0;
+  margin-right: 110px;
+}
+.desc-modal-footer p {
+  cursor: pointer;
+}
+
+.desc-modal-footer span {
+  margin-right: 5px;
+}
+
 
 @media (max-width: 1450px) {
   .promote-text span {

admin/themes/roma/theme.css

@@ -2024,3 +2024,12 @@ ul.jqtree-tree li.jqtree-ghost span.jqtree-line {
 .jqtree-moving .move-cat-container .icon-green{
   opacity:60%!important;
 }
+
+/* Cat modify description modal */
+.desc-modal-content {
+  background-color: #444;
+}
+
+.desc-modal-body textarea {
+  background-color: #333 !important;
+}

language/en_UK/admin.lang.php

@@ -1354,4 +1354,6 @@ $lang['%d files'] = "%d files";
 $lang['Auto-update'] = 'Auto-update';
 $lang['Core'] = 'Core';
 $lang['System Activities'] = 'System Activities';
+$lang['Shrink'] = 'Shrink';
+$lang['Expand'] = 'Expand';
 // Leave this line empty

language/fr_FR/admin.lang.php

@@ -1354,4 +1354,6 @@ $lang['%d files'] = "%d fichiers";
 $lang['Auto-update'] = 'Mise à jour auto';
 $lang['Core'] = 'Noyau';
 $lang['System Activities'] = 'Activités système';
+$lang['Shrink'] = 'Réduire';
+$lang['Expand'] = 'Agrandir';
 // Leave this line empty