From b37de4cd4ff719d43ecb343a8811369c47edf391 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Fri, 20 Aug 2021 23:59:37 +0200
Subject: [PATCH] activity list: badges for issues, actions and reasons

---
 .../Resources/public/chill/chillactivity.scss | 12 +++++++++-
 .../Resources/views/Activity/list.html.twig   | 13 ++++++++---
 .../Entity/ActivityReasonRender.php           | 18 ++++++++-------
 .../src/translations/messages.fr.yml          |  2 +-
 .../Resources/public/chill/scss/mixins.scss   | 22 +++++++++++++++++--
 .../public/chill/scss/render_box.scss         | 11 ++++++++--
 .../views/Entity/social_action.html.twig      |  8 +++----
 7 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss b/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
index fc492c7bc..abc46c93a 100644
--- a/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
+++ b/src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss
@@ -28,7 +28,7 @@ div.activity-list {
          div.item-row.main {
             div.item-col {
                &:first-child {
-                  flex-basis: 27%;
+                  flex-basis: 15%;
                }
                ul.list-content {
                   li.social-issues, li.social-actions {
@@ -127,3 +127,13 @@ div.flex-bloc.concerned-groups {
    }
 }
 
+
+/// CHILL ENTITY RENDER BOX
+.chill-entity {
+
+   /// ACTIVITY-REASON
+   &.entity-activity-reason {
+      margin-right: 0.3em;
+      font-size: 120%;
+   }
+}
diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
index 35d39f609..50dcbcd92 100644
--- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
+++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/list.html.twig
@@ -50,7 +50,8 @@
                             <ul class="list-content">
                                 {% if activity.user and t.userVisible %}
                                     <li>
-                                        <b>{{ 'by'|trans }}{{ activity.user.usernameCanonical }}</b>
+                                        <abbr class="referrer" title="{{ 'Referrer'|trans }}">ref:</abbr>
+                                        <b>{{ activity.user.usernameCanonical }}</b>
                                     </li>
                                 {% endif %}
 
@@ -98,7 +99,7 @@
                                     <li class="social-actions">
                                         {%- if activity.socialActions is not empty -%}
                                             {% for r in activity.socialActions %}
-                                                <span class="badge bg-primary">{{ r.title|localize_translatable_string }}</span>
+                                                {{ r|chill_entity_render_box }}
                                             {% endfor %}
                                         {%- endif -%}
                                     </li>
@@ -133,6 +134,7 @@
                         </div>
                     </div>
 
+                    {#
                     {%  if activity.comment.comment is not empty
                         or activity.persons|length > 0
                         or activity.thirdParties|length > 0
@@ -140,7 +142,11 @@
                     %}
                         <div class="item-row details">
                             <div class="item-col">
-                                {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {'context': context, 'with_display': 'row', 'entity': activity } %}
+                                {% include 'ChillActivityBundle:Activity:concernedGroups.html.twig' with {
+                                    'context': context,
+                                    'with_display': 'row',
+                                    'entity': activity
+                                } %}
                             </div>
 
                             {% if activity.comment.comment is not empty %}
@@ -154,6 +160,7 @@
                             {% endif %}
                         </div>
                     {% endif %}
+                    #}
 
                 </div>
             {% endfor %}
diff --git a/src/Bundle/ChillActivityBundle/Templating/Entity/ActivityReasonRender.php b/src/Bundle/ChillActivityBundle/Templating/Entity/ActivityReasonRender.php
index 1e9845acd..6e2f6c897 100644
--- a/src/Bundle/ChillActivityBundle/Templating/Entity/ActivityReasonRender.php
+++ b/src/Bundle/ChillActivityBundle/Templating/Entity/ActivityReasonRender.php
@@ -35,35 +35,37 @@ class ActivityReasonRender extends AbstractChillEntityRender
      * @var TranslatableStringHelper
      */
     protected $translatableStringHelper;
-    
+
     public function __construct(TranslatableStringHelper $translatableStringHelper)
     {
         $this->translatableStringHelper = $translatableStringHelper;
     }
 
-    
+
     public function renderBox($entity, array $options): string
     {
         return
             $this->getDefaultOpeningBox('activity-reason').
+            '<span class="badge bg-chill-pink">'.
             '<i class="fa fa-question-circle"></i>&nbsp;'.
-            '<span class="activity-reason__category">'.
+            '<span class="category">'.
             $this->translatableStringHelper->localize(
                 $entity->getCategory()->getName()
             ).
             '</span>'.
-            '<span class="activity-reason__separator">&nbsp;>&nbsp;</span>'.
-            '<span class="activity-reason__reason">'.
+            '<span class="separator">&nbsp;>&nbsp;</span>'.
+            '<span class="reason">'.
             $this->translatableStringHelper->localize(
                 $entity->getName()
             ).
             '</span>'.
+            '</span>'.
             $this->getDefaultClosingBox()
             ;
     }
 
     /**
-     * 
+     *
      * @param ActivityReason $entity
      * @param array $options
      * @return string
@@ -71,12 +73,12 @@ class ActivityReasonRender extends AbstractChillEntityRender
     public function renderString($entity, array $options): string
     {
         $category = '';
-        
+
         if (null !== $entity->getCategory()) {
             $category = $this->translatableStringHelper->localize(
                 $entity->getCategory()->getName()). ' > ';
         }
-        
+
         return $category .
             $this->translatableStringHelper->localize(
                 $entity->getName()
diff --git a/src/Bundle/ChillAsideActivityBundle/src/translations/messages.fr.yml b/src/Bundle/ChillAsideActivityBundle/src/translations/messages.fr.yml
index e364a0461..f01fd07fa 100644
--- a/src/Bundle/ChillAsideActivityBundle/src/translations/messages.fr.yml
+++ b/src/Bundle/ChillAsideActivityBundle/src/translations/messages.fr.yml
@@ -79,4 +79,4 @@ Created by: Creér par
 #Aside activity delete
 Delete aside activity: Supprimer une activité annexe
 Are you sure you want to remove the aside activity concerning "%name%" ?: Êtes-vous sûr de vouloir supprimer une activité annexe qui concerne "%name%" ?
-The activity has been successfully removed.: L'activité a été supprimée.
\ No newline at end of file
+The activity has been successfully removed.: L'activité a été supprimée.
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
index ce52007f3..a6727593e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss
@@ -1,10 +1,11 @@
+$social-issue-color: #4bafe8;
+$social-action-color: $pink;
+
 ///
 ///  Social Issue mixin
 //   define visual badge for all social issues
 ///
 
-$social-issue-color: $chill-pink;
-
 @mixin badge_social_issue {
     text-transform: capitalize !important;
     font-weight: 500 !important;
@@ -16,3 +17,20 @@ $social-issue-color: $chill-pink;
         margin: 0 0.3em 0 -0.7em;
     }
 }
+
+///
+///  Social Action mixin
+//   define visual badge for all social actions
+///
+
+@mixin badge_social_action {
+    text-transform: capitalize !important;
+    font-weight: 500 !important;
+    border-left: 20px groove $social-action-color;
+    &:before {
+        content: '\f04b';
+        font-family: ForkAwesome;
+        color: $social-action-color;
+        margin: 0 0.3em 0 -0.7em;
+    }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
index 7a2d9b8f2..041a70dd9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
+++ b/src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss
@@ -1,5 +1,3 @@
-/// variables
-
 /// CHILL ENTITY RENDER BOX
 .chill-entity {
 
@@ -18,6 +16,15 @@
             @include badge_social_issue;
         }
     }
+
+    /// SOCIAL-ACTION
+    &.entity-social-action {
+        margin-right: 0.3em;
+        font-size: 120%;
+        span.badge {
+            @include badge_social_action;
+        }
+    }
 }
 
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_action.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_action.html.twig
index d8971c41b..6dae66145 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_action.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/Entity/social_action.html.twig
@@ -1,12 +1,12 @@
 {% set reversed_parents = parents|reverse %}
-<span class="chill-entity chill-entity__social-action">
-  <span class="{% if not options['no-badge'] %}badge bg-primary{% endif %}">
+<span class="chill-entity entity-social-action">
+  <span class="{% if not options['no-badge'] %}badge bg-light text-dark{% endif %}">
     {%- for p in reversed_parents %}
-    <span class="chill-entity__social-action__parent--{{ loop.revindex0 }}">
+    <span class="parent-{{ loop.revindex0 }}">
       {{ p.title|localize_translatable_string }}{{ options['default.separator'] }}
     </span>
     {%- endfor -%}
-    <span class="chill-entity__social-action__child">
+    <span class="child">
       {{ socialAction.title|localize_translatable_string }}
     </span>
   </span>