Patch #20287
open
Administration: Using grids instead of tables
Added by Frederico Camara almost 9 years ago. Updated almost 3 years ago.
0%
Description
We are a brazillian government agency and we've been using Redmine to control ExpressoBr (groupware) tickets.
Some time ago, it became difficult to manage the workflow status transitions. In a complex workflow, the table becomes so large it would scroll horizontally and vertically away from the first line and column. Zooming out and filters helped somehow, mainly if the status transition would be nearer the top left. The most recently created statuses would be too far right and down for zoom to help.
This patch transforms the administration tables into grids, so the first row and first column are always visible, like in a worksheet. Also, I got rid of the button that selected the whole line or column, because it became completely useless in a large grid, but I think it is easy to put it back.
Redmine has 5 pages with tables in administration:- Roles and Permissions > Permission Report
- Trackers > Summary
- Workflow > Summary
- Workflow > Status transitions
- Workflow > Field permissions
The grid itself is something like a table, it has four parts: A floating first cell, a first line stuck to the top of the grid, a first row stuck to the left, a body that on scroll, repositions the first row and first line using javascript. The other javascript resizes the width of columns in the grid.
Files
| divgrid.css (752 Bytes) divgrid.css | public/stylesheets/divgrid.css | Frederico Camara, 2015-07-10 21:54 | |
| divgrid.js (1001 Bytes) divgrid.js | public/javascripts/divgrid.js | Frederico Camara, 2015-07-10 21:54 | |
| divgrid (28.1 KB) divgrid | patch file to redmine 2.6.5 | Frederico Camara, 2015-07-10 21:54 | |
| divgrid (29.8 KB) divgrid | patch file to redmine 2.6.6 | Frederico Camara, 2015-07-12 16:00 | |
| rm20287_2.6-stable.r14424.patch (31 KB) rm20287_2.6-stable.r14424.patch | Mischa The Evil, 2015-07-19 08:34 | ||
| issue-20287-trunk-r14507.diff (31 KB) issue-20287-trunk-r14507.diff | Toshi MARUYAMA, 2015-08-18 05:39 | ||
| issue-20287-redmine-3.2.0.diff (34.5 KB) issue-20287-redmine-3.2.0.diff | Frederico Camara, 2015-12-28 17:55 | ||
| issue-20287-redmine-3.3.0.diff (33.9 KB) issue-20287-redmine-3.3.0.diff | Frederico Camara, 2017-03-23 14:02 | ||
| issue-20287-redmine-3.4.0.diff (34.7 KB) issue-20287-redmine-3.4.0.diff | Frederico Camara, 2017-07-05 12:50 | ||
| 0001-Implements-grid-as-in-divgrid-minimal.patch (37.6 KB) 0001-Implements-grid-as-in-divgrid-minimal.patch | for Redmine 4.0 | Frederico Camara, 2019-11-20 14:14 | |
| 0001-Implements-grid-as-in-divgrid-minimal-4.1.1.patch (37.9 KB) 0001-Implements-grid-as-in-divgrid-minimal-4.1.1.patch | For Redmine 4.1.1 | Frederico Camara, 2020-04-08 20:44 | |
| 0001-Implements-grid-as-in-divgrid-minimal-4.1.1-fix1.patch (37.9 KB) 0001-Implements-grid-as-in-divgrid-minimal-4.1.1-fix1.patch | For Redmine 4.1.1 - patch fix, the other will fail | Frederico Camara, 2020-04-15 04:44 | |
| trunk-r19977.patch (38.5 KB) trunk-r19977.patch | Mizuki ISHIKAWA, 2020-08-17 10:41 | ||
| ScreenShot_2020-08-17_17.49.28.png (64.8 KB) ScreenShot_2020-08-17_17.49.28.png | Mizuki ISHIKAWA, 2020-08-17 10:50 | ||
| ScreenShot_2020-08-17_17.49.08.png (113 KB) ScreenShot_2020-08-17_17.49.08.png | Mizuki ISHIKAWA, 2020-08-17 10:50 | ||
| trunk-r19977-v2.patch (38.1 KB) trunk-r19977-v2.patch | Mizuki ISHIKAWA, 2020-08-21 07:58 | ||
| ScreenShot_2020-08-21_15.05.11.png (289 KB) ScreenShot_2020-08-21_15.05.11.png | screenshot | Mizuki ISHIKAWA, 2020-08-21 08:07 | |
| ScreenShot_2020-08-21_15.06.19.png (240 KB) ScreenShot_2020-08-21_15.06.19.png | screenshot | Mizuki ISHIKAWA, 2020-08-21 08:07 |
Related issues
Updated by Go MAEDA almost 9 years ago
I tried to apply your patch but I encountered the following error.
$ patch -p1 < divgrid patching file app/views/roles/permissions.html.erb patching file app/views/trackers/fields.html.erb patching file app/views/workflows/permissions.html.erb patch: **** malformed patch at line 472: diff -ruN redmine-2.6.5/app/views/workflows/index.html.erb redmine/app/views/workflows/index.html.erb
Updated by Frederico Camara almost 9 years ago
Go MAEDA wrote:
I tried to apply your patch but I encountered the following error.
[...]
Thank you for reporting.
I made the patchfile again, against redmine 2.6.6. It is the same code as 2.6.5.
In 2.6.5, I think I removed windows line feeds from the files I was patching against and it messed up the patchfile.
2.6.6 should be ok.
Updated by Mischa The Evil almost 9 years ago
I've extracted a corrected patch file (see Patch), using TortoiseSVN (so it can be applied using "patch -p0 < rm20287..."), against source:/branches/2.6-stable@14424. It contains the changes included in the diff file (as posted in #20287-2) and the addition of the JS and CSS files. This way it is much easier to review the changes made.
FTR: I have not reviewed the diff in substance, but I like the general idea behind this enhancement.
Updated by Toshi MARUYAMA over 8 years ago
This is rebased note-4 patch on trunk r14507.
Updated by Frederico Camara over 8 years ago
This is updated to use redmine-3.2 code (stable).
- Resolves some html format bugs on previous patches.
To apply:
patch -p1 < issue-20287-redmine-3.2.0.diff
Updated by 
Updated by 
Updated by Go MAEDA over 7 years ago
- Related to Defect #17125: workflow's status-transitions' header-column & header-row pan & scroll out of view when numerous issue-statuses added
Updated by Greg T about 7 years ago
I tried to apply this to Redmine 3.3, which wasn't easy with GNU patch, but it still has a javascript error: TypeError: fsClass.contains is not a function (when trying to access the Additional transitions allowed when the user is ... elements) at
if (fsClass.contains("collapsed"))
Can you please fix that?
It seems contains is an outdated version of the includes method. But even that may not be supported by browsers (e.g. IE11), so it's safer to use
if (~fsClass.indexOf("collapsed"))
Updated by Frederico Camara about 7 years ago
Greg T wrote:
I tried to apply this to Redmine 3.3, which wasn't easy with GNU patch, but it still has a javascript error: TypeError: fsClass.contains is not a function (when trying to access the Additional transitions allowed when the user is ... elements) at
[...]Can you please fix that?
It seems contains is an outdated version of the includes method. But even that may not be supported by browsers (e.g. IE11), so it's safer to use
[...]
Thank you, I fixed that and updated the patch to what I am using now in production.
To apply:
patch -p1 < issue-20287-redmine-3.3.0.diff
Updated by Greg T almost 7 years ago
This great patch should have been merged by now. :(
Do you have an updated patch for 3.4.0?
Updated by Frederico Camara almost 7 years ago
Greg T wrote:
This great patch should have been merged by now. :(
Do you have an updated patch for 3.4.0?
I updated the patch to the little changes made between 3.3.0 and 3.4.0. Did a little testing and it seems alright.
Updated by Greg T almost 7 years ago
Frederico Camara wrote:
I updated the patch to the little changes made between 3.3.0 and 3.4.0. Did a little testing and it seems alright.
Thank you very much.
Updated by Frederico Camara over 4 years ago
- File 0001-Implements-grid-as-in-divgrid-minimal.patch 0001-Implements-grid-as-in-divgrid-minimal.patch added
Updated to Redmine 4.0
Updated by Greg T about 4 years ago
Dear Frederico Camara,
Can you give us a patch for 4.1.1?
Thanks.
Updated by Frederico Camara about 4 years ago
- File 0001-Implements-grid-as-in-divgrid-minimal-4.1.1.patch 0001-Implements-grid-as-in-divgrid-minimal-4.1.1.patch added
Greg T wrote:
Dear Frederico Camara,
Can you give us a patch for 4.1.1?
Thanks.
Patch for 4.1.1 (unix)
Updated by Greg T about 4 years ago
Frederico Camara wrote:
Patch for 4.1.1 (unix)
Thanks. One problem still remained:
1 out of 1 hunk FAILED -- saving rejects to file app/views/workflows/_form.html.erb.rej
Updated by Frederico Camara about 4 years ago
- File 0001-Implements-grid-as-in-divgrid-minimal-4.1.1-fix1.patch 0001-Implements-grid-as-in-divgrid-minimal-4.1.1-fix1.patch added
Greg T wrote:
Frederico Camara wrote:
Patch for 4.1.1 (unix)
Thanks. One problem still remained:
1 out of 1 hunk FAILED -- saving rejects to file app/views/workflows/_form.html.erb.rej
How I miss git when altering patches. I may have changed the file instead of the patch by mistake.
New patch, disregard the other.
Updated by Mizuki ISHIKAWA over 3 years ago
- File trunk-r19977.patch trunk-r19977.patch added
FREDERICO LÚCIO DE SOUZA Camara
Thank you for continuing to update the patch. This feature will be very pleasing to anyone who needs to read large tables.
The patch posted on #20287#note-20 caused a conflict when applied to the trunk(r19977), so I will attach the patch that resolved it.
To commit this patch to Redmine, it must be available on the latest Redmine in development.
Updated by Mizuki ISHIKAWA over 3 years ago
- File ScreenShot_2020-08-17_17.49.08.png ScreenShot_2020-08-17_17.49.08.png added
- File ScreenShot_2020-08-17_17.49.28.png ScreenShot_2020-08-17_17.49.28.png added
I haven't read the code yet, I noticed that the layout collapses when the screen width is reduced.
Updated by Frederico Camara over 3 years ago
Mizuki ISHIKAWA wrote:
I haven't read the code yet, I noticed that the layout collapses when the screen width is reduced.
It's the css and responsive. Just add 'box-sizing: content-box;' to '.g_c' is public/stylesheets/divgrid.css.
I've been trying to implement this with html tables, which I think would be faster, but html tables are hard. Anything but the trivial and you start struggling with the way it's implemented.
To give you and idea, you can stick rows and columns using position, left and top. You have to z-index the header cells left and top, using background color to hide cells underneath (doesn't hide very well). Also you have to adjust the width of row header cells, and adjust the fieldsets the way I did with the divgrid. And then, it starts looking like divgrid.
Updated by Mizuki ISHIKAWA over 3 years ago
- File trunk-r19977-v2.patch trunk-r19977-v2.patch added
- File ScreenShot_2020-08-21_15.05.11.png ScreenShot_2020-08-21_15.05.11.png added
- File ScreenShot_2020-08-21_15.06.19.png ScreenShot_2020-08-21_15.06.19.png added
Frederico Camara wrote:
Mizuki ISHIKAWA wrote:
I haven't read the code yet, I noticed that the layout collapses when the screen width is reduced.
It's the css and responsive. Just add 'box-sizing: content-box;' to '.g_c' is public/stylesheets/divgrid.css.
I've been trying to implement this with html tables, which I think would be faster, but html tables are hard. Anything but the trivial and you start struggling with the way it's implemented.
To give you and idea, you can stick rows and columns using position, left and top. You have to z-index the header cells left and top, using background color to hide cells underneath (doesn't hide very well). Also you have to adjust the width of row header cells, and adjust the fieldsets the way I did with the divgrid. And then, it starts looking like divgrid.
Thank you for your reply.
I've attached a patch that includes the following changes:- Fix so that the layout does not collapse when the width is narrowed
- Move css written in style attribute to divgrid.css
- Add class of elements lost on change
- and others
Updated by Mizuki ISHIKAWA almost 3 years ago
I've attached a patch to #14508#note-2 that fixes the table header with CSS (position: sticky).