fixed #1781 better UX for the add album popin

This commit is contained in:
Matthieu Leproux 2022-11-08 17:22:28 +01:00
parent 7f00155ca7
commit 532fc743f2
5 changed files with 94 additions and 73 deletions

View file

@ -345,85 +345,91 @@ $(document).ready(() => {
success: function (raw_data) {
data = jQuery.parseJSON(raw_data);
var parent_node = $('.tree').tree('getNodeById', newAlbumParent);
if (newAlbumPosition == "last") {
$('.tree').tree(
'appendNode',
{
id: data.result.id,
isEmptyFolder: true,
name: newAlbumName
},
parent_node
);
} else {
$('.tree').tree(
'prependNode',
{
id: data.result.id,
isEmptyFolder: true,
name: newAlbumName
},
parent_node
);
}
if (parent_node) {
setSubcatsBadge(parent_node);
$("#cat-"+parent_node.id).on( 'click', '.move-cat-toogler', function(e) {
var node_id = parent_node.id;
var node = $('.tree').tree('getNodeById', node_id);
if (node) {
open_nodes = $('.tree').tree('getState').open_nodes;
if (!open_nodes.includes(node_id)) {
$(this).html(toggler_open);
$('.tree').tree('openNode', node);
} else {
$(this).html(toggler_close);
$('.tree').tree('closeNode', node);
if (data.stat == "ok") {
if (newAlbumPosition == "last") {
$('.tree').tree(
'appendNode',
{
id: data.result.id,
isEmptyFolder: true,
name: newAlbumName
},
parent_node
);
} else {
$('.tree').tree(
'prependNode',
{
id: data.result.id,
isEmptyFolder: true,
name: newAlbumName
},
parent_node
);
}
if (parent_node) {
setSubcatsBadge(parent_node);
$("#cat-"+parent_node.id).on( 'click', '.move-cat-toogler', function(e) {
var node_id = parent_node.id;
var node = $('.tree').tree('getNodeById', node_id);
if (node) {
open_nodes = $('.tree').tree('getState').open_nodes;
if (!open_nodes.includes(node_id)) {
$(this).html(toggler_open);
$('.tree').tree('openNode', node);
} else {
$(this).html(toggler_close);
$('.tree').tree('closeNode', node);
}
}
}
});
}
$(".move-cat-add").unbind("click").on("click", function () {
openAddAlbumPopIn($(this).data("aid"));
$(".AddAlbumSubmit").data("a-parent", $(this).data("aid"));
});
$(".move-cat-add-small").unbind("click").on("click", function () {
openAddAlbumPopIn($(this).data("aid"));
$(".AddAlbumSubmit").data("a-parent", $(this).data("aid"));
});
$(".move-cat-delete").on("click", function () {
triggerDeleteAlbum($(this).data("id"));
});
$(".move-cat-delete-small").on("click", function () {
triggerDeleteAlbum($(this).data("id"));
});
$(".move-cat-title-container").unbind("click").on("click", function () {
openRenameAlbumPopIn($(this).find(".move-cat-title").attr("title"));
$(".RenameAlbumSubmit").data("cat_id", $(this).attr('data-id'));
});
$('.tiptip').tipTip({
delay: 0,
fadeIn: 200,
fadeOut: 200,
edgeOffset: 3
});
updateTitleBadge(nb_albums+1)
goToNode($(".tree").tree('getNodeById', data.result.id), $(".tree").tree('getNodeById', data.result.id));
$('html,body').animate({
scrollTop: $("#cat-" + data.result.id).offset().top - screen.height / 2},
'slow');
closeAddAlbumPopIn();
$(".AddAlbumSubmit").removeClass("notClickable");
} else {
$(".AddAlbumErrors").text(str_album_name_empty).show();
$(".AddAlbumSubmit").removeClass("notClickable");
}
$(".move-cat-add").unbind("click").on("click", function () {
openAddAlbumPopIn($(this).data("aid"));
$(".AddAlbumSubmit").data("a-parent", $(this).data("aid"));
});
$(".move-cat-add-small").unbind("click").on("click", function () {
openAddAlbumPopIn($(this).data("aid"));
$(".AddAlbumSubmit").data("a-parent", $(this).data("aid"));
});
$(".move-cat-delete").on("click", function () {
triggerDeleteAlbum($(this).data("id"));
});
$(".move-cat-delete-small").on("click", function () {
triggerDeleteAlbum($(this).data("id"));
});
$(".move-cat-title-container").unbind("click").on("click", function () {
openRenameAlbumPopIn($(this).find(".move-cat-title").attr("title"));
$(".RenameAlbumSubmit").data("cat_id", $(this).attr('data-id'));
});
$('.tiptip').tipTip({
delay: 0,
fadeIn: 200,
fadeOut: 200,
edgeOffset: 3
});
updateTitleBadge(nb_albums+1)
goToNode($(".tree").tree('getNodeById', data.result.id), $(".tree").tree('getNodeById', data.result.id));
$('html,body').animate({
scrollTop: $("#cat-" + data.result.id).offset().top - screen.height / 2},
'slow');
},
error: function(message) {
console.log(message);
}
}).done(function () {
closeAddAlbumPopIn();
$(".AddAlbumSubmit").removeClass("notClickable");
});
})
@ -477,6 +483,17 @@ function openAddAlbumPopIn(parentAlbumId) {
$("#AddAlbum").fadeIn();
$(".AddAlbumLabelUsername .user-property-input").val('');
$(".AddAlbumLabelUsername .user-property-input").focus();
$("#AddAlbum").on('keyup', function (e) {
// 13 is 'Enter'
if(e.keyCode === 13) {
$(".AddAlbumSubmit").trigger("click");
}
// 27 is 'Escape'
if(e.keyCode === 27) {
closeAddAlbumPopIn();
}
})
}
function closeAddAlbumPopIn() {
$("#AddAlbum").fadeOut();

View file

@ -38,7 +38,8 @@ const str_add_photo = '{'Add Photos'|@translate|escape:javascript}';
const str_visit_gallery = '{'Visit Gallery'|@translate|escape:javascript}';
const str_sort_order = '{'Automatic sort order'|@translate|escape:javascript}';
const str_delete_album = '{'Delete album'|@translate|escape:javascript}';
const str_root_order = '{'Apply to root albums'|@translate|escape:javascript}'
const str_root_order = '{'Apply to root albums'|@translate|escape:javascript}';
str_album_name_empty = '{'Album name must not be empty'|@translate|escape:javascript}'
const add_album_root_title = '{'Create a new album at root'|@translate|escape:javascript}';
const add_sub_album_of = '{'Create a sub-album of "%s"'|@translate|escape:javascript}';

View file

@ -1323,4 +1323,5 @@ $lang['Always have a backup of your database and files.'] = 'Always have a backu
$lang['The best is to have them made automatically on a regular basis.'] = 'The best is to have them made automatically on a regular basis.';
$lang['If anything bad happens during the update, you would be able to restore a backup.'] = 'If anything bad happens during the update, you would be able to restore a backup.';
$lang['Apply to root albums'] = 'Apply to root albums';
$lang['Album name must not be empty'] = 'Album name must not be empty';
// Leave this line empty

View file

@ -1323,4 +1323,5 @@ $lang['Always have a backup of your database and files.'] = 'Ayez toujours une s
$lang['The best is to have them made automatically on a regular basis.'] = 'Le mieux est de le faire automatiquement et régulièrement';
$lang['If anything bad happens during the update, you would be able to restore a backup.'] = 'Si quelque chose arrive pendant la mise à jour, il sera possible de restaurer la sauvegarde';
$lang['Apply to root albums'] = 'Appliquer aux albums racine';
$lang['Album name must not be empty'] = 'Le nom de l\'album ne doit pas être vide';
// Leave this line empty

View file

@ -93,6 +93,7 @@ $(() => {
url: ws_url,
data: { format: "json", method: "reflection.getMethodList" }
}).done(function (result) {
console.log(result);
result = parsePwgJSON(result);
if (result != null) {