mirror of
https://github.com/Piwigo/Piwigo.git
synced 2025-05-04 23:29:57 +03:00
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
This commit is contained in:
Zacharie
plegall
parent
d76747f06a
commit
16b6c399e8
4 changed files with 227 additions and 66 deletions
|
|
@ -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');
|
||||
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<selected.length && isNotCreate) {
|
||||
if ($('.selection-mode-tag .tag-list div[data-id='+selected[i]+']').length == 0) {
|
||||
isNotCreate = false;
|
||||
indexOfTag = dataTags.findIndex(tag => tag.id == selected[i])
|
||||
createSelectionItem(selected[i], dataTags[indexOfTag].name);
|
||||
}
|
||||
i++;
|
||||
if (selected.length >= maxItemDisplayed) {
|
||||
let i = 0;
|
||||
isNotCreate = true
|
||||
while (i<selected.length && isNotCreate) {
|
||||
if ($('.selection-mode-tag .tag-list div[data-id='+selected[i]+']').length == 0) {
|
||||
isNotCreate = false;
|
||||
indexOfTag = dataTags.findIndex(tag => 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();
|
||||
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();
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue