From e14b65f11580a30a36f1b8914d38defed961644e Mon Sep 17 00:00:00 2001
From: Ulli Hafner <ullrich.hafner@gmail.com>
Date: Fri, 19 May 2023 00:03:37 +0200
Subject: [PATCH] Adapt tables to Jenkins design language (light and dark
 theme).

Correctly implement striped tables on light and dark themes. Removed
hovering of selected table. Fix pagination controls styling.
---
 go.sh                                 |  2 +-
 src/main/webapp/css/jenkins-style.css | 40 ++++++++++++++-------------
 src/main/webapp/js/table.js           |  2 +-
 3 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/go.sh b/go.sh
index 1d7e7bd7..eac63241 100755
--- a/go.sh
+++ b/go.sh
@@ -4,7 +4,7 @@ set -e
 
 JENKINS_HOME=../docker/volumes/jenkins-home
 
-mvn clean install || { echo "Build failed"; exit 1; }
+mvn -o clean install || { echo "Build failed"; exit 1; }
 
 echo "Installing plugin in $JENKINS_HOME"
 
diff --git a/src/main/webapp/css/jenkins-style.css b/src/main/webapp/css/jenkins-style.css
index f23af7bd..33980946 100644
--- a/src/main/webapp/css/jenkins-style.css
+++ b/src/main/webapp/css/jenkins-style.css
@@ -6,21 +6,10 @@ tfoot {
     font-weight: bold;
 }
 
-/* Change color of active pagination, to fit to the material blue grey css */
-.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
-    background-color: #b4b4b4;
-    border-color: #b4b4b4;
-}
-
-/* Change color of inactive pagination, to fit to the material blue grey css */
-.pagination > li > a, .pagination > li > span {
-    color: #b4b4b4;
-}
-
-/* Change color of active pagination, to fit to the material blue grey css */
-.page-item.active .page-link {
-    background-color: #b4b4b4;
-    border-color: #b4b4b4;
+div.dataTables_wrapper div.dataTables_paginate ul.pagination {
+    margin: 2px 4px 4px 0;
+    white-space: nowrap;
+    justify-content: flex-end;
 }
 
 /* Add color for search (filter) highlighting */
@@ -83,10 +72,23 @@ div.details-control {
 /* ------------------------------------------------------------------------------------------------------------------- */
 /* DataTables select                                                                                                  */
 /* ------------------------------------------------------------------------------------------------------------------- */
-table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected {
-    background-color: #b4b4b4 !important;
+
+table.dataTable.table-striped > tbody > tr.odd > * {
+    box-shadow: inset 0 0 0 9999px var(--table-background);
+    color: var(--text-color)
+}
+
+table.dataTable.table-striped > tbody > tr.even > * {
+    box-shadow: inset 0 0 0 9999px var(--background);
+    color: var(--text-color)
+}
+
+table.dataTable.table-striped > tbody > tr.odd.selected > * {
+    box-shadow: inset 0 0 0 9999px var(--medium-grey);
+    color: var(--text-color)
 }
 
-table.dataTable tbody tr.selected, table.dataTable tbody th.selected, table.dataTable tbody td.selected {
-    color: black !important;
+table.dataTable.table-striped > tbody > tr.even.selected > * {
+    box-shadow: inset 0 0 0 9999px var(--medium-grey);
+    color: var(--text-color)
 }
diff --git a/src/main/webapp/js/table.js b/src/main/webapp/js/table.js
index c5395cf2..e1c73ad6 100644
--- a/src/main/webapp/js/table.js
+++ b/src/main/webapp/js/table.js
@@ -36,7 +36,7 @@ jQuery3(document).ready(function () {
                                     return '-';
                                 }
                                 const dateTime = luxon.DateTime.fromMillis(data * 1000);
-                                return '<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="'
+                                return '<span data-bs-toggle="tooltip" data-bs-placement="top" title="'
                                     + dateTime.toLocaleString(luxon.DateTime.DATETIME_SHORT) + '">'
                                     + dateTime.toRelative({locale: 'en'}) + '</span>';
                             }