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 +51 -32
3 changed files with 51 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0d67bf5d35 - Show all commits

6
common/static/common/styles/_extension.sass
View File

@ -321,6 +321,7 @@
width: var(--preview-thumbnail-max-size) width: var(--preview-thumbnail-max-size)
.previews-list-item-thumbnail-img .previews-list-item-thumbnail-img
background-color: var(--background-color)
background-position: center background-position: center
background-size: cover background-size: cover
border-radius: var(--border-radius) border-radius: var(--border-radius)
@ -350,6 +351,11 @@
pointer-events: none pointer-events: none
user-select: none user-select: none
.form-control
&[type="file"]
font-size: var(--font-size-extra-small)
max-width: 50%
.ext-version-history .ext-version-history
summary summary
display: flex display: flex

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

@ -9,22 +9,30 @@ function appendImageUploadForm() {
const i = inputTotalForms.value; const i = inputTotalForms.value;
const formRow = document.createElement('div'); const formRow = document.createElement('div');
const newFormHTML = ` const newFormHTML = `
<div class="col"> <div class="previews-list-item">
<input type="file" name="${formsetPrefix}-${i}-source" <div class="previews-list-item-thumbnail pl-3">
accept="image/*" class="form-control" <div class="mb-3 previews-list-item-thumbnail-img" style="background-image: url('');" title="Preview"></div>
id="id_${formsetPrefix}-${i}-source"> </div>
<button class="btn btn-link js-btn-reset-img-upload-form mt-1 pl-0 pr-2"><i class="i-refresh"></i> Reset</button> <div class="details flex-grow-1">
<button class="btn btn-link js-btn-remove-img-upload-form mt-1 px-2"><i class="i-trash"></i> Remove</button> <div class="mb-2">
<div class="invalid-feedback"></div> <label for="${formsetPrefix}-${i}-caption">Caption</label>
</div> <input class="form-control" id="${formsetPrefix}-${i}-caption" type="text" maxlength="255" name="${formsetPrefix}-${i}-caption" placeholder="Describe the preview">
<div class="col"> </div>
<input type="text" name="${formsetPrefix}-${i}-caption" <div class="d-flex justify-content-between">
maxlength="255" placeholder="Describe the preview" <input accept="image/*" class="form-control js-input-img" id="id_${formsetPrefix}-${i}-source" type="file" name="${formsetPrefix}-${i}-source">
class="form-control" id="id_${formsetPrefix}-${i}-caption"> <ul class="pt-0">
<div class="invalid-feedback"></div> <li>
<button class="btn btn-link btn-sm js-btn-reset-img-upload-form pl-2 pr-0"><i class="i-refresh"></i> Reset</button>
</li>
<li>
<button class="btn btn-link btn-sm js-btn-remove-img-upload-form pl-2 pr-0"><i class="i-trash"></i> Delete</button>
</li>
</ul>
</div>
</div>
</div> </div>
`; `;
formRow.classList.add('row', 'ext-edit-field-row', 'js-ext-edit-field-row'); formRow.classList.add('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;
@ -68,8 +76,11 @@ function resetImgUploadForm() {
item.addEventListener('click', function(e) { item.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
// Find the associated image input (assuming it's a sibling) // Find the row parent
const inputImg = item.previousElementSibling; const rowParent = this.closest('.js-ext-edit-field-row');
// Find the input image
const inputImg = rowParent.querySelector('.js-input-img');
// Reset the selected image (if any) // Reset the selected image (if any)
inputImg.value = ''; // Clear the input value inputImg.value = ''; // Clear the input value

34
extensions/templates/extensions/manage/components/add_previews.html
View File

@ -1,23 +1,25 @@
{% load common %} {% load common %}
{# Upload new preview images #} {# Upload new preview images #}
{% load i18n %} {% load i18n %}
<div id="add-image-container"> <div class="previews-upload">
{{ add_preview_formset.management_form }} <div id="add-image-container" class="previews-list">
{{ add_preview_formset.non_form_errors }} {{ add_preview_formset.management_form }}
{% for newform in add_preview_formset %} {{ add_preview_formset.non_form_errors }}
{% with inlineform=newform|add_form_classes %} {% for newform in add_preview_formset %}
<div class="row"> {% with inlineform=newform|add_form_classes %}
<div class="col"> <div class="row">
{% include "common/components/field.html" with field=inlineform.source label='File' %} <div class="col">
<button class="btn btn-link js-btn-reset-img-upload-form mt-1 pl-0 pr-2"><i class="i-refresh"></i> Reset</button> {% include "common/components/field.html" with field=inlineform.source label='File' %}
<button class="btn btn-link js-btn-reset-img-upload-form mt-1 pl-0 pr-2"><i class="i-refresh"></i> Reset</button>
</div>
<div class="col">
{% include "common/components/field.html" with field=inlineform.caption label='Caption' %}
</div>
</div> </div>
<div class="col"> {{ inlineform.non_form_errors }}
{% include "common/components/field.html" with field=inlineform.caption label='Caption' %} {% endwith %}
</div> {% endfor %}
</div> </div>
{{ inlineform.non_form_errors }}
{% endwith %}
{% endfor %}
</div> </div>
<div class="row"> <div class="row">
<div class="col text-right mt-3"> <div class="col text-right mt-3">