Issue #1193 : Tag Manager Redesign

* Add a select dropdown to chose how many tag is displayed per page
 * Add a message beside selection's buttons to apply selection to all tags
 * Bug and design fixes

admin/themes/default/js/tags.js

@@ -109,7 +109,7 @@ $('#add-tag').submit(function (e) {
   e.preventDefault();
   if ($('#add-tag-input').val() != "") {
     loadState = new TemporaryState();
-    loadState.removeClass($('#add-tag .icon-validate'),'icon-plus-circled');
+    loadState.removeClass($('#add-tag .icon-validate'),'icon-plus');
     loadState.changeHTML($('#add-tag .icon-validate') , "<i class='icon-spin6 animate-spin'> </i>")
     loadState.changeAttribute($('#add-tag .icon-validate'), 'style','pointer-event:none')
     addTag($('#add-tag-input').val()).then(function () {
@@ -154,6 +154,7 @@ function addTag(name) {
           });
 
           resolve();
+          updatePaginationMenu();
         } else {
           reject(str_already_exist.replace('%s', name));
         }
@@ -284,6 +285,7 @@ function removeTag(id, name) {
             dataTags = dataTags.filter((tag) => tag.id != id);
             showMessage(str_tag_deleted.replace('%s', name));
             updateBadge();
+            updatePaginationMenu();
           } else {
             showError('A problem has occured')
           }
@@ -427,7 +429,9 @@ function addSelectedItem(id) {
       $('.selection-other-tags').html(str_and_others_tags.replace('%s', selected.length - numberDisplayed))
     } else {
       $('.selection-other-tags').hide();
-      createSelectionItem(id, dataTags.find(tag => tag.id == id).name);
+      if (dataTags.findIndex(tag => tag.id == id) > -1) {
+        createSelectionItem(id, dataTags.find(tag => tag.id == id).name);
+      }
     }
   }
 }
@@ -441,32 +445,36 @@ function createSelectionItem(id, name) {
 }
 
 function removeSelectedItem(id) {
-  selected = selected.filter((tag) => {return parseInt(tag) != parseInt(id)});
+  if (selected.findIndex((tag) => tag == id) > -1) {
 
-  console.log(selected);
+    selected = selected.filter((tag) => {return parseInt(tag) != parseInt(id)});
 
-  $('.tag-box[data-id='+id+']').attr('data-selected', '0');
+    $('.tag-box[data-id='+id+']').attr('data-selected', '0');
-  if ($('.selection-mode-tag .tag-list div[data-id='+id+']').length != 0) {
+    if ($('.selection-mode-tag .tag-list div[data-id='+id+']').length != 0) {
-    $('.selection-mode-tag .tag-list div[data-id='+id+']').remove();
+      $('.selection-mode-tag .tag-list div[data-id='+id+']').remove();
 
-    if (selected.length >= maxItemDisplayed) {
+      if (selected.length >= maxItemDisplayed) {
-      let i = 0;
+        let i = 0;
-      isNotCreate = true
+        isNotCreate = true
-      while (i<selected.length && isNotCreate) {
+        while (i<selected.length && isNotCreate) {
-          if ($('.selection-mode-tag .tag-list div[data-id='+selected[i]+']').length == 0) {
+            if ($('.selection-mode-tag .tag-list div[data-id='+selected[i]+']').length == 0) {
-            isNotCreate = false;
+              isNotCreate = false;
-            indexOfTag = dataTags.findIndex(tag => tag.id == selected[i])
+              indexOfTag = dataTags.findIndex(tag => tag.id == selected[i])
-            createSelectionItem(selected[i], dataTags[indexOfTag].name);
+              createSelectionItem(selected[i], dataTags[indexOfTag].name);
-          }
+            }
-          i++;
+            i++;
+        }
       }
-    }
+    } 
-  } 
 
-  let numberDisplayed = $('.selection-mode-tag .tag-list div').length;
+    let numberDisplayed = $('.selection-mode-tag .tag-list div').length;
-  $('.selection-other-tags').html(str_and_others_tags.replace('%s', selected.length - numberDisplayed))
+    $('.selection-other-tags').html(str_and_others_tags.replace('%s', selected.length - numberDisplayed))
-  if (selected.length - numberDisplayed <= 0) {
+    if (selected.length - numberDisplayed <= 0) {
-    $('.selection-other-tags').hide();
+      $('.selection-other-tags').hide();
+    }
+
+    //Remove the selection message
+    $('.tag-select-message').slideUp();
   }
 }
 
@@ -506,7 +514,6 @@ function updateSelectionContent() {
     $('.selection-mode-tag').show();
     }
   }
-    
 }
 
 $('#MergeSelectionMode').on('click', function() {
@@ -520,35 +527,44 @@ $('#CancelMerge').on('click', function() {
 });
 
 $('#selectAll').on('click', function() {
-  selectAll();
+  selectAll(tagToDisplay());
+  showSelectMessage(str_select_all_tag, function () {
+    selectAll(dataTags);
+  })
 });
 
-function selectAll() {
+function selectAll(data) {
-  tagToDisplay().forEach((tag) => {
+  data.forEach((tag) => {
     $('.tag-box[data-id='+tag.id+']').attr('data-selected', 1);
-    addSelectedItem(tag.id)
+    addSelectedItem(tag.id);
   })
   updateSelectionContent();
 }
 
 $('#selectNone').on('click', function() {
-  selectNone()
+  selectNone(tagToDisplay());
+  if (selected.length > 0) {
+    showSelectMessage(str_clear_selection, function () {
+      $('.tag-box[data-selected=1]').attr('data-selected', 0);
+      clearSelection();
+    })
+  }
 });
 
-function selectNone() {
+function selectNone(data) {
-  tagToDisplay().forEach((tag) => {
+  data.forEach((tag) => {
     $('.tag-box[data-id='+tag.id+']').attr('data-selected', 0);
-    removeSelectedItem(tag.id)
+    removeSelectedItem(tag.id);
-  })
+  });
   updateSelectionContent();
 }
 
 $('#selectInvert').on('click', function() {
-  selectInvert();
+  selectInvert(tagToDisplay());
 });
 
-function selectInvert() {
+function selectInvert(data) {
-  tagToDisplay().forEach((tag) => {
+  data.forEach((tag) => {
     tagBox = $('.tag-box[data-id='+tag.id+']');
     if (tagBox.attr('data-selected') == 1) {
       tagBox.attr('data-selected', '0');
@@ -561,6 +577,25 @@ function selectInvert() {
   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
 -------*/
@@ -613,13 +648,12 @@ function removeSelectedTags() {
               $('.tag-box[data-id='+id+']').remove();
             })
 
-            console.log(selected);
             // Update Data
             dataTags = dataTags.filter((tag) => !selected.includes(tag.id))
 
             clearSelection();
-
+            updatePaginationMenu();
-            updateBadge()
+            updateBadge();
           } else {
             return raw_data;
           }
@@ -687,7 +721,7 @@ function mergeGroups(destination_id, merge_ids) {
             }
             $(".tag-box").attr("data-selected", '0');
             clearSelection();
-
+            updatePaginationMenu();
             updateBadge()
           } else {
             return raw_data;
@@ -801,10 +835,20 @@ function promiseFinish() {
 function updatePaginationMenu() {
   $('.tag-pagination-container').html('');
 
-  createPaginationMenu();
+  actualPage = Math.min(actualPage, getNumberPages());
+
+  if (getNumberPages() > 1) {
+    $('.tag-pagination').show();
+    createPaginationMenu();
+  } else {
+    $('.tag-pagination').hide();
+  }
 
   updateArrows();
   askUpdatePage();
+
+  //Remove the selection message
+  $('.tag-select-message').slideUp();
 }
 
 function createPaginationMenu() {
@@ -859,11 +903,10 @@ function updateArrows() {
 
 function getNumberPages() {
   dataVisible = dataTags.filter(isDataSearched).length;
-  return Math.floor(dataVisible / per_page) + 1;
+  return Math.floor((dataVisible - 1) / per_page) + 1;
 }
 
 function movePage(toRigth = true) {
-  let page = actualPage;
   if (toRigth) {
     if (actualPage < getNumberPages()) {
       actualPage++;
@@ -886,7 +929,6 @@ function updatePage() {
     $('.tag-box, .tag-pagination').animate({opacity:0}, 500).promise().then(() => {
 
       let displayTags = new Promise((res, rej) => {
-
         boxToRecycle = Math.min(dataToDisplay.length, tagBoxes.length);
 
         for (let i = 0; i < boxToRecycle; i++) {
@@ -941,5 +983,15 @@ $('.tag-pagination-arrow.left').on('click', () => {
   movePage(false);
 })
 
-createPaginationMenu();
+if (getNumberPages() > 1) {
-updateArrows();
+  $('.tag-pagination').show();
+  createPaginationMenu();
+  updateArrows();
+} else {
+  $('.tag-pagination').hide();
+}
+
+$('.tag-pagination-select input[type="radio"]').on('click',function () {
+  per_page = parseInt($(this).val());
+  updatePaginationMenu();
+})

admin/themes/default/template/tags.tpl

@@ -20,6 +20,8 @@ var str_and_others_tags = '{'and %s others'|@translate}';
 var str_others_tags_available = '{'%s other tags available...'|@translate}'
 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}';
 {/footer_script}
 
 {combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
@@ -133,6 +135,11 @@ var str_no_photos = '{'no photo'}'
 <div class="pageLoad">
   <i class='icon-spin6 animate-spin'> </i>
 </div>
+
+<div class="tag-select-message">
+  <div>{'Selection done in this page only'|@translate} <a> </a></div>
+</div>
+
 <div class='tag-container' data-tags='{json_encode($data)}' data-per_page={$per_page}>
   {foreach from=$first_tags item=tag}
   <div class='tag-box' data-id='{$tag.id}' data-selected='0'>
@@ -156,6 +163,17 @@ var str_no_photos = '{'no photo'}'
   <div class="tag-pagination-arrow rigth">
     <span class="icon-left-open"></span>
   </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">
+    <label for="select-200">200</label>
+  </div>
 </div>
 
 <div class='tag-template' style='display:none'>

admin/themes/default/theme.css

@@ -285,13 +285,24 @@ TABLE.doubleSelect SELECT.categoryList {
 }
 
 .dropdown {
-  z-index: 2;
+  z-index: 100;
   padding: 5px 0px;
   border-radius: 10px;
   background: linear-gradient(130deg, #ff7700 0%, #ffa744 100%);
   color: white;
 }
 
+.dropdown::after {
+  content: " ";
+  position: absolute;
+  bottom: 100%;
+  left: 51%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent #ff7700 transparent;
+}
+
 .dropdown-content {
   position: relative;
 }
@@ -305,7 +316,7 @@ TABLE.doubleSelect SELECT.categoryList {
   font-size: 13px;
   padding-right: 15px;
   color: white;
-  font-weight: bold;
+  font-weight: 600;
   cursor: pointer;
 }
 
@@ -1506,7 +1517,6 @@ h2:lang(en) { text-transform:capitalize; }
   margin:15px 30px;
   border-top-right-radius:5px;
   border-bottom-right-radius:5px;
-  overflow:hidden;
   margin-left: 0;
   box-shadow: 0px 0px 5px #acacac;
  }
@@ -1516,11 +1526,9 @@ h2:lang(en) { text-transform:capitalize; }
   text-align: left;
   background-color: #fafafa;
   padding: 15px;
-  overflow: hidden;
   position: relative;
   border-left: solid 5px #ffc17e;
   border-right:solid 5px #fafafa;
-
 }
 
 .pluginMiniBoxNameCell {
@@ -1594,8 +1602,9 @@ h2:lang(en) { text-transform:capitalize; }
     display:none;
     position:absolute;
     right: 0;
-    top: 30px;
+    top: 40px;
-    z-index:2;
+    z-index: 2;
+    transform: translateX(calc(50% - 19px));
   }
 
 .warning:before {content:url(icon/warning.png);vertical-align:top;}
@@ -2333,6 +2342,7 @@ input:checked + .slider:before {
 
 #nothing-selected{
   display:block;
+  margin: 10px;
 }
 
 .SelectionModeGroup{
@@ -2527,8 +2537,8 @@ input:checked + .slider:before {
   display:none;
   z-index:1;
   position:absolute;
-  right:-88px;
+  right: -86px;
-  top:35px;
+  top: 41px;
 }
 
 .is-default-token {
@@ -3281,7 +3291,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   margin-left: 30px;
   max-width: calc(100% - 530px);
   overflow: hidden;
-  padding: 5px;
+  padding: 10px;
 }
 
 .tag-header #search-tag{
@@ -3481,10 +3491,9 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .tag-container {
   display: flex;
-  padding: 25px;
+  padding: 10px 25px;
   flex-flow: wrap;
   padding-right: 223px;
-  padding-bottom: 10px;
 }
 
 .tag-container .tag-box{
@@ -3537,9 +3546,9 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 .tag-container .tag-box .tag-dropdown-block {
   display:none;
   position: absolute;
-  right: 0;
+  top: 32px;
-  top: 25px;
+  right: 0px;
-  transform: translateX(85%);
+  transform: translateX(calc(50% - 23px));
 }
 
 .tag-container .tag-box .tag-dropdown-block .tag-dropdown-header {
@@ -3680,6 +3689,22 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   font-weight: bold;
 }
 
+.tag-select-message {
+  margin-right: 223px;
+  background: #ffbf0042;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  display: none;
+}
+
+.tag-select-message a{
+  font-weight: bold;
+  color: #ffa646;
+}
+
 .tag-pagination {
   margin: auto;
   height: 40px;
@@ -3696,8 +3721,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 }
 
 .tag-pagination-container *{
-  width: 30px;
+  margin: 10px;
-  height: 30px;
   line-height: 30px;
 }
 
@@ -3708,8 +3732,9 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .tag-pagination-container a.actual {
   background-color: #f8b038;
-  border-radius: 100%;
+  border-radius: 15px;
   pointer-events: none;
+  padding: 0px 10px;
 }
 
 .tag-pagination-container span{
@@ -3746,6 +3771,72 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
   transform: scale(-1, 1);
 }
 
+.tag-pagination-select {
+  display:flex;
+  flex-direction: column-reverse;
+  position:relative;
+  width:60px;
+  height:40px;
+  margin: 10px;
+  font-size: 12px;
+  font-weight: bold;
+  color: #3A3A3A;
+}
+
+.tag-pagination-select label {
+  padding: 0 30px 0 10px;
+  min-height: 40px;
+  display: flex;
+  align-items: center;
+  background: #fafafa;
+  position: absolute;
+  width: 100%;
+  pointer-events: none;
+  order: 2;
+  z-index: 1;
+  transition: .2s ease-in-out;
+  box-sizing: border-box;
+  font-size: 16px;
+}
+
+.tag-pagination-select label:hover {
+  background:#bbb;
+}
+
+.tag-pagination-select:focus label {
+  position:relative;
+  pointer-events:all;
+}
+
+.tag-pagination-select input {
+  opacity:0;
+  position:absolute;
+  left:-99999px;
+}
+
+.tag-pagination-select input:checked + label {
+  order: 1;
+  z-index:2;
+  background:#f8b038;
+  border-top:none;
+  position:relative;
+  color: white;
+}
+
+.tag-pagination-select input:checked + label:after {
+  content:'';
+  width: 0; 
+	height: 0; 
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 5px solid white;
+  position:absolute;
+  right:10px;
+  top:calc(50% - 2.5px);
+  pointer-events:none;
+  z-index:3;
+}
+
 .pageLoad {
   text-align: center;
   margin-right: 223px;

include/ws_functions/pwg.tags.php

@@ -401,7 +401,7 @@ SELECT image_id
       'tag_id' => $destination_tag_id,
       'image_id' => $image_id
     );
-    pwg_activity('image', $image_id, 'edit', array("add-tag" => $destination_tag_id));
+    pwg_activity('photo', $image_id, 'edit', array("add-tag" => $destination_tag_id));
   }
 
   if (count($inserts) > 0)
@@ -488,7 +488,7 @@ SELECT image_id
   pwg_activity('tag', $params['destination_tag_id'], 'edit');
   foreach ($image_to_add as $image_id) 
   {
-    pwg_activity('image', $image_id, 'edit', array("tag-add" => $params['destination_tag_id']));
+    pwg_activity('photo', $image_id, 'edit', array("tag-add" => $params['destination_tag_id']));
   }
 
   include_once(PHPWG_ROOT_PATH.'admin/include/functions.php');