diff --git a/admin/themes/default/js/tags.js b/admin/themes/default/js/tags.js index ab102d7a0..f32a619ee 100644 --- a/admin/themes/default/js/tags.js +++ b/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(" "); + 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 -------*/ diff --git a/admin/themes/default/template/tags.tpl b/admin/themes/default/template/tags.tpl index 75a3323c6..48ba4c248 100644 --- a/admin/themes/default/template/tags.tpl +++ b/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 = '{'%d 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}';
-
{'Selection done in this page only'|@translate}
+
@@ -165,14 +167,14 @@ var str_clear_selection = '{'Clear Selection'|@translate}';

{'Tag per page'}

- - - - - + + + + +
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 3497f6d2c..aa47c4d9c 100644 --- a/admin/themes/default/theme.css +++ b/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);