design review tweaks

This commit is contained in:
Rachid Mrad 2024-09-20 12:22:27 -04:00
parent 54e0ba3f60
commit 3391feead2
No known key found for this signature in database
2 changed files with 11 additions and 21 deletions

View file

@ -513,11 +513,7 @@ document.addEventListener('DOMContentLoaded', function() {
const modalTrigger = document.querySelector('.field-action_needed_reason_email__modal-trigger'); const modalTrigger = document.querySelector('.field-action_needed_reason_email__modal-trigger');
const modalConfirm = document.getElementById('confirm-edit-email'); const modalConfirm = document.getElementById('confirm-edit-email');
const formLabel = document.querySelector('label[for="id_action_needed_reason_email"]'); const formLabel = document.querySelector('label[for="id_action_needed_reason_email"]');
const greenCheckMark = `<svg class="usa-icon text-green top-2px" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/public/img/sprite.svg#check_circle"></use>
</svg>`;
let lastSentEmailContent = document.getElementById("last-sent-email-content"); let lastSentEmailContent = document.getElementById("last-sent-email-content");
const helpText = document.querySelector('.field-action_needed_reason_email .help');
const initialDropdownValue = dropdown ? dropdown.value : null; const initialDropdownValue = dropdown ? dropdown.value : null;
const initialEmailValue = textarea.value; const initialEmailValue = textarea.value;
@ -540,22 +536,18 @@ document.addEventListener('DOMContentLoaded', function() {
hideElement(directEditButton); hideElement(directEditButton);
hideElement(modalTrigger); hideElement(modalTrigger);
hideElement(textarea); hideElement(textarea);
hideElement(helpText);
} else if (reason === 'other') { } else if (reason === 'other') {
// 'Other' selected, we will set the label to "Email", show the "No email will be sent" placeholder, hide the trigger, textarea, hide the help text // 'Other' selected, we will set the label to "Email", show the "No email will be sent" placeholder, hide the trigger, textarea, hide the help text
formLabel.innerHTML = "Email:"; formLabel.innerHTML = "Email:";
textareaPlaceholder.innerHTML = "No email will be sent"; textareaPlaceholder.innerHTML = "No email will be sent";
showElement(textareaPlaceholder); showElement(textareaPlaceholder);
showElement(helpText);
hideElement(directEditButton); hideElement(directEditButton);
hideElement(modalTrigger); hideElement(modalTrigger);
hideElement(textarea); hideElement(textarea);
hideElement(helpText);
} else { } else {
// A triggering selection is selected, all hands on board: // A triggering selection is selected, all hands on board:
textarea.setAttribute('readonly', true); textarea.setAttribute('readonly', true);
showElement(textarea); showElement(textarea);
showElement(helpText);
hideElement(textareaPlaceholder); hideElement(textareaPlaceholder);
if (isEmailAlreadySentConst) { if (isEmailAlreadySentConst) {
@ -566,11 +558,9 @@ document.addEventListener('DOMContentLoaded', function() {
hideElement(modalTrigger); hideElement(modalTrigger);
} }
if (isEmailAlreadySent()) { if (isEmailAlreadySent()) {
formLabel.innerHTML = greenCheckMark + " Email sent to creator:"; formLabel.innerHTML = "Email sent to creator:";
helpText.innerHTML = "This email has been sent to the creator of this request";
} else { } else {
formLabel.innerHTML = "Auto-generated email will be sent to creator:"; formLabel.innerHTML = "Email will be sent to creator:";
helpText.innerHTML = "This email will be sent to the creator of this request after saving";
} }
} }
} }
@ -608,11 +598,13 @@ document.addEventListener('DOMContentLoaded', function() {
modalConfirm.addEventListener("click", () => { modalConfirm.addEventListener("click", () => {
textarea.removeAttribute('readonly'); textarea.removeAttribute('readonly');
textarea.focus();
hideElement(directEditButton); hideElement(directEditButton);
hideElement(modalTrigger); hideElement(modalTrigger);
}); });
directEditButton.addEventListener("click", () => { directEditButton.addEventListener("click", () => {
textarea.removeAttribute('readonly'); textarea.removeAttribute('readonly');
textarea.focus();
hideElement(directEditButton); hideElement(directEditButton);
hideElement(modalTrigger); hideElement(modalTrigger);
}); });

View file

@ -144,14 +144,15 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{{ field.field }} {{ field.field }}
<a <button
href="#id_action_needed_reason_email" aria-label="Edit email in textarea"
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text margin-left-1 text-no-underline field-action_needed_reason_email__edit" type="button"
><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</a class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text margin-left-1 text-no-underline field-action_needed_reason_email__edit flex-align-self-start"
><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</button
> >
<a <a
href="#email-already-sent-modal" href="#email-already-sent-modal"
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1 field-action_needed_reason_email__modal-trigger" class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1 field-action_needed_reason_email__modal-trigger flex-align-self-start"
aria-controls="email-already-sent-modal" aria-controls="email-already-sent-modal"
data-open-modal data-open-modal
><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</a ><img src="/public/admin/img/icon-changelink.svg" alt="Change"> Edit email</a
@ -231,10 +232,7 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
{% endblock field_other %} {% endblock field_other %}
{% block after_help_text %} {% block after_help_text %}
{% if field.field.name == "action_needed_reason_email" %} {% if field.field.name == "creator" %}
<div class="help">
</div>
{% elif field.field.name == "creator" %}
<div class="flex-container tablet:margin-top-2"> <div class="flex-container tablet:margin-top-2">
<label aria-label="Creator contact details"></label> <label aria-label="Creator contact details"></label>
{% include "django/admin/includes/contact_detail_list.html" with user=original_object.creator no_title_top_padding=field.is_readonly user_verification_type=original_object.creator.get_verification_type_display%} {% include "django/admin/includes/contact_detail_list.html" with user=original_object.creator no_title_top_padding=field.is_readonly user_verification_type=original_object.creator.get_verification_type_display%}