Skip to content

Commit 02d32a5

Browse files
pandafypandafy
authored
[change:ux] Changed UI of HTML email template
1 parent 8e8f298 commit 02d32a5

File tree

5 files changed

+144
-46
lines changed

5 files changed

+144
-46
lines changed

‎openwisp_utils/admin_theme/email.py‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
from smtplib import SMTPRecipientsRefused
33

44
from django.conf import settings
5+
from django.contrib.sites.shortcuts import get_current_site
56
from django.core.mail import EmailMultiAlternatives
67
from django.template.loader import render_to_string
78
from django.utils.html import strip_tags
@@ -29,9 +30,13 @@ def send_email(
2930
**kwargs,
3031
)
3132
if app_settings.OPENWISP_HTML_EMAIL and body_html:
33+
site = get_current_site(None)
34+
scheme = "http" if settings.DEBUG else "https"
3235
context = dict(
33-
subject=subject,
36+
title=subject,
3437
message=body_html,
38+
site_name=site.name,
39+
site_url=f"{scheme}://{site.domain}",
3540
logo_url=app_settings.OPENWISP_EMAIL_LOGO,
3641
)
3742
context.update(extra_context)

‎openwisp_utils/admin_theme/static/ui/openwisp/images/email.png‎

518 Bytes
Loading

‎openwisp_utils/admin_theme/static/ui/openwisp/images/email.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎openwisp_utils/admin_theme/static/ui/openwisp/images/right-arrow.png‎

157 Bytes
Loading

‎openwisp_utils/admin_theme/templates/openwisp_utils/email_template.html‎

