From 67a5fe82e759864c859814a8a81d5843f3dc5244 Mon Sep 17 00:00:00 2001
From: Cris <hainberg@technikum-wien.at>
Date: Tue, 5 May 2020 16:07:48 +0200
Subject: [PATCH] Fixed: Now column-picker activates/deactivates correctly
 column buttons

Before the problem was using the pseudoclass 'active'. Now, by using
a css class instead, it works.
Also, before when clicking the button twice (activate/deactivate) - it
was always on focus (and therefore always grey). Also fixed.
---
 public/css/Tabulator.css |  5 +++++
 public/js/TableWidget.js | 18 +++++-------------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/public/css/Tabulator.css b/public/css/Tabulator.css
index 0545101c9..22eeb4f5c 100644
--- a/public/css/Tabulator.css
+++ b/public/css/Tabulator.css
@@ -34,4 +34,9 @@
 /* More space for header title (avoids triple points at the end) */
 .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
 	overflow: initial;
+}
+
+.btn-select-col-selected
+{
+	background-color: #e6e6e6;
 }
\ No newline at end of file
diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js
index 559de7f40..60dde8ccf 100644
--- a/public/js/TableWidget.js
+++ b/public/js/TableWidget.js
@@ -269,16 +269,8 @@ var FHC_TableWidget = {
 
 				tableWidgetDiv.find("#tableWidgetTabulator").tabulator('toggleColumn', selected);
 
-				$(this).toggleClass('active');
-
-				if(!$(this).hasClass('active'))
-				{
-					$(this).css('background-color', 'white');
-				}
-				else
-				{
-					$(this).css('background-color', '#e6e6e6');
-				}
+				// toggle class to color button as selected / deselected
+				$(this).toggleClass('btn-select-col-selected').blur();	// blur removes automatic focus
 			})
 		}
 	},
@@ -809,7 +801,7 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){
 	{
 		var field = column.getField();
 		var title = column.getDefinition().title;
-		var active_status = column.getVisibility() ? 'active' : '';
+		var btn_select_col_selected = column.getVisibility() ? 'btn-select-col-selected' : '';
 
 		// If certain columns should be excluded from the column picker (define them in a blacklist array)
 		if (typeof tableWidgetBlacklistArray_columnUnselectable != 'undefined' &&
@@ -818,13 +810,13 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){
 		{
 			if ($.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0)
 			{
-				tabulatorHeaderCollapseHTML += '<button type="button" class="btn btn-default btn-sm btn-select-col ' + active_status +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
+				tabulatorHeaderCollapseHTML += '<button type="button" class="btn btn-default btn-sm btn-select-col ' + btn_select_col_selected +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
 			}
 		}
 		// Else provide all tabulator fields as pickable columns
 		else
 		{
-			tabulatorHeaderCollapseHTML += '<button type="button" class="btn btn-default btn-sm btn-select-col ' + active_status +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
+			tabulatorHeaderCollapseHTML += '<button type="button" class="btn btn-default btn-sm btn-select-col ' + btn_select_col_selected +'" aria-pressed="true" id="btn-' + field + '" value="' + field + '">' + title + '</button>';
 		}
 	});