UI: fixes based on Actionable Feedback from devtalk and frontend changes #40

Merged
Pablo Vazquez merged 15 commits from martonlente/extensions-website:ui-alpha-launch-actionable-feedback into main 2024-02-27 16:05:54 +01:00
Showing only changes of commit efcb4678c2 - Show all commits

View File

@ -14,6 +14,7 @@ function appendImageUploadForm() {
accept="image/*" class="form-control" accept="image/*" class="form-control"
id="id_${formsetPrefix}-${i}-source"> id="id_${formsetPrefix}-${i}-source">
<button class="btn btn-link js-btn-reset-img-upload-form mt-1"><i class="i-refresh"></i> Reset</button> <button class="btn btn-link js-btn-reset-img-upload-form mt-1"><i class="i-refresh"></i> Reset</button>
<button class="btn btn-link js-btn-remove-img-upload-form mt-1"><i class="i-trash"></i> Remove</button>
<div class="invalid-feedback"></div> <div class="invalid-feedback"></div>
</div> </div>
<div class="col"> <div class="col">
@ -23,7 +24,7 @@ function appendImageUploadForm() {
<div class="invalid-feedback"></div> <div class="invalid-feedback"></div>
</div> </div>
`; `;
formRow.classList.add('row', 'ext-edit-field-row'); formRow.classList.add('row', 'ext-edit-field-row', 'js-ext-edit-field-row');
formRow.innerHTML = newFormHTML; formRow.innerHTML = newFormHTML;
formsetContainer.appendChild(formRow); formsetContainer.appendChild(formRow);
inputTotalForms.value = parseInt(inputTotalForms.value) + 1; inputTotalForms.value = parseInt(inputTotalForms.value) + 1;
@ -33,12 +34,32 @@ btnAddImage.addEventListener('click', function(ev) {
ev.preventDefault(); ev.preventDefault();
appendImageUploadForm(); appendImageUploadForm();
// Call function resetImgUploadForm // Init function removeImgUploadForm
removeImgUploadForm();
// Init function resetImgUploadForm
resetImgUploadForm(); resetImgUploadForm();
return false; return false;
}); });
// Create function removeImgUploadForm
function removeImgUploadForm() {
const btnRemoveImgUploadForm = document.querySelectorAll('.js-btn-remove-img-upload-form');
btnRemoveImgUploadForm.forEach(function(item) {
item.addEventListener('click', function(e) {
e.preventDefault();
// Find the row parent
const rowParent = this.closest('.js-ext-edit-field-row');
// Remove the row
rowParent.remove();
});
});
}
// Create function resetImgUploadForm // Create function resetImgUploadForm
function resetImgUploadForm() { function resetImgUploadForm() {
const btnResetImgUploadForm = document.querySelectorAll('.js-btn-reset-img-upload-form'); const btnResetImgUploadForm = document.querySelectorAll('.js-btn-reset-img-upload-form');