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 +41 -8
2 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 235874265c - Show all commits

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

@ -7,13 +7,29 @@ const formsetPrefix = 'form';
const inputTotalForms = document.getElementById(`id_${formsetPrefix}-TOTAL_FORMS`);
const tagInput = document.getElementById('id_tags');
// Create function addImgUploadFormClasses
function addImgUploadFormClasses() {
// Function intializes img upload widgets' custom classes for js manage
const inputImgHelper = document.querySelector('.js-input-img-helper');
const inputImgCaptionHelper = document.querySelector('.js-input-img-caption-helper');
inputImgHelper.querySelector('input')
.classList.add('js-input-img');
inputImgHelper.querySelector('label')
.classList.add('d-none');
inputImgCaptionHelper.querySelector('input')
.classList.add('js-input-img-caption');
}
function appendImageUploadForm() {
const i = inputTotalForms.value;
const formRow = document.createElement('div');
const newFormHTML = `
<div class="previews-list-item">
<div class="align-items-center d-flex previews-list-item-thumbnail pl-3">
<div class="js-input-img-thumbnail previews-list-item-thumbnail-img"" title="Preview">
<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>
@ -83,6 +99,7 @@ function removeImgUploadForm() {
}
// Create function resetImgUploadForm
// TODO: fix function resetImgUploadForm on pageload
function resetImgUploadForm() {
const btnResetImgUploadForm = document.querySelectorAll('.js-btn-reset-img-upload-form');
@ -153,6 +170,7 @@ function setImgUploadFormThumbnail() {
// Create function init
function init() {
addImgUploadFormClasses();
resetImgUploadForm();
}

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

@ -7,13 +7,28 @@
{{ 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 class="ext-edit-field-row js-ext-edit-field-row">
<div class="previews-list-item">
<div class="align-items-center d-flex previews-list-item-thumbnail pl-3">
<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 class="details flex-grow-1">
<div class="js-input-img-caption-helper mb-2">
{% include "common/components/field.html" with field=inlineform.caption label='Caption' %}
</div>
<div class="align-items-center d-flex js-input-img-helper justify-content-between">
{% include "common/components/field.html" with field=inlineform.source label='File' %}
<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>
</ul>
</div>
</div>
</div>
</div>
{{ inlineform.non_form_errors }}