Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Successfully copying changes the icon to a tick #1404

Merged
merged 4 commits into from
Dec 16, 2023
Merged

Conversation

JamesNK
Copy link
Member

@JamesNK JamesNK commented Dec 15, 2023

Fixes #1386

  • Clicking on a copy icon temporarily changes it to a tick.
  • Clear pending timeout if one exits on click. This fixes an issue where copy icon could be clicked multiple times in quick succession and the reset function runs prematurely. e.g.
    1. Click copy button
    2. Wait 1.4 seconds
    3. Click again
    4. Tooltip and icon reset almost immediately.

copy-button-tick-fix

Microsoft Reviewers: Open in CodeFlow

@JamesNK JamesNK changed the title Clicking copy icon changes the icon to a tick Successfully copying changes the icon to a tick Dec 15, 2023
// If there is a pending timeout then clear it. Otherwise the pending timeout will prematurely reset values.
if (button.dataset.copyTimeout) {
clearTimeout(button.dataset.copyTimeout);
delete button.dataset.copyTimeout;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

copyTimeout is just a number (specifically an integer), do we need to delete it? setting it to null, undefined or even 0 would probably still work. I'm curious if this is something specific for the result of setTimeout or not.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't need to use delete. But I did because button.dataset is basically a dictionary, and delete is the closest thing to .NET's dictionary.Remove(key).

src/Aspire.Dashboard/wwwroot/js/app.js Outdated Show resolved Hide resolved
})
.catch(() => {
tooltipDiv.innerText = 'Could not access clipboard';
});
setTimeout(function () { tooltipDiv.innerText = precopy }, 1500);

button.dataset.copyTimeout = setTimeout(function () {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you explain why all this code is JS and not blazor?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went with the existing code (changing the tooltip title) that already existed in JS.

I thought about doing everything in Blazor but there is UI lag to consider. If the dashboard is in ACA and you have a slow connection, then there could be a 1s+ delay between clicking copy and the confirmation that content was copied. JS will always be fast.

Copy link
Member

@drewnoakes drewnoakes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love how this looks.

@JamesNK JamesNK enabled auto-merge (squash) December 16, 2023 03:38
@JamesNK JamesNK merged commit 375645d into main Dec 16, 2023
8 checks passed
@JamesNK JamesNK deleted the jamesnk/copy-tick branch December 16, 2023 04:04
@github-actions github-actions bot locked and limited conversation to collaborators Apr 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Change copy icon to tick after click
4 participants