-
-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[4] initial concept of table options #32974
Conversation
Signed-off-by: Phil E. Taylor <phil@phil-taylor.com>
Nice work. For me the main problem with this approach is that its per computer, per browser, per site, |
|
This comment was marked as abuse.
This comment was marked as abuse.
We could add a PHP ajax endpoint to store the state on the user's account options, that's easily doable |
This comment was marked as abuse.
This comment was marked as abuse.
If you hide the cell that contains the scope then you break the tables accessibility. This is usually (always?) the cell that is the link. |
But what if I wanted to decide the columns for myself. That wasn't possible before but it would be now |
This comment was marked as abuse.
This comment was marked as abuse.
The limitation comes from Bootstrap's utilities and the forced |
This comment was marked as abuse.
This comment was marked as abuse.
@PhilETaylor I would keep also the ID always visible (eg |
This comment was marked as abuse.
This comment was marked as abuse.
actually it can be determined programmatically because it is a th not a td and has a scope="row" |
@dgrammatiko @PhilETaylor ok I understand the 1024 part now |
This comment was marked as abuse.
This comment was marked as abuse.
Signed-off-by: Phil E. Taylor <phil@phil-taylor.com>
Signed-off-by: Phil E. Taylor <phil@phil-taylor.com>
Signed-off-by: Phil E. Taylor <phil@phil-taylor.com>
Signed-off-by: Phil E. Taylor <phil@phil-taylor.com>
@PhilETaylor can you diff your script with https://gist.github.com/dgrammatiko/4d8121c2cda4096224d4de283a1a433a you need a couple of conditonals for sanity checks |
This comment was marked as abuse.
This comment was marked as abuse.
Signed-off-by: Phil E. Taylor <phil@phil-taylor.com>
Signed-off-by: Phil E. Taylor <phil@phil-taylor.com>
Signed-off-by: Phil E. Taylor <phil@phil-taylor.com>
Signed-off-by: Phil E. Taylor <phil@phil-taylor.com>
This comment was marked as abuse.
This comment was marked as abuse.
I must be doing something wring. I applied the patch with Patchtester, ran npm ci, but did not see the dropdown list of columns to select for hiding. I did try the demo by @dgrammatiko. Quite separately, I put the table in a div styled overflow-x: scroll; max-width: 1000px; right now I don't know how to get the width of the parent div. I quite like the left-right scroll that leaves the left menu, toolbar and search bar alone while the table scrolls. Please try it. It could be combined with any other column manipulation. This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/32974. |
I had the same issue. The Patchtester doesn't do the "build" of the JS file of this feature. to Still try it out you could copy the js file contents form the PR to the folder "/media/system/js" and name the file tableoptions.js At the moment it gave me a JS error on line 124 so i commented both 124 and 125 out so i could see it in action. it looks very promising and i think a very much needed feature to have a "workable" backend. |
Here is an experiment to try: Edit your locally installed administrator/components/com_content/articles/tmpl/default.php
And then this after line 95:
Click on the table to scroll left-right. Make the screen narrower - try simulating an iPad in landscape and portrait mode. And toggle the side menu. |
This comment was marked as abuse.
This comment was marked as abuse.
Sorry, getting this issue mixed up with #31915. Just thinking of the general problem with wide tables. |
This comment was marked as abuse.
This comment was marked as abuse.
@PhilETaylor may I ask why you've killed this one? |
Summary of Changes
THIS. IS. ALMOST. INCOMPLETE.
This is my worse work to date, Im totally at the limit of JS here.. but "it works on my machine", it "looks ugly and needs css"
Happy to merge any PRs made to the branch - this needs some help to get it over the line!
A huge thanks to @dgrammatiko so far. He gave me clean code and I butchered it.
Testing Instructions
I have only applied the change to the Users, Articles and Categories pages.
Actual result BEFORE applying this Pull Request
No way to hide columns
Expected result AFTER applying this Pull Request
A new Table options list at the foot of a table, that allows you to deselect columns to HIDE and to select columns to SHOW
Your preferences are STORED in your browser localstorage for that site. When you reload the page or return to the same page, your preferences are reapplied.
LIMITATIONS & NOTES:
The first 2 columns can never be hidden, these are normally the checkbox and the dragger (or the checkbox and the username on the users list)
Occasionally Ive seen a CSS issue on the new checkbox list layout, but Ive applied no css at all so far.
ONLY tested in Safari and Firefox but SHOULD work in all browsers
ONLY shows up in 1024px wide screens and above by design.
The bottom of the table was chosen for the placement of the Table Options as the page has been "designed" previously and adding them at the top just gets in the way.
Probably have to target 4.1-dev as this is a new feature.
Future improvement ideas already suggested:
Preview:
Documentation Changes Required
Yes.