add: notifications ui
This commit is contained in:
parent
9dc75d7095
commit
f5b75382e5
14 changed files with 179 additions and 14 deletions
|
@ -1,5 +1,4 @@
|
|||
{% import "macros.html" as macros %} {% import "components.html" as components
|
||||
%} {% extends "root.html" %} {% block head %}
|
||||
{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
|
||||
<title>{{ community.context.display_name }} - {{ config.name }}</title>
|
||||
{% endblock %} {% block body %} {{ macros::nav() }}
|
||||
<article>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
{% import "macros.html" as macros %} {% import "components.html" as components
|
||||
%} {% extends "root.html" %} {% block head %}
|
||||
{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
|
||||
<title>My communities - {{ config.name }}</title>
|
||||
{% endblock %} {% block body %} {{ macros::nav(selected="communities") }}
|
||||
<main class="flex flex-col gap-2">
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
{% import "macros.html" as macros %} {% import "components.html" as components
|
||||
%} {% extends "root.html" %} {% block head %}
|
||||
{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
|
||||
<title>Post - {{ config.name }}</title>
|
||||
{% endblock %} {% block body %} {{ macros::nav() }}
|
||||
<main class="flex flex-col gap-2">
|
||||
|
|
|
@ -146,4 +146,52 @@ show_community=true) -%}
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endmacro %} {% macro notification(notification) -%}
|
||||
<div class="w-full card-nest">
|
||||
<div class="card small notif_title flex items-center">
|
||||
{% if not notification.read %}
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
style="fill: var(--color-link)"
|
||||
>
|
||||
<circle cx="12" cy="12" r="6"></circle>
|
||||
</svg>
|
||||
{% endif %}
|
||||
<b>{{ notification.title|markdown|safe }}</b>
|
||||
</div>
|
||||
|
||||
<div class="card notif_content flex flex-col gap-2">
|
||||
<span>{{ notification.content|markdown|safe }}</span>
|
||||
|
||||
<div class="card secondary w-full flex flex-wrap gap-2">
|
||||
{% if notification.read %}
|
||||
<button
|
||||
class="tertiary"
|
||||
onclick="trigger('me::update_notification_read_statsu', ['{{ notification.id }}', false])"
|
||||
>
|
||||
{{ icon "undo" }}
|
||||
<span>{{ text "notifs:action.mark_as_unread" }}</span>
|
||||
</button>
|
||||
{% else %}
|
||||
<button
|
||||
class="green tertiary"
|
||||
onclick="trigger('me::update_notification_read_statsu', ['{{ notification.id }}', true])"
|
||||
>
|
||||
{{ icon "check" }}
|
||||
<span>{{ text "notifs:action.mark_as_read" }}</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<button
|
||||
class="red tertiary"
|
||||
onclick="trigger('me::remove_notification', ['{{ notification.id }}'])"
|
||||
>
|
||||
{{ icon "trash" }}
|
||||
<span>{{ text "general:action.delete" }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
|
|
@ -32,11 +32,11 @@ show_lhs=true) -%}
|
|||
<div class="flex nav_side">
|
||||
{% if user %}
|
||||
<a href="/notifs" class="button" title="Notifications">
|
||||
{{ icon "bell" }} {% if user.notification_count > 0 %}
|
||||
{% if user.notification_count > 0 %} {{ icon "bell-dot" }}
|
||||
<span class="notification tr"
|
||||
>{{ user.notification_count }}</span
|
||||
>
|
||||
{% endif %}
|
||||
{% else %} {{ icon "bell" }} {% endif %}
|
||||
</a>
|
||||
|
||||
<div class="dropdown">
|
||||
|
|
13
crates/app/src/public/html/misc/notifications.html
Normal file
13
crates/app/src/public/html/misc/notifications.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
|
||||
<title>Notifications - {{ config.name }}</title>
|
||||
{% endblock %} {% block body %} {{ macros::nav(selected="communities") }}
|
||||
<main class="flex flex-col gap-2">
|
||||
<button onclick="trigger('me::clear_notifs')">
|
||||
{{ icon "bomb" }}
|
||||
<span>{{ text "notifs:action.clear" }}</span>
|
||||
</button>
|
||||
|
||||
{% for notification in notifications %} {{
|
||||
components::notification(notification=notification) }} {% endfor %}
|
||||
</main>
|
||||
{% endblock %}
|
Loading…
Add table
Add a link
Reference in a new issue