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?