From 81f8758f6d28faab3622040e254ff40880d3afb5 Mon Sep 17 00:00:00 2001 From: Zacharie Date: Tue, 23 Jun 2020 11:58:03 +0200 Subject: [PATCH] Issue #1193 : Tag manager fixes * Search function search now the begining of tags names * "Select all" now select the searched tags * Design fixes on select buttons and add tag form * Bug fixes on actions involving more than 1000 tags --- admin/themes/default/js/tags.js | 47 ++++++++++++++++++++++++++------- admin/themes/default/theme.css | 46 ++++++++++++++++++++------------ 2 files changed, 66 insertions(+), 27 deletions(-) diff --git a/admin/themes/default/js/tags.js b/admin/themes/default/js/tags.js index 3d22e0228..48c92e150 100644 --- a/admin/themes/default/js/tags.js +++ b/admin/themes/default/js/tags.js @@ -448,7 +448,16 @@ $('#CancelMerge').on('click', function() { }); $('#selectAll').on('click', function() { - $('.tag-box').attr('data-selected', '1'); + if ($('.search-input').val() == '') { + $('.tag-box').attr('data-selected', '1'); + } else { + $('.tag-box').each(function() { + if (isSearched($(this), $('.search-input').val())) { + $(this).attr('data-selected', '1'); + } + }) + } + updateListItem(); }); @@ -519,15 +528,20 @@ function removeSelectedTags() { 'tag_id': ids }, success: function (raw_data) { - data = jQuery.parseJSON(raw_data); - if (data.stat === "ok") { + raw_data = raw_data.slice(raw_data.search('{')); + if (JSON.parse(raw_data).stat = 'ok') { ids.forEach(function(id) { $('.tag-box[data-id='+id+']').remove(); }) updateListItem(); updateBadge() hideLastTags() + } else { + return raw_data; } + }, + error: function(message) { + return message; } }) }, @@ -565,11 +579,12 @@ function mergeGroups(destination_id, merge_ids) { url: "ws.php?format=json&method=pwg.tags.merge", type: "POST", data: { - destination_tag_id: destination_id, - merge_tag_id: merge_ids, - pwg_token: pwg_token + 'pwg_token': pwg_token, + 'destination_tag_id': destination_id, + 'merge_tag_id': merge_ids }, success: function (raw_data) { + raw_data = raw_data.slice(raw_data.search('{')); data = jQuery.parseJSON(raw_data); if (data.stat === "ok") { data.result.deleted_tag.forEach((id) => { @@ -584,6 +599,8 @@ function mergeGroups(destination_id, merge_ids) { updateListItem(); updateBadge() hideLastTags() + } else { + return raw_data; } } }) @@ -609,16 +626,15 @@ function tagListToString(list) { var maxShown = 100; $("#search-tag .search-input").on("input", function() { - let text = $(this).val().toLowerCase(); + let text = $(this).val(); var searchNumber = 0; $('.tag-box').each(function () { if (text == "") { $(this).show() searchNumber++; } else { - let name = $(this).find("p").text().toLowerCase(); - if (name.search(text) != -1){ - $(this).delay(300).show() + if (isSearched($(this), text)){ + $(this).show() searchNumber++; } else { $(this).hide() @@ -653,17 +669,28 @@ $(document).ready(function() { hideLastTags(); }) +function isSearched(tagBox, stringSearch) { + let name = tagBox.find("p").text().toLowerCase(); + if (name.startsWith(stringSearch.toLowerCase())) { + return true; + } else { + return false; + } +} + /*------- Show Info -------*/ function showError(message) { $('.tag-error p').html(message); + $('.tag-error').attr('title', message) $('.tag-info').hide() $('.tag-error').css('display', 'flex'); } function showMessage(message) { $('.tag-message p').html(message); + $('.tag-message').attr('title', message) $('.tag-info').hide() $('.tag-message').css('display', 'flex'); } diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index 8f6f720c2..40146840e 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -270,15 +270,16 @@ TABLE.doubleSelect SELECT.categoryList { } .badge-number { - padding: 3px 6px; - border-radius: 8px; - background-color: rgb(44,132,195); - color: #CDE9FD; - font-size: 12px; + border-radius: 20px; + background-color: #777; + font-size: 14px; margin-left: 10px; font-weight: 700; position: absolute; - transform: translateY(4px); + transform: translateY(3px); + text-align: center; + color: #ccc; + padding: 3px 7px; } .stat-legend-container { @@ -3262,6 +3263,9 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; flex-wrap: nowrap; align-items: center; margin-left: 30px; + max-width: calc(100% - 530px); + overflow: hidden; + padding: 5px; } .tag-header #search-tag{ @@ -3280,7 +3284,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; .tag-header #add-tag .add-tag-label { position: relative; - padding: 10px; + padding: 10.5px; background-color: #fafafa; box-shadow: 0px 2px #00000024; border-radius: 5px; @@ -3294,7 +3298,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; background: none; box-shadow: none; cursor: auto; - padding: 5px 10px; + padding: 0px } .tag-header #add-tag .add-tag-label::before { @@ -3309,6 +3313,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; .tag-header #add-tag .add-tag-label p{ margin: 0; + white-space: nowrap; } .tag-header #add-tag .add-tag-container { @@ -3320,9 +3325,14 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; } .tag-header #add-tag.input-mode .add-tag-container input { - padding: 5px; - border: none; + padding: 10px; margin-left: 10px; + border: solid 2px #ffa744; + background: none; +} + +.tag-header #add-tag.input-mode .add-tag-container input:hover { + background-color: #f0f0f0 !important; } .tag-header #add-tag span.icon-cancel{ @@ -3330,14 +3340,16 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; position: absolute; right: 0; top: 50%; - transform: translate(50%, -50%); + transform: translate(30px, -53%); + z-index: 2; } .tag-header #add-tag.input-mode span{ display: block; - margin: auto; - font-size: 20px; + margin: auto 5px; + font-size: 26px; cursor: pointer; + margin-right: 20px; } .tag-header #add-tag span.icon-plus-circled { @@ -3545,7 +3557,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; .tag-container .tag-box .select-checkbox i { display: none; font-size: 14px; - transform: translate(-9px , -3px); + transform: translate(-10px , -3px); position: absolute; color: #fafafa; animation-name: icon-check-animation; @@ -3559,13 +3571,13 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important; @keyframes icon-check-animation { 0% { - transform: translate(-9px , -3px) scale(0); + transform: translate(-10px , -3px) scale(0); } 75% { - transform: translate(-9px , -3px) scale(1.3); + transform: translate(-10px , -3px) scale(1.3); } 100% { - transform: translate(-9px , -3px); + transform: translate(-10px , -3px); } }