thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: email-template changes overview (#3494)

Browse Source 
* style: template design

* fix: project url and actors

* fix: heading jinja

* fix: typo in workspace

* fix: issue title change

* fix: top project, issue redirection

---------

Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
This commit is contained in:
Lakhan Baheti 2024-01-30 20:12:59 +05:30 committed by GitHub
parent 888665783e
commit f0836ceb10
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 1104 additions and 968 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apiserver/plane/bgtasks/email_notification_task.py
View File

@ -148,10 +148,12 @@ def send_email_notification(
template_data = [] template_data = []
total_changes = 0 total_changes = 0
comments = [] comments = []
actors_involved = []
for actor_id, changes in data.items(): for actor_id, changes in data.items():
actor = User.objects.get(pk=actor_id) actor = User.objects.get(pk=actor_id)
total_changes = total_changes + len(changes) total_changes = total_changes + len(changes)
comment = changes.pop("comment", False) comment = changes.pop("comment", False)
actors_involved.append(actor_id)
if comment: if comment:
comments.append( comments.append(
{ {
@ -191,6 +193,7 @@ def send_email_notification(
context = { context = {
"data": template_data, "data": template_data,
"summary": summary, "summary": summary,
"actors_involved": len(set(actors_involved)),
"issue": { "issue": {
"issue_identifier": f"{str(issue.project.identifier)}-{str(issue.sequence_id)}", "issue_identifier": f"{str(issue.project.identifier)}-{str(issue.sequence_id)}",
"name": issue.name, "name": issue.name,
@ -200,6 +203,9 @@ def send_email_notification(
"email": receiver.email, "email": receiver.email,
}, },
"issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}", "issue_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/{str(issue.id)}",
"project_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/",
"workspace":str(issue.project.workspace.slug),
"project": str(issue.project.name),
"user_preference": f"{base_api}/profile/preferences/email", "user_preference": f"{base_api}/profile/preferences/email",
"comments": comments, "comments": comments,
} }

336
apiserver/templates/emails/notifications/issue-updates.html
View File

@ -28,6 +28,18 @@
color: #3358d4 !important; color: #3358d4 !important;
} }
</style> </style>
<style>
*[class="gmail-fix"] {
display: none !important;
}
</style>
<style type="text/css" emogrify="no">
@media (max-width: 600px) {
.gmx-killpill {
content: " \03D1";
}
}
</style>
</head> </head>
<body <body
bgcolor="#ffffff" bgcolor="#ffffff"
@ -82,7 +94,7 @@
{{ issue.issue_identifier }} updates {{ issue.issue_identifier }} updates
</p> </p>
<p style="font-size: 1rem; font-weight: 500; color: #1f2d5c; line-height: 28px"> <p style="font-size: 1rem; font-weight: 500; color: #1f2d5c; line-height: 28px">
{{ issue.name }}: {{ issue.issue_identifier }} {{workspace}}/<a target="_blank" style="color: #1f2d5c; text-decoration: none;" href="{{project_url}}">{{project}}</a>/<a style="color: #1f2d5c; text-decoration: none;" target="_blank" href="{{issue_url}}">{{issue.issue_identifier}}</a>: {{ issue.name }}
</p> </p>
</td> </td>
</tr> </tr>
@ -96,42 +108,41 @@
margin-bottom: 15px; margin-bottom: 15px;
" "
/> />
{% if actors_involved > 0 %}
<p style="font-size: 1rem;color: #1f2d5c; line-height: 28pxl"> {% if data|length > 0 and comments|length == 0 %}
{% if data.1 %}{{ data|length }}{% endif %} {{ summary }} <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
<span style="font-size: 1rem; font-weight: 700; line-height: 28px"> <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
{{ data.0.actor_detail.first_name}} {{ data.0.actor_detail.first_name}}
{{data.0.actor_detail.last_name }} {{data.0.actor_detail.last_name }}
</span> </span>
made {{data|length}} {% if data|length > 1 %}updates{% else %}update{% endif %} to the issue.
</p> </p>
{% if comments.0 %} {% elif data|length == 0 and comments|length > 0 %}
<p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
<span style="font-size: 1rem; font-weight: 700; line-height: 28px">
{{ comments.0.actor_detail.first_name}}
{{comments.0.actor_detail.last_name }}
</span>
added {{comments|length}} new {% if comments|length > 1 %}comments{% else %}comment{% endif %}.
</p>
{% elif data|length > 0 and comments|length > 0 %}
<p style="font-size: 1rem;color: #1f2d5c; line-height: 28px"> <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
{{ comments|length }} {% if comments|length == 1 %}comment was{% else %}comments were{% endif %} left by
<span style="font-size: 1rem; font-weight: 700; line-height: 28px"> <span style="font-size: 1rem; font-weight: 700; line-height: 28px">
{% if comments|length == 1 %}
{{ data.0.actor_detail.first_name}} {{ data.0.actor_detail.first_name}}
{{data.0.actor_detail.last_name }} {{data.0.actor_detail.last_name }}
</span>
made {{data|length}} {% if data|length > 1 %}updates{% else %}update{% endif %} and added {{comments|length}} new {% if comments|length > 1 %}comments{% else %}comment{% endif %} on the issue.
</p>
{% endif %}
{% else %} {% else %}
{{ data.0.actor_detail.first_name }}
{{ data.0.actor_detail.last_name }} and others
{% endif %}
</span>
</p>
{% endif %}
{% if mentions and comments.0 and data.0 %}
<p style="font-size: 1rem;color: #1f2d5c; line-height: 28px"> <p style="font-size: 1rem;color: #1f2d5c; line-height: 28px">
There are 3 new updates, added 1 new comment and, you were There are {{ data|length }} new updates and {{comments|length}} new comments on the issue
<span style="font-size: 1rem; font-weight: 700; line-height: 28px">
@{{ data.0.actor_detail.first_name}}
{{data.0.actor_detail.last_name }}
</span>
mentioned a comment of this issue.
</p> </p>
{% endif %} {% endif %}
{% for update in data %} {% if update.changes.name %} {% for update in data %} {% if update.changes.name %}
<!-- Issue title updated --> <!-- Issue title updated -->
<p style="font-size: 1rem; line-height: 28px; color: #1f2d5c"> <p style="font-size: 1rem; line-height: 28px; color: #1f2d5c">
The issue title has been updated from “{{update.changes.user.old_value.0}}“ to "{{update.changes.user.new_value|last}}" The issue title has been updated to {{ issue.name}}
</p> </p>
{% endif %} {% endif %}
<!-- Outer update Box start --> <!-- Outer update Box start -->
@ -164,6 +175,7 @@
word-wrap: break-word; word-wrap: break-word;
padding-left: 15px; padding-left: 15px;
padding-bottom: 15px; padding-bottom: 15px;
border-radius: 8px;
" "
> >
<!-- action performer --> <!-- action performer -->
@ -264,6 +276,7 @@
</div> </div>
</td> </td>
<td> <td>
{% if update.changes.target_date.new_value.0 %}
<p <p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
@ -275,6 +288,20 @@
> >
{{ update.changes.target_date.new_value.0 }} {{ update.changes.target_date.new_value.0 }}
</p> </p>
{% else %}
<p
style="
font-size: 0.8rem;
font-weight: 500;
color: #171717;
margin-left: 5px;
padding: 0px;
text-decoration: line-through;
"
>
{{ update.changes.target_date.old_value.0 }}
</p>
{% endif %}
</td> </td>
</tr> </tr>
</table> </table>
@ -285,7 +312,7 @@
style="max-width: 100%; padding-bottom: 15px" style="max-width: 100%; padding-bottom: 15px"
> >
<tr> <tr>
<td style="overflow-wrap: break-word;"> <td>
<img <img
src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/duplicate.webp" src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/duplicate.webp"
width="12" width="12"
@ -303,9 +330,9 @@
Duplicate: Duplicate:
</span> </span>
</td> </td>
{% if update.changes.duplicate.new_value.0 %}
<td style="padding-left: 5px;"> <td style="padding-left: 5px;overflow-wrap: break-word;">
{% for duplicate in update.changes.duplicate.new_value %} {% for duplicate in update.changes.duplicate.new_value|slice:":2" %}
<span <span
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
@ -319,7 +346,57 @@
</span> </span>
{% endfor %} {% endfor %}
</td> </td>
{% endif %}
{% if update.changes.duplicate.new_value.2 %}
<td>
<span
style="
font-size: 0.8rem;
font-weight: 500;
color: #3a5bc7;
margin-right: 3px;
padding-top: 0px;
"
>
+{{ update.changes.duplicate.new_value|length|add:"-2" }}
more
</span>
</td>
{% endif %}
{% if update.changes.duplicate.old_value.0 %}
<td style="padding-left: 8px;">
{% for duplicate in update.changes.duplicate.old_value|slice:":2" %}
<span
style="
font-size: 0.8rem;
font-weight: 500;
color: #641723;
margin-right: 3px;
padding-top: 0px;
text-decoration: line-through;
"
>
{{ duplicate }}
</span>
{% endfor %}
</td>
{% endif %}
{% if update.changes.duplicate.old_value.2 %}
<td>
<span
style="
font-size: 0.8rem;
font-weight: 500;
color: #641723;
margin-right: 3px;
padding-top: 0px;
"
>
+{{ update.changes.duplicate.old_value|length|add:"-2" }}
more
</span>
</td>
{% endif %}
</tr> </tr>
</table> </table>
{% endif %} {% endif %}
@ -327,195 +404,192 @@
{% if update.changes.assignees %} {% if update.changes.assignees %}
<table <table
role="presentation" role="presentation"
style="max-width: 100%; padding-bottom: 15px" style="padding-bottom: 15px; max-width: 100%; padding-right: 10px;"
> >
<tr> <tr>
<td> <td valign="top" style="white-space: nowrap; padding: 0px;">
<img <img
src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/assignee.webp" src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/assignee.webp"
width="12" width="12"
height="12" height="12"
border="0" border="0"
style="display: block" style="display: inline-block"
/> />
</td> <span
<td>
<p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: #525252; color: #525252;
padding-right: 5px;
" "
> >
Assignees: Assignee:
</p> </span>
</td> </td>
<td style="overflow-wrap: anywhere;word-break: break-all; padding: 0px;">
{% if update.changes.assignees.new_value.0 %} {% if update.changes.assignees.new_value.0 %}
<td> <span
<p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
color: #0d74ce; color: #0d74ce;
background-color: #e6f4fe; background-color: #e6f4fe;
margin-left: 5px; margin-right: 5px;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
padding-top: 2px;
font-weight: 500; font-weight: 500;
border-radius: 4px; border-radius: 2px;
max-lines: 1;
" "
> >
{{update.changes.assignees.new_value.0}} {{update.changes.assignees.new_value.0}}
</p> </span>
</td> {% endif %}
{% endif %} {% if update.changes.assignees.new_value.1 %} {% if update.changes.assignees.new_value.1 %}
<td> <span
<p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: #0d74ce; color: #0d74ce;
margin-left: 2px; margin-left: 2px;
margin-right: 5px;
white-space: nowrap;
padding: 0px;
" "
> >
+{{ update.changes.assignees.new_value|length|add:"-1"}} +{{ update.changes.assignees.new_value|length|add:"-1"}} more
more </span>
</p> {% endif %}
</td> {% if update.changes.assignees.old_value.0 %}
{% endif %} {% if update.changes.assignees.old_value.0 %} <span
<td>
<p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
padding-top: 2px;
font-weight: 500; font-weight: 500;
text-decoration: line-through; text-decoration: line-through;
color: #641723; color: #641723;
background-color: #feebec; background-color: #feebec;
margin-left: 5px; margin-right: 5px;
border-radius: 4px; border-radius: 2px;
" "
> >
{{update.changes.assignees.old_value.0}} {{update.changes.assignees.old_value.0}}
</p> </span>
</td> {% endif %}
{% endif %} {% if update.changes.assignees.old_value.1 %} {% if update.changes.assignees.old_value.1 %}
<td> <span
<p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: #641723; color: #641723;
margin-left: 2px; margin-left: 2px;
white-space: nowrap;
" "
> >
+{{ update.changes.assignees.old_value|length|add:"-1"}} +{{ update.changes.assignees.old_value|length|add:"-1"}} more
more </span>
</p>
</td>
{% endif %} {% endif %}
</td>
</tr> </tr>
</table> </table>
{% endif %} {% if update.changes.labels %} {% endif %} {% if update.changes.labels %}
<!-- Labels --> <!-- Labels -->
<table <table
role="presentation" role="presentation"
style="padding-bottom: 15px; max-width: 100%" style="padding-bottom: 15px; max-width: 100%; padding-right: 10px;"
> >
<tr> <tr>
<td> <td valign="top" style="white-space: nowrap; padding: 0px;">
<img <img
src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/labels.webp" src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/labels.webp"
width="12" width="12"
height="12" height="12"
border="0" border="0"
style="display: block" style="display: inline-block;"
/> />
</td> <span
<td>
<p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: #525252; color: #525252;
padding-right: 5px;
" "
> >
Labels: Labels:
</p> </span>
</td> </td>
<td style="overflow-wrap: anywhere;word-break: break-all; padding: 0px;">
{% if update.changes.labels.new_value.0 %} {% if update.changes.labels.new_value.0 %}
<td> <span
<p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1px;
color: #0d74ce; color: #0d74ce;
background-color: #e6f4fe; background-color: #e6f4fe;
margin-left: 5px; margin-right: 5px;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
padding-top: 2px;
font-weight: 500; font-weight: 500;
border-radius: 4px; border-radius: 2px;
max-lines: 1;
" "
> >
{{update.changes.labels.new_value.0}} {{update.changes.labels.new_value.0}}
</p> </span>
</td>
{% endif %} {% endif %}
{% if update.changes.labels.new_value.1 %} {% if update.changes.labels.new_value.1 %}
<td> <span
<p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: #0d74ce; color: #0d74ce;
margin-left: 2px; margin-left: 2px;
margin-right: 5px;
white-space: nowrap;
" "
> >
+{{ update.changes.labels.new_value|length|add:"-1"}} more +{{ update.changes.labels.new_value|length|add:"-1"}} more
</p> </span>
</td>
{% endif %} {% endif %}
{% if update.changes.labels.old_value.0 %} {% if update.changes.labels.old_value.0 %}
<td> <span
<p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
padding-top: 2px;
font-weight: 500; font-weight: 500;
text-decoration: line-through; text-decoration: line-through;
color: #641723; color: #641723;
background-color: #feebec; background-color: #feebec;
margin-left: 5px; margin-right: 5px;
border-radius: 4px; border-radius: 2px;
" "
> >
{{update.changes.labels.old_value.0}} {{update.changes.labels.old_value.0}}
</p> </span>
</td>
{% endif %} {% endif %}
{% if update.changes.labels.old_value.1 %} {% if update.changes.labels.old_value.1 %}
<td> <span
<p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 500; font-weight: 500;
color: #641723; color: #641723;
margin-left: 2px; margin-left: 2px;
white-space: nowrap;
" "
> >
+{{ update.changes.labels.old_value|length|add:"-1"}} more +{{ update.changes.labels.old_value|length|add:"-1"}} more
</p> </span>
</td>
{% endif %} {% endif %}
</td>
</tr> </tr>
</table> </table>
{% endif %} {% endif %}
@ -620,7 +694,6 @@
font-weight: 500; font-weight: 500;
color: #525252; color: #525252;
margin-right: 5px; margin-right: 5px;
" "
> >
Links: Links:
@ -687,16 +760,15 @@
Priority: Priority:
</p> </p>
</td> </td>
<td> <td>
<p <p
style=" style="
font-size: 0.8rem; font-size: 0.8rem;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
padding-bottom: 2px; padding-bottom: 0px;
font-weight: 500; font-weight: 500;
border-radius: 4px; border-radius: 2px;
text-transform: capitalize; text-transform: capitalize;
{% if update.changes.priority.old_value.0 == 'urgent' %}background-color: #FFDBDC; color: #CE2C31;{% endif %} {% if update.changes.priority.old_value.0 == 'urgent' %}background-color: #FFDBDC; color: #CE2C31;{% endif %}
{% if update.changes.priority.old_value.0 == 'high' %}background-color: #FFE2C7; color: #F04610;{% endif %} {% if update.changes.priority.old_value.0 == 'high' %}background-color: #FFE2C7; color: #F04610;{% endif %}
@ -722,9 +794,9 @@
font-size: 0.8rem; font-size: 0.8rem;
padding-left: 4px; padding-left: 4px;
padding-right: 4px; padding-right: 4px;
padding-bottom: 2px; padding-bottom: 0px;
font-weight: 500; font-weight: 500;
border-radius: 4px; border-radius: 2px;
text-transform: capitalize; text-transform: capitalize;
{% if update.changes.priority.new_value|last == 'urgent' %}background-color: #FFDBDC; color: #CE2C31;{% endif %} {% if update.changes.priority.new_value|last == 'urgent' %}background-color: #FFDBDC; color: #CE2C31;{% endif %}
{% if update.changes.priority.new_value|last == 'high' %}background-color: #FEEBEC; color: #CE2C31;{% endif %} {% if update.changes.priority.new_value|last == 'high' %}background-color: #FEEBEC; color: #CE2C31;{% endif %}
@ -764,15 +836,73 @@
Blocking: Blocking:
</span> </span>
</td> </td>
{% if update.changes.blocking.new_value.0 %}
<td> <td style="padding-left: 5px;overflow-wrap: break-word;">
{% for blocking in update.changes.blocking.new_value %} {% for blocking in update.changes.blocking.new_value|slice:":2" %}
<span href="" style="font-size: 0.8rem; font-weight: 500; margin-right: 5px; color: #3358d4;"> <span
style="
font-size: 0.8rem;
font-weight: 500;
color: #3a5bc7;
margin-right: 3px;
padding-top: 0px;
"
>
{{ blocking }} {{ blocking }}
</span> </span>
{% endfor %} {% endfor %}
</td> </td>
{% endif %}
{% if update.changes.blocking.new_value.2 %}
<td>
<span
style="
font-size: 0.8rem;
font-weight: 500;
color: #3a5bc7;
margin-right: 3px;
padding-top: 0px;
"
>
+{{ update.changes.blocking.new_value|length|add:"-2" }}
more
</span>
</td>
{% endif %}
{% if update.changes.blocking.old_value.0 %}
<td style="padding-left: 8px;">
{% for blocking in update.changes.blocking.old_value|slice:":2" %}
<span
style="
font-size: 0.8rem;
font-weight: 500;
color: #641723;
margin-right: 3px;
padding-top: 0px;
text-decoration: line-through;
"
>
{{ blocking }}
</span>
{% endfor %}
</td>
{% endif %}
{% if update.changes.blocking.old_value.2 %}
<td>
<span
style="
font-size: 0.8rem;
font-weight: 500;
color: #641723;
margin-right: 3px;
padding-top: 0px;
"
>
+{{ update.changes.blocking.old_value|length|add:"-2" }}
more
</span>
</td>
{% endif %}
</tr> </tr>
</table> </table>
{% endif %} {% endif %}