Notifications list template

This commit is contained in:
Mathieu Jaumotte 2022-01-06 16:56:51 +01:00
parent 140f53b81f
commit c32b767d9b
9 changed files with 233 additions and 223 deletions

View File

@ -108,26 +108,28 @@ export default {
</script>
<style lang="scss">
.notification {
h6 {
div.notification {
h2, h6 {
a {
text-decoration: none;
}
&::before {
font-family: "ForkAwesome";
font-size: 80%;
margin-right: 0.3em;
}
}
.read {
h6 {
div.read {
h2, h6 {
font-weight: 500;
&::before {
//content: "\f2b6"; //envelope-open
content: "\f2b7"; //envelope-open-o
}
}
}
.unread {
h6 {
div.unread {
h2, h6 {
&::before {
//content: "\f0e0"; //envelope
content: "\f003"; //envelope-o
}
}

View File

@ -11,8 +11,7 @@
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-10">
<div class="col-10">
{% include handler.template(notification) with handler.templateData(notification) %}
{{ form_start(form, { 'attr': { 'id': 'notification' }}) }}
@ -22,6 +21,7 @@
{{ form_row(form.message) }}
{{ form_end(form) }}
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<a href="{{ chill_return_path_or('chill_main_homepage') }}" class="btn btn-cancel">{{ 'Cancel'|trans|chill_return_path_label }}</a>
@ -30,7 +30,5 @@
<button type="submit" form="notification" class="btn btn-save">{{ 'Save'|trans }}</button>
</li>
</ul>
</div>
</div>
{% endblock %}

View File

@ -11,8 +11,7 @@
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-10">
<div class="col-10">
{% include handler.template(notification) with handler.templateData(notification) %}
{{ form_start(form, { 'attr': { 'id': 'notification' }}) }}
@ -22,6 +21,7 @@
{{ form_row(form.message) }}
{{ form_end(form) }}
<ul class="record_actions sticky-form-buttons">
<li class="cancel">
<a href="{{ chill_return_path_or('chill_main_homepage') }}" class="btn btn-cancel">{{ 'Cancel'|trans|chill_return_path_label }}</a>
@ -30,7 +30,5 @@
<button type="submit" form="notification" class="btn btn-save">{{ 'Save'|trans }}</button>
</li>
</ul>
</div>
</div>
{% endblock %}

View File

@ -1,4 +1,4 @@
<div class="list-group notification my-2">
<div class="list-group my-2 notification notification-box">
<div class="list-group-item">
<h4>{{ 'notification.Sent'|trans }}</h4>
</div>
@ -10,13 +10,13 @@
{% if notification.sender == app.user %}
<h6>
<abbr title="{{ 'Le ' ~ notification.date|format_date('long') }}" class="ms-1">
<abbr title="{{ 'Le ' ~ notification.date|format_date('long') ~ '\n' ~ notification.title }}">
{{ notification.date|format_datetime('short','short') }}
</abbr>
{# Vue component #}
<span class="notification_toggle_read_status"
data-notification-id="{{ notification.id }}"
data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
data-show-button-url="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
data-button-class="btn-outline-primary"
data-button-text="false"

View File

@ -1,6 +1,6 @@
{% extends "@ChillMain/layout.html.twig" %}
{% block title 'notification.List'|trans %}
{% block title 'notification.My own notifications'|trans %}
{% block js %}
{{ parent() }}
@ -13,12 +13,11 @@
{% endblock %}
{% block content %}
<div id="container content">
<div class="row">
<div class="grid-8 centered">
<div class="col-10 notification notification-list">
<h1>{{ block('title') }}</h1>
<ul class="nav nav-tabs">
<ul class="nav nav-pills justify-content-center">
<li class="nav-item">
<a class="nav-link {% if step == 'inbox' %}active{% endif %}" href="{{ path('chill_main_notification_my') }}">
{{ 'notification.Notifications received'|trans }}
@ -57,47 +56,53 @@
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}">
{{ notification.title }}
</a>
{% if not notification.isReadBy(app.user) %}
<div class="badge bg-danger">{{ 'notification.is_unread'|trans }}</div>
{% endif %}
{% if notification.isSystem %}
<div class="badge bg-chill-green">{{ 'notification.is_system'|trans }}</div>
{% endif %}
</h2>
</div>
<div class="item-row">
<div class="item-col">
{% if step == 'inbox' and not notification.isSystem %}
{{ 'notification.from'|trans }}: {{ notification.sender|chill_entity_render_string }}
<div class="notification-from">
{% if step == 'inbox' %}
<abbr title="{{ 'notification.received_from'|trans }}">
{{ 'notification.from'|trans }}:
</abbr>
{% if not notification.isSystem %}
<span class="badge-user">
{{ notification.sender|chill_entity_render_string }}
</span>
{% else %}
&nbsp;
<span class="badge-user system">{{ 'notification.is_system'|trans }}</span>
{% endif %}
{% endif %}
</div>
<div class="item-col">{{ 'notification.adressees'|trans }}
<ul>
<div class="notification-to">
{% if notification.addressees|length > 0 %}
<abbr title="{{ 'notification.sent_to'|trans }}">
{{ 'notification.to'|trans }}:
</abbr>
{% endif %}
{% for a in notification.addressees %}
<li>
<span class="badge-user">
{{ a|chill_entity_render_string }}
</li>
</span>
{% endfor %}
</ul>
</div>
</div>
<div class="item-col">{{ notification.date|format_datetime('long', 'short') }}</div>
</div>
<div class="item-row">
<div class="item-row separator">
{% include data.template with data.template_data %}
</div>
<div class="item-row row">
<div>
<blockquote class="chill-user-quote">
{{ notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
</blockquote>
</div>
</div>
<div class="item-row separator">
{% include data.template with data.template_data %}
</div>
<div class="item-row separator">
<ul class="record_actions">
<li>
{# Vue component #}
<span class="notification_toggle_read_status"
data-notification-id="{{ notification.id }}"
data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
@ -105,12 +110,14 @@
</li>
{% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', notification) %}
<li>
<a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': notification.id}) }}" class="btn btn-edit"></a>
<a href="{{ chill_path_add_return_path('chill_main_notification_edit', {'id': notification.id}) }}"
class="btn btn-edit" title="{{ 'Edit'|trans }}"></a>
</li>
{% endif %}
{% if is_granted('CHILL_MAIN_NOTIFICATION_SEE', notification) %}
<li>
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}" class="btn btn-show"></a>
<a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
class="btn btn-show" title="{{ 'Show'|trans }}"></a>
</li>
{% endif %}
</ul>
@ -121,7 +128,4 @@
</div>
{% endif %}
</div>
</div>
</div>
{% endblock content %}

View File

@ -13,8 +13,8 @@
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-10">
<div class="col-10">
<h1>{{ notification.title }}</h1>
<div>
@ -88,6 +88,7 @@
</a>
</li>
<li>
{# Vue component #}
<span class="notification_toggle_read_status"
data-notification-id="{{ notification.id }}"
data-notification-current-is-read="1"
@ -95,5 +96,4 @@
</li>
</ul>
</div>
</div>
{% endblock content %}

View File

@ -353,21 +353,24 @@ Created for: Créé pour
Created by: Créé par
notification:
My own notifications: Mes notifications
Notify: Envoyer une notification
Notification created: Notification envoyée
Any notification received: Aucune notification reçue
Any notification sent: Aucune notification envoyée
Notifications received: Notifications reçues
Notifications sent: Notification envoyées
Notifications sent: Notifications envoyées
comment_appended: Commentaire ajouté
append_comment: Ajouter un commentaire
comment_updated: Commentaire mis à jour
is_unread: Non-lue
is_system: Notification automatique
is_system: notification automatique
list: Notifications
Sent: Envoyé
sent_to: Envoyé à
to: À
sent_to: Destinataire(s)
from: De
received_from: Expéditeur
you were notified by %sender%: Vous avez été notifié par %sender%
you were notified by system: Vous avez été notifié automatiquement
to: À

View File

@ -20,6 +20,11 @@ span.badge-thirdparty {
span.badge-user {
border-bottom-width: 1px;
&.system {
background-color: $chill-llight-gray;
font-style: italic;
color: $chill-gray;
}
}
span.badge-person {
border-bottom-color: $chill-green;

View File

@ -2,7 +2,7 @@
{% if period is not null %}
{% if is_granted('CHILL_PERSON_ACCOMPANYING_PERIOD_SEE', period) %}
<a href="{{ path('chill_person_accompanying_course_index', {'accompanying_period_id': notification.relatedEntityId }) }}">
Go to Acc. period.
Show and Go to Accompanying Course
</a>
{% else %}
You are getting a notification for a period you are not allowed to see. This is the minimal details: {{ period.id }}