Skip to content

Commit

Permalink
Attachments list in account settings design
Browse files Browse the repository at this point in the history
  • Loading branch information
@rafalp
rafalp committed Jan 23, 2025
1 parent b5d33c4 commit 26de081
Show file tree
Hide file tree
Showing 9 changed files with 274 additions and 49 deletions.
154 changes: 153 additions & 1 deletion frontend/src/style/misago/attachment-list.less
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,155 @@
.attachment-list-item {
background-color: #f00;
display: flex;
align-items: start;
}

.attachment-list-item-download-btn {
display: block;
flex: 1;

padding: 2px;

border: 1px solid @gray-lighter;
border-radius: 4px;

&,
&:link,
&:hover,
&:focus,
&:active,
&:visited {
color: darken(@gray-lighter, 25);
font-size: 32px;
line-height: 32px;
text-decoration: none;
}

&:hover,
&:focus,
&:active {
border-color: darken(@gray-lighter, 15);
}
}

.attachment-list-item-icon,
.attachment-list-item-icon-broken {
display: flex;
align-items: center;
justify-content: center;

width: 40px;
height: 40px;

background-color: @gray-lighter;
border-radius: 2px;
}

.attachment-list-item-icon-broken {
color: #ee6e6c;
background-color: #fae3e2;
}

.attachment-list-item-image {
width: 40px;
height: 40px;

background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 2px;
}

.attachment-list-item-body {
width: 100%;

margin-left: 15px;
}

.attachment-list-item-name {
word-break: break-word;

s {
color: @gray;
font-weight: bold;
}

a,
a:link,
a:hover,
a:focus,
a:active,
a:visited {
color: @text-color;
font-weight: bold;
}
}

.attachment-list-item-details {
display: block;

margin: 2px -4px -2px -4px;
padding: 0;

color: @gray-light;
list-style-image: none;

li {
display: inline-block;

margin: 2px 4px;
}
}

.attachment-list-item-thread {
word-break: break-word;

&,
&:link,
&:hover,
&:focus,
&:active,
&:visited {
color: @gray-darker;
}
}

.attachment-list-item-delete-btn {
.btn {
display: flex;
align-items: center;
justify-content: center;

position: relative;
left: 7px;

width: 28px;
height: 28px;
padding: 0;

color: darken(@gray-lighter, 35);
}
}

@media screen and (min-width: @screen-sm-min) {
.attachment-list-item {
align-items: center;
}

.attachment-list-item-icon,
.attachment-list-item-icon-broken,
.attachment-list-item-image {
width: 64px;
height: 64px;
}

.attachment-list-item-delete-btn {
margin-left: 15px;

.btn {
position: static;

width: 32px;
height: 32px;
}
}
}
30 changes: 19 additions & 11 deletions misago/account/views/settings.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -486,9 +486,9 @@ def get_storage_usage(self, request: HttpRequest) -> dict:
}

def get_attachments(self, request: HttpRequest) -> dict:
queryset = Attachment.objects.filter(uploader=request.user).prefetch_related(
"category", "thread", "post"
)
queryset = Attachment.objects.filter(
uploader=request.user, is_deleted=False
).prefetch_related("category", "thread", "post")

result = paginate_queryset(request, queryset, 20, "-id")
prefetch_private_thread_member_ids(
Expand All @@ -502,13 +502,16 @@ def get_attachments(self, request: HttpRequest) -> dict:
for attachment in result.items:
attachment.uploader = request.user

with check_permissions() as can_see_post:
check_see_post_permission(
request.user_permissions,
attachment.category,
attachment.thread,
attachment.post,
)
if attachment.post:
with check_permissions() as can_see_post:
check_see_post_permission(
request.user_permissions,
attachment.category,
attachment.thread,
attachment.post,
)
else:
can_see_post = False

with check_permissions() as can_delete:
check_delete_attachment_permission(
Expand All @@ -532,9 +535,14 @@ def get_attachments(self, request: HttpRequest) -> dict:
}
)

referer = "?referer=settings"
if request.GET.get("cursor"):
referer += "&cursor=" + request.GET.get("cursor")

return {
"referer": referer,
"paginator": result,
"items": result.items,
"items": items,
"show_post_column": show_post_column,
"show_delete_column": show_delete_column,
}
Expand Down
4 changes: 3 additions & 1 deletion misago/attachments/servers.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ def django_redirect_response(
request: HttpRequest, attachment: Attachment, thumbnail: bool = False
) -> HttpResponse:
file = _get_django_file(attachment, thumbnail)
return HttpResponsePermanentRedirect(file.url)
response = HttpResponsePermanentRedirect(file.url)
response["Cache-Control"] = "max-age=31536000, immutable"
return response


