diff --git a/common/static/common/styles/_extension.sass b/common/static/common/styles/_extension.sass index 23a8220a..05798916 100644 --- a/common/static/common/styles/_extension.sass +++ b/common/static/common/styles/_extension.sass @@ -127,6 +127,7 @@ a overflow: hidden + // TODO: consider changing text-decoration underlines to border-bottoms for improved, more spatious vertical spacings text-decoration: underline text-overflow: ellipsis white-space: nowrap @@ -339,6 +340,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) @@ -368,6 +370,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 diff --git a/extensions/static/extensions/scripts/manage.js b/extensions/static/extensions/scripts/manage.js index 323e5fa6..1239c408 100644 --- a/extensions/static/extensions/scripts/manage.js +++ b/extensions/static/extensions/scripts/manage.js @@ -1,3 +1,5 @@ +// TODO: improve and refactor variable namings + const formsetContainer = document.getElementById('add-image-container'); const form = document.getElementById('update-extension-form'); const btnAddImage = document.getElementById('btn-add-image'); @@ -5,35 +7,173 @@ 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 = ` -
- -
-
-
- -
+
+
+
+
+ +
+
+
+
+
+ + +
+
+ +
    +
  • + +
    • +
  • + +
    • +
+
+
`; - formRow.classList.add('row', 'ext-edit-field-row'); + formRow.classList.add('ext-edit-field-row', 'fade', 'js-ext-edit-field-row'); formRow.innerHTML = newFormHTML; formsetContainer.appendChild(formRow); inputTotalForms.value = parseInt(inputTotalForms.value) + 1; + + setTimeout(function() { + // TODO: fix jump coming from grid gap on parent + formRow.classList.add('show'); + }, 20); } btnAddImage.addEventListener('click', function(ev) { ev.preventDefault(); appendImageUploadForm(); + + // Init function removeImgUploadForm + removeImgUploadForm(); + + // Init function resetImgUploadForm + resetImgUploadForm(); + + // Init function setImgUploadFormThumbnail + setImgUploadFormThumbnail(); + 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 +function resetImgUploadForm() { + const btnResetImgUploadForm = document.querySelectorAll('.js-btn-reset-img-upload-form'); + + btnResetImgUploadForm.forEach(function(item) { + item.addEventListener('click', function(e) { + e.preventDefault(); + + // Find the row parent + const rowParent = this.closest('.js-ext-edit-field-row'); + + // Find the input image + const inputImg = rowParent.querySelector('.js-input-img'); + + // Find the input image caption + const inputImgCaption = rowParent.querySelector('.js-input-img-caption'); + + // Find the input image 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) + inputImg.value = ''; // Clear the input value + + // Reset the selected image caption + inputImgCaption.value=''; + + // Reset the selected image thumbnail + inputImgThumbnail.removeAttribute('style'); + + // Hide the selected image thumbnail icon + inputImgThumbnailIcon.classList.add('d-flex'); + inputImgThumbnailIcon.classList.remove('d-none'); + }); + }); +} + +// Create function setImgUploadFormThumbnail +function setImgUploadFormThumbnail() { + const inputImg = document.querySelectorAll('.js-input-img'); + + inputImg.forEach(function(item) { + item.addEventListener('change', function(e) { + // Init file image + const file = event.target.files[0]; + + // Find the row parent + const rowParent = this.closest('.js-ext-edit-field-row'); + + // Find the thumbnail image + 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 + if (file) { + inputImgThumbnail.style.backgroundImage = `url('${URL.createObjectURL(file)}')`; + } + + // Hide the selected image thumbnail icon + inputImgThumbnailIcon.classList.add('d-none'); + inputImgThumbnailIcon.classList.remove('d-flex'); + }); + }); +} + +// Create function init +function init() { + addImgUploadFormClasses(); + resetImgUploadForm(); + setImgUploadFormThumbnail(); +} + // Configure tag selection, if present on the page if (tagInput) { const taggerOptions = { @@ -51,3 +191,5 @@ if (tagInput) { tagger(tagInput, taggerOptions); // FIXME: changes to the tags input don't trigger form change }; + +init(); diff --git a/extensions/templates/extensions/detail.html b/extensions/templates/extensions/detail.html index b5cc40be..0367e09d 100644 --- a/extensions/templates/extensions/detail.html +++ b/extensions/templates/extensions/detail.html @@ -307,9 +307,11 @@ {% endif %} {% for rating in extension.ratings.listed_texts|slice:":3" %} {% include "ratings/components/review.html" %} - {% empty %} - {% trans "Be the first to review." %} {% endfor %} + + {% if not extension.ratings.listed.count and not my_rating %} + {% trans "Be the first to review." %} + {% endif %}
{# Rating #} diff --git a/extensions/templates/extensions/manage/components/add_previews.html b/extensions/templates/extensions/manage/components/add_previews.html index 441d7fd4..c4bf3809 100644 --- a/extensions/templates/extensions/manage/components/add_previews.html +++ b/extensions/templates/extensions/manage/components/add_previews.html @@ -1,22 +1,40 @@ {% load common %} {# Upload new preview images #} {% load i18n %} -
- {{ add_preview_formset.management_form }} - {{ add_preview_formset.non_form_errors }} - {% for newform in add_preview_formset %} - {% with inlineform=newform|add_form_classes %} -
-
- {% include "common/components/field.html" with field=inlineform.source label='File' %} +
+
+ {{ add_preview_formset.management_form }} + {{ add_preview_formset.non_form_errors }} + {% for newform in add_preview_formset %} + {% with inlineform=newform|add_form_classes %} +
+
+
+
+
+ +
+
+
+
+
+ {% include "common/components/field.html" with field=inlineform.caption label='Caption' %} +
+
+ {% include "common/components/field.html" with field=inlineform.source label='File' %} +
    +
  • + +
    • +
+
+
+
-
- {% include "common/components/field.html" with field=inlineform.caption label='Caption' %} -
-
- {{ inlineform.non_form_errors }} - {% endwith %} - {% endfor %} + {{ inlineform.non_form_errors }} + {% endwith %} + {% endfor %} +
diff --git a/extensions/templates/extensions/manage/update.html b/extensions/templates/extensions/manage/update.html index d4515265..6bc9a4b3 100644 --- a/extensions/templates/extensions/manage/update.html +++ b/extensions/templates/extensions/manage/update.html @@ -126,13 +126,15 @@
-
- {# TODO: Make deletion work #} - - {% trans 'Delete Extension' %} - -
- + {# TODO: remove comment to show btn delete if deletion works #} + {% comment %} +
+ {# TODO: Make deletion work #} + + {% trans 'Delete Extension' %} + +
+ {% endcomment %}
diff --git a/ratings/templates/ratings/components/summary.html b/ratings/templates/ratings/components/summary.html index db2544b2..8dd815af 100644 --- a/ratings/templates/ratings/components/summary.html +++ b/ratings/templates/ratings/components/summary.html @@ -32,8 +32,9 @@ {% endfor %} + {% elif not my_rating %} + Be the first to review. {% else %} - Be the first to review. {% endif %}
diff --git a/ratings/templates/ratings/rating_list.html b/ratings/templates/ratings/rating_list.html index 8e2a4d34..593e49e4 100644 --- a/ratings/templates/ratings/rating_list.html +++ b/ratings/templates/ratings/rating_list.html @@ -27,9 +27,11 @@ {% endif %} {% for rating in object_list %} {% include "ratings/components/review.html" %} - {% empty %} - {% trans "Be the first to review." %} {% endfor %} + + {% if not extension.ratings.listed.count and not my_rating %} + {% trans "Be the first to review." %} + {% endif %}