infrastructure/extensions-website
4
8
Fork 10
Code Issues 20 Pull Requests 2 Projects Releases Wiki Activity

Post Web Assets v2 upgrade UI fixes and improvements #114

Merged
Márton Lente merged 35 commits from martonlente/extensions-website:ui/issue105 into main 2024-05-07 16:33:28 +02:00
Conversation 2 Commits 35 Files Changed 18 +241 -149
18 changed files with 241 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
common/static/common/scripts/app.js
View File

@ -1,3 +1,25 @@
(function() {
// Create function agreeWithTerms
function agreeWithTerms() {
const agreeWithTermsInput = document.querySelector('.js-agree-with-terms-input');
if (!agreeWithTermsInput) {
// Stop function execution if agreeWithTermsInput is not present
return;
}
agreeWithTermsInput.addEventListener('change', function(e) {
const agreeWithTermsBtnSubmit = document.querySelector('.js-agree-with-terms-btn-submit');
// Check if checkbox is checked
if (e.target.checked == true) {
agreeWithTermsBtnSubmit.removeAttribute('disabled');
} else {
agreeWithTermsBtnSubmit.setAttribute('disabled', true);
}
});
}
// Create function btnBack
function btnBack() {
const btnBack = document.querySelectorAll('.js-btn-back');
@ -27,7 +49,7 @@ function commentForm() {
let value = e.target.value;
let verb = 'Comment';
const activitySubmitButton = document.getElementById('activity-submit');
activitySubmitButton.classList.remove('btn-success', 'btn-warning');
activitySubmitButton.classList.remove('btn-primary', 'btn-success', 'btn-warning');
// Hide or show comment form msg on change
if (value == 'AWC') {
@ -38,6 +60,8 @@ function commentForm() {
} else if (value == 'APR') {
verb = 'Approve!';
activitySubmitButton.classList.add('btn-success');
} else {
activitySubmitButton.classList.add('btn-primary');
}
activitySubmitButton.querySelector('span').textContent = verb;
@ -89,6 +113,7 @@ function copyInstallUrl() {
}
// Create function init
function init() {
agreeWithTerms();
btnBack();
commentForm();
copyInstallUrl();
@ -97,3 +122,4 @@ function init() {
document.addEventListener('DOMContentLoaded', function() {
init();
});
}())

4
common/static/common/styles/_button.sass Normal file
View File

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

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

@ -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)

7
common/static/common/styles/_forms.sass
View File

@ -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,

13
common/static/common/styles/_notifications.sass Normal file
View File

@ -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

3
common/static/common/styles/_utilities.sass
View File

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

2
common/static/common/styles/main.sass
View File

@ -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'

6
extensions/templates/extensions/components/blender_version.html
View File

@ -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' %}"
/>

4
extensions/templates/extensions/components/extension_edit_detail_card.html
View File

@ -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>

2
extensions/templates/extensions/detail.html
View File

@ -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>

4
extensions/templates/extensions/draft_finalise.html
View File

@ -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>

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

@ -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' %}

4
extensions/templates/extensions/manage/update.html
View File

@ -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>

2
extensions/templates/extensions/new_version_finalise.html
View File

@ -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 %}

25
extensions/templates/extensions/submit.html
View File

@ -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 %}

79
notifications/templates/notifications/notification_list.html
View File

@ -4,42 +4,61 @@
{% 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>
<h1>{% trans 'Notifications' %}</h1>
{% if notification_list %}
{% for notification in notification_list %}
<div class="row mb-2 {% if notification.read_at%}text-muted{% endif %}">
<div class="col">
{{ 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">
<div class="notifications">
{% if user|unread_notification_count %}
<form action="{% url 'notifications:notifications-mark-read-all' %}" method="post">
{% csrf_token %}
<button class="btn btn-sm" type="submit">{% trans 'Mark as read' %}</button>
<button class="btn mb-3" type="submit"><i class="i-eye"></i> {% trans 'Mark all as read' %}</button>
</form>
{% endif %}
</div>
<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>
{% else %}
<p>
{% trans 'You have no notifications' %}

2
ratings/templates/ratings/rating_form.html
View File

@ -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">

2
reviewers/templates/reviewers/extensions_review_detail.html
View File

@ -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">