def django_file_response(
Expand Down
25 changes: 3 additions & 22 deletions misago/attachments/tests/test_attachment_delete_view.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ def test_attachment_delete_view_redirects_to_account_settings_if_settings_refere
attachment.refresh_from_db()


def test_attachment_delete_view_redirects_to_account_settings_after_page_if_settings_referer_is_set(
def test_attachment_delete_view_redirects_to_account_settings_page_if_settings_referer_is_set(
user, user_client, attachment, post
):
attachment.category = post.category
Expand All @@ -90,29 +90,10 @@ def test_attachment_delete_view_redirects_to_account_settings_after_page_if_sett
attachment.save()

response = user_client.post(
attachment.get_delete_url() + "?referer=settings&after=123"
attachment.get_delete_url() + "?referer=settings&cursor=123"
)
assert response.status_code == 302
assert response["location"] == reverse("misago:account-attachments") + "?after=123"

with pytest.raises(Attachment.DoesNotExist):
attachment.refresh_from_db()


def test_attachment_delete_view_redirects_to_account_settings_before_page_if_settings_referer_is_set(
user, user_client, attachment, post
):
attachment.category = post.category
attachment.thread = post.thread
attachment.post = post
attachment.uploader = user
attachment.save()

response = user_client.post(
attachment.get_delete_url() + "?referer=settings&before=123"
)
assert response.status_code == 302
assert response["location"] == reverse("misago:account-attachments") + "?before=123"
assert response["location"] == reverse("misago:account-attachments") + "?cursor=123"

with pytest.raises(Attachment.DoesNotExist):
attachment.refresh_from_db()
Expand Down
12 changes: 4 additions & 8 deletions misago/attachments/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,10 +182,8 @@ def get_attachment(self, request: HttpRequest, id: int, slug: str) -> Attachment
def get_redirect_url(self, request: HttpRequest, attachment: Attachment) -> str:
if request.GET.get("referer") == "settings":
url = reverse("misago:account-attachments")
if request.GET.get("after"):
url += "?after=" + request.GET.get("after")
elif request.GET.get("before"):
url += "?before=" + request.GET.get("before")
if request.GET.get("cursor"):
url += "?cursor=" + request.GET.get("cursor")
return url

if request.GET.get("referer") == "post" and attachment.post:
Expand All @@ -197,10 +195,8 @@ def get_redirect_url(self, request: HttpRequest, attachment: Attachment) -> str:
def _get_referer_querystring(request: HttpRequest, attachment: Attachment) -> str:
if request.GET.get("referer") == "settings":
querystring = "?referer=settings"
if request.GET.get("after"):
querystring += "?after=" + request.GET.get("after")
elif request.GET.get("before"):
querystring += "?before=" + request.GET.get("before")
if request.GET.get("cursor"):
querystring += "?cursor=" + request.GET.get("cursor")
return querystring

if request.GET.get("referer") == "post" and attachment.post:
Expand Down
2 changes: 1 addition & 1 deletion misago/static/misago/css/misago.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion misago/static/misago/css/misago.css.map
View file

Large diffs are not rendered by default.

93 changes: 90 additions & 3 deletions misago/templates/misago/account/settings/attachments_list.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{% load i18n %}
{% load i18n misago_capture misago_formats %}

{% if is_request_htmx %}
{% include "misago/snackbars.html" %}
{% endif %}
Expand All @@ -12,8 +13,94 @@ <h3 class="panel-title">
</div>
{% include "misago/account/settings/attachments_usage.html" %}
<ul class="list-group">
{% for attachment in attachments.items %}
<li class="list-group-item attachment-list-item">{{ attachment.name }}</li>
{% for item in attachments.items %}
<li class="list-group-item attachment-list-item">
{% if item.attachment.upload %}
<a href="{{ item.attachment.get_absolute_url }}" class="attachment-list-item-download-btn" target="_blank">
{% if item.attachment.filetype.is_image %}
<div
class="attachment-list-item-image"
style="background-image: url('{{ item.attachment.get_thumbnail_url|default:item.attachment.get_absolute_url }}');"
></div>
{% else %}
<div class="attachment-list-item-icon">
{% if item.attachment.filetype.is_video %}
<span class="material-icon">theaters</span>
{% else %}
<span class="material-icon">description</span>
{% endif %}
</div>
{% endif %}
</a>
{% else %}
<div class="attachment-list-item-download-btn">
<div class="attachment-list-item-icon-broken">
<span class="material-icon">broken_image</span>
</div>
</div>
{% endif %}
<div class="attachment-list-item-body">
<div class="attachment-list-item-name">
{% if item.attachment.upload %}
<a href="{{ item.attachment.get_details_url }}">{{ item.attachment.name }}</a>
{% else %}
<s>{{ item.attachment.name }}</s>
{% endif %}
</div>
<ul class="attachment-list-item-details">
<li>{{ item.attachment.size|filesizeformat }}</li>
<li>
{% capture trimmed as uploaded_at %}
<span
title="{{ item.attachment.uploaded_at|date:'DATETIME_FORMAT' }}"
misago-timestamp="{{ item.attachment.uploaded_at.isoformat }}"
>
{{ item.attachment.uploaded_at|date_relative }}
</span>
{% endcapture %}
{% blocktrans trimmed with uploaded_at=uploaded_at|safe context "account attachments page" %}
Uploaded {{ uploaded_at }}
{% endblocktrans %}
</li>
{% if item.show_post %}
<li>
{% capture trimmed as thread %}
<a href="{{ item.attachment.post.get_absolute_url }}" class="attachment-list-item-thread" target="_blank">
{{ item.attachment.thread.title }}
</a>
{% endcapture %}
{% blocktrans trimmed with thread=thread|safe context "account attachments page" %}
In {{ thread }}
{% endblocktrans %}
</li>
{% endif %}
</ul>
</div>
{% if item.show_delete %}
<div class="attachment-list-item-delete-btn">
<noscript>
<a
class="btn btn-default btn-icon btm-sm"
href="{{ item.attachment.get_delete_url }}{{ attachments.referer }}"
title="{% trans 'Delete' context 'account attachments page' %}"
>
<span class="material-icon">delete</span>
</a>
</noscript>
<form
class="d-js-block"
action="{{ item.attachment.get_delete_url }}{{ attachments.referer }}"
method="post"
misago-confirm="{% trans 'Are you sure you want to delete this attachment? This action cannot be undone.' context 'attachment delete confirmation' %}"
>
{% csrf_token %}
<button class="btn btn-default btn-icon btm-sm" title="{% trans 'Delete' context 'account attachments page' %}">
<span class="material-icon">delete</span>
</button>
</form>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
Expand Down
Loading

0 comments on commit 26de081

Please sign in to comment.