infrastructure/extensions-website
4
8
Fork 10
Code Issues 20 Pull Requests 2 Projects Releases Wiki Activity

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
Conversation 0 Commits 15 Files Changed 7 +21 -3
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bcef0f3b35 - Show all commits

24
extensions/static/extensions/scripts/manage.js
View File

@ -12,15 +12,19 @@ function appendImageUploadForm() {
const formRow = document.createElement('div'); const formRow = document.createElement('div');
const newFormHTML = ` const newFormHTML = `
<div class="previews-list-item"> <div class="previews-list-item">
<div class="previews-list-item-thumbnail pl-3"> <div class="align-items-center d-flex previews-list-item-thumbnail pl-3">
<div class="js-input-img-thumbnail mb-3 previews-list-item-thumbnail-img" style="background-image: url('');" title="Preview"></div> <div class="js-input-img-thumbnail previews-list-item-thumbnail-img"" title="Preview">
<div class="align-items-center d-flex js-input-img-thumbnail-icon justify-content-center">
<i class="i-image"></i>
</div>
</div>
</div> </div>
<div class="details flex-grow-1"> <div class="details flex-grow-1">
<div class="mb-2"> <div class="mb-2">
<label for="${formsetPrefix}-${i}-caption">Caption</label> <label for="${formsetPrefix}-${i}-caption">Caption</label>
<input class="form-control" id="${formsetPrefix}-${i}-caption" type="text" maxlength="255" name="${formsetPrefix}-${i}-caption" placeholder="Describe the preview"> <input class="form-control" id="${formsetPrefix}-${i}-caption" type="text" maxlength="255" name="${formsetPrefix}-${i}-caption" placeholder="Describe the preview">
</div> </div>
<div class="d-flex justify-content-between"> <div class="align-items-center d-flex justify-content-between">
<input accept="image/*" class="form-control js-input-img" id="id_${formsetPrefix}-${i}-source" type="file" name="${formsetPrefix}-${i}-source"> <input accept="image/*" class="form-control js-input-img" id="id_${formsetPrefix}-${i}-source" type="file" name="${formsetPrefix}-${i}-source">
<ul class="pt-0"> <ul class="pt-0">
<li> <li>
@ -90,11 +94,18 @@ function resetImgUploadForm() {
// Find the input image thumbnail // Find the input image thumbnail
const inputImgThumbnail = rowParent.querySelector('.js-input-img-thumbnail'); const inputImgThumbnail = rowParent.querySelector('.js-input-img-thumbnail');
// Find the input image thumbnail icon
const inputImgThumbnailIcon = rowParent.querySelector('.js-input-img-thumbnail-icon');
// Reset the selected image (if any) // Reset the selected image (if any)
inputImg.value = ''; // Clear the input value inputImg.value = ''; // Clear the input value
// Reset the selected image thumbnail // Reset the selected image thumbnail
inputImgThumbnail.removeAttribute('style'); inputImgThumbnail.removeAttribute('style');
// Hide the selected image thumbnail icon
inputImgThumbnailIcon.classList.add('d-flex');
inputImgThumbnailIcon.classList.remove('d-none');
}); });
}); });
} }
@ -114,10 +125,17 @@ function setImgUploadFormThumbnail() {
// Find the thumbnail image // Find the thumbnail image
const inputImgThumbnail = rowParent.querySelector('.js-input-img-thumbnail'); const inputImgThumbnail = rowParent.querySelector('.js-input-img-thumbnail');
// Find the input image thumbnail icon
const inputImgThumbnailIcon = rowParent.querySelector('.js-input-img-thumbnail-icon');
// Set thumbnail img // Set thumbnail img
if (file) { if (file) {
inputImgThumbnail.style.backgroundImage = `url('${URL.createObjectURL(file)}')`; inputImgThumbnail.style.backgroundImage = `url('${URL.createObjectURL(file)}')`;
} }
// Hide the selected image thumbnail icon
inputImgThumbnailIcon.classList.add('d-none');
inputImgThumbnailIcon.classList.remove('d-flex');
}); });
}); });
} }