Lines changed: 135 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,175 @@
11
{% load i18n %}
22
{% load l10n %}
3+
{% load static %}
34
<html lang="en">
45
<head>
56
<meta charset="UTF-8">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
{% block styles %}
89
<style type="text/css">
10+
:root {
11+
--muted-fg-color: #777;
12+
--loud-fg-color: #333;
13+
--muted-bg-color: #F2F4F7;
14+
--muted-border-color: #D0D5DD;
15+
}
16+
917
body {
1018
min-width: 250px;
11-
background: #ffe5e5;
19+
background: #fff;
1220
margin: 0;
1321
padding: 0;
1422
}
15-
.container{
16-
background: #ffe5e5;
23+
24+
.email-info {
25+
margin: 0.9rem auto;
26+
font-size: 0.8em;
27+
font-weight: 400;
28+
color: #777;
29+
text-align: center;
30+
}
31+
32+
.container {
33+
background: #fff;
1734
height: 100%;
18-
display: flex;
19-
justify-content: center;
20-
align-items: center;
2135
}
22-
.box{
36+
37+
.box {
2338
width: auto;
24-
max-width: 650px;
25-
padding: 30px;
26-
background-color: #fcfcfc;
27-
box-sizing: border-box;
28-
box-shadow: 0 15px 25px rgba(256,256, 256,.5);
29-
margin: 30px auto;
39+
max-width: 700px;
40+
padding: 1.5rem 0.94rem 2.1rem 0.94rem;
41+
background-color: #fff;
42+
border-radius: 12px;
43+
border: outset 1px #eee;
44+
margin: 0px auto 1rem auto;
3045
line-height: 27px;
46+
box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
3147
}
32-
.logo-container{
48+
49+
.icon-container {
50+
margin: 0 auto;
51+
width: 48px;
52+
height: 48px;
53+
background-color: rgba(254, 240, 199, 1);
54+
border-radius: 24px;
3355
text-align: center;
34-
margin-bottom: 20px;
3556
}
36-
.logo {
37-
max-width: 210px;
57+
58+
.icon-container img {
59+
width: 24px;
60+
height: 18px;
61+
margin-top: 15px;
62+
}
63+
64+
.sysname-container {
65+
width: fit-content;
66+
margin: 1rem auto 0 auto;
67+
background-color: #F2F4F7;
68+
padding: 0 0.5em;
69+
border: solid #D0D5DD 1px;
70+
border-radius: 16px;
71+
color: #777;
72+
font-size: 0.75rem;
73+
line-height: 1.23rem;
3874
}
39-
.call-to-action{
75+
76+
.logo-container {
4077
text-align: center;
4178
margin-top: 30px;
4279
}
43-
.subject{
44-
font-size: medium;
45-
font-weight: 700;
46-
margin: 20px 0;
80+
81+
.logo {
82+
max-width: 104px;
83+
}
84+
85+
.call-to-action {
86+
text-align: center;
87+
margin-top: 1.88rem;
88+
}
89+
90+
.email-title {
91+
font-weight: 600;
92+
font-size: 1.13rem;
93+
width: fit-content;
94+
margin: auto;
95+
padding-top: 0.25rem;
96+
color: #101828;
97+
}
98+
99+
.subtitle {
100+
font-weight: 400;
101+
font-size: 0.88rem;
102+
width: fit-content;
103+
margin: 0 auto 0.88em auto;
104+
color: #475467;
47105
}
48-
.msg{
49-
color: #1b1818;
106+
107+
.msg {
108+
color: #000000;
50109
margin: 20px 0;
51110
font-size: medium;
52111
}
53-
.btn{
112+
113+
.btn {
54114
appearance: button;
55115
text-decoration: none;
56-
color: #fff!important;
57-
background: #333;
58-
border-radius: 4px;
59-
border: 0;
60-
padding: 10px 15px;
61-
font-weight: bold;
62-
font-size: medium;
116+
border: solid #D0D5DD 1px;
117+
border-radius: 8px;
118+
font-weight: 600;
119+
font-size: 1rem;
120+
line-height: 1.5rem;
121+
padding: 0.63rem 1rem;
122+
color: #344054 !important;
123+
box-sizing: border-box;
124+
box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), inset 0px 0px 0px 1px rgba(16, 24, 40, 0.18), inset 0px -2px 0px rgba(16, 24, 40, 0.05);
63125
}
64-
.btn:hover, .btn:focus {
65-
background: #000;
66-
outline: 0 none;
67-
background: rgba(51, 51, 51, 0.7);
126+
127+
.btn:hover,
128+
.btn:focus {
129+
border-color: #000;
130+
color: #000;
68131
}
132+
69133
a:link:hover {
70134
text-decoration: none;
71135
}
136+
137+
.footer {
138+
height: 40px;
139+
text-align: center;
140+
color: #475467;
141+
}
142+
143+
.footer p {
144+
font-size: 12px;
145+
margin: 0 auto;
146+
line-height: 20px;
147+
}
72148
</style>
73149
{% endblock styles %}
74150
</head>
75151
<body>
76152
{% block body %}
77153
<div class="container">
154+
{% block logo %}
155+
<div class="logo-container">
156+
<img src="{{ logo_url }}" alt="Logo" class="logo">
157+
</div>
158+
{% endblock logo %}
159+
{% block email_info %}
160+
<div class="email-info">This email is sent to <u>{{ recipient_email }}</u> from [{{ site_name }}]</div>
161+
{% endblock email_info %}
78162
<div class="box">
79163
{% block mail_header %}
80-
<div class="logo-container">
81-
<img src="{{ logo_url }}" alt="Logo" class="logo">
164+
<div class="icon-container">
165+
<img src="{{ site_url }}{% static "ui/openwisp/images/email.png" %}" alt="email icon">
82166
</div>
83-
{% if subject %}
84-
<div class="subject">{{ subject }}</div>
167+
<div class="sysname-container">{{ site_name }}</div>
168+
{% if title %}
169+
<div class="email-title">{{ title }}</div>
170+
{% endif %}
171+
{% if subtitle %}
172+
<div class="subtitle">{{ subtitle }}</div>
85173
{% endif %}
86174
{% endblock mail_header %}
87175
{% block mail_body %}
@@ -94,13 +182,15 @@
94182
</div>
95183
{% endif %}
96184
{% endblock call_to_action %}
97-
{% block mail_footer %}
98-
{% if footer %}
185+
</div>
186+
{% block mail_footer %}
187+
{% if footer %}
188+
<div class="footer">
99189
{{ footer | safe }}
100-
{% endif %}
190+
</div>
191+
{% endif %}
101192
{% endblock mail_footer %}
102-
</div>
193+
{% endblock body %}
103194
</div>
104-
{% endblock body %}
105195
</body>
106196
</html>

0 commit comments

Comments
 (0)