zydronium/manage.get.gov
1
0
Fork 0
mirror of https://github.com/cisagov/manage.get.gov.git synced 2025-07-20 17:56:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

Add copy button

Browse source
This commit is contained in:
zandercymatics 2024-03-28 13:37:47 -06:00
parent bcb1f80f57
commit 15e99af5f0
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
5 changed files with 55 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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();
})();

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

@ -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 {
button.usa-button__icon {
font-size: 16px;
}
.no-outline-on-click:focus {
outline: none !important;
}

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

@ -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 %}

65
src/registrar/templates/django/admin/includes/contact_detail_table.html
View file

@ -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>

12
src/registrar/templates/django/admin/includes/detail_table_fieldset.html
View file

@ -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 %}