Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#2846: Fix bugs with the copy email button UI plus code cleanup - [RJM] #2879

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+63 −93
Open

#2846: Fix bugs with the copy email button UI plus code cleanup - [RJM] #2879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/registrar/admin.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3112,7 +3112,7 @@ def display_admins(self, obj):
admin_details += f'<a href="{change_url}">{escape(portfolio_admin)}</a><br>'
admin_details += f"{escape(portfolio_admin.title)}<br>"
admin_details += f"{escape(portfolio_admin.email)}"
admin_details += "<div class='admin-icon-group admin-icon-group__clipboard-link'>"
admin_details += "<div class='admin-icon-group'>"
admin_details += f"<input aria-hidden='true' class='display-none' value='{escape(portfolio_admin.email)}'>"
admin_details += (
"<button class='usa-button usa-button--unstyled padding-right-1 usa-button--icon padding-left-05"
Expand Down
21 changes: 6 additions & 15 deletions src/registrar/assets/js/get-gov-admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -515,10 +515,14 @@ document.addEventListener('DOMContentLoaded', function() {
const formLabel = document.querySelector('label[for="id_action_needed_reason_email"]');
let lastSentEmailContent = document.getElementById("last-sent-email-content");
const initialDropdownValue = dropdown ? dropdown.value : null;
const initialEmailValue = textarea.value;
let initialEmailValue;
if (textarea)
initialEmailValue = textarea.value

// We will use the const to control the modal
let isEmailAlreadySentConst = lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
let isEmailAlreadySentConst;
if (lastSentEmailContent)
isEmailAlreadySentConst = lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
// We will use the function to control the label and help
function isEmailAlreadySent() {
return lastSentEmailContent.value.replace(/\s+/g, '') === textarea.value.replace(/\s+/g, '');
Expand Down Expand Up @@ -706,18 +710,6 @@ document.addEventListener('DOMContentLoaded', function() {
}
return '';
}
// Extract the submitter name, title, email, and phone number
const submitterDiv = document.querySelector('.form-row.field-submitter');
const submitterNameElement = document.getElementById('id_submitter');
// We have to account for different superuser and analyst markups
const submitterName = submitterNameElement
? submitterNameElement.options[submitterNameElement.selectedIndex].text
: submitterDiv.querySelector('a').text;
const submitterTitle = extractTextById('contact_info_title', submitterDiv);
const submitterEmail = extractTextById('contact_info_email', submitterDiv);
const submitterPhone = extractTextById('contact_info_phone', submitterDiv);
let submitterInfo = `${submitterName}${submitterTitle}${submitterEmail}${submitterPhone}`;


//------ Senior Official
const seniorOfficialDiv = document.querySelector('.form-row.field-senior_official');
Expand All @@ -734,7 +726,6 @@ document.addEventListener('DOMContentLoaded', function() {
`<strong>Current Websites:</strong> ${existingWebsites.join(', ')}</br>` +
`<strong>Rationale:</strong></br>` +
`<strong>Alternative Domains:</strong> ${alternativeDomains.join(', ')}</br>` +
`<strong>Submitter:</strong> ${submitterInfo}</br>` +
`<strong>Senior Official:</strong> ${seniorOfficialInfo}</br>` +
`<strong>Other Employees:</strong> ${otherContactsSummary}</br>`;

Expand Down
95 changes: 34 additions & 61 deletions src/registrar/assets/sass/_theme/_admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,6 +390,9 @@ a.button,
.usa-button--dja span {
vertical-align: middle;
}
.usa-button--dja.usa-button--unstyled {
color: var(--link-fg);
}
.usa-button--dja:not(.usa-button--unstyled, .usa-button--outline, .usa-modal__close, .usa-button--secondary) {
background: var(--button-bg);
}
Expand Down Expand Up @@ -425,6 +428,37 @@ button .usa-icon,
.button--clipboard .usa-icon {
vertical-align: middle;
}
// Make the clipboard button "float" inside of the input box
.admin-icon-group {
position: relative;
display: inline;
align-items: center;

input {
// Allow for padding around the copy button
padding-right: 35px !important;
}

button {
width: max-content;
text-decoration: none !important;
}

@media (max-width: 1000px) {
button {
display: block;
}
}

span {
padding-left: 0.05rem;
}

}
.usa-button__small-text,
.usa-button__small-text span {
font-size: 13px;
}

.module--custom {
a {
Expand Down Expand Up @@ -670,71 +704,10 @@ address.dja-address-contact-list {
}
}

// Make the clipboard button "float" inside of the input box
.admin-icon-group {
position: relative;
display: inline;
align-items: center;

input {
// Allow for padding around the copy button
padding-right: 35px !important;
// Match the height of other inputs
min-height: 2.25rem !important;
}

button {
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;
}

}

.admin-icon-group.admin-icon-group__clipboard-link {
position: relative;
display: inline;
align-items: center;


.usa-button--icon {
position: absolute;
right: auto;
left: 4px;
height: 100%;
top: -1px;
}
button {
font-size: unset !important;
display: inline-flex;
padding-top: 4px;
line-height: 14px;
width: max-content;
font-size: unset;
text-decoration: none !important;
}
}

.no-outline-on-click:focus {
outline: none !important;
}

.usa-button__small-text {
font-size: small;
}

// Get rid of padding on all help texts
form .aligned p.help, form .aligned div.help {
padding-left: 0px !important;
Expand Down
3 changes: 2 additions & 1 deletion src/registrar/templates/admin/change_form_object_tools.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@
</li>
{% if opts.model_name == 'domainrequest' %}
<li>
<a id="id-copy-to-clipboard-summary" class="button--clipboard" type="button" href="#">
<a id="id-copy-to-clipboard-summary" class="usa-button--dja button--clipboard" type="button" href="#">
<svg class="usa-icon" >
<use xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
<!-- the span is targeted in JS, do not remove -->
<span>{% translate "Copy request summary" %}</span>
</a>
</li>
Expand Down
30 changes: 17 additions & 13 deletions src/registrar/templates/admin/input_with_clipboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<div class="admin-icon-group">
{{ field }}
<button
class="usa-button usa-button--unstyled padding-left-1 usa-button--icon button--clipboard copy-to-clipboard"
class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-left-1 usa-button--icon button--clipboard copy-to-clipboard"
type="button"
>
<div class="no-outline-on-click">
Expand All @@ -17,23 +17,27 @@
>
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
Copy
<!-- the span is targeted in JS, do not remove -->
<span>Copy</span>
</div>
</button>
</div>
{% else %}
<div class="admin-icon-group admin-icon-group__clipboard-link">
<div class="admin-icon-group">
<input aria-hidden="true" class="display-none" value="{{ field.email }}" />
<button
class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05"
type="button"
>
<svg
class="usa-icon"
{% if field.email is not None %}
<button
class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard text-no-underline padding-left-05"
type="button"
>
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
Copy
</button>
<svg
class="usa-icon"
>
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
<!-- the span is targeted in JS, do not remove -->
<span>Copy</span>
</button>
{% endif %}
</div>
{% endif %}
2 changes: 1 addition & 1 deletion src/registrar/templates/django/admin/includes/contact_detail_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
{% if user.email %}
<span id="contact_info_email">{{ user.email }}</span>
{% include "admin/input_with_clipboard.html" with field=user invisible_input_field=True %}
<br class="admin-icon-group__br">
<br>
{% else %}
None<br>
{% endif %}
Expand Down
3 changes: 2 additions & 1 deletion src/registrar/templates/django/admin/includes/detail_table_fieldset.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,14 +269,15 @@ <h2 class="usa-modal__heading">
<td class="padding-left-1 text-size-small">
<input aria-hidden="true" class="display-none" value="{{ contact.email }}" />
<button
class="usa-button usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline"
class="usa-button--dja usa-button usa-button__small-text usa-button--unstyled padding-right-1 usa-button--icon button--clipboard copy-to-clipboard usa-button__small-text text-no-underline"
type="button"
>
<svg
class="usa-icon"
>
<use aria-hidden="true" xlink:href="{%static 'img/sprite.svg'%}#content_copy"></use>
</svg>
<!-- the span is targeted in JS, do not remove -->
<span>Copy email</span>
</button>
</td>
Expand Down
Loading