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

Remove success dialog

Browse source
This commit is contained in:
zandercymatics 2024-04-05 13:54:08 -06:00
parent 95f9860bd9
commit d9b70cf044
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
5 changed files with 51 additions and 188 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -162,50 +162,14 @@ function openInNewTab(el, removeAttribute = false){
// Append the new icon reference
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 = 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
}
// If the element directly below the success dialog is a br, hide it.
// This is for dynamic styling reasons
if (brElement && brElement.tagName === 'BR' && brElement.classList.contains('admin-icon-group__br')) {
brElement.classList.add('display-none');
}
// Change the button text
nearestSpan = button.querySelector("span")
nearestSpan.innerText = "Copied to clipboard"
setTimeout(function() {
// Change back to the copy icon
buttonIcon.setAttribute('xlink:href', currentHref);
// Hide the success dialog
if (successDialog){
successDialog.classList.add("display-none");
}
// Show the regular br
if (brElement) {
brElement.classList.remove("display-none");
}
if (parentFlexContainer) {
parentFlexContainer.classList.add("dja-important__display-none");
}
nearestSpan.innerText = "Copy"
}, 1500);
}

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

@ -540,15 +540,9 @@ address.dja-address-contact-list {
// Make the clipboard button "float" inside of the input box
.admin-icon-group {
position: relative;
display: flex;
display: inline;
align-items: center;
.usa-button__icon {
position: absolute;
right: 0;
height: 100%;
}
input {
// Allow for padding around the copy button
padding-right: 35px !important;
@ -557,7 +551,21 @@ address.dja-address-contact-list {
}
button {
line-height: 15px;
line-height: 14px;
width: max-content;
font-size: unset;
text-decoration: none !important;
}
@media (max-width: 1000px) {
button {
display: block;
padding-top: 8px;
}
}
span {
padding-left: 0.1rem;
}
}
@ -567,6 +575,7 @@ address.dja-address-contact-list {
display: inline;
align-items: center;
.usa-button__icon {
position: absolute;
right: auto;
@ -579,53 +588,12 @@ address.dja-address-contact-list {
padding-top: 4px;
line-height: 14px;
color: var(--link-fg);
}
}
.usa-alert--slim.usa-alert--slim--dja-admin {
.usa-alert__body:before {
top: 0.4rem;
left: 10px
}
.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 {
border-left-color: var(--accent);
.usa-alert__body {
background-color: var(--darkened-bg);
}
.usa-alert__body:before {
background-color: var(--body-quiet-color);
}
p {
color: var(--body-quiet-color);
}
width: max-content;
font-size: unset;
text-decoration: none !important;
}
}
.no-outline-on-click:focus {
outline: none !important;
}
svg.no-pointer-events {
use {
// USWDS has weird interactions with SVGs regarding tooltips,
// and other components. In this event, we need to disable pointer interactions.
pointer-events: none;
}
}
.dja-important__display-none {
display: none !important;
}

34
src/registrar/templates/admin/input_with_clipboard.html
View file

@ -4,20 +4,36 @@
Template for an input field with a clipboard
{% endcomment %}
{% if not invisible_input_field %}
<div class="admin-icon-group">
{{ field }}
<button
class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard"
class="usa-button usa-button--unstyled padding-left-1 usa-button__icon usa-button__clipboard"
type="button"
>
<div class="usa-tooltip no-outline-on-click"
data-position="right"
title="Copy email">
<svg
class="usa-icon no-pointer-events"
>
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
<div class="no-outline-on-click">
<svg
class="usa-icon"
>
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
<span>Copy</span>
</div>
</button>
</div>
{% else %}
<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"
type="button"
>
<svg
class="usa-icon"
>
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
<span class="padding-left-05">Copy</span>
</button>
</div>
{% endif %}

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

@ -25,71 +25,11 @@
{# Email #}
{% if user.email or user.contact.email %}
{% if user.contact.email %}
{{ user.contact.email }} |
<div class="admin-icon-group admin-icon-group__clipboard-link">
<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"
>
<svg
class="usa-icon"
>
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
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>
{{ user.contact.email }}
{% include "admin/input_with_clipboard.html" with field=user invisible_input_field=True %}
{% else %}
{{ user.email }} |
<div class="admin-icon-group admin-icon-group__clipboard-link">
<input user-id="{{ user.id }}" aria-hidden="true" class="display-none" value="{{ user.email }}" />
<button
class="usa-button usa-button--unstyled padding-right-1 usa-button__icon usa-button__clipboard text-no-underline"
type="button"
>
<svg
class="usa-icon"
>
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
Copy
</button>
</div>
<div
id="email-clipboard__success-dialog-{{ user.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>
{{ user.email }}
{% include "admin/input_with_clipboard.html" with field=user invisible_input_field=True %}
{% endif %}
<br class="admin-icon-group__br">
{% else %}

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

@ -11,28 +11,3 @@ 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 %}