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

Add dialog

Browse source
This commit is contained in:
zandercymatics 2024-04-04 13:27:40 -06:00
parent 52a4a2d45a
commit 95f9860bd9
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
4 changed files with 70 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -163,9 +163,21 @@ function openInNewTab(el, removeAttribute = false){
buttonIcon.setAttribute('xlink:href', baseHref + '#check');
// Find the nearest .admin-icon-group__success-dialog and update its classes
let parentFlexContainer = null
let brElement = null
let successDialog = document.querySelector(`#email-clipboard__success-dialog-${userId}`);
let successDialog = null
if (userId) {
successDialog = document.querySelector(`#email-clipboard__success-dialog-${userId}`);
}else {
successDialog = document.querySelector("#email-clipboard__success-dialog");
}
if (successDialog) {
if (!userId) {
parentFlexContainer = successDialog.closest('.flex-container');
// Flex container overrides display-none
parentFlexContainer.classList.remove('dja-important__display-none');
}
successDialog.classList.remove('display-none');
// Find the associated BR if it exists
brElement = successDialog.nextElementSibling
@ -190,6 +202,10 @@ function openInNewTab(el, removeAttribute = false){
if (brElement) {
brElement.classList.remove("display-none");
}
if (parentFlexContainer) {
parentFlexContainer.classList.add("dja-important__display-none");
}
}, 1500);
}

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

@ -590,6 +590,12 @@ address.dja-address-contact-list {
.usa-alert__body {
padding-left: 2.5rem;
}
.admin-icon-group__success-dialog--input {
.usa-alert__body {
padding-right: 53px !important;
}
}
}
@media (prefers-color-scheme: dark) {
.usa-alert--success.usa-alert--slim--dja-admin {
@ -618,4 +624,8 @@ svg.no-pointer-events {
// and other components. In this event, we need to disable pointer interactions.
pointer-events: none;
}
}
.dja-important__display-none {
display: none !important;
}

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

@ -27,7 +27,7 @@
{% if user.contact.email %}
{{ user.contact.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.contact.id }}" aria-hidden="true" class="display-none" value="{{ user.contact.email }}" />
<button
class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard text-no-underline"
type="button"
@ -40,6 +40,23 @@
Copy
</button>
</div>
<div
id="email-clipboard__success-dialog-{{ user.contact.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>
{% else %}
{{ user.email }} |
<div class="admin-icon-group admin-icon-group__clipboard-link">

25
src/registrar/templates/django/admin/includes/email_clipboard_fieldset.html
View file

@ -11,3 +11,28 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{{ block.super }}
{% endif %}
{% endblock field_other %}
{% block after_help_text %}
{% if field.field.name == "email" %}
<div class="flex-container dja-important__display-none">
<label aria-label="Clipboard"></label>
<div
id="email-clipboard__success-dialog"
class="admin-icon-group__success-dialog
admin-icon-group__success-dialog--input
display-none
usa-alert
usa-alert--success
usa-alert--slim
usa-alert--slim--dja-admin
margin-top-1"
>
<div class="usa-alert__body">
<p class="usa-alert__text">
Email copied to clipboard.
</p>
</div>
</div>
</div>
{% endif %}
{% endblock %}