set table head sticky (#18124)

* update table head to sticky

update table head to sticky

* update on small screen

update on small screen

* update table conditions

update table conditions

* remove on smaller screen

remove on smaller screen

* update screen shot

update screen shot

* Update Morpheus_load.png

* update table warnings

update table warnings

* remove firefox warning

remove firefox warning

* test new setup

test new setup

* remove js, sticky on pure css

remove js, sticky on pure css

* update ui screen shot

update ui screen shot

* update scroll on l6

* remove related

remove related

* update z index

update z index so table tool tip won't overlap

* update table css

update table css

* update z-index

update z-index

* update test css

update test css

* add missing semi comma

add missing semi comma

* update datable zindex

update datable zindex

* update tests

update tests

* Update UIIntegrationTest_metric_tooltip.png

update tooltip screen shot

* update report side css

update report side css

* Update _dataTable.less

fix css change

* update table image

update table image

* update wrong table css

update wrong table css

* update screen shots

update screen shots

* update to js solution

update to js solution

* update table

update table

* add on load blinds, remove console.log

add on load blinds, remove console.log

* update screen shot

update screen shot

* Update plugins/CoreHome/stylesheets/dataTable/_dataTable.less

Co-authored-by: sgiehl <stefan@matomo.org>

10 files changed, 53 insertions, 25 deletions

diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 2115626642..35b73de875 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -111,9 +111,22 @@ $.extend(DataTable.prototype, UIControl.prototype, {
         this.isEmpty = $('.pk-emptyDataTable', domElem).length > 0;
         this.bindEventsAndApplyStyle(domElem);
         this._init(domElem);
+        this.enableStickHead(domElem);
         this.initialized = true;
+
     },
 
+    enableStickHead: function (domElem) {
+      // Bind to the resize event of the window object
+      $(window).on('resize', function () {
+        var tableScrollerWidth = $(domElem).find('.dataTableScroller').width();
+        var tableWidth = $(domElem).find('table').width();
+        if (tableScrollerWidth < tableWidth) {
+          $('.dataTableScroller').css('overflow-x', 'scroll');
+        }
+        // Invoke the resize event immediately
+      }).resize();
+    },
     //function triggered when user click on column sort
     onClickSort: function (domElem) {
         var self = this;
@@ -1627,10 +1640,12 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                     top: 0
                 });
 
+                $(".dataTable thead").addClass('with-z-index');
                 tooltip.stop(true, true).fadeIn(250);
             },
             function () {
-                $(this).prev().stop(true, true).fadeOut(400);
+              $(this).prev().stop(true, true).fadeOut(250);
+              $(".dataTable thead").removeClass('with-z-index');
             });
         });
     },
diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
index 96423295a1..d90e2383d5 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
@@ -22,6 +22,17 @@
     vertical-align: text-bottom;
   }
 
+  thead {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 10;
+
+    &.with-z-index {
+      z-index: 150;
+    }
+  }
+
   td.highlight > .ratio {
     visibility: visible;
   }
@@ -187,7 +198,7 @@ table.dataTable tr td.cellSubDataTable {
 }
 
 .cellSubDataTable > .dataTable {
-    padding: 6px 0 0;
+  padding: 6px 0 0;
 }
 
 /* A link in a column in the DataTable */
@@ -398,8 +409,8 @@ table.dataTable img {
 }
 
 .tableIconsGroup > span > span {
-    position:relative;
-    float:left;
+  position:relative;
+  float:left;
 }
 
 .dataTableFooterActiveItem {
@@ -553,7 +564,7 @@ table.dataTable span.cell-tooltip {
 }
 
 td.cellSubDataTable .loadingPiwik {
-    padding:0;
+  padding:0;
 }
 
 .dataTable .searchReset {
@@ -617,10 +628,10 @@ td.cellSubDataTable .loadingPiwik {
     }
 
     .periodName {
-        padding-left:8px;
-        padding-right:8px;
-        font-size:16px;
-        text-transform:capitalize;
+      padding-left:8px;
+      padding-right:8px;
+      font-size:16px;
+      text-transform:capitalize;
     }
   }
 
@@ -630,9 +641,10 @@ td.cellSubDataTable .loadingPiwik {
     padding-left:8px;
   }
 }
