From 3347a952e348ba3bf71f86863de68f74da9adb14 Mon Sep 17 00:00:00 2001
From: Nicolas Saillant <saillantnicolas01@gmail.com>
Date: Fri, 27 Sep 2024 15:44:52 +0200
Subject: [PATCH] Update button styles and add toggle functionality

---
 Maintenance/test_handling/Summary_Script.js   | 16 ++++-----
 .../test_handling/create_testresult_page      |  4 +--
 Maintenance/test_handling/testresult.css      | 36 ++++++++-----------
 3 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/Maintenance/test_handling/Summary_Script.js b/Maintenance/test_handling/Summary_Script.js
index 90a87da08e5..413f0b94d7d 100644
--- a/Maintenance/test_handling/Summary_Script.js
+++ b/Maintenance/test_handling/Summary_Script.js
@@ -174,7 +174,7 @@ function platformContainer(platforms) {
         const tplArray = platform.tpl;
         const $toggleButton = $('<button>', {
             text: 'Third Party Libraries',
-            class: 'tpl-toggle-button',
+            class: 'tpl-toggle-button toggle-button',
             click: function() {
                 $tplTable.toggle();
             }
@@ -193,17 +193,15 @@ function platformContainer(platforms) {
         $('<th>', { text: 'Version' }).appendTo($headerRow);
         $headerRow.appendTo($thead);
         tplArray.forEach(tpl => {
-            $('<tr>').append(
-                $('<td>').html(`<a href="#" class="tpl-link" data-tpl="${tpl.name}">${tpl.name}</a>`),
+            const $row = $('<tr>').append(
+                $('<td>').text(tpl.name),
                 $('<td>').text(tpl.version || 'N/A'),
             ).appendTo($tbody);
+            $row.addClass('tpl-row');
+            $row.click(function() {
+                showVersionsForTPL(tpl.name);
+            });
         });
-        $('.tpl-link').click(function(event) {
-            event.preventDefault();
-            const tplName = $(this).data('tpl');
-            showVersionsForTPL(tplName);
-        });
-
         const letters = ['n', 'w', 'o', 'r'];
         letters.forEach(letter => {
             const $letterContainer = $('<div>', { class: 'letter_container ' + letter }).appendTo($container);
diff --git a/Maintenance/test_handling/create_testresult_page b/Maintenance/test_handling/create_testresult_page
index a1805aa9ec9..33049fd0aef 100755
--- a/Maintenance/test_handling/create_testresult_page
+++ b/Maintenance/test_handling/create_testresult_page
@@ -884,8 +884,8 @@ sub create_summary_page {
         </select>
         <br>
         <div>
-            <button id="open-all">Open All</button>
-            <button id="close-all">Close All</button>
+            <button id="open-all" class="toggle-button">Open All</button>
+            <button id="close-all" class="toggle-button">Close All</button>
         </div>
         <div id="main_container">
             <div id="platform_container"></div>
diff --git a/Maintenance/test_handling/testresult.css b/Maintenance/test_handling/testresult.css
index 0345403739e..8c460cdea6b 100644
--- a/Maintenance/test_handling/testresult.css
+++ b/Maintenance/test_handling/testresult.css
@@ -92,7 +92,12 @@ TABLE.result TD > a.package_name {
 }
 
 .toggle-button {
-    text-decoration: underline;
+    color: #333;
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    text-align: center;
+    border-radius: 5px;
 }
 
 .summary-content{
@@ -145,29 +150,20 @@ TABLE.result TD > a.package_name {
 
 .tpl-toggle-button {
     display: inline-block;
-    margin-bottom: 10px;
-    padding: 6px 12px;
+    padding: 0.3em 0.5em;
     font-size: 14px;
-    color: #333;
-    background-color: #f0f0f0;
-    border: 1px solid #ccc;
-    cursor: pointer;
-    text-align: center;
-    text-decoration: underline;
 }
 
-.tpl-toggle-button:hover {
+.toggle-button:hover {
     background-color: #e0e0e0;
 }
 
-.tpl-link {
-    color: #0000EE;
-    text-decoration: underline;
+.tpl-row {
     cursor: pointer;
 }
 
-.tpl-link:hover {
-    color: #1A0DAB;
+.tpl-row:hover td {
+    background-color: #d1d1d1 !important;
 }
 
 /* TPL Modal */
@@ -248,11 +244,11 @@ table.tablesorter thead th.tablesorter-headerDesc {
     padding-right: 20px;
 }
 
-table.tablesorter tbody tr:nth-child(odd) {
+table.tablesorter tbody tr:nth-child(odd) td {
     background-color: #e6e6e6;
 }
 
-table.tablesorter tbody tr:nth-child(even) {
+table.tablesorter tbody tr:nth-child(even) td {
     background-color: #f0f0f0;
 }
 
@@ -260,8 +256,4 @@ table.tablesorter tbody td {
     padding: 8px;
     border: 1px solid #ccc;
     text-align: left;
-}
-
-table.tablesorter tbody tr:hover {
-    background-color: #d1d1d1
-}
+}
\ No newline at end of file