This commit is contained in:
Rachid Mrad 2024-07-31 13:22:32 -04:00
parent d3b88ccb2b
commit f1d896e6b6
No known key found for this signature in database
8 changed files with 26 additions and 51 deletions

View file

@ -212,11 +212,6 @@ function addOrRemoveSessionBoolean(name, add){
*/
(function (){
function copyInnerTextToClipboard(elem) {
let text = elem.innerText
navigator.clipboard.writeText(text)
}
function copyToClipboardAndChangeIcon(button) {
// Assuming the input is the previous sibling of the button
let input = button.previousElementSibling;
@ -225,7 +220,7 @@ function addOrRemoveSessionBoolean(name, add){
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');
let buttonIcon = button.querySelector('.copy-to-clipboard use');
if (buttonIcon) {
let currentHref = buttonIcon.getAttribute('xlink:href');
let baseHref = currentHref.split('#')[0];
@ -252,7 +247,7 @@ function addOrRemoveSessionBoolean(name, add){
}
function handleClipboardButtons() {
clipboardButtons = document.querySelectorAll(".usa-button__clipboard")
clipboardButtons = document.querySelectorAll(".copy-to-clipboard")
clipboardButtons.forEach((button) => {
// Handle copying the text to your clipboard,
@ -275,20 +270,7 @@ function addOrRemoveSessionBoolean(name, add){
});
}
function handleClipboardLinks() {
let emailButtons = document.querySelectorAll(".usa-button__clipboard-link");
if (emailButtons){
emailButtons.forEach((button) => {
button.addEventListener("click", ()=>{
copyInnerTextToClipboard(button);
})
});
}
}
handleClipboardButtons();
handleClipboardLinks();
})();
@ -607,7 +589,7 @@ function initializeWidgetOnList(list, parentId) {
/** An IIFE for copy summary button (appears in DomainRegistry models)
*/
(function (){
const copyButton = document.getElementById('copy-summary-btn');
const copyButton = document.getElementById('id-copy-to-clipboard-summary');
if (copyButton) {
copyButton.addEventListener('click', function() {
@ -743,11 +725,11 @@ function initializeWidgetOnList(list, parentId) {
// Use the Clipboard API to write the selected HTML content to the clipboard
navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([tempElement.innerHTML], { type: 'text/html' })
'text/plain': new Blob([tempElement.innerHTML], { type: 'text/plain' })
})
]).then(() => {
// Change the icon to a checkmark on successful copy
let buttonIcon = copyButton.querySelector('.usa-button__clipboard use');
let buttonIcon = copyButton.querySelector('use');
if (buttonIcon) {
let currentHref = buttonIcon.getAttribute('xlink:href');
let baseHref = currentHref.split('#')[0];
@ -768,10 +750,11 @@ function initializeWidgetOnList(list, parentId) {
}
console.log('Summary copied to clipboard successfully!');
console.log(tempElement.innerHTML);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
document.body.removeChild(tempElement);
});
}
})();
})();

View file

@ -369,19 +369,11 @@ input.admin-confirm-button {
padding: 10px 8px;
line-height: normal;
}
.usa-icon {
top: 2px;
}
a.button:active, a.button:focus {
text-decoration: none;
}
}
.usa-icon {
// align icon with x height
vertical-align: middle;
}
.module--custom {
a {
font-size: 13px;
@ -452,15 +444,12 @@ address.margin-top-neg-1__detail-list {
}
}
td button.usa-button__clipboard-link, address.dja-address-contact-list {
address.dja-address-contact-list {
font-size: unset;
}
address.dja-address-contact-list {
color: var(--body-quiet-color);
button.usa-button__clipboard-link {
font-size: unset;
}
}
// Mimic the normal label size
@ -469,11 +458,18 @@ address.dja-address-contact-list {
font-size: 0.875rem;
color: var(--body-quiet-color);
}
}
address button.usa-button__clipboard-link, td button.usa-button__clipboard-link {
font-size: 0.875rem !important;
}
// Targets the unstyled buttons in the form
.button--clipboard {
color: var(--link-fg);
}
// Targets the DJA buttom with a nested icon
button .usa-icon,
.button .usa-icon,
.button--clipboard .usa-icon {
vertical-align: middle;
}
.errors span.select2-selection {
@ -668,7 +664,7 @@ address.dja-address-contact-list {
align-items: center;
.usa-button__icon {
.usa-button--icon {
position: absolute;
right: auto;
left: 4px;
@ -686,10 +682,6 @@ address.dja-address-contact-list {
}
}
button.usa-button__clipboard {
color: var(--link-fg);
}
.no-outline-on-click:focus {
outline: none !important;
}

View file

@ -20,7 +20,7 @@
</li>
{% if opts.model_name == 'domainrequest' %}
<li>
<a id="copy-summary-btn" class="usa-button__clipboard" type="button" href="#">
<a id="id-copy-to-clipboard-summary" class="button--clipboard" type="button" href="#">
<svg class="usa-icon" >
<use xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>

View file

@ -8,7 +8,7 @@ Template for an input field with a clipboard
<div class="admin-icon-group">
{{ field }}
<button
class="usa-button usa-button--unstyled padding-left-1 usa-button__icon usa-button__clipboard"
class="usa-button usa-button--unstyled padding-left-1 usa-button--icon button--clipboard copy-to-clipboard"
type="button"
>
<div class="no-outline-on-click">
@ -25,7 +25,7 @@ Template for an input field with a clipboard
<div class="admin-icon-group admin-icon-group__clipboard-link">
<input aria-hidden="true" class="display-none" value="{{ field.email }}" />
<button
class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard text-no-underline"
class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline"
type="button"
>
<svg

View file

@ -219,7 +219,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
<td class="padding-left-1 text-size-small">
<input aria-hidden="true" class="display-none" value="{{ contact.email }}" />
<button
class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard usa-button__small-text text-no-underline"
class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline"
type="button"
>
<svg

View file

@ -584,7 +584,7 @@ class TestDomainInformationAdmin(TestCase):
self.test_helper.assert_response_contains_distinct_values(response, expected_other_employees_fields)
# Test for the copy link
self.assertContains(response, "usa-button__clipboard", count=4)
self.assertContains(response, "button--clipboard", count=4)
# cleanup this test
domain_info.delete()

View file

@ -444,7 +444,7 @@ class TestDomainAdminWithClient(TestCase):
self.assertContains(response, "(555) 555 5557")
# Test for the copy link
self.assertContains(response, "usa-button__clipboard")
self.assertContains(response, "button--clipboard")
# cleanup from this test
domain.delete()

View file

@ -1411,7 +1411,7 @@ class TestDomainRequestAdmin(MockEppLib):
self.test_helper.assert_response_contains_distinct_values(response, expected_other_employees_fields)
# Test for the copy link
self.assertContains(response, "usa-button__clipboard", count=5)
self.assertContains(response, "button--clipboard", count=5)
# Test that Creator counts display properly
self.assertNotContains(response, "Approved domains")