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

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

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

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

@ -1,23 +1,25 @@
{% load common %}
{# Upload new preview images #}
{% load i18n %}
<div id="add-image-container">
{{ add_preview_formset.management_form }}
{{ add_preview_formset.non_form_errors }}
{% for newform in add_preview_formset %}
{% with inlineform=newform|add_form_classes %}
<div class="row">
<div class="col">
{% 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 class="previews-upload">
<div id="add-image-container" class="previews-list">
{{ add_preview_formset.management_form }}
{{ add_preview_formset.non_form_errors }}
{% for newform in add_preview_formset %}
{% with inlineform=newform|add_form_classes %}
<div class="row">
<div class="col">
{% 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 class="col">
{% include "common/components/field.html" with field=inlineform.caption label='Caption' %}
</div>
</div>
{{ inlineform.non_form_errors }}
{% endwith %}
{% endfor %}
{{ inlineform.non_form_errors }}
{% endwith %}
{% endfor %}
</div>
</div>
<div class="row">
<div class="col text-right mt-3">