From 650e0d79bea9cc39d784044fb349652cd2cd3c53 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 13 Jan 2022 15:03:05 +0100
Subject: [PATCH] improve notification list and show styles

---
 .../Resources/public/chill/chillmain.scss     |  4 +++
 .../public/chill/scss/notification.scss       | 36 +++++++++++--------
 .../Notification/NotificationReadToggle.vue   |  2 +-
 .../views/Notification/_list_item.html.twig   | 14 ++++----
 .../views/Notification/show.html.twig         |  5 +--
 .../translations/messages.fr.yml              |  1 +
 6 files changed, 38 insertions(+), 24 deletions(-)

diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
index 18caf498c..1d2a52d89 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
@@ -240,6 +240,10 @@ table.table-bordered {
    color: $gray-800;
    font-size: 90%;
 
+    p {
+        margin-bottom: 0.75rem !important;
+    }
+
    // test a bottom right decoration (to be confirmed)
    &.test {
       position: relative;
diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss
index 23993299d..af0f058d5 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss
@@ -36,25 +36,31 @@ div.notification {
 div.notification-list,
 div.notification-show {
     div.item-bloc {
-        div.item-row.header {
-
-            div.item-col {
-                &:first-child {
-                    flex-grow: 1;
+        div.item-row {
+            &.notification-header {
+                div.item-col {
+                    &:first-child {
+                        flex-grow: 1;
 
+                    }
+                    &:last-child {
+                        flex-grow: 0;
+                    }
                 }
-                &:last-child {
-                    flex-grow: 0;
+                ul.small_in_title {
+                    list-style-type: circle;
+                    li {
+                        span.item-key {
+                            display: inline-block;
+                            width: 3em;
+                        }
+                    }
                 }
             }
-
-            ul.small_in_title {
-                list-style-type: circle;
-                li {
-                    span.item-key {
-                        display: inline-block;
-                        width: 3em;
-                    }
+            div.notification-content {
+                margin: 1.5rem;
+                p {
+                    margin-bottom: 0.75rem;
                 }
             }
         }
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
index f1b246626..c60124592 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue
@@ -34,7 +34,7 @@
             :href="showUrl"
             :title="$t('action.show')"
             >
-            <i class="fa fa-sm fa-eye"></i>
+            <i class="fa fa-sm fa-comment-o"></i>
         </a>
 
     </div>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig
index 8123373f2..4b9b69c30 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/_list_item.html.twig
@@ -6,7 +6,7 @@
             </a>
         </h2>
     </div>
-    <div class="item-row mt-2 header">
+    <div class="item-row mt-2 notification-header">
 
         <div class="item-col">
             <ul class="small_in_title">
@@ -53,11 +53,13 @@
             {% include data.template with data.template_data %}
         </div>
     </div>
-    <div class="item-row row">
-        <div>
-            <blockquote class="chill-user-quote">
+    <div class="item-row">
+        <div class="notification-content">
+            {% if full_content is defined and full_content == 'true' %}
+                {{ notification.message|chill_markdown_to_html }}
+            {% else %}
                 {{ notification.message|u.truncate(250, '…', false)|chill_markdown_to_html }}
-            </blockquote>
+            {% endif %}
         </div>
     </div>
     {% if action_button is not defined or action_button != 'false' %}
@@ -79,7 +81,7 @@
                 {% 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" title="{{ 'Show'|trans }}"></a>
+                           class="btn btn-show change-icon" title="{{ 'notification.see_comments_thread'|trans }}"><i class="fa fa-comment"></i></a>
                     </li>
                 {% endif %}
             </ul>
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
index 2d3b27728..1b2f8f189 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Notification/show.html.twig
@@ -40,7 +40,8 @@
                  'template': handler.getTemplate(notification),
                  'template_data': handler.getTemplateData(notification)
             },
-            'action_button': 'false'
+            'action_button': 'false',
+            'full_content': 'true'
         } %}
     </div>
 
@@ -87,7 +88,7 @@
         {% endif %}
 
         <div class="new-comment my-5">
-            <h2 class="chill-blue">{{ 'Write a new comment'|trans }}</h2>
+            <h2 class="chill-blue mb-4">{{ 'Write a new comment'|trans }}</h2>
 
             {{ form_start(appendCommentForm) }}
             {{ form_errors(appendCommentForm) }}
diff --git a/src/Bundle/ChillMainBundle/translations/messages.fr.yml b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
index a3a375891..d990790e0 100644
--- a/src/Bundle/ChillMainBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillMainBundle/translations/messages.fr.yml
@@ -380,4 +380,5 @@ notification:
     you were notified by %sender%:  Vous avez été notifié par %sender%
     you were notified by system: Vous avez été notifié automatiquement
     subject: Objet
+    see_comments_thread: Voir le fil de commentaires associé