Fix table view

[JuliaKirschenheuter]

• Resolves: [BITV] 9.1.3.1e/8.1 - The user table represents a grid element and should be implemented as such. (1) #36921

Summary

Create a grid for users view.

One visual change: made input fields visible in editing mode.

Before	After

AFTER STRUCTURE CHANGES (TABLE) STYLES RESPONSIBLE FOR ACTIONS WHILE EDITING A ROW WERE BROKEN
Related (same issue here): #37860

I've adapted styles and now action menu is not broken anymore. But i had to remove position: sticky for it.

Before	After

It is absolutely valid to have a vertical scrolling inside of a table. position:sticky in this case causes too much problems and because of it i would like to leave implementation like this.

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[artonge]

Could the input fields be a little longer to fill up empty spaces?

[artonge]

Looks good anyway 👍

[Pytal]

Is the developing label still applicable @JuliaKirschenheuter?

[JuliaKirschenheuter]

Is the developing label still applicable @JuliaKirschenheuter?

Thanks for remark

[ChristophWurst]

COnflicts. CI stopped to free resources for mergeable PRs

[juliusknorr]

I think removing the stickyness of the right action buttons is quite bad for a general user experience. Can you elaborate on the reasons why sticky is not working?

Also cc @jancborchardt for that

[JuliaKirschenheuter]

I think removing the stickyness of the right action buttons is quite bad for a general user experience. Can you elaborate on the reasons why sticky is not working?

Sticky on master was already broken. Because z-indexes were wrong implemented, please look in:
#37860 (comment)

Current style was a bit incorrect:
.userActions had z-index: 10
.popovermenu had z-index: 110
.userActions is a parent of .popovermenu
A child cannot have z-index higher than parent
For position: relative we could just remove z-index: 10. But with position: sticky it works different... position: sticky always creates a new stacking context. It is possible neither to remove z-index from sticky parent, nor to make child with higher z-index...
If I'm not wrong, the only way to keep sticky here is to use another container for NcActions here. For example, #app-content. But I am really not sure, it positions element correct with sticky...

Current master:

[ShGKme]

Proposals regarding sticky + z-index issue:

Render NcActions outside the table row

• Props:
  • I'd expect it to be easy to implement
• Cons:
  • Requires rewriting of some integration tests because row buttons will be outside of the row

Generate progressive z-index - set each next row less z-index value

• Props:
  • Keep the current structure
• Cons:
  • More complex implementation
  • Not sure about performance and large tables

[AndyScherzinger]

@juliushaertl any suggestion how to improve this? Also @jancborchardt
The table is needed for a11y reasons, yet for the moment stickiness got removed but was already broken before. So I would then rather like to get the table issue fixed via this PR and have a follow-up fixing the stickiness which would not necessarily have to be done by the people working on a11y improvements.

[jancborchardt]

So I would then rather like to get the table issue fixed via this PR and have a follow-up fixing the stickiness which would not necessarily have to be done by the people working on a11y improvements.

@AndyScherzinger Sounds reasonable – I missed that the stickyness was already broken on master as mentioned by @JuliaKirschenheuter.

Let’s keep it separate, get the table fixes in, and fix the stickyness separately. (Just for reference, we got reports for it not being discoverable which is why we added it. :)

[jancborchardt]

So then 👍 from my point, but please open a follow-up issue so we can track the stickyness problem. :)

[JuliaKirschenheuter]

Ok, sticky issue has been already existed. I would suggest to move forwards without sticky for now and i will open an issue to create action buttons with right sticky implementation.

[jancborchardt]

Looks good design-wise! :)

[ShGKme]

Loos good by code, tested on light and dark theme, different sizes, desktop and mobile.

Found a problem with the table header sticking, but it also appears on the master.

[ChristophWurst]

two regressions

1. table doesn't align, td columns float to the left
2. actions background element doesn't match row background

[ChristophWurst]

^ @JuliaKirschenheuter

[ChristophWurst]

The bug shows on our pre-production testing instance too. Filed #38245. @JuliaKirschenheuter please have a look