Redesign real-time segment notice after team feedback

Author: tzi

plugins/SegmentEditor/Controller.php

@@ -167,6 +167,8 @@ private function getTranslations(): array
             'SegmentEditor_SparklineTooltipWeeks',
             'SegmentEditor_SparklineTooltipMonths',
             'SegmentEditor_SparklineTooltipYears',
+            'SegmentEditor_ManageSegmentsRealtimeNotice',
+            'SegmentEditor_ManageSegmentsRealtimeNoDataTooltip',
             'General_Segment',
             'General_SegmentDocumentation',
             'General_ColumnEvolutionVisits',

plugins/SegmentEditor/lang/en.json

@@ -4,7 +4,8 @@
         "AddANDorORCondition": "Add %s condition",
         "AddNewSegment": "Create new segment",
         "ManageSegments": "Manage Segments",
-        "ManageSegmentsRealtimeNotice": "Some segments are processed in real time and their data is not displayed here, as this page only lists pre-processed segments.",
+        "ManageSegmentsRealtimeNotice": "Some segments in the table are processed in real time, so their data will not be displayed.",
+        "ManageSegmentsRealtimeNoDataTooltip": "This segment is processed in real time, so no data will be displayed.",
         "SegmentPageTitle": "Segments overview",
         "SegmentPageDescription": "View and manage your segments while monitoring their impact on traffic and behaviour. This table shows visits, actions, and trends over time, with quick links to view, edit, or delete each segment.",
         "SeeDashboardForThisSegment": "View dashboard for this segment.",

plugins/SegmentEditor/templates/manageSegments.twig

@@ -1,13 +1,13 @@
+{% if hasRealtimeSegments %}
+    <div class="alert alert-info">
+        {{ 'SegmentEditor_ManageSegmentsRealtimeNotice'|translate }}
+    </div>
+{% endif %}
 <div class="card" data-page="manage-segments">
     <div class="card-content">
         <h2 class="card-title">{{ 'SegmentEditor_SegmentPageTitle'|translate }}</h2>
         <div>
             <p class="card-introduction">{{ 'SegmentEditor_SegmentPageDescription'|translate }}</p>
-            {% if hasRealtimeSegments %}
-                <div class="alert alert-info">
-                    {{ 'SegmentEditor_ManageSegmentsRealtimeNotice'|translate }}
-                </div>
-            {% endif %}
             <form name="manageSegmentSearchFilter">
                 <div class="form-group row matomo-form-field" style="">
                     <div class="col s12 input-field m6">
@@ -55,21 +55,21 @@
                             <td title="{{ segment.name }}">{{ segment.name|rawSafeDecoded }}</td>
                             <td class="entityTable_Numeric">
                                 {% if segment.isRealtime %}
-                                    ~
+                                    <span title="{{ 'SegmentEditor_ManageSegmentsRealtimeNoDataTooltip'|translate }}">-</span>
                                 {% else %}
                                  {{ segmentData[loop.index0].nb_visits }}
                                 {% endif %}
                             </td>
                             <td class="entityTable_Numeric">
                                 {% if segment.isRealtime %}
-                                    ~
+                                    <span title="{{ 'SegmentEditor_ManageSegmentsRealtimeNoDataTooltip'|translate }}">-</span>
                                 {% else %}
                                     {{ segmentData[loop.index0].nb_actions }}
                                 {% endif %}
                             </td>
                             <td class="entityTable_Numeric">
                                 {% if segment.isRealtime %}
-                                    ~
+                                    <span title="{{ 'SegmentEditor_ManageSegmentsRealtimeNoDataTooltip'|translate }}">-</span>
                                 {% else %}
                                     <span title="{{ 'General_ColumnEvolutionVisitsDocumentation'|translate }}" class="sparklineEvolution sparklineEvolution-{{ segmentData[loop.index0].evolution_visits_direction }}">
                                         <img src="{{ segmentData[loop.index0].evolution_visits_icon }}" alt="" class="sparklineEvolution_icon" />