iarv/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-05-03 20:12:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Interface Update

Browse Source
This commit is contained in:
marsooooo
2024-06-17 20:04:13 +02:00
parent 803b247ca2
commit 0f65f2dfa7
2 changed files with 86 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
admin/themes/default/js/batchManagerUnit.js
View File

@@ -59,6 +59,18 @@ $(document).ready(function () {
}
//Succes badge
function updateSuccesGlobalBadge() {
var visibleLocalSuccesCount = $(".local-succes-badge").filter(function() {
return $(this).css('display') === 'block';
}).length;
if (visibleLocalSuccesCount > 0) {
showSuccesGlobalBadge()
} else {
hideSuccesGlobalBadge()
}
}
function showSuccesLocalBadge(pictureId) {
var badge = $("#picture-" + pictureId + " .local-succes-badge");
badge.css({
@@ -77,20 +89,46 @@ function hideSuccesLocalBadge(pictureId) {
$("#picture-" + pictureId + " .local-succes-badge").css('display', 'none');
}
function showLocalSaveIcon (pictureId) {
$("#picture-" + pictureId + " .local-save-icon").css('display', 'block');
$("#picture-" + pictureId + " .action-save-picture").css({
'pointer-events': 'none',
'opacity': '0.5'
});
function showSuccesGlobalBadge() {
var badge = $(".global-succes-badge");
badge.css({
'display': 'block',
'opacity': 1
});
setTimeout(() => {
badge.fadeOut(1000, function() {
badge.css('display', 'none');
});
}, 3000);
}
function hideLocalSaveIcon(pictureId) {
$("#picture-" + pictureId + " .local-save-icon").css('display', 'none');
$("#picture-" + pictureId + " .action-save-picture").css({
'pointer-events': 'auto',
'opacity': '1'
});
function hideSuccesGlobalBadge() {
$("global-succes-badge").css('display', 'none');
}
function disableLocalButton(pictureId) {
$("#picture-" + pictureId + " .action-save-picture").addClass("disabled");
$("#picture-" + pictureId + " .action-save-picture i").removeClass("icon-floppy").addClass("icon-spin6 animate-spin");
}
function enableLocalButton(pictureId) {
$("#picture-" + pictureId + " .action-save-picture").removeClass("disabled");
$("#picture-" + pictureId + " .action-save-picture i").removeClass("icon-spin6 animate-spin").addClass("icon-floppy");
}
function disableGlobalButton() {
$(".action-save-global").addClass("disabled");
$(".action-save-global i").removeClass("icon-floppy").addClass("icon-spin6 animate-spin");
}
function enableGlobalButton() {
$(".action-save-global").removeClass("disabled");
$(".action-save-global i").removeClass("icon-spin6 animate-spin").addClass("icon-floppy");
}
@@ -177,6 +215,8 @@ function hideLocalSaveIcon(pictureId) {
function saveChanges(pictureId) {
if ($("#picture-" + pictureId + " .local-unsaved-badge").css('display') === 'block') {
disableGlobalButton();
disableLocalButton(pictureId)
console.log("Saving changes for " + pictureId);
// Retrieve Infos
@@ -200,7 +240,7 @@ function hideLocalSaveIcon(pictureId) {
tags.push(tagId);
});
var tagsStr = tags.join(',');
showLocalSaveIcon(pictureId);
$.ajax({
url: 'ws.php?format=json',
method: 'POST',
@@ -220,15 +260,20 @@ function hideLocalSaveIcon(pictureId) {
},
success: function(response) {
console.log(response);
hideLocalSaveIcon(pictureId);
enableLocalButton(pictureId);
enableGlobalButton();
hideUnsavedLocalBadge(pictureId);
showSuccesLocalBadge(pictureId);
updateUnsavedGlobalBadge();
updateSuccesGlobalBadge();
},
error: function(xhr, status, error) {
hideLocalSaveIcon(pictureId);
enableLocalButton(pictureId);
enableGlobalButton();
hideUnsavedLocalBadge(pictureId);
showErrorLocalBadge(pictureId);
updateUnsavedGlobalBadge();
updateSuccesGlobalBadge();
console.error('Error:', error);
}
});

38
admin/themes/default/template/batch_manager_unit.tpl
View File

@@ -329,7 +329,7 @@ var sliders = {
{/footer_script}
{debug}
<div class="deleted-element" data-image_id="{$element.ID}" style="display: none;"><i class="icon-ok">&#xe819;</i><p>Image {$element.ID} was succesfully deleted</p></div>
<div class="deleted-element" data-image_id="{$element.ID}" style="display: none;"><i class="icon-ok">&#xe819;</i><p>Image #{$element.ID} '{$element.FILE}' was succesfully deleted</p></div>
<fieldset class="elementEdit" id="picture-{$element.ID}" data-image_id="{$element.ID}">
<div class="media-box">
<img src="{$element.TN_SRC}" alt="imagename" class="media-box-embed" style="{if $element.FORMAT}width:100%; max-height:100%;{else}max-width:100%; height:100%;{/if}">
@@ -451,11 +451,12 @@ var sliders = {
<textarea cols="50" rows="4" name="description" class="description-box" id="description-{$element.id}">{$element.DESCRIPTION}</textarea>
</div>
<div class="validation-container">
<div class="save-button-container">
<div class="buttonLike action-save-picture"><i class="icon-floppy"></i>{'Submit'|@translate}</div>
<i class="local-save-icon icon-spin6 animate-spin" style="display: none;">&#xe81d;</i>
<div class="local-unsaved-badge badge-container" style="display: none;"><p class="badge-unsaved"><i class="icon-attention">&#xe829;</i>Changes pending</p></div>
<div class="local-succes-badge badge-container" style="display: none;"><p class="badge-succes"><i class="icon-ok">&#xe819;</i>Changes saved</p></div>
<div class="local-error-badge badge-container" style="display: none;"><p class="badge-error"><i class="icon-cancel">&#xe822;</i>Error during save</p></div>
</div>
<div class="local-unsaved-badge badge-container" style="display: none;"><div class="badge-unsaved"><i class="icon-attention">&#xe829;</i>Changes pending</div></div>
<div class="local-succes-badge badge-container" style="display: none;"><div class="badge-succes"><i class="icon-ok">&#xe819;</i>Changes saved</div></div>
<div class="local-error-badge badge-container" style="display: none;"><div class="badge-error"><i class="icon-cancel">&#xe822;</i>Error during save</div></div>
</div>
</div>
</fieldset>
@@ -486,21 +487,20 @@ var sliders = {
<div class="bottom-save-bar">
<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
<div class="badge-container global-unsaved-badge" style="display: none;">
<p class="badge-unsaved"><i class="icon-attention">&#xe829;</i>
<div class="badge-unsaved"><i class="icon-attention">&#xe829;</i>
<span id="unsaved-count"></span> image(s) contains unsaved changes
</p>
</div>
</div>
<div class="badge-container global-succes-badge" style="display: none;">
<p class="badge-succes"><i class="icon-attention">&#xe829;</i>
<div class="badge-succes"><i class="icon-attention">&#xe829;</i>
Changes saved
</p>
</div>
</div>
<div class="badge-container global-error-badge" style="display: none;">
<p class="badge-error"><i class="icon-attention">&#xe829;</i>
<div class="badge-error"><i class="icon-attention">&#xe829;</i>
Error during save
</p>
</div>
</div>
<i class="global-save-icon icon-spin6 animate-spin" style="display: none;">&#xe81d;</i>
<div class="buttonLike action-save-global"><i class="icon-floppy"></i>Save all photos</div>
</div>
@@ -826,4 +826,18 @@ var sliders = {
gap: 10px;
}
.save-button-container{
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 45px;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}
</style>