Notifications list template

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue

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

src/Bundle/ChillMainBundle/Resources/views/Notification/create.html.twig

@@ -11,8 +11,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="col-10">
-    <div class="col-md-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 %}

src/Bundle/ChillMainBundle/Resources/views/Notification/edit.html.twig

@@ -11,8 +11,7 @@
 {% endblock %}
 
 {% block content %}
-<div class="row">
+<div class="col-10">
-    <div class="col-md-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 %}

src/Bundle/ChillMainBundle/Resources/views/Notification/extension_list_notifications_for.html.twig

@@ -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"

src/Bundle/ChillMainBundle/Resources/views/Notification/list.html.twig

@@ -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="col-10 notification notification-list">
-        <div class="row">
+
-            <div class="grid-8 centered">
     <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 %}
+                            <div class="notification-from">
-                                                {{ 'notification.from'|trans }}: {{ notification.sender|chill_entity_render_string }}
+                                {% 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 }}
+                            <div class="notification-to">
-                                        <ul>
+                                {% 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>
@@ -120,8 +127,5 @@
 
         </div>
     {% endif %}
-            </div>
+</div>
-
-        </div>
-    </div>
 {% endblock content %}

src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig

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

src/Bundle/ChillMainBundle/translations/messages.fr.yml

@@ -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: À
 

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/badge.scss

@@ -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;

src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/showInNotification.html.twig

@@ -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 }}