Add copy button

src/registrar/assets/js/get-gov-admin.js

@@ -140,6 +140,12 @@ function openInNewTab(el, removeAttribute = false){
 /** An IIFE for pages in DjangoAdmin that use a clipboard button
 */
 (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;
@@ -179,7 +185,6 @@ function openInNewTab(el, removeAttribute = false){
             
             // Add a class that adds the outline style on click
             button.addEventListener("mousedown", function() {
-                console.log(`applying mousedown on ${this} vs ${button}`);
                 this.classList.add("no-outline-on-click");
             });
             
@@ -192,7 +197,19 @@ function openInNewTab(el, removeAttribute = false){
         });
     }
 
+    function handleClipboardLinks() {
+        let emailButtons = document.querySelectorAll(".usa-button__clipboard-link");
+        if (emailButtons){
+            emailButtons.forEach((button) => {
+                button.addEventListener("click", ()=>{
+                    copyInnerTextToClipboard(button);
+                })
+            });
+        }
+    }
+
     handleClipboardButtons();
+    handleClipboardLinks();
 
 })();
 

src/registrar/assets/sass/_theme/_admin.scss

@@ -404,6 +404,13 @@ address.margin-top-neg-1__detail-list {
 address.dja-address-contact-list {
     font-size: 0.8125rem;
     color: var(--body-quiet-color);
+    button.usa-button__clipboard-link {
+        font-size: 0.8125rem !important;
+    }
+}
+
+td button.usa-button__clipboard-link {
+    font-size: 0.8125rem !important;
 }
 
 // Mimic the normal label size
@@ -416,6 +423,14 @@ address.dja-address-contact-list {
         font-size: 0.875rem;
         color: var(--body-quiet-color);
     }
+
+    address button.usa-button__clipboard-link {
+        font-size: 0.875rem !important;
+    }
+
+    td button.usa-button__clipboard-link {
+        font-size: 0.875rem !important;
+    }
 }
 
 .errors span.select2-selection {
@@ -442,8 +457,6 @@ address.dja-address-contact-list {
 
 }
 
-td.font-size-sm {
+.no-outline-on-click:focus {
-    button.usa-button__icon {
+    outline: none !important;
-        font-size: 16px;
-    }
 }

src/registrar/templates/django/admin/includes/contact_detail_list.html

@@ -25,9 +25,18 @@
         {# Email #}
         {% if user.email or user.contact.email %}
             {% if user.contact.email %}
+                <button 
+                class="usa-button usa-button--unstyled text-no-underline usa-button__clipboard-link" type="button"
+                >
                 {{ user.contact.email }}
+                </button>
             {% else %}
+                <button 
+                class="usa-button usa-button--unstyled text-no-underline usa-button__clipboard-link" 
+                type="button"
+                >
                 {{ user.email }}
+                </button>
             {% endif %}
             <br>
         {% else %}

src/registrar/templates/django/admin/includes/contact_detail_table.html

@@ -1,65 +0,0 @@
-{% load i18n static %}
-
-<table class="dja-user-detail-table" {% if field_name %} id="id_detail_table__{{field_name}}" {% endif %}>
-    <tbody>
-        <tr>
-            <th class="padding-left-0" scope="row">Title</th>
-            {% if user.title or user.contact.title %}
-                {% if user.contact.title %}
-                <td>{{ user.contact.title }}</td>
-                {% else %}
-                <td>{{ user.title }}</td>
-                {% endif %}
-            {% else %}
-            <td>Nothing found</td>
-            {% endif %}
-            {# Placeholder col for actions (like copy) or additional padding #}
-            <td></td>
-        </tr>
-        <tr>
-            <th class="padding-left-0" scope="row">Email</th>
-            {% if user.email or user.contact.email %}
-                {% if user.contact.email %}
-                <td>{{ user.contact.email }}</td>
-                {% else %}
-                <td>{{ user.email }}</td>
-                {% endif %}
-
-                <td>
-                    {% if user.contact.email %}
-                    <input class="dja-clipboard-input" type="hidden" value="{{ user.contact.email }}" id="id_email">
-                    {% else %}
-                    <input class="dja-clipboard-input" type="hidden" value="{{ user.email }}">
-                    {% endif %}
-                    <button 
-                    class="usa-button usa-button--unstyled usa-button__icon usa-button__clipboard" 
-                    type="button"
-                    >
-                        <svg 
-                        class="usa-icon" 
-                        >
-                            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
-                        </svg>
-                    </button>
-                </td>
-
-            {% else %}
-            <td>Nothing found</td>
-            <td></td>
-            {% endif %}
-        </tr>
-        <tr>
-            <th class="padding-left-0" scope="row">Phone</th>
-            {% if user.phone or user.contact.phone %}
-                {% if user.contact.phone %}
-                <td>{{ user.contact.phone }}</td>
-                {% else %}
-                <td>{{ user.phone }}</td>
-                {% endif %}
-            {% else %}
-            <td>Nothing found</td>
-            {% endif %}
-            <td></td>
-        </tr>
-    </tbody>
-</table>

src/registrar/templates/django/admin/includes/detail_table_fieldset.html

@@ -92,7 +92,17 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                             <tr>
                                 <th class="padding-left-1" scope="row">{{ contact.get_formatted_name }}</th>
                                 <td class="padding-left-1">{{ contact.title }}</td>
-                                <td class="padding-left-1">{{ contact.email }}</td>
+                                <td class="padding-left-1">
+                                    <button class="usa-button usa-button--unstyled text-no-underline usa-button__clipboard-link" type="button">
+                                        {{ contact.email }}
+                                        <svg 
+                                        aria-hidden="true"
+                                        class="usa-icon display-none" 
+                                        >
+                                            <use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#check"></use>
+                                        </svg>
+                                    </button>
+                                </td>
                                 <td class="padding-left-1">{{ contact.phone }}</td>
                             </tr>
                             {% endfor %}