[4.0] Improving row selection in Joomla! Admin

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,48 @@ Joomla.JMultiSelect = function(table) {
 	};
 	initialize(table);
 };
+
+document.addEventListener("DOMContentLoaded", function(event) { 
+	color = '#d9edf7';
+	rows   = document.querySelectorAll('tr[class^="row"]');
+
+	// Changes the background-color on every <td> inside a <tr>
+	function changeBg(item, color) {
+		item.querySelectorAll('td').forEach (function(td) {
+			td.style.backgroundColor = color;
+		}); 
+	}
+
+	document.getElementsByName("checkall-toggle")[0].addEventListener("click", function(event) {
+		if (this.checked) {
+			rows.forEach(function(row, index) {
+				changeBg(row, color);
+			});
+		}
+		else {
+			rows.forEach(function(row, index) {
+				changeBg(row, '');
+			});
+		}
+	});
+
+	rows.forEach(function(row, index) {
+		row.addEventListener("click", function(event) {
+			clicked   = 'cb' + index;
+			cbClicked = document.getElementById(clicked);
+
+			if (!(event.target.id == clicked)) {
+				cbClicked.checked = !cbClicked.checked;
+				Joomla.isChecked(cbClicked.checked);
+			}
+
+			if (cbClicked.checked) {
+				changeBg(this, color);
+			}
+			else {
+				changeBg(this, '');
+			}
+		});
+	});
+});
+