-
-div.dataTableScroller {
-  overflow-x: scroll;
+.widgetContent {
+  div.dataTableScroller {
+    overflow-x: scroll;
+  }
 }
 
 .theWidgetContent .card .card-content, table.dataTable {
diff --git a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_rowactions.png b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_rowactions.png
index 8a268eb7f4..abca92bf7e 100644
--- a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_rowactions.png
+++ b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_rowactions.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:63bf3433197a59c23f5706ef5b8479cd3f46b88e0a461f191f44577663108ebf
-size 33491
+oid sha256:18be556de29aea059b5a899590db4d191a3c3684a4a806caca354f6325c57916
+size 33465
diff --git a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_rowactions_subtable.png b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_rowactions_subtable.png
index fde3a1623f..618d2dac60 100644
--- a/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_rowactions_subtable.png
+++ b/plugins/PagePerformance/tests/UI/expected-screenshots/PagePerformance_rowactions_subtable.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f774c17d50b119452eb7b663a4b37d4f634bef0ddd18ee65a805a633940cbffc
-size 36640
+oid sha256:5ae4811c27fe22733be9c455b6bf26074a40be737fbd806330c049490eadd0da
+size 36621
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_actions_content_piece_name.png b/tests/UI/expected-screenshots/UIIntegrationTest_actions_content_piece_name.png
index 8673cc604a..d543fbadee 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_actions_content_piece_name.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_actions_content_piece_name.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:64268852e9addee0cb9e27ad395ae468bfb8dc3bdb5d9086562e026ec2a509ee
-size 50253
+oid sha256:488c328f5290ba3fbb70eda53ec1a6d7c46fa77756bea3a6d2a5c2ab9a58a212
+size 50285
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_dashboard3.png b/tests/UI/expected-screenshots/UIIntegrationTest_dashboard3.png
index 3548196248..33d7bee43b 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_dashboard3.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_dashboard3.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a8aacbe7688e3673fd6ce604a636a856156f445e16e4ddaf2943919393983b4d
-size 712654
+oid sha256:d0bfcab4b34cbbb0e27b2b3ebb84bc29c5b8cfc5052af296a61d9f6afe1be4ee
+size 710444
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_exampleui_tagClouds.png b/tests/UI/expected-screenshots/UIIntegrationTest_exampleui_tagClouds.png
index 124f797c7e..0ca25a7639 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_exampleui_tagClouds.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_exampleui_tagClouds.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3bb07747453abcc56974f31490078e038474af55fec731f046829168a5508585
-size 64046
+oid sha256:d034699008511f93db69be414b868b071fa64dd36e7594ebb9886d0abbeb3cdd
+size 64039
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_metric_tooltip.png b/tests/UI/expected-screenshots/UIIntegrationTest_metric_tooltip.png
index 9f5939cb9a..6dc464bfdd 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_metric_tooltip.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_metric_tooltip.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:16287035e21fc5b870fa65cdc96f2eb1ef7a5872711c907fbc359dd2b4286c2e
+oid sha256:b97d61e6fe092b8e50c3c8cbdbb771f1501f974eec8feb8845c308efcb63cec6
 size 8863
diff --git a/tests/UI/expected-screenshots/ViewDataTableTest_subtables_loaded.png b/tests/UI/expected-screenshots/ViewDataTableTest_subtables_loaded.png
index 1af7444aef..f30b7578fe 100644
--- a/tests/UI/expected-screenshots/ViewDataTableTest_subtables_loaded.png
+++ b/tests/UI/expected-screenshots/ViewDataTableTest_subtables_loaded.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1dadfd9b7c12b4cda557e4828d87bfd0f959624a7a7f19acf5865bd8ab519e4d
+oid sha256:a16028af7b177d9b7db5ae5f8a1364177dbe9d738617b1ece1fc7565f373f8cf
 size 79323
diff --git a/tests/UI/specs/UIIntegration_spec.js b/tests/UI/specs/UIIntegration_spec.js
index 1a037df95a..1cc69b0e34 100644
--- a/tests/UI/specs/UIIntegration_spec.js
+++ b/tests/UI/specs/UIIntegration_spec.js
@@ -525,9 +525,10 @@ describe("UIIntegrationTest", function () { // TODO: Rename to Piwik?
             // manipulate the styles a bit, as it's otherwise not visible on screenshot
             await page.evaluate(function () {
                 var style = document.createElement('style');
-                style.innerHTML = '.permadocs { display: block !important; }';
+                style.innerHTML = '.permadocs { display: block !important;z-index:150!important; } .dataTable thead{ z-index:150 !important; }';
                 $('body').append(style);
 
+                //add index not overlap others
                 $('.columnDocumentation:visible').addClass('permadocs');
             });