Issue #1193 : Design fixes

admin/themes/default/js/tags.js

@@ -1,6 +1,9 @@
 //Get the data
 var dataTags = $('.tag-container').data('tags');
 
+//Initiate Select
+$('#select-100').prop('checked', true)
+
 //Orphan tags
 $('.tag-warning p a').on('click', () => {
   let url = $('.tag-warning p a').data('url');
@@ -407,7 +410,7 @@ function selectionMode(isSelection) {
     $(".not-in-selection-mode").removeClass('hide');
     $(".tag-container").removeClass("selection");
     $(".tag-box").attr("data-selected", '0');
-
+    $('.tag-select-message').slideUp();
     clearSelection();
   }
 }
@@ -527,38 +530,61 @@ $('#CancelMerge').on('click', function() {
 });
 
 $('#selectAll').on('click', function() {
-  selectAll(tagToDisplay());
+  selectAll(tagToDisplay())
+  updateSelectionContent();
   if (selected.length < dataTags.length) {
-    showSelectMessage(str_select_all_tag, function () {
-      selectAll(dataTags);
-    })
+    showSelectMessage(str_selection_done, str_select_all_tag, function() {
+      $('.tag-select-message div').html("");
+      $('.tag-select-message a').html("<i class='icon-spin6 animate-spin'> </i>");
+      setTimeout(() => {
+        selectAll(dataTags).then(() => {
+          updateSelectionContent();
+          showSelectMessage(str_tag_selected.replace(/%d/g, selected.length), str_clear_selection, function() {
+            selectNone();
+            $('.tag-select-message').slideUp();
+          })
+        })
+      }, 5);
+    });
   }
 });
 
 function selectAll(data) {
+  promises = [];
   data.forEach((tag) => {
-    $('.tag-box[data-id='+tag.id+']').attr('data-selected', 1);
-    addSelectedItem(tag.id);
+    promises.push(new Promise((res, rej) => {
+      $('.tag-box[data-id='+tag.id+']').attr('data-selected', 1);
+      addSelectedItem(tag.id);
+      res();
+    }))
   })
-  updateSelectionContent();
+  return Promise.all(promises);
+}
+
+function showSelectMessage(str1, str2, callback) {
+  if (!$('.tag-select-message').is(':visible')) {
+    $('.tag-select-message').slideDown({
+      start: function () {
+        $(this).css({
+          display: "flex"
+        })
+      }
+    });
+  }
+
+  $('.tag-select-message div').html(str1)
+  $('.tag-select-message a').html(str2);
+  $('.tag-select-message a').off('click');
+  $('.tag-select-message a').on('click', callback);
 }
 
 $('#selectNone').on('click', function() {
-  selectNone(tagToDisplay());
-  if (selected.length > 0) {
-    showSelectMessage(str_clear_selection, function () {
-      $('.tag-box[data-selected=1]').attr('data-selected', 0);
-      clearSelection();
-    })
-  }
+  selectNone();
 });
 
-function selectNone(data) {
-  data.forEach((tag) => {
-    $('.tag-box[data-id='+tag.id+']').attr('data-selected', 0);
-    removeSelectedItem(tag.id);
-  });
-  updateSelectionContent();
+function selectNone() {
+  $('.tag-box').attr('data-selected', '0');
+  clearSelection();
 }
 
 $('#selectInvert').on('click', function() {
@@ -579,25 +605,6 @@ function selectInvert(data) {
   updateSelectionContent();
 }
 
-function showSelectMessage(str, callback) {
-  $('.tag-select-message').slideDown({
-    start: function () {
-      $(this).css({
-        display: "flex"
-      })
-    }
-  });
-
-  $('.tag-select-message a').html(str);
-  $('.tag-select-message a').off('click');
-  $('.tag-select-message a').on('click', () => {
-    $('.tag-select-message').slideUp();
-    callback()
-  });
-}
-
-
-
 /*-------
  Actions in selection mode
 -------*/

admin/themes/default/template/tags.tpl

@@ -22,6 +22,8 @@ var str_number_photos = '{'%d photos'}'
 var str_no_photos = '{'no photo'}'
 var str_select_all_tag = '{'Select all tags'|@translate}';
 var str_clear_selection = '{'Clear Selection'|@translate}';
+var str_selection_done = '{'Selection done in this page only'|@translate}';
+var str_tag_selected = '{'<b>%d</b> tag selected'|@translate}';
 {/footer_script}
 
 {combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
@@ -137,7 +139,7 @@ var str_clear_selection = '{'Clear Selection'|@translate}';
 </div>
 
 <div class="tag-select-message">
-  <div>{'Selection done in this page only'|@translate} <a> </a></div>
+  <div></div> <a></a>
 </div>
 
 <div class='tag-container' data-tags='{json_encode($data)}' data-per_page={$per_page}>
@@ -165,14 +167,14 @@ var str_clear_selection = '{'Clear Selection'|@translate}';
   </div>
   <p> {'Tag per page'} </p>
   <div class="tag-pagination-select" tabindex="1">
-    <input name="per-page" type="radio" id="select-25" value="25">
-    <label for="select-25">25</label>
-    <input name="per-page" type="radio" id="select-50" value="50">
-    <label for="select-50">50</label>
     <input name="per-page" type="radio" id="select-100" checked value="100">
     <label for="select-100">100</label>
-    <input name="per-page" type="radio" id="select-200" value="200">
+    <input name="per-page" type="radio" id="select-200" checked='false' value="200">
     <label for="select-200">200</label>
+    <input name="per-page" type="radio" id="select-500" value="500">
+    <label for="select-500">500</label>
+    <input name="per-page" type="radio" id="select-1000" value="1000">
+    <label for="select-1000">1000</label>
   </div>
 </div>
 

admin/themes/default/theme.css

@@ -3310,7 +3310,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .tag-header #add-tag .add-tag-label {
   position: relative;
-  padding: 10.5px;
+  padding: 10px;
   background-color: #fafafa;
   box-shadow: 0px 2px #00000024;
   border-radius: 5px;
@@ -3703,6 +3703,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 .tag-select-message a{
   font-weight: bold;
   color: #ffa646;
+  margin-left: 6px;
 }
 
 .tag-pagination {
@@ -3775,20 +3776,20 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   display:flex;
   flex-direction: column-reverse;
   position:relative;
-  width:60px;
-  height:40px;
+  width: 74px;
+  height: 40px;
   margin: 10px;
-  font-size: 12px;
+  font-size: 10px;
   font-weight: bold;
   color: #3A3A3A;
 }
 
 .tag-pagination-select label {
-  padding: 0 30px 0 10px;
-  min-height: 40px;
+  padding: 0 20px 0 10px;
+  min-height: 35px;
   display: flex;
   align-items: center;
-  background: #fafafa;
+  background: #ddd;
   position: absolute;
   width: 100%;
   pointer-events: none;
@@ -3796,7 +3797,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   z-index: 1;
   transition: .2s ease-in-out;
   box-sizing: border-box;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .tag-pagination-select label:hover {
@@ -3816,11 +3817,10 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .tag-pagination-select input:checked + label {
   order: 1;
-  z-index:2;
-  background:#f8b038;
-  border-top:none;
-  position:relative;
-  color: white;
+  z-index: 2;
+  background: #fafafa;
+  position: relative;
+  box-shadow: 0px 2px 1px #00000024;
 }
 
 .tag-pagination-select input:checked + label:after {
@@ -3829,7 +3829,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 	height: 0; 
 	border-left: 5px solid transparent;
 	border-right: 5px solid transparent;
-	border-top: 5px solid white;
+	border-top: 5px solid #777;
   position:absolute;
   right:10px;
   top:calc(50% - 2.5px);