design notification box in post menu area

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

@@ -1,13 +1,18 @@
 import {createApp} from "vue";
 import NotificationReadToggle from "ChillMainAssets/vuejs/_components/Notification/NotificationReadToggle.vue";
+import { _createI18n } from "ChillMainAssets/vuejs/_js/i18n";
+
+const i18n = _createI18n({});
 
 window.addEventListener('DOMContentLoaded', function (e) {
     document.querySelectorAll('.notification_toggle_read_status')
         .forEach(function (el) {
-            console.log('app', el);
-            const App = {
+            createApp({
                 template: '<notification-read-toggle ' +
                     ':notificationId="notificationId" ' +
+                    ':buttonClass="buttonClass" ' +
+                    ':buttonNoText="buttonNoText" ' +
+                    ':showUrl="showUrl" ' +
                     ':isRead="isRead"' +
                     '@markRead="onMarkRead" @markUnread="onMarkUnread"' +
                     '></notification-read-toggle>',
@@ -17,6 +22,9 @@ window.addEventListener('DOMContentLoaded', function (e) {
                 data() {
                     return {
                         notificationId: +el.dataset.notificationId,
+                        buttonClass: el.dataset.buttonClass,
+                        buttonNoText: 'true' === el.dataset.buttonNoText,
+                        showUrl: el.dataset.showUrl,
                         isRead: 1 === +el.dataset.notificationCurrentIsRead,
                     }
                 },
@@ -28,8 +36,8 @@ window.addEventListener('DOMContentLoaded', function (e) {
                         this.isRead = true;
                     },
                 }
-            }
-
-            createApp(App).mount(el);
+            })
+            .use(i18n)
+            .mount(el);
         });
 })

src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js

@@ -1,13 +1,13 @@
-import {createApp} from 'vue';
+import { createApp } from 'vue';
 import PickEntity from 'ChillMainAssets/vuejs/PickEntity/PickEntity.vue';
 import { _createI18n } from 'ChillMainAssets/vuejs/_js/i18n'
-import {activityMessages} from "../../../../../ChillActivityBundle/Resources/public/vuejs/Activity/i18n";
 
 window.addEventListener('DOMContentLoaded', function(e) {
-    let
-        apps = document.querySelectorAll('[data-module="pick-dynamic"]');
+
+    let apps = document.querySelectorAll('[data-module="pick-dynamic"]');
 
     apps.forEach(function(el) {
+
         const
             isMultiple = parseInt(el.dataset.multiple) === 1,
             input = document.querySelector('[data-input-uniqid="'+ el.dataset.uniqid +'"]'),
@@ -15,7 +15,13 @@ window.addEventListener('DOMContentLoaded', function(e) {
             i18n = _createI18n({});
 
         createApp({
-            template: '<pick-entity :multiple="multiple" :types="types" :picked="picked" :uniqid="uniqid" @addNewEntity="addNewEntity" @removeEntity="removeEntity"></pick-entity>',
+            template: '<pick-entity ' +
+                ':multiple="multiple" ' +
+                ':types="types" ' +
+                ':picked="picked" ' +
+                ':uniqid="uniqid" ' +
+                '@addNewEntity="addNewEntity" ' +
+                '@removeEntity="removeEntity"></pick-entity>',
             components: {
                 PickEntity,
             },
@@ -54,6 +60,8 @@ window.addEventListener('DOMContentLoaded', function(e) {
                     input.value = JSON.stringify(this.picked);
                 },
             }
-        }).use(i18n).mount(el);
+        })
+        .use(i18n)
+        .mount(el);
     });
 });

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -91,7 +91,3 @@ export default {
     },
 }
 </script>
-
-<style scoped>
-
-</style>

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

@@ -1,10 +1,42 @@
 <template>
-    <button v-if="isRead" @click="markAsUnread">Marquer non-lu</button>
-    <button v-if="!isRead" @click="markAsRead">Marquer lu</button>
+    <div class="btn-group btn-group-sm float-end"
+         role="group" aria-label="Notification actions">
+
+        <button v-if="isRead"
+                class="btn"
+                :class="overrideClass"
+                type="button"
+                :title="$t('markAsUnread')"
+                @click="markAsUnread"
+                >
+            <i class="fa fa-sm fa-envelope-o"></i>
+            <template v-if="!buttonNoText">
+                {{ $t('markAsUnread') }}
+            </template>
+        </button>
+
+        <button v-if="!isRead"
+                class="btn"
+                :class="overrideClass"
+                type="button"
+                :title="$t('markAsRead')"
+                @click="markAsRead"
+                >
+            <i class="fa fa-sm fa-envelope-open-o"></i>
+            <template v-if="!buttonNoText">
+                {{ $t('markAsRead') }}
+            </template>
+        </button>
+
+        <a v-if="showButton"
+           type="button" class="btn btn-outline-primary"
+           :href="showUrl">
+            <i class="fa fa-sm fa-eye"></i>
+        </a>
+    </div>
 </template>
 
 <script>
-
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
 
 export default {
@@ -17,9 +49,33 @@ export default {
         notificationId: {
             required: true,
             type: Number,
+        },
+        buttonClass: {
+            required: false,
+            type: String
+        },
+        buttonNoText: {
+            required: false,
+            type: Boolean,
+        },
+        showUrl: {
+            required: false,
+            type: String
         }
     },
     emits: ['markRead', 'markUnread'],
+    computed: {
+        overrideClass() {
+            console.log('button', this.buttonClass);
+            return this.buttonClass ? this.buttonClass : 'btn-misc'
+        },
+        buttonHideText() {
+            return this.buttonNoText;
+        },
+        showButton() {
+            return !!this.showUrl
+        }
+    },
     methods: {
         markAsUnread() {
            makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/unread`, []).then(response => {
@@ -32,9 +88,41 @@ export default {
             })
         },
     },
+    i18n: {
+        messages: {
+            fr: {
+                markAsUnread: 'Marquer comme non-lu',
+                markAsRead: 'Marquer comme lu'
+            }
+        }
+    }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss">
+.notification {
+    h6 {
+        &::before {
+            font-family: "ForkAwesome";
+            font-size: 80%;
+        }
+    }
+    .read {
+        h6 {
+            font-weight: 500;
+            &::before {
+                //content: "\f2b6";  //envelope-open
+                content: "\f2b7";  //envelope-open-o
+            }
+        }
+    }
+    .unread {
+        h6 {
+            &::before {
+                //content: "\f0e0";  //envelope
+                content: "\f003";  //envelope-o
+            }
+        }
+    }
+}
 </style>

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

@@ -1,25 +1,43 @@
-<div class="list_notification_for">
+<div class="list-group notification my-2">
+    <div class="list-group-item">
+        <h4>{{ 'notification.Sent'|trans }}</h4>
+    </div>
+    {# TODO pagination or limit #}
     {% for notification in notifications %}
-        <div class="notification {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
+        <div class="list-group-item {% if notification.isReadBy(app.user) %}read{% else %}unread{% endif %}">
+
             {% if not notification.isSystem %}
                 {% if notification.sender == app.user %}
-                    <div>You sent notification to: {% for a in notification.addressees %}{{ a|chill_entity_render_string }}{% if not loop.last %}, {% endif %}{% endfor %}</div>
+
+                    <h6>
+                        <abbr title="{{ 'le ' ~ notification.date|format_date('long') }}">
+                            {{ notification.date|format_datetime('short','short') }}
+                        </abbr>
+                        <span class="notification_toggle_read_status"
+                              data-notification-id="{{ notification.id }}"
+                              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-button-no-text="true"
+                        ></span>
+                    </h6>
+                    {% if notification.addressees|length > 0 %}
+                        <abbr title="{{ 'notification.sentto'|trans }}">{{ 'notification.to'|trans }}:</abbr>
+                    {% endif %}
+                    {% for a in notification.addressees %}
+                        <span class="badge-user">
+                            {{ a|chill_entity_render_string }}
+                        </span>
+                    {% endfor %}
+
                 {% else %}
                     <div>{{ 'notification.you were notified by %sender%'|trans({'%sender%': notification.sender|chill_entity_render_string }) }}</div>
                 {% endif %}
             {% else %}
                 <div>{{ 'notification.you were notified by system'|trans }}</div>
             {% endif %}
-            <div>
-                <ul class="record_actions_small">
-                    <li>
-                        <span class="notification_toggle_read_status" data-notification-id="{{ notification.id }}" data-notification-current-is-read="{{ notification.isReadBy(app.user) }}"></span>
-                    </li>
-                    <li>
-                        <a href="{{ chill_path_add_return_path('chill_main_notification_show', {'id': notification.id}) }}" class="btn btn-show"></a>
-                    </li>
-                </ul>
-            </div>
+
+
         </div>
     {% endfor %}
 </div>