mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-08-05 17:28:31 +02:00
CSS updates
This commit is contained in:
CocoByte
parent
7735f07546
commit
c022003539
3 changed files with 151 additions and 106 deletions
|
|
@ -544,6 +544,7 @@ function initializeWidgetOnList(list, parentId) {
|
|||
// Add a change listener to dom load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let reason = actionNeededReasonDropdown.value;
|
||||
let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
|
||||
|
||||
// Handle the session boolean (to enable/disable editing)
|
||||
if (emailWasSent && emailWasSent.value === "True") {
|
||||
|
|
@ -552,29 +553,25 @@ function initializeWidgetOnList(list, parentId) {
|
|||
}
|
||||
|
||||
// Show an editable email field or a readonly one
|
||||
updateActionNeededEmailDisplay(reason)
|
||||
updateActionNeededEmailDisplay(reason, emailBody)
|
||||
});
|
||||
|
||||
editEmailButton.addEventListener("click", function() {
|
||||
let emailHasBeenSentBefore = sessionStorage.getItem(emailSentSessionVariableName) !== null;
|
||||
|
||||
if (true) { //emailHasBeenSentBefore
|
||||
if (emailHasBeenSentBefore) {
|
||||
// Show warning Modal
|
||||
setModalVisibility(actionNeededEmailAlreadySentModal, true)
|
||||
}
|
||||
else {
|
||||
// Show editable view
|
||||
showElement(actionNeededEmail.parentElement)
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
hideElement(placeholderText)
|
||||
showEmail(true)
|
||||
}
|
||||
});
|
||||
|
||||
confirmEditEmailButton.addEventListener("click", function() {
|
||||
// Show editable view
|
||||
showElement(actionNeededEmail.parentElement)
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
hideElement(placeholderText)
|
||||
showEmail(true)
|
||||
});
|
||||
|
||||
// Event delegation for data-close-modal buttons
|
||||
|
|
@ -589,11 +586,8 @@ function initializeWidgetOnList(list, parentId) {
|
|||
actionNeededReasonDropdown.addEventListener("change", function() {
|
||||
let reason = actionNeededReasonDropdown.value;
|
||||
let emailBody = reason in actionNeededEmailsJson ? actionNeededEmailsJson[reason] : null;
|
||||
|
||||
if (reason && emailBody) {
|
||||
// Replace the email content
|
||||
actionNeededEmail.value = emailBody;
|
||||
actionNeededEmailReadonlyTextarea.value = emailBody;
|
||||
|
||||
// Reset the session object on change since change refreshes the email content.
|
||||
if (oldDropdownValue !== actionNeededReasonDropdown.value || oldEmailValue !== actionNeededEmail.value) {
|
||||
let emailSent = sessionStorage.getItem(emailSentSessionVariableName)
|
||||
|
|
@ -604,7 +598,7 @@ function initializeWidgetOnList(list, parentId) {
|
|||
}
|
||||
|
||||
// Show an editable email field or a readonly one
|
||||
updateActionNeededEmailDisplay(reason)
|
||||
updateActionNeededEmailDisplay(reason, emailBody)
|
||||
});
|
||||
|
||||
const saveButton = document.querySelector('input[name=_save]');
|
||||
|
|
@ -632,9 +626,13 @@ function initializeWidgetOnList(list, parentId) {
|
|||
// Shows an editable email field or a readonly one.
|
||||
// If the email doesn't exist or if we're of reason "other", display that no email was sent.
|
||||
// Likewise, if we've sent this email before, we should just display the content.
|
||||
function updateActionNeededEmailDisplay(reason) {
|
||||
function updateActionNeededEmailDisplay(reason, emailBody) {
|
||||
|
||||
console.info("REASON: "+reason)
|
||||
if (reason && emailBody) {
|
||||
// Replace the email content
|
||||
actionNeededEmail.value = emailBody;
|
||||
actionNeededEmailReadonlyTextarea.value = emailBody;
|
||||
}
|
||||
|
||||
// showElement(actionNeededEmailHeader)
|
||||
// hideElement(actionNeededEmailHeaderOnSave)
|
||||
|
|
@ -643,23 +641,42 @@ function initializeWidgetOnList(list, parentId) {
|
|||
|
||||
if (reason) {
|
||||
if (reason === "other") {
|
||||
placeholderText.innerHTML = "No email will be sent.";
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
showElement(placeholderText)
|
||||
showPlaceholderText("No email will be sent");
|
||||
}
|
||||
else {
|
||||
// Always show readonly view to start
|
||||
showElement(actionNeededEmailReadonly)
|
||||
hideElement(placeholderText)
|
||||
showEmail(false)
|
||||
}
|
||||
} else {
|
||||
placeholderText.innerHTML = "Select an action needed reason to see email";
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
showElement(placeholderText)
|
||||
showPlaceholderText("Select an action needed reason to see email");
|
||||
}
|
||||
}
|
||||
|
||||
function showEmail(canEdit)
|
||||
{
|
||||
if(!canEdit)
|
||||
{
|
||||
showElement(actionNeededEmailReadonly)
|
||||
hideElement(actionNeededEmail.parentElement)
|
||||
}
|
||||
else
|
||||
{
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
showElement(actionNeededEmail.parentElement)
|
||||
}
|
||||
showElement(actionNeededEmailFooter) // this is the same for both views, so it was separated out
|
||||
hideElement(placeholderText)
|
||||
}
|
||||
|
||||
function showPlaceholderText(innerHTML)
|
||||
{
|
||||
hideElement(actionNeededEmail.parentElement)
|
||||
hideElement(actionNeededEmailReadonly)
|
||||
hideElement(actionNeededEmailFooter)
|
||||
|
||||
placeholderText.innerHTML = innerHTML;
|
||||
showElement(placeholderText)
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -847,3 +847,22 @@ div.dja__model-description{
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-separator {
|
||||
min-height: 20px;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #d1d2d2;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.usa-summary-box_admin {
|
||||
border-color: #d1d2d2;
|
||||
background-color: #f1f1f1;
|
||||
max-width: fit-content !important;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
.text-faded {
|
||||
color: #{$dhs-gray-60};
|
||||
}
|
||||
|
|
@ -145,93 +145,102 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
|
|||
|
||||
{% block field_other %}
|
||||
{% if field.field.name == "action_needed_reason_email" %}
|
||||
<div id="action-needed-reason-email-placeholder-text" class="margin-top-05">
|
||||
{{ field.field.value|linebreaks }}
|
||||
</div>
|
||||
<div id="action-needed-reason-email-readonly" class="display-none">
|
||||
|
||||
<div
|
||||
class="usa-modal"
|
||||
id="email-already-sent-modal"
|
||||
aria-labelledby="Are you sure you want to edit this email?"
|
||||
aria-describedby="The creator of this request already received an email"
|
||||
>
|
||||
<div class="usa-modal__content">
|
||||
<div class="usa-modal__main">
|
||||
<h2 class="usa-modal__heading" id="modal-1-heading">
|
||||
Are you sure you want to edit this email?
|
||||
</h2>
|
||||
<div class="usa-prose">
|
||||
<p>
|
||||
The creator of this request already received an email for this status/reason:
|
||||
</p>
|
||||
<ul>
|
||||
<li class="font-body-sm">Status: <b>Action needed</b></li>
|
||||
<li class="font-body-sm">Reason: <b>{{ field.field.value|linebreaks }}</b></li>
|
||||
</ul>
|
||||
<p>
|
||||
If you edit this email's text, <b>the system will send another email</b> to
|
||||
the creator after you "save" your changes. If you do not want to send another email, click "cancel" below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="usa-modal__footer">
|
||||
<ul class="usa-button-group">
|
||||
<li class="usa-button-group__item">
|
||||
<button
|
||||
type="submit"
|
||||
class="usa-button"
|
||||
id="email-already-sent-modal_continue-editing-button"
|
||||
data-close-modal
|
||||
>
|
||||
Yes, continue editing
|
||||
</button>
|
||||
</li>
|
||||
<li class="usa-button-group__item">
|
||||
<button
|
||||
type="button"
|
||||
class="usa-button usa-button--unstyled padding-105 text-center"
|
||||
name="_cancel_edit_email"
|
||||
data-close-modal
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<div id="action-needed-reason-email-placeholder-text" class="margin-top-05 text-faded">
|
||||
-
|
||||
</div>
|
||||
<div>
|
||||
<div id="action-needed-reason-email-readonly" class="display-none usa-summary-box usa-summary-box_admin padding-top-0 margin-top-0">
|
||||
<div
|
||||
class="usa-modal"
|
||||
id="email-already-sent-modal"
|
||||
aria-labelledby="Are you sure you want to edit this email?"
|
||||
aria-describedby="The creator of this request already received an email"
|
||||
>
|
||||
<div class="usa-modal__content">
|
||||
<div class="usa-modal__main">
|
||||
<h2 class="usa-modal__heading" id="modal-1-heading">
|
||||
Are you sure you want to edit this email?
|
||||
</h2>
|
||||
<div class="usa-prose">
|
||||
<p>
|
||||
The creator of this request already received an email for this status/reason:
|
||||
</p>
|
||||
<ul>
|
||||
<li class="font-body-sm">Status: <b>Action needed</b></li>
|
||||
<li class="font-body-sm">Reason: <b>{{ original_object.get_action_needed_reason_display }}</b></li>
|
||||
</ul>
|
||||
<p>
|
||||
If you edit this email's text, <b>the system will send another email</b> to
|
||||
the creator after you "save" your changes. If you do not want to send another email, click "cancel" below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="usa-modal__footer">
|
||||
<ul class="usa-button-group">
|
||||
<li class="usa-button-group__item">
|
||||
<button
|
||||
type="submit"
|
||||
class="usa-button"
|
||||
id="email-already-sent-modal_continue-editing-button"
|
||||
data-close-modal
|
||||
>
|
||||
Yes, continue editing
|
||||
</button>
|
||||
</li>
|
||||
<li class="usa-button-group__item">
|
||||
<button
|
||||
type="button"
|
||||
class="usa-button usa-button--unstyled padding-105 text-center"
|
||||
name="_cancel_edit_email"
|
||||
data-close-modal
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="usa-button usa-modal__close"
|
||||
aria-label="Close this window"
|
||||
data-close-modal
|
||||
>
|
||||
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
|
||||
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="usa-button usa-modal__close"
|
||||
aria-label="Close this window"
|
||||
data-close-modal
|
||||
>
|
||||
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
|
||||
<use xlink:href="{%static 'img/sprite.svg'%}#close"></use>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="flex-container">
|
||||
<div class="margin-top-05">
|
||||
<p id="action-needed-email-header"><b>Auto-generated email that will be sent to the creator</b></p>
|
||||
<p class="display-none" id="action-needed-email-header-email-sent">
|
||||
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
|
||||
<use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
|
||||
</svg>
|
||||
<b>Email sent to the creator</b>
|
||||
</p>
|
||||
</div>
|
||||
<div class="vertical-separator margin-top-1 margin-bottom-1"></div>
|
||||
<button id="action-needed-reason-email-edit-button"
|
||||
type="button"
|
||||
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-left-1">
|
||||
<span>Edit email</span>
|
||||
</button>
|
||||
</div>
|
||||
<textarea cols="40" rows="10" class="vLargeTextField" id="action-needed-reason-email-readonly-textarea" readonly>
|
||||
{{ field.field.value|linebreaks }}
|
||||
</textarea>
|
||||
</div>
|
||||
<div>
|
||||
{{ field.field }}
|
||||
<input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
|
||||
</div>
|
||||
<div id="action-needed-email-footer" class="text-faded margin-top-05">This email will be sent to the creator of this request after saving</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-container">
|
||||
<p id="action-needed-email-header"><b>Auto-generated email that will be sent to the creator</b></p>
|
||||
<p class="display-none" id="action-needed-email-header-email-sent">
|
||||
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
|
||||
<use xlink:href="{%static 'img/sprite.svg'%}#check_circle"></use>
|
||||
</svg>
|
||||
<b>Email sent to the creator</b></p>
|
||||
<button id="action-needed-reason-email-edit-button"
|
||||
type="button"
|
||||
class="usa-button usa-button--unstyled usa-button--dja-link-color usa-button__small-text text-no-underline margin-top-2 margin-bottom-1 margin-left-1">
|
||||
<span>Edit email</span>
|
||||
</button>
|
||||
</div>
|
||||
<textarea cols="40" rows="10" class="vLargeTextField" id="action-needed-reason-email-readonly-textarea" readonly></textarea>
|
||||
</div>
|
||||
<div>
|
||||
{{ field.field }}
|
||||
<div id="action-needed-email-footer">This email will be sent to the creator of this request after saving</div>
|
||||
<input id="action-needed-email-sent" class="display-none" value="{{action_needed_email_sent}}">
|
||||
</div>
|
||||
{% else %}
|
||||
{{ field.field }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue