Create sticky action buttons for table in Settings/User App
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 36.9k
- Forks
- 5.2k
- Avg merge
- 2d 3h
- Merged PRs (30d)
- 713
Description
Html structure of the table has been changed for a11y purposes: https://github.com/nextcloud/server/issues/36921.
During testing of new implementation some bugs regarding position: sticky and not right existing implementation of z-index of the action buttons have popped up. Demo:
There were 2 main problems:
- During opening action menu of each row
- During opening action menu of each row in editing mode
For the time reasons was decided to keep good / not broken state but without position: sticky which causes possible right scrolling inside of a table (from a11y perspective absolutely valid but not as user friendly as before), see https://github.com/nextcloud/server/pull/37870.
This is a follow-up ticket to correct action buttons to sticky position with current table implementation. There were some suggestions regarding implementation:
Current style was a bit incorrect:
.userActionshadz-index: 10.popovermenuhadz-index: 110.userActionsis a parent of.popovermenu- A child cannot have
z-indexhigher than parent
For
position: relativewe could just removez-index: 10. But withposition: stickyit works different...position: stickyalways creates a new stacking context. It is possible neither to removez-indexfromstickyparent, nor to make child with higherz-index...
If I'm not wrong, the only way to keep sticky here is to use another
containerforNcActionshere. For example,#app-content. But > I am really not sure, it positions element correct with sticky...
For an experiment, try to set
containerprop ofNcActionshere to#app-content.
from https://github.com/nextcloud/server/pull/37860#issuecomment-1517710248
And:
Proposals regarding sticky + z-index issue:
Render
NcActionsoutside 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-indexvalue
- Props:
- Keep the current structure
- Cons:
- More complex implementation
- Not sure about performance and large tables
from https://github.com/nextcloud/server/pull/37870#issuecomment-1542634341
Please pay attention that integration tests possibly have to be adopted too.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start from the Settings/User App table and its NcActions usage, then review the current sticky, stacking, and #app-content container behavior described in the issue. Check the related integration tests before choosing an approach. Done means action buttons stay sticky and usable when menus open, including editing mode, without z-index issues, with updated tests passing.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- accessibility, frontend, testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100