nextcloud / nextcloud/calendar

Unify and improve "copy to clipboard" interactions

Open
#8,621 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

0. to triage design enhancement
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:

Describe the solution you'd like
  1. Decide on consistent UI/UX patterns
  2. Use consistent UI/UX patterns
  3. Encapsulate UI/UX patterns in reusable components
  4. 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.

https://www.npmjs.com/package/copy-to-clipboard

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.