mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-05-02 03:22:50 +02:00
Issue #1193 : Tag's manager improvement
* Hide tags over 100 in Tag's manager * Change the selection algorithm : now faster * Change tag's manager header disposition * Change filter design of Group Member manager and plugin to match with the tag's filter
This commit is contained in:
Zacharie
plegall
@@ -142,7 +142,7 @@ function setupTagbox(tagBox) {
|
||||
});
|
||||
|
||||
tagBox.on('click', function() {
|
||||
if (tagBox.hasClass('selection')) {
|
||||
if ($('.tag-container').hasClass('selection')) {
|
||||
if (tagBox.attr('data-selected') == '1') {
|
||||
tagBox.attr('data-selected', '0');
|
||||
} else {
|
||||
@@ -315,7 +315,7 @@ function duplicateTag(id, name) {
|
||||
/*-------
|
||||
Selection mode
|
||||
-------*/
|
||||
numberItemDisplayed = 5;
|
||||
maxItemDisplayed = 5;
|
||||
|
||||
$("#toggleSelectionMode").attr("checked", false)
|
||||
$("#toggleSelectionMode").click(function () {
|
||||
@@ -324,14 +324,14 @@ $("#toggleSelectionMode").click(function () {
|
||||
|
||||
function selectionMode(isSelection) {
|
||||
if (isSelection) {
|
||||
$(".in-selection-mode").show();
|
||||
$(".not-in-selection-mode").hide();
|
||||
$(".tag-box").addClass("selection");
|
||||
$(".in-selection-mode").addClass('show');
|
||||
$(".not-in-selection-mode").addClass('hide');
|
||||
$(".tag-container").addClass("selection");
|
||||
$(".tag-box").removeClass('edit-name');
|
||||
} else {
|
||||
$(".in-selection-mode").removeAttr('style');
|
||||
$(".not-in-selection-mode").removeAttr('style');
|
||||
$(".tag-box").removeClass("selection");
|
||||
$(".in-selection-mode").removeClass('show');
|
||||
$(".not-in-selection-mode").removeClass('hide');
|
||||
$(".tag-container").removeClass("selection");
|
||||
$(".tag-box").attr("data-selected", '0');
|
||||
updateListItem();
|
||||
}
|
||||
@@ -341,7 +341,6 @@ function updateListItem() {
|
||||
|
||||
let nowSelected = [];
|
||||
let selected = [];
|
||||
let shouldBeItem = [];
|
||||
let shouldNotBeItem = [];
|
||||
let names = {};
|
||||
$('.tag-box[data-selected="1"]').each(function () {
|
||||
@@ -350,54 +349,60 @@ function updateListItem() {
|
||||
names[id] = $(this).find('.tag-name').html();
|
||||
});
|
||||
|
||||
$('.selection-mode-tag .tag-list div').each(function () {
|
||||
let id = $(this).attr('data-id');
|
||||
selected.push(id);
|
||||
});
|
||||
selected = $('.selection-mode-tag .tag-list').data('list');
|
||||
$('.selection-mode-tag .tag-list').attr('data-list', nowSelected);
|
||||
|
||||
shouldNotBeItem = [...selected];
|
||||
shouldNotBeItem = shouldNotBeItem.filter(x => !nowSelected.includes(x));
|
||||
shouldBeItem = [...nowSelected];
|
||||
shouldBeItem = shouldBeItem.filter(x => !selected.includes(x));
|
||||
selected = nowSelected;
|
||||
|
||||
shouldBeItem.forEach(function(id) {
|
||||
let newItemStructure = $('<div data-id="'+id+'"><a class="icon-cancel"></a><p>'+names[id]+'</p> </div>');
|
||||
$('.selection-mode-tag .tag-list').prepend(newItemStructure);
|
||||
$('.selection-mode-tag .tag-list div[data-id='+id+'] a').on('click', function () {
|
||||
$('.tag-box[data-id='+id+']').attr('data-selected', '0');
|
||||
updateListItem();
|
||||
})
|
||||
})
|
||||
|
||||
shouldNotBeItem.forEach(function(id) {
|
||||
$('.selection-mode-tag .tag-list div[data-id='+id+']').remove();
|
||||
})
|
||||
|
||||
$('.selection-mode-tag .tag-list').html('');
|
||||
let i = 0;
|
||||
while(i < nowSelected.length && $('.selection-mode-tag .tag-list div').length < maxItemDisplayed) {
|
||||
let item = nowSelected[i++];
|
||||
let newItemStructure = $('<div data-id="'+item+'"><a class="icon-cancel"></a><p>'+names[item]+'</p> </div>');
|
||||
$('.selection-mode-tag .tag-list').prepend(newItemStructure);
|
||||
$('.selection-mode-tag .tag-list div[data-id='+item+'] a').on('click', function () {
|
||||
$('.tag-box[data-id='+item+']').attr('data-selected', '0');
|
||||
updateListItem();
|
||||
});
|
||||
}
|
||||
|
||||
$('#MergeOptionsChoices').html('');
|
||||
nowSelected.forEach(id => {
|
||||
$('#MergeOptionsChoices').append(
|
||||
$('<option value="'+id+'">'+names[id]+'</option>')
|
||||
)
|
||||
})
|
||||
|
||||
if (selected.length > 5) {
|
||||
if (nowSelected.length > maxItemDisplayed) {
|
||||
$('.selection-other-tags').show();
|
||||
$('.selection-other-tags').html(str_and_others_tags.replace('%s', selected.length - 5))
|
||||
$('.selection-other-tags').html(str_and_others_tags.replace('%s', nowSelected.length - maxItemDisplayed))
|
||||
} else {
|
||||
$('.selection-other-tags').hide();
|
||||
}
|
||||
|
||||
|
||||
|
||||
updateSelectionContent()
|
||||
}
|
||||
|
||||
function updateMergeItems () {
|
||||
let ids = [];
|
||||
let names = [];
|
||||
$('.tag-box[data-selected="1"]').each(function () {
|
||||
ids.push($(this).attr('data-id'));
|
||||
names[$(this).attr('data-id')] = $(this).find('.tag-name').html();
|
||||
})
|
||||
|
||||
$('#MergeOptionsChoices').html('');
|
||||
ids.forEach(id => {
|
||||
$('#MergeOptionsChoices').append(
|
||||
$('<option value="'+id+'">'+names[id]+'</option>')
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
mergeOption = false;
|
||||
|
||||
function updateSelectionContent() {
|
||||
number = $('.tag-box[data-selected="1"]').length;
|
||||
if (number == 0) {
|
||||
mergeOption = false;
|
||||
$('#nothing-selected').show();
|
||||
$('.selection-mode-tag').hide();
|
||||
$('#MergeOptionsBlock').hide();
|
||||
@@ -408,10 +413,12 @@ function updateSelectionContent() {
|
||||
$('#MergeOptionsBlock').hide();
|
||||
$('#MergeSelectionMode').addClass('unavailable');
|
||||
} else if (number > 1) {
|
||||
$('#nothing-selected').hide();
|
||||
$('#MergeSelectionMode').removeClass('unavailable');
|
||||
if (mergeOption) {
|
||||
$('#MergeOptionsBlock').show();
|
||||
$('.selection-mode-tag').hide();
|
||||
updateMergeItems();
|
||||
} else {
|
||||
$('#MergeOptionsBlock').hide();
|
||||
$('.selection-mode-tag').show();
|
||||
@@ -422,7 +429,7 @@ function updateSelectionContent() {
|
||||
|
||||
$('#MergeSelectionMode').on('click', function() {
|
||||
mergeOption = true;
|
||||
updateSelectionContent()
|
||||
updateSelectionContent();
|
||||
});
|
||||
|
||||
$('#CancelMerge').on('click', function() {
|
||||
@@ -585,6 +592,8 @@ function tagListToString(list) {
|
||||
Filter research
|
||||
-------*/
|
||||
|
||||
var maxShown = 100;
|
||||
|
||||
$("#search-tag .search-input").on("input", function() {
|
||||
let text = $(this).val().toLowerCase();
|
||||
var searchNumber = 0;
|
||||
@@ -607,6 +616,27 @@ $("#search-tag .search-input").on("input", function() {
|
||||
} else {
|
||||
$('.emptyResearch').hide();
|
||||
}
|
||||
hideLastTags();
|
||||
});
|
||||
|
||||
function hideLastTags () {
|
||||
let tagBoxes = $('.tag-box:visible');
|
||||
if (tagBoxes.length > maxShown) {
|
||||
for (let i = maxShown; i < tagBoxes.length; i++) {
|
||||
$(tagBoxes[i]).hide();
|
||||
}
|
||||
|
||||
str = str_others_tags_available.replace('%s', tagBoxes.length - maxShown);
|
||||
|
||||
$('.moreTagMessage').html(str);
|
||||
$('.moreTagMessage').show();
|
||||
} else {
|
||||
$('.moreTagMessage').hide();
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
hideLastTags();
|
||||
})
|
||||
|
||||
/*-------
|
||||
|
||||
@@ -214,9 +214,10 @@ var rootUrl = '{$ROOT_URL}'
|
||||
<div class="AmountOfUsersShown">
|
||||
<p>Showing <strong>39</strong> users out of <strong>251</strong></p>
|
||||
</div>
|
||||
<span class="icon-filter"></span>
|
||||
<p>Filter</p>
|
||||
<input class="input-user-name" type="text" name="username" maxlength="50" size="20" placeholder="Username">
|
||||
<div class='search-user'>
|
||||
<span class="icon-filter search-icon"></span>
|
||||
<input class="input-user-name search-input" type="text" name="username" maxlength="50" size="20" placeholder="{'Filter'|@translate}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -189,8 +189,8 @@ jQuery(".pluginMiniBox").each(function(index){
|
||||
{counter start=0 assign=i} {* <!-- counter for 'deactivate all' link --> *}
|
||||
|
||||
<div class="pluginFilter">
|
||||
<p class="icon-filter">{'Filter'|@translate}</p>
|
||||
<input type="text" placeholder="{'Name'|@translate}, {'Description'|@translate}">
|
||||
<span class="icon-filter search-icon"></span>
|
||||
<input class='search-input' type="text" placeholder="{'Filter'|@translate}">
|
||||
</div>
|
||||
|
||||
<div class="emptyResearch"> {'No plugins found'|@translate} </div>
|
||||
|
||||
@@ -17,6 +17,7 @@ var str_copy = '{' (copy)'|@translate}';
|
||||
var str_other_copy = '{' (copy %s)'|@translate}';
|
||||
var str_merged_into = '{'Tag(s) \{%s1\} succesfully merged into "%s2"'|@translate}';
|
||||
var str_and_others_tags = '{'and %s others'|@translate}';
|
||||
var str_others_tags_available = '{'%s other tags available...'|@translate}'
|
||||
{/footer_script}
|
||||
|
||||
{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
|
||||
@@ -70,12 +71,12 @@ var str_and_others_tags = '{'and %s others'|@translate}';
|
||||
|
||||
<div class="selection-mode-tag">
|
||||
<p>{'Your selection'|@translate}</p>
|
||||
<div class="tag-list">
|
||||
<div class="tag-list" data-list='[]'>
|
||||
|
||||
</div>
|
||||
<div class="selection-other-tags"></div>
|
||||
<button id="MergeSelectionMode" class="icon-object-group unavailable">{'Merge'|@translate}</button>
|
||||
<button id="DeleteSelectionMode" class="icon-trash-1">{'Delete selected tags'|@translate}</button>
|
||||
<button id="DeleteSelectionMode" class="icon-trash-1">{'Delete'|@translate}</button>
|
||||
</div>
|
||||
|
||||
<div id="MergeOptionsBlock">
|
||||
@@ -94,8 +95,8 @@ var str_and_others_tags = '{'and %s others'|@translate}';
|
||||
|
||||
<div class='tag-header'>
|
||||
<div id='search-tag'>
|
||||
<span class='icon-filter'> </span>
|
||||
<input class='search-input' type='text' placeholder='{'Search'|@translate}'>
|
||||
<span class='icon-filter search-icon'> </span>
|
||||
<input class='search-input' type='text' placeholder='{'Filter'|@translate}'>
|
||||
</div>
|
||||
<form id='add-tag' class='not-in-selection-mode'>
|
||||
<span class='icon-cancel'></span>
|
||||
@@ -132,6 +133,7 @@ var str_and_others_tags = '{'and %s others'|@translate}';
|
||||
{/foreach}
|
||||
</div>
|
||||
<div class="emptyResearch"> {'No tag found'|@translate} </div>
|
||||
<div class="moreTagMessage"> </div>
|
||||
|
||||
<div class='tag-template' style='display:none'>
|
||||
{tagContent
|
||||
|
||||
@@ -248,6 +248,23 @@ TABLE.doubleSelect SELECT.categoryList {
|
||||
width: 100%; max-width: 100%; overflow-x: auto;
|
||||
}
|
||||
|
||||
.search-input{
|
||||
padding: 10px;
|
||||
box-shadow: 0px 2px #00000024;
|
||||
border: none;
|
||||
background-color: #fafafa !important;
|
||||
padding-left: 30px;
|
||||
width: 200px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(4px, -50%);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.stat-legend-container {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -1393,13 +1410,8 @@ h2:lang(en) { text-transform:capitalize; }
|
||||
.pluginBoxesTitle p {margin-right: 10px;}
|
||||
|
||||
|
||||
.pluginFilter,.pluginBoxesTitle {display: flex;align-items: center}
|
||||
.pluginFilter p{margin-right: 10px}
|
||||
.pluginFilter INPUT[type="text"] {
|
||||
padding: 5px;
|
||||
background-color:#ffffff;
|
||||
}
|
||||
.pluginFilter {justify-content: end;position: absolute;right: 20px; z-index: 2;}
|
||||
.pluginBoxesTitle {display: flex;align-items: center}
|
||||
.pluginFilter {justify-content: end;position: absolute;right: 20px; z-index: 2; transform: translateY(6px);}
|
||||
|
||||
.pluginBoxesCount {
|
||||
background-color: rgb(150, 150, 150);
|
||||
@@ -2262,6 +2274,10 @@ input:checked + .slider:before {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#selection-mode-block.show{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.Selection-mode-content{
|
||||
margin-top:110px;
|
||||
}
|
||||
@@ -2820,6 +2836,11 @@ input:checked + .slider:before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.FilterUserBlock .search-user{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#UserList .AddUserBlock p,
|
||||
@@ -2829,15 +2850,10 @@ input:checked + .slider:before {
|
||||
margin:0 5px;
|
||||
}
|
||||
|
||||
#UserList .AddUserBlock select,
|
||||
#UserList .FilterUserBlock input{
|
||||
#UserList .AddUserBlock select {
|
||||
padding:11px 10px;
|
||||
}
|
||||
|
||||
#UserList .FilterUserBlock input{
|
||||
width:60px;
|
||||
}
|
||||
|
||||
#UserList .AddUserBlock button{
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
@@ -3229,33 +3245,21 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
margin-left: 10px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.tag-header #search-tag{
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.tag-header #search-tag .search-input{
|
||||
padding: 10px;
|
||||
box-shadow: 0px 2px #00000024;
|
||||
border: none;
|
||||
background-color: #fafafa;
|
||||
padding-left: 30px;
|
||||
width: 300px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.tag-header #search-tag span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(4px, -50%);
|
||||
font-size: 18px;
|
||||
right: 230px;
|
||||
}
|
||||
|
||||
.tag-header #add-tag {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tag-header #add-tag.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tag-header #add-tag .add-tag-container {
|
||||
@@ -3351,12 +3355,18 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
|
||||
.tag-header .selection-controller {
|
||||
display: none;
|
||||
margin: 0px 7px;
|
||||
align-items: baseline;
|
||||
height: 38px;
|
||||
color: #777;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tag-header .selection-controller.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tag-header .selection-controller p {
|
||||
position: absolute;
|
||||
transform: translateY(-40px);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tag-header .selection-controller a {
|
||||
@@ -3382,6 +3392,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
display: flex;
|
||||
padding: 0px 10px;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.tag-info p {
|
||||
@@ -3431,6 +3442,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
padding: 25px;
|
||||
flex-flow: wrap;
|
||||
padding-right: 223px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.tag-container .tag-box{
|
||||
@@ -3444,7 +3456,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag-container .tag-box.selection {
|
||||
.tag-container.selection .tag-box {
|
||||
opacity: 0.6;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -3471,7 +3483,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
}
|
||||
|
||||
|
||||
.tag-container .tag-box.selection .showOptions {
|
||||
.tag-container.selection .showOptions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -3513,6 +3525,10 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.tag-container .tag-box .select-checkbox.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tag-container .tag-box[data-selected='1'] .select-checkbox {
|
||||
background-color: #ddd;
|
||||
}
|
||||
@@ -3610,4 +3626,13 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
.selection-mode-tag .selection-other-tags {
|
||||
color: #ffa646;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.moreTagMessage {
|
||||
margin: auto;
|
||||
font-weight: bold;
|
||||
padding-right: 223px;
|
||||
margin: 10px;
|
||||
font-size: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
Reference in New Issue
Block a user