nextcloud / nextcloud/calendar
Unify and improve "copy to clipboard" interactions
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.2k
- Forks
- 332
- Avg merge
- 16h 13m
- Merged PRs (30d)
- 137
Description
Is your feature request related to a problem? Please describe.
In many place a user can copy something to a clipboard.
Currently they have the issues of:
- Being implemented separately (logic, error handling, checking for support)
- UI/UX inconsistencies
- in some places we show success notifications
- in some places we use button changes
Describe the solution you'd like
- Decide on consistent UI/UX patterns
- Use consistent UI/UX patterns
- Encapsulate UI/UX patterns in reusable components
- Share copy-handling code between components
Describe alternatives you've considered
No response
Additional context
Having shared logic, we could write more elaborate copy-handling code supporting more browsers.
Simple module exposing an async copy function that uses the Async Clipboard API (navigator.clipboard) in secure contexts (HTTPS / localhost), with automatic fallback to document.execCommand('copy') for non-secure contexts or older browsers.
Might use contribute back to https://github.com/nextcloud-libraries/nextcloud-vue/blob/f460a5c48898a9cebc656923b9c0ac4ffb969851/src/composables/useCopy.ts
Changing the button icon in place for a few seconds in case of success seems to be a very common pattern.
If no icon is used button text can change from "Copy text" to "Copied!" for a second or so.
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 auditing the existing clipboard usages in the calendar app and compare them with nextcloud-vue's src/composables/useCopy.ts and NcFormBoxCopyButton. The issue does not name calendar files or tests, so first identify the affected components and agree on the UI pattern. Done means copy handling and feedback are shared and consistent across those interactions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100