common/static/common/scripts/app.js

@@ -1,99 +1,125 @@
-// Create function btnBack
-function btnBack() {
-  const btnBack = document.querySelectorAll('.js-btn-back');
+(function() {
+  // Create function agreeWithTerms
+  function agreeWithTerms() {
+    const agreeWithTermsInput = document.querySelector('.js-agree-with-terms-input');
 
-  btnBack.forEach(function(item) {
-    item.addEventListener('click', function(e) {
-      e.preventDefault();
-      window.history.back();
-    });
-  });
-}
-
-// Create finction commentForm
-function commentForm() {
-  const commentForm = document.querySelector('.js-comment-form');
-  if (!commentForm) {
-    return;
-  }
-
-  const commentFormSelect = commentForm.querySelector('select');
-  if (!commentFormSelect) {
-    return;
-  }
-
-  // Create event comment form select change
-  commentFormSelect.addEventListener('change', function(e) {
-    let value = e.target.value;
-    let verb = 'Comment';
-    const activitySubmitButton = document.getElementById('activity-submit');
-    activitySubmitButton.classList.remove('btn-success', 'btn-warning');
-
-    // Hide or show comment form msg on change
-    if (value == 'AWC') {
-      verb = 'Set as Awaiting Changes';
-      activitySubmitButton.classList.add('btn-warning');
-    } else if (value == 'AWR') {
-      verb = 'Set as Awaiting Review';
-    } else if (value == 'APR') {
-      verb = 'Approve!';
-      activitySubmitButton.classList.add('btn-success');
-    }
-
-    activitySubmitButton.querySelector('span').textContent = verb;
-  });
-}
-
-// Create function copyInstallUrl
-function copyInstallUrl() {
-  function init() {
-    // Create variables
-    const btnInstall = document.querySelector('.js-btn-install');
-    const btnInstallAction = document.querySelector('.js-btn-install-action');
-    const btnInstallGroup = document.querySelector('.js-btn-install-group');
-    const btnInstallDrag = document.querySelector('.js-btn-install-drag');
-    const btnInstallDragGroup = document.querySelector('.js-btn-install-drag-group');
-
-    if (btnInstall == null) {
+    if (!agreeWithTermsInput) {
+      // Stop function execution if agreeWithTermsInput is not present
       return;
     }
 
-    // Get data install URL
-    const btnInstallUrl = btnInstall.getAttribute('data-install-url');
+    agreeWithTermsInput.addEventListener('change', function(e) {
+      const agreeWithTermsBtnSubmit = document.querySelector('.js-agree-with-terms-btn-submit');
 
-    btnInstall.addEventListener('click', function() {
-      // Hide btnInstallGroup
-      btnInstallGroup.classList.add('d-none');
-
-      // Show btnInstallAction
-      btnInstallAction.classList.add('show');
-    });
-
-    // Drag btnInstallUrl
-    btnInstallDrag.addEventListener('dragstart', function(e) {
-      // Set data install URL to be transferred during drag
-      e.dataTransfer.setData('text/plain', btnInstallUrl);
-
-      // Set drag area active
-      btnInstallDragGroup.classList.add('opacity-50');
-    });
-
-    // Undrag btnInstallUrl
-    btnInstallDrag.addEventListener('dragend', function() {
-      // Set drag area inactive
-      btnInstallDragGroup.classList.remove('opacity-50');
+      // Check if checkbox is checked
+      if (e.target.checked == true) {
+        agreeWithTermsBtnSubmit.removeAttribute('disabled');
+      } else {
+        agreeWithTermsBtnSubmit.setAttribute('disabled', true);
+      }
     });
   }
 
-  init();
-}
-// Create function init
-function init() {
-  btnBack();
-  commentForm();
-  copyInstallUrl();
-}
+  // Create function btnBack
+  function btnBack() {
+    const btnBack = document.querySelectorAll('.js-btn-back');
 
-document.addEventListener('DOMContentLoaded', function() {
-  init();
-});
+    btnBack.forEach(function(item) {
+      item.addEventListener('click', function(e) {
+        e.preventDefault();
+        window.history.back();
+      });
+    });
+  }
+
+  // Create finction commentForm
+  function commentForm() {
+    const commentForm = document.querySelector('.js-comment-form');
+    if (!commentForm) {
+      return;
+    }
+
+    const commentFormSelect = commentForm.querySelector('select');
+    if (!commentFormSelect) {
+      return;
+    }
+
+    // Create event comment form select change
+    commentFormSelect.addEventListener('change', function(e) {
+      let value = e.target.value;
+      let verb = 'Comment';
+      const activitySubmitButton = document.getElementById('activity-submit');
+      activitySubmitButton.classList.remove('btn-primary', 'btn-success', 'btn-warning');
+
+      // Hide or show comment form msg on change
+      if (value == 'AWC') {
+        verb = 'Set as Awaiting Changes';
+        activitySubmitButton.classList.add('btn-warning');
+      } else if (value == 'AWR') {
+        verb = 'Set as Awaiting Review';
+      } else if (value == 'APR') {
+        verb = 'Approve!';
+        activitySubmitButton.classList.add('btn-success');
+      } else {
+        activitySubmitButton.classList.add('btn-primary');
+      }
+
+      activitySubmitButton.querySelector('span').textContent = verb;
+    });
+  }
+
+  // Create function copyInstallUrl
+  function copyInstallUrl() {
+    function init() {
+      // Create variables
+      const btnInstall = document.querySelector('.js-btn-install');
+      const btnInstallAction = document.querySelector('.js-btn-install-action');
+      const btnInstallGroup = document.querySelector('.js-btn-install-group');
+      const btnInstallDrag = document.querySelector('.js-btn-install-drag');
+      const btnInstallDragGroup = document.querySelector('.js-btn-install-drag-group');
+
+      if (btnInstall == null) {
+        return;
+      }
+
+      // Get data install URL
+      const btnInstallUrl = btnInstall.getAttribute('data-install-url');
+
+      btnInstall.addEventListener('click', function() {
+        // Hide btnInstallGroup
+        btnInstallGroup.classList.add('d-none');
+
+        // Show btnInstallAction
+        btnInstallAction.classList.add('show');
+      });
+
+      // Drag btnInstallUrl
+      btnInstallDrag.addEventListener('dragstart', function(e) {
+        // Set data install URL to be transferred during drag
+        e.dataTransfer.setData('text/plain', btnInstallUrl);
+
+        // Set drag area active
+        btnInstallDragGroup.classList.add('opacity-50');
+      });
+
+      // Undrag btnInstallUrl
+      btnInstallDrag.addEventListener('dragend', function() {
+        // Set drag area inactive
+        btnInstallDragGroup.classList.remove('opacity-50');
+      });
+    }
+
+    init();
+  }
+  // Create function init
+  function init() {
+    agreeWithTerms();
+    btnBack();
+    commentForm();
+    copyInstallUrl();
+  }
+
+  document.addEventListener('DOMContentLoaded', function() {
+    init();
+  });
+}())

common/static/common/styles/_button.sass

@@ -0,0 +1,4 @@
+button,
+.btn
+  &[type=submit]
+    transition: opacity var(--transition-speed)

common/static/common/styles/_extension.sass

@@ -80,13 +80,6 @@
 .ext-detail-tagline
   +margin(2, bottom)
 
-.ext-detail-description
-  +padding(4)
-  +style-rich-text
-
-  pre
-    +margin(3, bottom)
-
 .ext-detail-info
   dd
     color: var(--color-text)
@@ -376,3 +369,7 @@
   @extend .dropdown-divider
 
   +margin(0, top)
+
+.dropdown-item
+  &a
+    +padding(3, x)

common/static/common/styles/_forms.sass

@@ -11,7 +11,12 @@
 
 .form-control
   &[type="file"]
-    height: calc(var(--spacer) * 2.5)
+    // TODO: @web-assets improve component style
+    height: calc(var(--spacer) * 3.5)
+
+.invalid-feedback
+  ul
+    +padding(3, left)
 
 /* Override Tagger's styling. */
 .was-validated .form-control:invalid,

common/static/common/styles/_notifications.sass

@@ -0,0 +1,13 @@
+// TODO: remove style if 'mark as unread' is implemented
+// .notifications-item
+//   &.is-read
+//     .dropdown-toggle
+//       color: var(--color-text-secondary) !important
+//
+//       &:hover
+//         cursor: default
+
+.notifications-item
+  .dropdown-item
+    padding-left: var(--spacer) !important
+    padding-right: var(--spacer) !important

common/static/common/styles/_utilities.sass

@@ -37,6 +37,9 @@
 .show
   opacity: 1
 
+.style-rich-text
+  +style-rich-text
+
 .text-accent
   color: var(--color-accent)
 

common/static/common/styles/main.sass

@@ -18,6 +18,7 @@ $container-width: map-get($container-max-widths, 'xl')
 @import '_alert.sass'
 @import '_badge.sass'
 @import '_box.sass'
+@import '_button.sass'
 @import '_cards.sass'
 @import '_code.sass'
 @import '_comments.sass'
@@ -28,6 +29,7 @@ $container-width: map-get($container-max-widths, 'xl')
 @import '_hero.sass'
 @import '_list.sass'
 @import '_navigation_global.sass'
+@import '_notifications.sass'
 @import '_table.sass'
 @import 'ratings/static/ratings/styles/_review.sass'
 @import 'ratings/static/ratings/styles/_stars.sass'

extensions/templates/extensions/components/blender_version.html

@@ -4,10 +4,10 @@
   href="https://www.blender.org/download/releases/{{ version.blender_version_min|version_without_patch|replace:".,-" }}/"
   title="{{ version.blender_version_min }}">Blender {{ version.blender_version_min|version_without_patch }}</a>
 {% if is_editable %}
-    &mdash;
-    <input name="blender_version_max" class="form-control-sm"
+    <span class="me-2">&mdash;</span>
+    <input name="blender_version_max" class="form-control"
       value="{{version.blender_version_max|default_if_none:''}}"
-      placeholder="{% trans 'maximum Blender version' %}"
+      placeholder="{% trans 'max. Blender version' %}"
       pattern="^([0-9]+\.[0-9]+\.[0-9]+)?$"
       title="{% trans 'Blender version, e.g. 4.1.0' %}"
     />

extensions/templates/extensions/components/extension_edit_detail_card.html

@@ -76,7 +76,9 @@
         <div class="dl-row">
           <div class="dl-col">
             <dt>{% trans 'Compatibility' %}</dt>
-            <dd>{% include "extensions/components/blender_version.html" with version=version is_editable=is_editable form=form %}</dd>
+            <dd class="align-items-center d-flex">
+              {% include "extensions/components/blender_version.html" with version=version is_editable=is_editable form=form %}
+            </dd>
           </div>
         </div>
 

extensions/templates/extensions/detail.html

@@ -21,7 +21,7 @@
       {% block extension_description %}
         {% if extension.description %}
           <section id="about" class="mt-3">
-            <div class="box ext-detail-description">
+            <div class="box style-rich-text">
               {{ extension.description|markdown }}
             </div>
           </section>

extensions/templates/extensions/draft_finalise.html

@@ -45,7 +45,7 @@
                   {# TODO: fix handling of tags #}
                   <div class="row">
                     <div class="col">
-                      {% include "common/components/field.html" %}
+                      {% include "common/components/field.html" with placeholder="Enter the text here..." %}
                     </div>
                   </div>
                 {% endif %}
@@ -55,7 +55,7 @@
             <section class="mt-4">
               <h2>{% trans 'Initial Version' %}</h2>
               <div class="card p-3">
-                {% include "common/components/field.html" with field=form.release_notes %}
+                {% include "common/components/field.html" with field=form.release_notes placeholder="Add the release notes..." %}
               </div>
             </section>
 

extensions/templates/extensions/manage/components/add_previews.html

@@ -17,7 +17,7 @@
           </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' %}
+              {% include "common/components/field.html" with field=inlineform.caption label='Caption' placeholder="Describe the preview" %}
             </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' %}

extensions/templates/extensions/manage/update.html

@@ -30,11 +30,11 @@
 
       <section class="card p-3">
         <div>
-          {% include "common/components/field.html" with field=form.description label="Description" classes="one two three" placeholder="Describe this extension" %}
+          {% include "common/components/field.html" with field=form.description label="Description" placeholder="Describe the extension..." %}
         </div>
 
         <div>
-          {% include "common/components/field.html" with field=form.support %}
+          {% include "common/components/field.html" with field=form.support placeholder="https://example.com" %}
         </div>
       </section>
 

extensions/templates/extensions/new_version_finalise.html

@@ -25,7 +25,7 @@
             <section class="card p-3">
               <div class="row">
                 <div class="col">
-                  {% include "common/components/field.html" with field=form.release_notes %}
+                  {% include "common/components/field.html" with field=form.release_notes placeholder="Add the release notes..." %}
                 </div>
               </div>
               {% if form.non_field_errors or form.file.errors %}

extensions/templates/extensions/submit.html

@@ -66,11 +66,11 @@
               </div>
               <div class="row">
                 <div class="col mx-4 mt-4">
-                  {% include "common/components/field.html" with field=form.agreed_with_terms %}
+                  {% include "common/components/field.html" with field=form.agreed_with_terms classes="js-agree-with-terms-input" %}
                 </div>
               </div>
               <div class="mt-4">
-                <button type="submit" class="btn btn-block btn-primary px-5 py-2">
+                <button type="submit" class="btn btn-block btn-primary js-agree-with-terms-btn-submit px-5 py-2" disabled>
                   <i class="i-upload"></i>
                   <span>
                   {% if extension %}
@@ -80,6 +80,27 @@
                   {% endif %}
                   </span>
                 </button>
+                <noscript>
+                  <div>
+                    <hr class="mt-5">
+                    <p>
+                      {% trans 'You see this, because of JavaScript is disabled in your browser.' %}
+                    </p>
+                    <button type="submit" class="btn btn-block btn-primary mb-2 px-5 py-2">
+                      <i class="i-upload"></i>
+                      <span>
+                      {% if extension %}
+                      {% trans 'Upload New Version' %}
+                      {% else %}
+                      {% trans 'Upload Extension' %}
+                      {% endif %}
+                      </span>
+                    </button>
+                    <p>
+                      {% trans 'By clicking the submit button, you agree to Blender Extensions conditions of use and policies.' %}
+                    </p>
+                  </div>
+                </noscript>
               </div>
 
               {% if form.non_field_errors %}

notifications/templates/notifications/notification_list.html

@@ -4,45 +4,64 @@
 {% block page_title %}{% blocktranslate %}Notifications{% endblocktranslate %}{% endblock page_title %}
 
 {% block content %}
-<h1>
-{% trans 'Notifications' %}
-  {% if user|unread_notification_count %}
-  <form class="d-inline" action="{% url 'notifications:notifications-mark-read-all' %}" method="post">
-    {% csrf_token %}
-    <button class="btn btn-sm" type="submit">{% trans 'Mark all as read' %}</button>
-  </form>
-  {% endif %}
-</h1>
-{% if notification_list %}
-  {% for notification in notification_list %}
-  <div class="row mb-2 {% if notification.read_at%}text-muted{% endif %}">
-      <div class="col">
+  <h1>{% trans 'Notifications' %}</h1>
 
-      {{ notification.action.timestamp | naturaltime_compact }}
 
-      <a href="{% url 'extensions:by-author' user_id=notification.action.actor.pk %}">
-      {{ notification.action.actor }}
-      </a>
-
-      {{ notification.action.verb }}
-
-      <a href="{{ notification.action.target.get_absolute_url }}">{{ notification.action.target }}</a>
-
-      <a href="{{ notification.get_absolute_url }}"><button class="btn btn-sm">{% trans 'View' %}</button></a>
-
-      {% if not notification.read_at %}
-      <form class="d-inline" action="{% url 'notifications:notifications-mark-read' pk=notification.pk %}" method="post">
-        {% csrf_token %}
-        <button class="btn btn-sm" type="submit">{% trans 'Mark as read' %}</button>
-      </form>
+  {% if notification_list %}
+    <div class="notifications">
+      {% if user|unread_notification_count %}
+        <form action="{% url 'notifications:notifications-mark-read-all' %}" method="post">
+          {% csrf_token %}
+          <button class="btn mb-3" type="submit"><i class="i-eye"></i> {% trans 'Mark all as read' %}</button>
+        </form>
       {% endif %}
-
+      <div class="box">
+        <table class="notifications-list">
+          <tbody>
+            {% for notification in notification_list %}
+              <tr class="notifications-item {% if notification.read_at%}is-read{% endif %}">
+                <td class="notifications-item-time">
+                  {{ notification.action.timestamp | naturaltime_compact }}
+                </td>
+                <td class="notifications-item-content">
+                  {# TODO: @back-end add link to action target ID (so that link works as an anchor link) #}
+                  <a href="{{ notification.get_absolute_url }}"><span class="me-2">{{ notification.action.actor }} {{ notification.action.verb }} {{ notification.action.target }}</span><span class="notifications-item-dot"></span></a>
+                </td>
+                <td class="notifications-item-nav">
+                  <div class="dropdown">
+                    <button class="btn btn-link dropdown-toggle js-dropdown-toggle active" data-toggle-menu-id="js-notifications-item-nav-{{ notification.id }}">
+                      <i class="i-more-vertical"></i>
+                    </button>
+                    <ul class="dropdown-menu dropdown-menu-right js-dropdown-menu" id="js-notifications-item-nav-{{ notification.id }}">
+                      <li class="nav-item-mark-as-read">
+                        <form action="{% url 'notifications:notifications-mark-read' pk=notification.pk %}" method="post">
+                          {% csrf_token %}
+                          <button class="dropdown-item" title="Mark as read" type="submit"><i class="i-eye"></i> Mark as read </button>
+                        </form>
+                      </li>
+                      {# TODO: add feature 'Mark as unread' (optional) #}
+                      {% comment %}
+                        <li class="nav-item-mark-as-unread">
+                          <form>
+                            <button class="dropdown-item" title="Mark as read" type="submit"><i class="i-eye-off"></i> Mark as unread </button>
+                          </form>
+                        </li>
+                      {% endcomment %}
+                      <li>
+                        <a class="dropdown-item" href="{% url 'extensions:by-author' user_id=notification.action.actor.pk %}"><i class="i-user"></i> View user</a>
+                      </li>
+                    </ul>
+                  </div>
+                </td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
       </div>
     </div>
-  {% endfor %}
-{% else %}
-<p>
-  {% trans 'You have no notifications' %}
-</p>
-{% endif %}
+  {% else %}
+    <p>
+      {% trans 'You have no notifications' %}
+    </p>
+  {% endif %}
 {% endblock content %}

ratings/templates/ratings/rating_form.html

@@ -14,7 +14,7 @@
   <div class="row">
     <div class="col-md-8">
       <div class="box p-3">
-        {% include "common/components/field.html" with field=form.text focus=True %}
+        {% include "common/components/field.html" with field=form.text focus=True placeholder="Enter the text here..." %}
 
         {% if form.non_field_errors %}
           <div class="invalid-feedback">

reviewers/templates/reviewers/extensions_review_detail.html

@@ -145,7 +145,7 @@
       {% csrf_token %}
       {% with form=comment_form|add_form_classes %}
 
-      {% include "common/components/field.html" with field=form.message %}
+      {% include "common/components/field.html" with field=form.message placeholder="Enter the text here..." %}
 
       <div class="d-flex align-items-center">
         <div class="btn-row ms-3 w-100 justify-content-end">