diff --git a/admin/themes/default/js/tags.js b/admin/themes/default/js/tags.js index 780f76abc..4f8d7c8fa 100644 --- a/admin/themes/default/js/tags.js +++ b/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') , " ") 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'); - if ($('.selection-mode-tag .tag-list div[data-id='+id+']').length != 0) { - $('.selection-mode-tag .tag-list div[data-id='+id+']').remove(); + $('.tag-box[data-id='+id+']').attr('data-selected', '0'); + if ($('.selection-mode-tag .tag-list div[data-id='+id+']').length != 0) { + $('.selection-mode-tag .tag-list div[data-id='+id+']').remove(); - if (selected.length >= maxItemDisplayed) { - let i = 0; - isNotCreate = true - while (i tag.id == selected[i]) - createSelectionItem(selected[i], dataTags[indexOfTag].name); - } - i++; + if (selected.length >= maxItemDisplayed) { + let i = 0; + isNotCreate = true + while (i tag.id == selected[i]) + createSelectionItem(selected[i], dataTags[indexOfTag].name); + } + i++; + } } - } - } + } - let numberDisplayed = $('.selection-mode-tag .tag-list div').length; - $('.selection-other-tags').html(str_and_others_tags.replace('%s', selected.length - numberDisplayed)) - if (selected.length - numberDisplayed <= 0) { - $('.selection-other-tags').hide(); + let numberDisplayed = $('.selection-mode-tag .tag-list div').length; + $('.selection-other-tags').html(str_and_others_tags.replace('%s', selected.length - numberDisplayed)) + if (selected.length - numberDisplayed <= 0) { + $('.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() { - tagToDisplay().forEach((tag) => { +function selectAll(data) { + 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() { - tagToDisplay().forEach((tag) => { +function selectNone(data) { + 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() { - tagToDisplay().forEach((tag) => { +function selectInvert(data) { + 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(); - - updateBadge() + updatePaginationMenu(); + 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(); -updateArrows(); \ No newline at end of file +if (getNumberPages() > 1) { + $('.tag-pagination').show(); + createPaginationMenu(); + updateArrows(); +} else { + $('.tag-pagination').hide(); +} + +$('.tag-pagination-select input[type="radio"]').on('click',function () { + per_page = parseInt($(this).val()); + updatePaginationMenu(); +}) diff --git a/admin/themes/default/template/tags.tpl b/admin/themes/default/template/tags.tpl index 50f2a9d87..75a3323c6 100644 --- a/admin/themes/default/template/tags.tpl +++ b/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'}' + + + {'Selection done in this page only'|@translate} + + {foreach from=$first_tags item=tag} @@ -156,6 +163,17 @@ var str_no_photos = '{'no photo'}' + {'Tag per page'} + + + 25 + + 50 + + 100 + + 200 + diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 87061241e..3497f6d2c 100644 --- a/admin/themes/default/theme.css +++ b/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; - z-index:2; + top: 40px; + 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; - top:35px; + right: -86px; + 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: 25px; - transform: translateX(85%); + top: 32px; + right: 0px; + 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; - height: 30px; + margin: 10px; 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; diff --git a/include/ws_functions/pwg.tags.php b/include/ws_functions/pwg.tags.php index bdfe3a9a7..a3244ea19 100644 --- a/include/ws_functions/pwg.tags.php +++ b/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');
{'Tag per page'}