setting NotificationReadToggle options for several cases. improve options

src/Bundle/ChillMainBundle/Resources/public/module/notification/toggle_read.js

@@ -23,8 +23,8 @@ window.addEventListener('DOMContentLoaded', function (e) {
                     return {
                         notificationId: +el.dataset.notificationId,
                         buttonClass: el.dataset.buttonClass,
-                        buttonNoText: 'true' === el.dataset.buttonNoText,
+                        buttonNoText: 'false' === el.dataset.buttonText,
-                        showUrl: el.dataset.showUrl,
+                        showUrl: el.dataset.showButtonUrl,
                         isRead: 1 === +el.dataset.notificationCurrentIsRead,
                     }
                 },

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="btn-group btn-group-sm float-end"
+    <div :class="{'btn-group btn-group-sm float-end': isButtonGroup }"
          role="group" aria-label="Notification actions">
 
         <button v-if="isRead"
@@ -10,9 +10,9 @@
                 @click="markAsUnread"
                 >
             <i class="fa fa-sm fa-envelope-o"></i>
-            <template v-if="!buttonNoText">
+            <span v-if="!buttonNoText" class="ps-2">
                 {{ $t('markAsUnread') }}
-            </template>
+            </span>
         </button>
 
         <button v-if="!isRead"
@@ -23,16 +23,20 @@
                 @click="markAsRead"
                 >
             <i class="fa fa-sm fa-envelope-open-o"></i>
-            <template v-if="!buttonNoText">
+            <span v-if="!buttonNoText" class="ps-2">
                 {{ $t('markAsRead') }}
-            </template>
+            </span>
         </button>
 
-        <a v-if="showButton"
+        <a v-if="isButtonGroup"
-           type="button" class="btn btn-outline-primary"
+            type="button"
-           :href="showUrl">
+            class="btn btn-outline-primary"
+            :href="showUrl"
+            :title="$t('action.show')"
+            >
             <i class="fa fa-sm fa-eye"></i>
         </a>
+
     </div>
 </template>
 
@@ -50,6 +54,7 @@ export default {
             required: true,
             type: Number,
         },
+        // Optional
         buttonClass: {
             required: false,
             type: String
@@ -65,14 +70,17 @@ export default {
     },
     emits: ['markRead', 'markUnread'],
     computed: {
+        /// [Option] override default button appearance (btn-misc)
         overrideClass() {
-            console.log('button', this.buttonClass);
             return this.buttonClass ? this.buttonClass : 'btn-misc'
         },
+        /// [Option] don't display text on button
         buttonHideText() {
             return this.buttonNoText;
         },
-        showButton() {
+        /// [Option] showUrl is href for show page second button.
+        //  When passed, the component return a button-group with 2 buttons.
+        isButtonGroup() {
             return !!this.showUrl
         }
     },

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

@@ -10,20 +10,23 @@
                 {% if notification.sender == app.user %}
 
                     <h6>
-                        <abbr title="{{ 'Le ' ~ notification.date|format_date('long') }}">
+                        <abbr title="{{ 'Le ' ~ notification.date|format_date('long') }}" class="ms-1">
                             {{ notification.date|format_datetime('short','short') }}
                         </abbr>
                         <span class="notification_toggle_read_status"
-                              data-notification-id="{{ notification.id }}"
+                            data-notification-id="{{ notification.id }}"
-                              data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
+                            data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
-                              data-show-url="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
+
-                              data-button-class="btn-outline-primary"
+                            data-show-button-url="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}"
-                              data-button-no-text="true"
+                            data-button-class="btn-outline-primary"
+                            data-button-text="false"
                         ></span>
                     </h6>
+
                     {% if notification.addressees|length > 0 %}
-                        <abbr title="{{ 'notification.sentto'|trans }}">{{ 'notification.to'|trans }}:</abbr>
+                        <abbr title="{{ 'notification.sent_to'|trans }}">{{ 'notification.to'|trans }}:</abbr>
                     {% endif %}
+
                     {% for a in notification.addressees %}
                         <span class="badge-user">
                             {{ a|chill_entity_render_string }}
@@ -37,7 +40,6 @@
                 <div>{{ 'notification.you were notified by system'|trans }}</div>
             {% endif %}
 
-
         </div>
     {% endfor %}
 </div>

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

@@ -98,7 +98,10 @@
                                 <div class="item-row separator">
                                     <ul class="record_actions">
                                         <li>
-                                            <span class="notification_toggle_read_status" data-notification-id="{{ notification.id }}" data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"></span>
+                                            <span class="notification_toggle_read_status"
+                                                data-notification-id="{{ notification.id }}"
+                                                data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"
+                                            ></span>
                                         </li>
                                         {% if is_granted('CHILL_MAIN_NOTIFICATION_UPDATE', notification) %}
                                             <li>

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

@@ -88,7 +88,10 @@
                     </a>
                 </li>
                 <li>
-                    <span class="notification_toggle_read_status" data-notification-id="{{ notification.id }}" data-notification-current-is-read="1"></span>
+                    <span class="notification_toggle_read_status"
+                        data-notification-id="{{ notification.id }}"
+                        data-notification-current-is-read="1"
+                    ></span>
                 </li>
             </ul>
         </div>

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

@@ -366,7 +366,7 @@ notification:
     is_system: Notification automatique
     list: Notifications
     Sent: Envoyé
-    sentto: Envoyé à
+    sent_to: Envoyé à
     you were notified by %sender%:  Vous avez été notifié par %sender%
     you were notified by system: Vous avez été notifié automatiquement
     to: À