related to #1609 album rename works

This commit is contained in:
Matthieu Leproux
2022-04-05 16:13:44 +02:00
parent 6d21feed3c
commit 9991730133
4 changed files with 104 additions and 18 deletions
+1 -1
View File
@@ -563,7 +563,7 @@ input:focus + .slider {
/*UserList Pop in*/
.CloseUserList, .CloseAddAlbum, .CloseDeleteAlbum{
.CloseUserList, .CloseAddAlbum, .CloseDeleteAlbum, .CloseRenameAlbum {
color:white;
}
+43 -2
View File
@@ -14,7 +14,7 @@ $(document).ready(() => {
function createAlbumNode(node, li) {
icon = "<span class='%icon%'></span>";
title = "<span class='move-cat-title-container'><p class='move-cat-title' title='%name%'>%name%</p> <span class='icon-pencil'></span> </span>";
title = "<span data-id='"+node.id+"' class='move-cat-title-container'><p class='move-cat-title' title='%name%'>%name%</p> <span class='icon-pencil'></span> </span>";
toggler_cont = "<div class='move-cat-toogler' data-id=%id%>%content%</div>";
toggler_close = "<span class='icon-left-open'></span>";
toggler_open = "<span class='icon-down-open'></span>";
@@ -231,6 +231,39 @@ $(document).ready(() => {
}
})
// RenameAlbumPopIn
$(".RenameAlbumErrors").hide();
$(".move-cat-title-container").on("click", function () {
openRenameAlbumPopIn($(this).find(".move-cat-title").attr("title"));
$(".RenameAlbumSubmit").data("cat_id", $(this).attr('data-id'));
});
$(".CloseRenameAlbum").on("click", function () {
closeRenameAlbumPopIn();
});
$(".RenameAlbumCancel").on("click", function () {
closeRenameAlbumPopIn();
})
$(".RenameAlbumSubmit").on("click", function () {
catToEdit = $(this).data("cat_id");
jQuery.ajax({
url: "ws.php?format=json&method=pwg.categories.setInfo",
type: "POST",
data: {
category_id : catToEdit,
name : $(".RenameAlbumLabelUsername input").val(),
},
success: function (raw_data) {
data = jQuery.parseJSON(raw_data);
$("#cat-"+catToEdit).find(".move-cat-title-container p.move-cat-title").html($(".RenameAlbumLabelUsername input").val());
closeRenameAlbumPopIn();
},
error: function(message) {
console.log(message);
}
});
})
// AddAlbumPopIn
$(".AddAlbumErrors").hide();
$(".DeleteAlbumErrors").hide();
@@ -350,11 +383,19 @@ function openAddAlbumPopIn() {
$(".AddAlbumLabelUsername .user-property-input").val('');
$(".AddAlbumLabelUsername .user-property-input").focus();
}
function closeAddAlbumPopIn() {
$("#AddAlbum").fadeOut();
}
function openRenameAlbumPopIn(replacedAlbumName) {
$("#RenameAlbum").fadeIn();
$(".RenameAlbumTitle span").html(rename_item.replace("%s", replacedAlbumName))
$(".RenameAlbumLabelUsername .user-property-input").val('');
$(".RenameAlbumLabelUsername .user-property-input").focus();
}
function closeRenameAlbumPopIn() {
$("#RenameAlbum").fadeOut();
}
function triggerDeleteAlbum(cat_id) {
$.ajax({
+54 -12
View File
@@ -29,6 +29,7 @@ const delete_album_with_subs = '{'Delete album "%s" and its %d sub-albums.'|@tra
const has_images_associated_outside = '{"delete album and all %d photos, even the %d associated to other albums"|@translate|escape:javascript}';
const has_images_becomming_orphans = '{'delete album and the %d orphan photos'|@translate|escape:javascript}';
const has_images_recursives = '{'delete only album, not photos'|@translate|escape:javascript}';
const rename_item = '{'Rename "%s"'|@translate|escape:javascript}';
{/footer_script}
{combine_script id='albums' load='footer' path='admin/themes/default/js/albums.js'}
@@ -119,7 +120,7 @@ const has_images_recursives = '{'delete only album, not photos'|@translate|escap
<div id="AddAlbum" class="AddAlbumPopIn">
<div class="AddAlbumPopInContainer">
<a class="icon-cancel CloseAddAlbum CloseAddAlbum"></a>
<a class="icon-cancel CloseAddAlbum"></a>
<div class="AddIconContainer">
<span class="AddIcon icon-blue icon-plus-circled"></span>
@@ -167,6 +168,38 @@ const has_images_recursives = '{'delete only album, not photos'|@translate|escap
</div>
</div>
<div id="RenameAlbum" class="RenameAlbumPopIn">
<div class="RenameAlbumPopInContainer">
<a class="icon-cancel CloseRenameAlbum"></a>
<div class="AddIconContainer">
<span class="AddIcon icon-blue icon-pencil"></span>
</div>
<div class="RenameAlbumTitle">
<span></span>
</div>
<div class="RenameAlbumInputContainer">
<label class="user-property-label RenameAlbumLabelUsername">{'Rename album'|@translate}
<input class="user-property-input" />
</label>
</div>
<div class="RenameAlbumErrors icon-cancel">
</div>
<div class="RenameAlbumFormValidation">
<div class="RenameAlbumSubmit">
<span>{'Yes, rename'|@translate}</span>
</div>
<div class="RenameAlbumCancel">
<span>{'Cancel'|@translate}</span>
</div>
</div>
</div>
</div>
<div id="DeleteAlbum" class="DeleteAlbumPopIn">
<div class="DeleteAlbumPopInContainer">
<div class="DeleteIconTitle">
@@ -238,11 +271,11 @@ const has_images_recursives = '{'delete only album, not photos'|@translate|escap
}
}
#AddAlbum, #DeleteAlbum {
#AddAlbum, #DeleteAlbum, #RenameAlbum {
display: none;
}
.AddAlbumPopIn, .DeleteAlbumPopIn{
.AddAlbumPopIn, .DeleteAlbumPopIn, .RenameAlbumPopIn{
position: fixed;
z-index: 100;
left: 0;
@@ -253,7 +286,7 @@ const has_images_recursives = '{'delete only album, not photos'|@translate|escap
background-color: rgba(0,0,0,0.7);
}
.AddAlbumPopInContainer, .DeleteAlbumPopInContainer{
.AddAlbumPopInContainer, .DeleteAlbumPopInContainer, .RenameAlbumPopInContainer{
display:flex;
position:absolute;
left:50%;
@@ -271,6 +304,11 @@ const has_images_recursives = '{'delete only album, not photos'|@translate|escap
border-radius: 4px;
border-top: solid 7px #e74c3c;
}
.RenameAlbumPopInContainer {
width: auto;
min-width: 270px;
max-width: 700px;
}
.user-property-input {
color:#353535;
@@ -292,7 +330,7 @@ const has_images_recursives = '{'delete only album, not photos'|@translate|escap
margin-bottom:5px;
}
.AddIconContainer, .DeleteIconContainer {
.AddIconContainer, .DeleteIconContainer, .AddIconContainer {
margin-top: 10px;
}
@@ -302,7 +340,7 @@ const has_images_recursives = '{'delete only album, not photos'|@translate|escap
font-size: 2em;
}
.AddIconTitle {
.AddIconTitle, .RenameAlbumTitle {
font-size:1.4em;
font-weight:bold;
margin-bottom:20px;
@@ -318,7 +356,8 @@ const has_images_recursives = '{'delete only album, not photos'|@translate|escap
}
.AddAlbumSubmit,
.DeleteAlbumSubmit {
.DeleteAlbumSubmit,
.RenameAlbumSubmit {
cursor:pointer;
font-weight:bold;
color: #3F3E40;
@@ -336,14 +375,14 @@ const has_images_recursives = '{'delete only album, not photos'|@translate|escap
transition: .1s;
}
.AddAlbumCancel {
.AddAlbumCancel, .RebameAlbumCancel {
color: #3F3E40;
font-weight: bold;
cursor: pointer;
font-size:1em;
}
.CloseAddAlbum{
.CloseAddAlbum, .CloseRenameAlbum {
position:absolute;
right:-40px;
top:-40px;
@@ -374,13 +413,15 @@ input[name="position"] {
font-weight: 600;
}
.AddAlbumFormValidation,
.DeleteAlbumFormValidation {
.DeleteAlbumFormValidation,
.RenameAlbumFormValidation {
display: flex;
flex-direction: row;
align-items: baseline;
}
.AddAlbumCancel,
.DeleteAlbumCancel {
.DeleteAlbumCancel,
.RenameAlbumCancel {
cursor: pointer;
font-weight: bold;
color: #3F3E40;
@@ -402,7 +443,8 @@ input[name="position"] {
background: #bdc3c7;
}
.AddAlbumSubmit,
.DeleteAlbumSubmit {
.DeleteAlbumSubmit,
.RenameAlbumSubmit {
margin-right: 10px;
padding: 10px 20px;
}
+6 -3
View File
@@ -6270,13 +6270,15 @@ color:#FF7B00;
.AddUserPopInContainer,
.AddAlbumPopInContainer,
.DeleteAlbumPopInContainer {
.DeleteAlbumPopInContainer,
.RenameAlbumPopInContainer {
background-color: white;
}
.AddUserPopInContainer .AddIconTitle,
.AddAlbumPopInContainer .AddIconTitle,
.DeleteAlbumPopInContainer .DeleteIconTitle {
.DeleteAlbumPopInContainer .DeleteIconTitle,
.RenameAlbumPopInContainer .RenameAlbumTitle {
color: #000000;
}
@@ -6288,7 +6290,8 @@ color:#FF7B00;
.AddUserPopInContainer .AddUserInput,
.AddAlbumPopInContainer .AddAlbumInput,
.DeleteAlbumPopInContainer .DeleteAlbumInput {
.DeleteAlbumPopInContainer .DeleteAlbumInput,
.RenameAlbumPopInContainer .RenameAlbumInput {
background-color:white;
border: solid 2px #D4D4D4;
}