From b66635e4e16f5af26171211b6196f1dff319e1c5 Mon Sep 17 00:00:00 2001
From: Zoltan Flamis <zoltan@innocraft.com>
Date: Thu, 22 Apr 2021 09:23:22 +1200
Subject: show period label on evo graph (#17456)

* v1

* v2

* use css classes

* update period name when selected

* fix ui tests

* use translation for period name

Co-authored-by: sgiehl <stefan@matomo.org>
---
 plugins/CoreHome/templates/_dataTableActions.twig | 37 ++++++++++++-----------
 1 file changed, 19 insertions(+), 18 deletions(-)

(limited to 'plugins/CoreHome/templates')

diff --git a/plugins/CoreHome/templates/_dataTableActions.twig b/plugins/CoreHome/templates/_dataTableActions.twig
index c1f52456b9..39eec1cae5 100644
--- a/plugins/CoreHome/templates/_dataTableActions.twig
+++ b/plugins/CoreHome/templates/_dataTableActions.twig
@@ -33,24 +33,6 @@
             </ul>
         {% endset %}
 
-        {% if properties.show_periods %}
-            <a class="dropdown-button dataTableAction activatePeriodsSelection"
-               href="javascript:;"
-               title="{{ 'CoreHome_ChangePeriod'|translate|e('html_attr') }}"
-               data-target="dropdownPeriods{{ randomIdForDropdown }}">
-                <span class="icon-calendar"></span>
-            </a>
-            <ul id='dropdownPeriods{{ randomIdForDropdown }}' class='dropdown-content dataTablePeriods'>
-                {% for selectablePeriod in properties.selectable_periods %}
-                    <li>
-                        <a data-period="{{ selectablePeriod }}" class="tableIcon {% if (clientSideParameters.period|default('')) == selectablePeriod %}activeIcon{% endif %}">
-                            <span>{{ properties.translations[selectablePeriod]|default(selectablePeriod) }}</span>
-                        </a>
-                    </li>
-                {% endfor %}
-            </ul>
-        {% endif %}
-
         {% if activeFooterIcon and numIcons > 1 %}
             <a class="dropdown-button dataTableAction activateVisualizationSelection"
                href="javascript:;"
@@ -152,4 +134,23 @@
                 </li>
             {% endif %}
         </ul>
+
+        {% if properties.show_periods %}
+            <a class="dropdown-button dataTableAction activatePeriodsSelection"
+               href="javascript:;"
+               title="{{ 'CoreHome_ChangePeriod'|translate|e('html_attr') }}"
+               data-target="dropdownPeriods{{ randomIdForDropdown }}"
+            >
+                <div><span class="icon-calendar"></span><span class="periodName">{{ properties.translations[clientSideParameters.period]|default(clientSideParameters.period) }}</span></div>
+            </a>
+            <ul id='dropdownPeriods{{ randomIdForDropdown }}' class='dropdown-content dataTablePeriods'>
+                {% for selectablePeriod in properties.selectable_periods %}
+                    <li>
+                        <a data-period="{{ selectablePeriod }}" class="tableIcon {% if (clientSideParameters.period|default('')) == selectablePeriod %}activeIcon{% endif %}">
+                            <span>{{ properties.translations[selectablePeriod]|default(selectablePeriod) }}</span>
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
     {% endif %}
-- 
cgit v1.2.3