Highlight selected rows in `Edit multiple` mode and when selecting files

[Serhii-DV]

Just see this example:

http://gyazo.com/d992150d5440ceae86d3dcb295a82258.png

UPD: the same thing is for selected files in Gallery, for example

http://gyazo.com/dc071b1a8c52c746edf865de25171953.png?1335731697

[JimmyRittenborg]

That's a nice one!

[leofeyer]

@contao/developers There is no CSS only solution to accomplish this, is there?

[ausi]

No, I don’t think there is.

In theory this would work with a selector like .tl_listing tr:has(input:checked) td, but sadly no browser supports it.

[leofeyer]

Ok. I have already tried to implement this with JavaScript, but it broke the toggle select feature (see Backend.enableToggleSelect()). I have to make another attempt.

[leofeyer]

This is how it could work:

--- a/src/Resources/public/core.js
+++ b/src/Resources/public/core.js
@@ -1075,6 +1075,21 @@ var Backend =
 		});
 	},
 
+	/**
+	 * Highlight a row
+	 *
+	 * @param {object} input The DOM element
+	 */
+	highlightRow: function(input) {
+		var parent;
+
+		if (parent = input.getParent('.hover-row')) {
+			input.checked ? parent.addClass('selected') : parent.removeClass('selected');
+		} else if (parent = input.getParent('.hover-div:not(.tl_header)')) {
+			input.checked ? parent.addClass('selected') : parent.removeClass('selected');
+		}
+	},
+
 	/**
 	 * Toggle checkboxes
 	 *
@@ -1093,6 +1108,7 @@ var Backend =
 				continue;
 			}
 			items[i].checked = status;
+			Backend.highlightRow(items[i]);
 		}
 	},
 
@@ -2300,6 +2316,7 @@ var Backend =
 
 				for (from; from<=to; from++) {
 					checkboxes[from].checked = status;
+					Backend.highlightRow(checkboxes[from]);
 				}
 			},
 			clickEvent = function(e) {
@@ -2323,6 +2340,7 @@ var Backend =
 					shiftToggle(input);
 				} else {
 					input.checked = input.checked ? '' : 'checked';
+					Backend.highlightRow(input);
 
 					if (input.get('onclick') == 'Backend.toggleCheckboxes(this)') {
 						Backend.toggleCheckboxes(input); // see #6399
@@ -2365,6 +2383,7 @@ var Backend =
 					shiftToggle(this);
 				}
 
+				Backend.highlightRow(this);
 				start = this;
 			});
 		});

We would also have to add the following CSS code:

.hover-div.selected,.hover-row.selected td,.hover-div.selected .limit_toggler,.hover-row.selected .limit_toggler {
	background-color:#ebfdd7 !important;
}

However, this might have side-effects. And it breaks the zebra rows.

@DyaGa Maybe you can test my changes and see if they work?