nextcloud / nextcloud/server

Create sticky action buttons for table in Settings/User App

Open
#38,215 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

1. to develop design enhancement feature: users and groups
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:

Peek 2023-05-10 14-54

There were 2 main problems:

  1. During opening action menu of each row
  2. 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:

  • .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...

For an experiment, try to set container prop of NcActions here to #app-content.

from https://github.com/nextcloud/server/pull/37860#issuecomment-1517710248

And:

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

from https://github.com/nextcloud/server/pull/37870#issuecomment-1542634341

Please pay attention that integration tests possibly have to be adopted too.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.