nextcloud-libraries / nextcloud-libraries/nextcloud-vue
[NcModal] Adjust backdrop color
Nobody has claimed this yet.
- Dominant language
- Vue
- Stars
- 246
- Forks
- 99
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 103
Description
If I understand correctly, currently, all modals are shaded using a dark color, with an option to make it more opaque (with dark) and lighter (with lightBackdrop).
I suggest that the combination of both (a rather opaque light backdrop) should be the default behavior in the light style.
I'm not sure how to achieve this from an API standpoint (deprecate the properties and introduce new ones? change defaults?), but the desired effect is this:
- Drop the slightly opaque style altogether, only have a high-opacity one.
- The default is a light backdrop in light and dark backdrop in dark mode.
- Media viewers (images, videos, etc. but not next) should always have a dark backdrop, to which they opt-in.
This is for the following reasons:
- Currently, a transition from a very light view to a very dark one is jarring and it should be used sparingly, however
- a slightly opaque backdrop doesn't make the background "washed-out" enough and your eyes don't focus on the modal enough
- but media viewers should always have a dark background so the background doesn't overwhelm the content.
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 by reviewing NcModal's existing dark and lightBackdrop options and how modal and media-viewer usages apply them. Done means agreeing on the API and implementing the proposed light-mode default, dark-mode behavior, and opt-in dark backdrop for media viewers.
Written by the indexing model from the issue text.
Assessment
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100