[4.0] Improving row selection in Joomla! Admin

[jreys]

Summary of Changes

Usually when I was using Joomla Admin, the multi-select on the list view was not very user-friendly since clicking on such a small square can sometimes fail on the first try. So I came up with a solution for

Testing Instructions

• Go to articles (or any multi-select list view), try clicking anywhere on a row, it will select the whole row
• Try trashing multiple items by clicking severall rows
• Try the toggle-all button

Expected result

When you click on a row on the articles list view (for example), it will highlight the whole line:

When you click on the select-all checkbox, it will highlight all items on that page:

Notice

I'm aware of backwards compatibility so the regular checkbox will still work as before while still highlighting the whole line.

[dgrammatiko]

Can you drop jquery (you don't need it for such easy task) and use a class instead of changing directly the styles

[jreys]

and use a class instead of changing directly the styles

Do you mean adding a class to the row when the action is done?

[C-Lodder]

• Chain variables
• No jQuery please
• Define your colour in the Atum variables.scss
• Add a class, apply background, call the colour
• Compile SCSS
• Use JS (element.classList.toggle('foo');) to toggle the class

[jreys]

• Chain variables
• No jQuery please
• Define your colour in the Atum variables.scss
• Add a class, apply background, call the colour
• Compile SCSS
• Use JS (element.classList.toggle('foo');) to toggle the class

I have questions on the topics not checked:

• What do you understand as Chain variables?
• how do I compile SCSS correctly?
• the last one seems obvious after SCSS is compiled tbh

[dgrammatiko]

"use strict";
var color = '#d9edf7', rows   = document.querySelectorAll('tr[class^="row"]');

The above snippet should take care of the first checkbox.

For compiling SCSS you need to have installed node and npm
Then in the root directory of joomla run npm install
Once complete run grunt compile

[C-Lodder]

Here are the instructions for SCSS: https://github.com/joomla/joomla-cms/blob/4.0-dev/grunt-readme.md

[C-Lodder]

add a colon after the variable name, like so: $table-row-selected:

[C-Lodder]

change to:

var colour = '#d9edf7',
    rows   = document.querySelectorAll('tr[class^="row"]');

Note, the British spelling of colour

[C-Lodder]

you can simplify this if - else statement to just:

var colour = this.checked ? colour : '';

rows.forEach(function(row, index) {
	changeBg(row, colour);
});

[jreys]

I think that is all :)

[ghost]

@jreys is this PR ready to Test?

[C-Lodder]

@jreys - one more thing, please use single quote's as opposed to double quotes where possible.

[jreys]

@franz-wohlkoenig it's ready for testing now, everything fixed

btw @C-Lodder I didn't use the element.classList.toggle('foo'); because it was causing weird behaviours when you selected one row and then selected them all after, it would leave the previous row unselected and it's not the wanted behaviour

[C-Lodder]

@jreys - No worries. All seems to be good now.

@dgt41 - JS look ok?

[C-Lodder]

I have tested this item ✅ successfully on 0a5a387

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/14913.}

[ghost]

I have tested this item ✅ successfully on 0a5a387

an optical Feedback like another Curser would help to see that i can move Column.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/14913.}

[jeckodevelopment]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/14913.}

[cokencorn]

I have tested this item ✅ successfully on ac8c87d

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/14913.}