diff --git a/src/registrar/assets/js/get-gov-admin.js b/src/registrar/assets/js/get-gov-admin.js index e4b51f503..ebb74842d 100644 --- a/src/registrar/assets/js/get-gov-admin.js +++ b/src/registrar/assets/js/get-gov-admin.js @@ -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); }); } -})(); \ No newline at end of file +})(); diff --git a/src/registrar/assets/sass/_theme/_admin.scss b/src/registrar/assets/sass/_theme/_admin.scss index 1c1ff8ddc..711bfe960 100644 --- a/src/registrar/assets/sass/_theme/_admin.scss +++ b/src/registrar/assets/sass/_theme/_admin.scss @@ -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; } diff --git a/src/registrar/templates/admin/change_form_object_tools.html b/src/registrar/templates/admin/change_form_object_tools.html index ac765bde6..198140c19 100644 --- a/src/registrar/templates/admin/change_form_object_tools.html +++ b/src/registrar/templates/admin/change_form_object_tools.html @@ -20,7 +20,7 @@ {% if opts.model_name == 'domainrequest' %}
  • - + diff --git a/src/registrar/templates/admin/input_with_clipboard.html b/src/registrar/templates/admin/input_with_clipboard.html index 20a029bed..ea2fbce33 100644 --- a/src/registrar/templates/admin/input_with_clipboard.html +++ b/src/registrar/templates/admin/input_with_clipboard.html @@ -8,7 +8,7 @@ Template for an input field with a clipboard
    {{ field }}