zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-08-05 09:21:54 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add copy logic

Browse source
This commit is contained in:
zandercymatics 2024-04-04 12:41:33 -06:00
parent 34232f9b6c
commit 52a4a2d45a
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
3 changed files with 75 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/registrar/assets/js/get-gov-admin.js
View file

@ -149,23 +149,49 @@ function openInNewTab(el, removeAttribute = false){
function copyToClipboardAndChangeIcon(button) {
// Assuming the input is the previous sibling of the button
let input = button.previousElementSibling;
let userId = input.getAttribute("user-id")
// Copy input value to clipboard
if (input) {
navigator.clipboard.writeText(input.value).then(function() {
// Change the icon to a checkmark on successful copy
let buttonIcon = button .querySelector('.usa-button__clipboard use');
console.log(`what is the button icon ${buttonIcon}`)
let buttonIcon = button.querySelector('.usa-button__clipboard use');
if (buttonIcon) {
let currentHref = buttonIcon.getAttribute('xlink:href');
let baseHref = currentHref.split('#')[0];
// Append the new icon reference
buttonIcon.setAttribute('xlink:href', baseHref + '#check');
// Find the nearest .admin-icon-group__success-dialog and update its classes
let brElement = null
let successDialog = document.querySelector(`#email-clipboard__success-dialog-${userId}`);
if (successDialog) {
successDialog.classList.remove('display-none');
// Find the associated BR if it exists
brElement = successDialog.nextElementSibling
}
// If the element directly below the success dialog is a br, hide it.
// This is for dynamic styling reasons
if (brElement && brElement.tagName === 'BR' && brElement.classList.contains('admin-icon-group__br')) {
brElement.classList.add('display-none');
}
setTimeout(function() {
// Change back to the copy icon
buttonIcon.setAttribute('xlink:href', currentHref);
// Hide the success dialog
if (successDialog){
successDialog.classList.add("display-none");
}
// Show the regular br
if (brElement) {
brElement.classList.remove("display-none");
}
}, 1500);
}
}).catch(function(error) {

27
src/registrar/assets/sass/_theme/_admin.scss
View file

@ -578,6 +578,33 @@ address.dja-address-contact-list {
display: inline-flex;
padding-top: 4px;
line-height: 14px;
color: var(--link-fg);
}
}
.usa-alert--slim.usa-alert--slim--dja-admin {
.usa-alert__body:before {
top: 0.4rem;
left: 10px
}
.usa-alert__body {
padding-left: 2.5rem;
}
}
@media (prefers-color-scheme: dark) {
.usa-alert--success.usa-alert--slim--dja-admin {
border-left-color: var(--accent);
.usa-alert__body {
background-color: var(--darkened-bg);
}
.usa-alert__body:before {
background-color: var(--body-quiet-color);
}
p {
color: var(--body-quiet-color);
}
}
}

21
src/registrar/templates/django/admin/includes/contact_detail_list.html
View file

@ -43,7 +43,7 @@
{% else %}
{{ user.email }} |
<div class="admin-icon-group admin-icon-group__clipboard-link">
<input aria-hidden="true" class="display-none" value="{{ user.email }}" />
<input user-id="{{ user.id }}" aria-hidden="true" class="display-none" value="{{ user.email }}" />
<button
class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard text-no-underline"
type="button"
@ -56,8 +56,25 @@
Copy
</button>
</div>
<div
id="email-clipboard__success-dialog-{{ user.id }}"
class="admin-icon-group__success-dialog
display-none
usa-alert
usa-alert--success
usa-alert--slim
usa-alert--slim--dja-admin
margin-top-1
margin-bottom-1"
>
<div class="usa-alert__body">
<p class="usa-alert__text">
Email copied to clipboard.
</p>
</div>
</div>
{% endif %}
<br>
<br class="admin-icon-group__br">
{% else %}
None<br>
{% endif %}