[4.0] Improving row selection in Joomla! Admin

administrator/templates/atum/css/template.css

@@ -10253,6 +10253,9 @@ iframe {
   border-radius: 0.25rem;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.075); }
 
+.row-selected {
+  background-color: #d9edf7; }
+
 .chzn-container-single {
   width: auto !important; }
 

administrator/templates/atum/scss/_variables.scss

@@ -54,6 +54,7 @@ $fa-font-path:                     "../../../../media/vendor/font-awesome/fonts"
 // Tables
 $table-bg:                         transparent !default;
 $table-bg-accent:                  rgba(0,0,0,.03) !default;
+$table-row-selected:               #d9edf7;
 
 // Tabs
 $atum-tabs-header-bg:              $atum-block-header-bg;

administrator/templates/atum/scss/template.scss

@@ -100,6 +100,9 @@
   box-shadow: 0 0 3px rgba(0,0,0,.075);
 }
 
+.row-selected {
+  background-color: $table-row-selected;
+}
 
 // Chosen (TEMPORARY)
 .chzn-container-single {

media/system/js/multiselect.js

@@ -46,3 +46,45 @@ Joomla.JMultiSelect = function(table) {
 	};
 	initialize(table);
 };
+
+document.addEventListener('DOMContentLoaded', function(event) {
+	'use strict';
+	var rows = document.querySelectorAll('tr[class^="row"]');
+
+	// Changes the background-color on every <td> inside a <tr>
+	function changeBg(item, checkall) {
+		// Check if it should add or remove the background colour
+		if (checkall.checked) {
+			item.querySelectorAll('td').forEach (function(td) {
+				td.classList.add('row-selected');
+			});
+		}
+		else {
+			item.querySelectorAll('td').forEach (function(td) {
+				td.classList.remove('row-selected');
+			});
+		}
+	}
+
+	document.getElementsByName('checkall-toggle')[0].addEventListener('click', function(event) {
+		var checkall = this;
+
+		rows.forEach(function(row, index) {
+			changeBg(row, checkall);
+		});
+	});
+
+	rows.forEach(function(row, index) {
+		row.addEventListener('click', function(event) {
+			var clicked   = 'cb' + index, cbClicked = document.getElementById(clicked);
+
+			if (!(event.target.id == clicked)) {
+				cbClicked.checked = !cbClicked.checked;
+				Joomla.isChecked(cbClicked.checked);
+			}
+
+			changeBg(this, cbClicked);
+		});
+	});
+});
+