mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-03-11 09:04:54 +00:00
13a575017c
- Delete only the <li> of the notification using HTMX. - Notifications list stays open. User can dismiss another notification. - Decrement notification counter using JavaScript after removing notification from the list. - Added HTMX to every kind of notification. - Tested dismissing notifications from the top, middle and bottom of the list. Signed-off-by: Joseph Nuthalapati <njoseph@riseup.net> [sunil: Update comment format in .js file] Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org> Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
79 lines
2.9 KiB
HTML
79 lines
2.9 KiB
HTML
{% comment %}
|
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
|
{% endcomment %}
|
|
|
|
{# Template to display notifications under the navbar #}
|
|
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% if notifications %}
|
|
<div id="notifications" class="notifications collapse no-no-js" hx-swap-oob="true">
|
|
<ul>
|
|
{% for note in notifications %}
|
|
<li id="notification-{{ note.id }}"
|
|
class="notification notification-{{ note.severity }}">
|
|
<div class="notification-header">
|
|
<span class="notification-time"
|
|
title="{{ note.last_update_time|date:'DATETIME_FORMAT' }}">
|
|
{% blocktrans trimmed with time_since=note.last_update_time|timesince %}
|
|
{{ time_since }} ago
|
|
{% endblocktrans %}
|
|
</span>
|
|
|
|
{% if note.data.app_name %}
|
|
<div class="app-name">
|
|
{% if note.data.app_icon %}
|
|
<div class="app-icon fa {{ note.data.app_icon }}"></div>
|
|
{% elif note.data.app_icon_filename %}
|
|
{% if note.app_id %}
|
|
<img src="{% static note.app_id %}/icons/{{ note.data.app_icon_filename }}.svg"
|
|
alt="{{ note.data.app_name }}"
|
|
class="notification-icon" />
|
|
{% else %}
|
|
<img src="{% static 'theme/icons/' %}{{ note.data.app_icon_filename }}.svg"
|
|
alt="{{ note.data.app_name }}"
|
|
class="notification-icon" />
|
|
{% endif %}
|
|
{% endif %}
|
|
{{ note.data.app_name }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if note.body %}
|
|
{{ note.body.content.decode|safe }}
|
|
{% else %}
|
|
<div class="notification-title">{{ note.title }}</div>
|
|
|
|
{% if note.message %}
|
|
<p>{{ note.message }}</p>
|
|
{% endif %}
|
|
|
|
{% if note.actions %}
|
|
<div class="btn-toolbar">
|
|
{% for action in note.actions %}
|
|
{% if action.type == "dismiss" %}
|
|
<a href="{% url 'notification_dismiss' id=note.id %}?next={{ request.path|iriencode }}"
|
|
hx-get="{% url 'notification_dismiss' id=note.id %}"
|
|
hx-target="#notification-{{ note.id }}"
|
|
hx-swap="delete swap:300ms"
|
|
role="button" class="btn btn-default">
|
|
{% trans "Dismiss" %}
|
|
</a>
|
|
{% else %}
|
|
<a href="{% url action.url %}" role="button"
|
|
class="btn btn-{{ action.class|default:'default' }}">
|
|
{{ action.text }}
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|