mirror of
https://github.com/freedombox/FreedomBox.git
synced 2026-04-01 09:30:29 +00:00
6defd3e8ce
- Use 'currentColor' as color in SVG images to make them adapt to light/dark
modes.
- Introduce a new {% icon %} template tag to read SVG files, attach attributes,
remove <?xml> header, and make all IDs inside unique.
- Use the {% icon %} template tag to inline SVGs in app page, home page,
app pages, and notifications.
- Relax the content security policy to allow inline styling with 'style='
attribute.
Tests:
- Allow the icons looks as before in the following pages: home page, apps page,
app specific page, and in notifications.
- Icons that are fully dark become white when theme is switched to dark mode.
- All the inlined SVG icons have a prefixed unique ID.
- W3C HTML validator shows no new errors.
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
70 lines
2.4 KiB
HTML
70 lines
2.4 KiB
HTML
{% comment %}
|
|
# SPDX-License-Identifier: AGPL-3.0-or-later
|
|
{% endcomment %}
|
|
|
|
{# Template to display notifications under the navbar #}
|
|
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load plinth_extras %}
|
|
|
|
{% 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 %}
|
|
{% icon note.app_id|add:'/icons/'|add:note.data.app_icon_filename|add:'.svg' alt=note.data.app_name class='notification-icon' %}
|
|
{% else %}
|
|
{% icon note.data.app_icon_filename 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" %}
|
|
{% include 'notifications-dismiss-button.html' with id=note.id %}
|
|
{% 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 %}
|