Fix icon align of outlinks in datatables (#16492)

* Fix icon align of outlinks in datatables

* improve styling

* Move datatable icons to matomo font

* replace icon in multisites report

* improve css

* improve css so it looks good on all os/browser

* small adjustments

* Adjust multisites data table

* updates expected screenshots

* move plus/minus icon one pixel down

* move outlink icon one pixel down

* updates expected screenshots

* improve icon css

* increase size of plus/minus icon

* updates expected screenshots

* updates submodules

* fix ui test

1 files changed, 9 insertions, 37 deletions

diff --git a/plugins/Actions/javascripts/actionsDataTable.js b/plugins/Actions/javascripts/actionsDataTable.js
index d3d69e8c34..aaddb8462c 100644
--- a/plugins/Actions/javascripts/actionsDataTable.js
+++ b/plugins/Actions/javascripts/actionsDataTable.js
@@ -24,16 +24,6 @@
         return currentLevel;
     }
 
-    // helper function for ActionDataTable
-    function setImageMinus(domElem) {
-        $('img.plusMinus', domElem).attr('src', 'plugins/Morpheus/images/minus.png');
-    }
-
-    // helper function for ActionDataTable
-    function setImagePlus(domElem) {
-        $('img.plusMinus', domElem).attr('src', 'plugins/Morpheus/images/plus.png');
-    }
-
     /**
      * UI control that handles extra functionality for Actions datatables.
      *
@@ -133,17 +123,10 @@
             rowsWithSubtables.css('font-weight', 'bold');
 
             $("th:first-child", domElem).addClass('label');
-            var imagePlusMinusWidth = 12;
-            var imagePlusMinusHeight = 12;
-            $('td:first-child', rowsWithSubtables)
+            $(rowsWithSubtables)
                 .each(function () {
-                    $('<img width="' + imagePlusMinusWidth + '" height="' + imagePlusMinusHeight + '" class="plusMinus" src="" />').insertBefore($(this).children('.label'));
-
                     if (self.param.filter_pattern_recursive) {
-                        setImageMinus(this);
-                    }
-                    else {
-                        setImagePlus(this);
+                        $(this).addClass('expanded');
                     }
                 });
 
@@ -243,26 +226,26 @@
             }
             // else we toggle all these rows
             else {
-                var plusDetected = $('td img.plusMinus', domElem).attr('src').indexOf('plus') >= 0;
+                var isExpanded = $(domElem).hasClass('subDataTable') && $(domElem).hasClass('expanded');
 
                 $(domElem).siblings().each(function () {
                     var parents = $(this).prop('parent').split(' ');
                     if (parents) {
                         if (parents.indexOf(idSubTable) >= 0
                             || parents.indexOf('subDataTable_' + idSubTable) >= 0) {
-                            if (plusDetected) {
+                            if (!isExpanded) {
                                 $(this).css('display', '').removeClass('hidden');
 
-                                //unroll everything and display '-' sign
-                                //if the row is already opened
+                                // unroll everything if the row is already opened
                                 var NextStyle = $(this).next().attr('class');
                                 var CurrentStyle = $(this).attr('class');
 
                                 var currentRowLevel = getLevelFromClass(CurrentStyle);
                                 var nextRowLevel = getLevelFromClass(NextStyle);
 
-                                if (currentRowLevel < nextRowLevel)
-                                    setImageMinus(this);
+                                if (currentRowLevel < nextRowLevel) {
+                                    $(this).addClass('expanded');
+                                }
                             }
                             else {
                                 $(this).css('display', 'none').addClass('hidden');
@@ -272,22 +255,11 @@
                     }
                 });
 
-                var table = $(domElem);
-                if (!table.hasClass('dataTable')) {
-                    table = table.closest('.dataTable');
-                }
-
                 self.$element.trigger('piwik:actionsSubTableToggled');
             }
 
             // toggle the +/- image
-            var plusDetected = $('td img.plusMinus', domElem).attr('src').indexOf('plus') >= 0;
-            if (plusDetected) {
-                setImageMinus(domElem);
-            }
-            else {
-                setImagePlus(domElem);
-            }
+            $(domElem).toggleClass('expanded');
         },
 
         //called when the full table actions is loaded