mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-03-07 10:52:24 -05:00
51f6450e5d
Depends on: - [ ] https://github.com/alphagov/notifications-utils/pull/40 In research we’ve noticed two problems with the appearance of placeholders: 1. We are inconsistent about when we display the ((double brackets)). Sometimes we show them, sometimes we don’t. This doesn’t help user’s understanding about where the column names in their CSV file come from, or how they can edit the template to fix any errors. 2. Because they look so different from normal `<textarea>` text, it’s not immediately obvious that they can be edited just like normal text. They look more like something that can be dragged/inserted. So this commit: 1. Makes the brackets always-visible. 2. Makes the text colour of the placeholder `$text-colour`, and only highlights the name of the ‘variable’, not the brackets themselves.
55 lines
1.4 KiB
HTML
55 lines
1.4 KiB
HTML
{% macro email_message(
|
|
subject,
|
|
body,
|
|
from_name=None,
|
|
from_address=None,
|
|
recipient=None,
|
|
id=None,
|
|
show_placeholder_for_recipient=False,
|
|
show_id=False
|
|
) %}
|
|
<div class="email-message">
|
|
{% if from_name or subject %}
|
|
<table class="email-message-meta">
|
|
<tbody>
|
|
{% if from_name and from_address %}
|
|
<tr>
|
|
<th>From</th>
|
|
<td>
|
|
{{ from_name }} <{{ from_address }}>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if recipient is not none %}
|
|
<tr>
|
|
<th>To</th>
|
|
<td>
|
|
{% if show_placeholder_for_recipient %}
|
|
<span class="placeholder-no-brackets">
|
|
email address
|
|
</span>
|
|
{% else %}
|
|
{{ recipient }}
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% if subject %}
|
|
<tr class="email-message-meta">
|
|
<th>Subject</th>
|
|
<td>
|
|
{{ subject }}
|
|
</td>
|
|
</div>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
{% endif %}
|
|
<div class="email-message-body" data-module="expand-collapse" data-max-height="200">
|
|
<div class="email-message-body-wrapper">
|
|
{{ body|nl2br }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|