Add additional Notifications when the DMP/Dataset gets finalised and when the DMP gets public (ref #243 & #244)
This commit is contained in:
parent
25988ab272
commit
aa74f810e5
|
@ -2,7 +2,11 @@ package eu.eudat.data.enumeration.notification;
|
|||
|
||||
public enum NotificationType {
|
||||
DMP_MODIFIED(0),
|
||||
DATASET_MODIFIED(1);
|
||||
DATASET_MODIFIED(1),
|
||||
DMP_PUBLISH(2),
|
||||
DMP_FINALISED(3),
|
||||
DMP_MODIFIED_FINALISED(4),
|
||||
DATASET_MODIFIED_FINALISED(5);
|
||||
|
||||
private int type;
|
||||
|
||||
|
@ -20,6 +24,14 @@ public enum NotificationType {
|
|||
return DMP_MODIFIED;
|
||||
case 1:
|
||||
return DATASET_MODIFIED;
|
||||
case 2:
|
||||
return DMP_PUBLISH;
|
||||
case 3:
|
||||
return DMP_FINALISED;
|
||||
case 4:
|
||||
return DMP_MODIFIED_FINALISED;
|
||||
case 5:
|
||||
return DATASET_MODIFIED_FINALISED;
|
||||
default:
|
||||
throw new RuntimeException("Unsupported Notification Type");
|
||||
}
|
||||
|
|
|
@ -79,11 +79,19 @@ import java.nio.file.Files;
|
|||
import java.util.*;
|
||||
import java.util.concurrent.CompletableFuture;
|
||||
import java.util.stream.Collectors;
|
||||
import java.util.stream.Stream;
|
||||
|
||||
@Component
|
||||
public class DataManagementPlanManager {
|
||||
private static final Logger logger = LoggerFactory.getLogger(DataManagementPlanManager.class);
|
||||
|
||||
private final Map<NotificationType, String> notificationPaths = Stream.of(new Object[][] {
|
||||
{NotificationType.DMP_MODIFIED, "/plans/edit"},
|
||||
{NotificationType.DMP_PUBLISH, "/plans/publicEdit"},
|
||||
{NotificationType.DMP_FINALISED, "/plans/edit"},
|
||||
{NotificationType.DMP_MODIFIED_FINALISED, "/plans/edit"}
|
||||
}).collect(Collectors.toMap(data -> (NotificationType) data[0], data -> (String) data[1]));
|
||||
|
||||
private ApiContext apiContext;
|
||||
private DatasetManager datasetManager;
|
||||
private UtilitiesService utilitiesService;
|
||||
|
@ -575,26 +583,30 @@ public class DataManagementPlanManager {
|
|||
assignUser(newDmp, user);
|
||||
|
||||
if (setNotification) {
|
||||
this.sendNotification(newDmp, user);
|
||||
if (newDmp.getStatus() != DMP.DMPStatus.FINALISED.getValue()) {
|
||||
this.sendNotification(newDmp, user, NotificationType.DMP_MODIFIED);
|
||||
} else {
|
||||
this.sendNotification(newDmp, user, NotificationType.DMP_MODIFIED_FINALISED);
|
||||
}
|
||||
}
|
||||
|
||||
return newDmp;
|
||||
}
|
||||
|
||||
private void sendNotification(DMP dmp, UserInfo user) {
|
||||
private void sendNotification(DMP dmp, UserInfo user, NotificationType notificationType) {
|
||||
List<UserDMP> userDMPS = databaseRepository.getUserDmpDao().asQueryable().where(((builder, root) -> builder.equal(root.get("dmp").get("id"), dmp.getId()))).toList();
|
||||
for (UserDMP userDMP : userDMPS) {
|
||||
if (!userDMP.getUser().getId().equals(user.getId())) {
|
||||
Notification notification = new Notification();
|
||||
notification.setUserId(user);
|
||||
notification.setType(NotificationType.DMP_MODIFIED);
|
||||
notification.setType(notificationType);
|
||||
notification.setNotifyState(NotifyState.PENDING);
|
||||
notification.setIsActive(ActiveStatus.ACTIVE);
|
||||
notification.setData("{" +
|
||||
"\"userId\": \"" + userDMP.getUser().getId() + "\"" +
|
||||
", \"id\": \"" + userDMP.getDmp().getId() + "\"" +
|
||||
", \"name\": \"" + userDMP.getDmp().getLabel() + "\"" +
|
||||
", \"path\": \"/plans/edit\"" +
|
||||
", \"path\": \"" + notificationPaths.get(notificationType) +"\"" +
|
||||
"}");
|
||||
notification.setCreatedAt(new Date());
|
||||
notification.setUpdatedAt(notification.getCreatedAt());
|
||||
|
@ -1174,6 +1186,8 @@ public class DataManagementPlanManager {
|
|||
throw new Exception("DMP is not finalized");
|
||||
dmp.setPublic(true);
|
||||
apiContext.getOperationsContext().getDatabaseRepository().getDmpDao().createOrUpdate(dmp);
|
||||
UserInfo user = apiContext.getOperationsContext().getDatabaseRepository().getUserInfoDao().find(principal.getId());
|
||||
sendNotification(dmp, user, NotificationType.DMP_PUBLISH);
|
||||
}
|
||||
|
||||
public void makeFinalize(UUID id, Principal principal, DatasetsToBeFinalized datasetsToBeFinalized) throws Exception {
|
||||
|
@ -1209,6 +1223,9 @@ public class DataManagementPlanManager {
|
|||
apiContext.getOperationsContext().getDatabaseRepository().getDatasetDao()
|
||||
.asQueryable().where((builder, root) -> root.get("id").in(datasetsToBeCanceled))
|
||||
.update(root -> root.<Integer>get("status"), Dataset.Status.CANCELED.getValue());
|
||||
|
||||
UserInfo user = apiContext.getOperationsContext().getDatabaseRepository().getUserInfoDao().find(principal.getId());
|
||||
sendNotification(dmp, user, NotificationType.DMP_FINALISED);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -81,6 +81,11 @@ import java.util.zip.ZipInputStream;
|
|||
public class DatasetManager {
|
||||
private static final Logger logger = LoggerFactory.getLogger(DatasetManager.class);
|
||||
|
||||
private final Map<NotificationType, String> notificationPaths = Stream.of(new Object[][] {
|
||||
{NotificationType.DATASET_MODIFIED, "/datasets/edit"},
|
||||
{NotificationType.DATASET_MODIFIED_FINALISED, "/datasets/edit"}
|
||||
}).collect(Collectors.toMap(data -> (NotificationType) data[0], data -> (String) data[1]));
|
||||
|
||||
private ApiContext apiContext;
|
||||
private DatabaseRepository databaseRepository;
|
||||
private DatasetRepository datasetRepository;
|
||||
|
@ -434,25 +439,29 @@ public class DatasetManager {
|
|||
datasetWizardModel.setId(dataset1.getId());
|
||||
updateTags(apiContext.getOperationsContext().getDatasetRepository(), datasetWizardModel);
|
||||
if (sendNotification) {
|
||||
this.sendNotification(dataset1, dataset1.getDmp(), userInfo);
|
||||
if (dataset1.getStatus() != Dataset.Status.FINALISED.getValue()) {
|
||||
this.sendNotification(dataset1, dataset1.getDmp(), userInfo, NotificationType.DATASET_MODIFIED);
|
||||
} else {
|
||||
this.sendNotification(dataset1, dataset1.getDmp(), userInfo, NotificationType.DATASET_MODIFIED_FINALISED);
|
||||
}
|
||||
}
|
||||
return dataset1;
|
||||
}
|
||||
|
||||
private void sendNotification(Dataset dataset, DMP dmp, UserInfo user) {
|
||||
private void sendNotification(Dataset dataset, DMP dmp, UserInfo user, NotificationType notificationType) {
|
||||
List<UserDMP> userDMPS = databaseRepository.getUserDmpDao().asQueryable().where(((builder, root) -> builder.equal(root.get("dmp").get("id"), dmp.getId()))).toList();
|
||||
for (UserDMP userDMP : userDMPS) {
|
||||
if (!userDMP.getUser().getId().equals(user.getId())) {
|
||||
Notification notification = new Notification();
|
||||
notification.setUserId(user);
|
||||
notification.setType(NotificationType.DATASET_MODIFIED);
|
||||
notification.setType(notificationType);
|
||||
notification.setNotifyState(NotifyState.PENDING);
|
||||
notification.setIsActive(ActiveStatus.ACTIVE);
|
||||
notification.setData("{" +
|
||||
"\"userId\": \"" + userDMP.getUser().getId() + "\"" +
|
||||
", \"id\": \"" + dataset.getId() + "\"" +
|
||||
", \"name\": \"" + dataset.getLabel() + "\"" +
|
||||
", \"path\": \"/datasets/edit\"" +
|
||||
", \"path\": \"" + notificationPaths.get(notificationType) + "\"" +
|
||||
"}");
|
||||
notification.setCreatedAt(new Date());
|
||||
notification.setUpdatedAt(notification.getCreatedAt());
|
||||
|
|
|
@ -64,9 +64,22 @@ public class NotificationManager {
|
|||
switch (notification.getType()) {
|
||||
case DMP_MODIFIED:
|
||||
case DATASET_MODIFIED:
|
||||
subjectTemplate = this.environment.getProperty("mail.modified.notification.subject");
|
||||
subjectTemplate = this.environment.getProperty("notification.modified.subject");
|
||||
contentTemplate = mailService.getMailTemplateContent("classpath:modifiedNotification.html");
|
||||
break;
|
||||
case DMP_PUBLISH:
|
||||
subjectTemplate = this.environment.getProperty("notification.publish.subject");
|
||||
contentTemplate = mailService.getMailTemplateContent("classpath:publishNotification.html");
|
||||
break;
|
||||
case DMP_FINALISED:
|
||||
subjectTemplate = this.environment.getProperty("notification.finalised.subject");
|
||||
contentTemplate = mailService.getMailTemplateContent("classpath:finalisedNotification.html");
|
||||
break;
|
||||
case DMP_MODIFIED_FINALISED:
|
||||
case DATASET_MODIFIED_FINALISED:
|
||||
subjectTemplate = this.environment.getProperty("notification.modifiedFinalised.subject");
|
||||
contentTemplate = mailService.getMailTemplateContent("classpath:modifiedFinalisedNotification.html");
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
|
@ -108,11 +121,11 @@ public class NotificationManager {
|
|||
private String makeContent(Map<String, String> data, Notification notification, UserInfo userInfo, String template) {
|
||||
String content = template;
|
||||
content = content.replace("{recipient}", userInfo.getName());
|
||||
content = content.replace("{id}", data.get("id"));
|
||||
content = content.replace("{name}", data.get("name"));
|
||||
for (String key : data.keySet()) {
|
||||
content = content.replace("{" + key +"}", data.get(key));
|
||||
}
|
||||
content = content.replace("{host}", this.environment.getProperty("dmp.domain"));
|
||||
content = content.replace("{reasonName}", notification.getUserId().getName());
|
||||
content = content.replace("{path}", data.get("path"));
|
||||
return content;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,7 +9,6 @@ eu.eudat.logic.proxy.allowed.host=https://eestore.paas2.uninett.no
|
|||
####################GENERIC MAIL CONFIGURATIONS#################
|
||||
mail.subject=Invitation to DMP Plan {dmpname}
|
||||
mail.from=TheApp@dev.cite.gr
|
||||
mail.modified.notification.subject=[OpenDMP] The {name} has been modified
|
||||
|
||||
####################SPRING MAIL CONFIGURATIONS#################
|
||||
spring.mail.default-encoding=UTF-8
|
||||
|
@ -78,7 +77,14 @@ http-logger.delay = 10
|
|||
database.driver-class-name=org.postgresql.Driver
|
||||
database.lock-fail-interval=120000
|
||||
|
||||
##########################MISC##########################################
|
||||
#############USER GUIDE#########
|
||||
userguide.path=guide/
|
||||
|
||||
#############NOTIFICATION#########
|
||||
notification.rateInterval=30000
|
||||
notification.maxRetries=10
|
||||
notification.modified.subject=[OpenDMP] The {name} has been modified
|
||||
notification.publish.subject=[OpenDMP] The {name} has been published
|
||||
notification.finalised.subject=[OpenDMP] The {name} has been finalised
|
||||
notification.modifiedFinalised.subject=[OpenDMP] The {name} has been modified and finalised
|
||||
|
|
|
@ -0,0 +1,304 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Simple Transactional Email</title>
|
||||
<style>
|
||||
/* -------------------------------------
|
||||
GLOBAL RESETS
|
||||
------------------------------------- */
|
||||
img {
|
||||
border: none;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
max-width: 100%; }
|
||||
body {
|
||||
background-color: #f6f6f6;
|
||||
font-family: sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%; }
|
||||
table {
|
||||
border-collapse: separate;
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
width: 100%; }
|
||||
table td {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
vertical-align: top; }
|
||||
/* -------------------------------------
|
||||
BODY & CONTAINER
|
||||
------------------------------------- */
|
||||
.body {
|
||||
background-color: #f6f6f6;
|
||||
width: 100%; }
|
||||
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
|
||||
.container {
|
||||
display: block;
|
||||
Margin: 0 auto !important;
|
||||
/* makes it centered */
|
||||
max-width: 580px;
|
||||
padding: 10px;
|
||||
width: 580px; }
|
||||
/* This should also be a block element, so that it will fill 100% of the .container */
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
Margin: 0 auto;
|
||||
max-width: 580px;
|
||||
padding: 10px; }
|
||||
/* -------------------------------------
|
||||
HEADER, FOOTER, MAIN
|
||||
------------------------------------- */
|
||||
.main {
|
||||
background: #ffffff;
|
||||
border-radius: 3px;
|
||||
width: 100%; }
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
padding: 20px; }
|
||||
.content-block {
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.footer {
|
||||
clear: both;
|
||||
Margin-top: 10px;
|
||||
text-align: center;
|
||||
width: 100%; }
|
||||
.footer td,
|
||||
.footer p,
|
||||
.footer span,
|
||||
.footer a {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
text-align: center; }
|
||||
/* -------------------------------------
|
||||
TYPOGRAPHY
|
||||
------------------------------------- */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: #000000;
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
Margin-bottom: 30px; }
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
text-transform: capitalize; }
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
Margin-bottom: 15px; }
|
||||
p li,
|
||||
ul li,
|
||||
ol li {
|
||||
list-style-position: inside;
|
||||
margin-left: 5px; }
|
||||
a {
|
||||
color: #3498db;
|
||||
text-decoration: underline; }
|
||||
/* -------------------------------------
|
||||
BUTTONS
|
||||
------------------------------------- */
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
width: 100%; }
|
||||
.btn > tbody > tr > td {
|
||||
padding-bottom: 15px; }
|
||||
.btn table {
|
||||
width: auto; }
|
||||
.btn table td {
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
text-align: center; }
|
||||
.btn a {
|
||||
background-color: #ffffff;
|
||||
border: solid 1px #3498db;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 12px 25px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize; }
|
||||
.btn-primary table td {
|
||||
background-color: #3498db; }
|
||||
.btn-primary a {
|
||||
background-color: #3498db;
|
||||
border-color: #3498db;
|
||||
color: #ffffff; }
|
||||
/* -------------------------------------
|
||||
OTHER STYLES THAT MIGHT BE USEFUL
|
||||
------------------------------------- */
|
||||
.last {
|
||||
margin-bottom: 0; }
|
||||
.first {
|
||||
margin-top: 0; }
|
||||
.align-center {
|
||||
text-align: center; }
|
||||
.align-right {
|
||||
text-align: right; }
|
||||
.align-left {
|
||||
text-align: left; }
|
||||
.clear {
|
||||
clear: both; }
|
||||
.mt0 {
|
||||
margin-top: 0; }
|
||||
.mb0 {
|
||||
margin-bottom: 0; }
|
||||
.preheader {
|
||||
color: transparent;
|
||||
display: none;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
mso-hide: all;
|
||||
visibility: hidden;
|
||||
width: 0; }
|
||||
.powered-by a {
|
||||
text-decoration: none; }
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
Margin: 20px 0; }
|
||||
/* -------------------------------------
|
||||
RESPONSIVE AND MOBILE FRIENDLY STYLES
|
||||
------------------------------------- */
|
||||
@media only screen and (max-width: 620px) {
|
||||
table[class=body] h1 {
|
||||
font-size: 28px !important;
|
||||
margin-bottom: 10px !important; }
|
||||
table[class=body] p,
|
||||
table[class=body] ul,
|
||||
table[class=body] ol,
|
||||
table[class=body] td,
|
||||
table[class=body] span,
|
||||
table[class=body] a {
|
||||
font-size: 16px !important; }
|
||||
table[class=body] .wrapper,
|
||||
table[class=body] .article {
|
||||
padding: 10px !important; }
|
||||
table[class=body] .content {
|
||||
padding: 0 !important; }
|
||||
table[class=body] .container {
|
||||
padding: 0 !important;
|
||||
width: 100% !important; }
|
||||
table[class=body] .main {
|
||||
border-left-width: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
border-right-width: 0 !important; }
|
||||
table[class=body] .btn table {
|
||||
width: 100% !important; }
|
||||
table[class=body] .btn a {
|
||||
width: 100% !important; }
|
||||
table[class=body] .img-responsive {
|
||||
height: auto !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important; }}
|
||||
/* -------------------------------------
|
||||
PRESERVE THESE STYLES IN THE HEAD
|
||||
------------------------------------- */
|
||||
@media all {
|
||||
.ExternalClass {
|
||||
width: 100%; }
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%; }
|
||||
.apple-link a {
|
||||
color: inherit !important;
|
||||
font-family: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
line-height: inherit !important;
|
||||
text-decoration: none !important; }
|
||||
.btn-primary table td:hover {
|
||||
background-color: #34495e !important; }
|
||||
.btn-primary a:hover {
|
||||
background-color: #34495e !important;
|
||||
border-color: #34495e !important; } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="">
|
||||
<table border="0" cellpadding="0" cellspacing="0" class="body">
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td class="container">
|
||||
<div class="content">
|
||||
|
||||
<!-- START CENTERED WHITE CONTAINER -->
|
||||
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
|
||||
<table class="main">
|
||||
|
||||
<!-- START MAIN CONTENT AREA -->
|
||||
<tr>
|
||||
<td class="wrapper">
|
||||
<table border="0" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td>
|
||||
<p>Dear {recipient},</p>
|
||||
<p>{reasonName} just finalised the {name}.</p>
|
||||
|
||||
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="left">
|
||||
<table border="0" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> <a href="{host}{path}/{id}" target="_blank">Click here to view it.</a> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- END MAIN CONTENT AREA -->
|
||||
</table>
|
||||
|
||||
<!-- START FOOTER -->
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
<!-- END FOOTER -->
|
||||
|
||||
<!-- END CENTERED WHITE CONTAINER -->
|
||||
</div>
|
||||
</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,304 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Simple Transactional Email</title>
|
||||
<style>
|
||||
/* -------------------------------------
|
||||
GLOBAL RESETS
|
||||
------------------------------------- */
|
||||
img {
|
||||
border: none;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
max-width: 100%; }
|
||||
body {
|
||||
background-color: #f6f6f6;
|
||||
font-family: sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%; }
|
||||
table {
|
||||
border-collapse: separate;
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
width: 100%; }
|
||||
table td {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
vertical-align: top; }
|
||||
/* -------------------------------------
|
||||
BODY & CONTAINER
|
||||
------------------------------------- */
|
||||
.body {
|
||||
background-color: #f6f6f6;
|
||||
width: 100%; }
|
||||
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
|
||||
.container {
|
||||
display: block;
|
||||
Margin: 0 auto !important;
|
||||
/* makes it centered */
|
||||
max-width: 580px;
|
||||
padding: 10px;
|
||||
width: 580px; }
|
||||
/* This should also be a block element, so that it will fill 100% of the .container */
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
Margin: 0 auto;
|
||||
max-width: 580px;
|
||||
padding: 10px; }
|
||||
/* -------------------------------------
|
||||
HEADER, FOOTER, MAIN
|
||||
------------------------------------- */
|
||||
.main {
|
||||
background: #ffffff;
|
||||
border-radius: 3px;
|
||||
width: 100%; }
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
padding: 20px; }
|
||||
.content-block {
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.footer {
|
||||
clear: both;
|
||||
Margin-top: 10px;
|
||||
text-align: center;
|
||||
width: 100%; }
|
||||
.footer td,
|
||||
.footer p,
|
||||
.footer span,
|
||||
.footer a {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
text-align: center; }
|
||||
/* -------------------------------------
|
||||
TYPOGRAPHY
|
||||
------------------------------------- */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: #000000;
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
Margin-bottom: 30px; }
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
text-transform: capitalize; }
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
Margin-bottom: 15px; }
|
||||
p li,
|
||||
ul li,
|
||||
ol li {
|
||||
list-style-position: inside;
|
||||
margin-left: 5px; }
|
||||
a {
|
||||
color: #3498db;
|
||||
text-decoration: underline; }
|
||||
/* -------------------------------------
|
||||
BUTTONS
|
||||
------------------------------------- */
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
width: 100%; }
|
||||
.btn > tbody > tr > td {
|
||||
padding-bottom: 15px; }
|
||||
.btn table {
|
||||
width: auto; }
|
||||
.btn table td {
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
text-align: center; }
|
||||
.btn a {
|
||||
background-color: #ffffff;
|
||||
border: solid 1px #3498db;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 12px 25px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize; }
|
||||
.btn-primary table td {
|
||||
background-color: #3498db; }
|
||||
.btn-primary a {
|
||||
background-color: #3498db;
|
||||
border-color: #3498db;
|
||||
color: #ffffff; }
|
||||
/* -------------------------------------
|
||||
OTHER STYLES THAT MIGHT BE USEFUL
|
||||
------------------------------------- */
|
||||
.last {
|
||||
margin-bottom: 0; }
|
||||
.first {
|
||||
margin-top: 0; }
|
||||
.align-center {
|
||||
text-align: center; }
|
||||
.align-right {
|
||||
text-align: right; }
|
||||
.align-left {
|
||||
text-align: left; }
|
||||
.clear {
|
||||
clear: both; }
|
||||
.mt0 {
|
||||
margin-top: 0; }
|
||||
.mb0 {
|
||||
margin-bottom: 0; }
|
||||
.preheader {
|
||||
color: transparent;
|
||||
display: none;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
mso-hide: all;
|
||||
visibility: hidden;
|
||||
width: 0; }
|
||||
.powered-by a {
|
||||
text-decoration: none; }
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
Margin: 20px 0; }
|
||||
/* -------------------------------------
|
||||
RESPONSIVE AND MOBILE FRIENDLY STYLES
|
||||
------------------------------------- */
|
||||
@media only screen and (max-width: 620px) {
|
||||
table[class=body] h1 {
|
||||
font-size: 28px !important;
|
||||
margin-bottom: 10px !important; }
|
||||
table[class=body] p,
|
||||
table[class=body] ul,
|
||||
table[class=body] ol,
|
||||
table[class=body] td,
|
||||
table[class=body] span,
|
||||
table[class=body] a {
|
||||
font-size: 16px !important; }
|
||||
table[class=body] .wrapper,
|
||||
table[class=body] .article {
|
||||
padding: 10px !important; }
|
||||
table[class=body] .content {
|
||||
padding: 0 !important; }
|
||||
table[class=body] .container {
|
||||
padding: 0 !important;
|
||||
width: 100% !important; }
|
||||
table[class=body] .main {
|
||||
border-left-width: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
border-right-width: 0 !important; }
|
||||
table[class=body] .btn table {
|
||||
width: 100% !important; }
|
||||
table[class=body] .btn a {
|
||||
width: 100% !important; }
|
||||
table[class=body] .img-responsive {
|
||||
height: auto !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important; }}
|
||||
/* -------------------------------------
|
||||
PRESERVE THESE STYLES IN THE HEAD
|
||||
------------------------------------- */
|
||||
@media all {
|
||||
.ExternalClass {
|
||||
width: 100%; }
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%; }
|
||||
.apple-link a {
|
||||
color: inherit !important;
|
||||
font-family: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
line-height: inherit !important;
|
||||
text-decoration: none !important; }
|
||||
.btn-primary table td:hover {
|
||||
background-color: #34495e !important; }
|
||||
.btn-primary a:hover {
|
||||
background-color: #34495e !important;
|
||||
border-color: #34495e !important; } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="">
|
||||
<table border="0" cellpadding="0" cellspacing="0" class="body">
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td class="container">
|
||||
<div class="content">
|
||||
|
||||
<!-- START CENTERED WHITE CONTAINER -->
|
||||
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
|
||||
<table class="main">
|
||||
|
||||
<!-- START MAIN CONTENT AREA -->
|
||||
<tr>
|
||||
<td class="wrapper">
|
||||
<table border="0" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td>
|
||||
<p>Dear {recipient},</p>
|
||||
<p>{reasonName} just made changes and finalised the {name}.</p>
|
||||
|
||||
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="left">
|
||||
<table border="0" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> <a href="{host}{path}/{id}" target="_blank">Click here to view it.</a> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- END MAIN CONTENT AREA -->
|
||||
</table>
|
||||
|
||||
<!-- START FOOTER -->
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
<!-- END FOOTER -->
|
||||
|
||||
<!-- END CENTERED WHITE CONTAINER -->
|
||||
</div>
|
||||
</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,304 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<title>Simple Transactional Email</title>
|
||||
<style>
|
||||
/* -------------------------------------
|
||||
GLOBAL RESETS
|
||||
------------------------------------- */
|
||||
img {
|
||||
border: none;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
max-width: 100%; }
|
||||
body {
|
||||
background-color: #f6f6f6;
|
||||
font-family: sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%; }
|
||||
table {
|
||||
border-collapse: separate;
|
||||
mso-table-lspace: 0pt;
|
||||
mso-table-rspace: 0pt;
|
||||
width: 100%; }
|
||||
table td {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
vertical-align: top; }
|
||||
/* -------------------------------------
|
||||
BODY & CONTAINER
|
||||
------------------------------------- */
|
||||
.body {
|
||||
background-color: #f6f6f6;
|
||||
width: 100%; }
|
||||
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
|
||||
.container {
|
||||
display: block;
|
||||
Margin: 0 auto !important;
|
||||
/* makes it centered */
|
||||
max-width: 580px;
|
||||
padding: 10px;
|
||||
width: 580px; }
|
||||
/* This should also be a block element, so that it will fill 100% of the .container */
|
||||
.content {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
Margin: 0 auto;
|
||||
max-width: 580px;
|
||||
padding: 10px; }
|
||||
/* -------------------------------------
|
||||
HEADER, FOOTER, MAIN
|
||||
------------------------------------- */
|
||||
.main {
|
||||
background: #ffffff;
|
||||
border-radius: 3px;
|
||||
width: 100%; }
|
||||
.wrapper {
|
||||
box-sizing: border-box;
|
||||
padding: 20px; }
|
||||
.content-block {
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.footer {
|
||||
clear: both;
|
||||
Margin-top: 10px;
|
||||
text-align: center;
|
||||
width: 100%; }
|
||||
.footer td,
|
||||
.footer p,
|
||||
.footer span,
|
||||
.footer a {
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
text-align: center; }
|
||||
/* -------------------------------------
|
||||
TYPOGRAPHY
|
||||
------------------------------------- */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: #000000;
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
Margin-bottom: 30px; }
|
||||
h1 {
|
||||
font-size: 35px;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
text-transform: capitalize; }
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
font-family: sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
Margin-bottom: 15px; }
|
||||
p li,
|
||||
ul li,
|
||||
ol li {
|
||||
list-style-position: inside;
|
||||
margin-left: 5px; }
|
||||
a {
|
||||
color: #3498db;
|
||||
text-decoration: underline; }
|
||||
/* -------------------------------------
|
||||
BUTTONS
|
||||
------------------------------------- */
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
width: 100%; }
|
||||
.btn > tbody > tr > td {
|
||||
padding-bottom: 15px; }
|
||||
.btn table {
|
||||
width: auto; }
|
||||
.btn table td {
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
text-align: center; }
|
||||
.btn a {
|
||||
background-color: #ffffff;
|
||||
border: solid 1px #3498db;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
color: #3498db;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 12px 25px;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize; }
|
||||
.btn-primary table td {
|
||||
background-color: #3498db; }
|
||||
.btn-primary a {
|
||||
background-color: #3498db;
|
||||
border-color: #3498db;
|
||||
color: #ffffff; }
|
||||
/* -------------------------------------
|
||||
OTHER STYLES THAT MIGHT BE USEFUL
|
||||
------------------------------------- */
|
||||
.last {
|
||||
margin-bottom: 0; }
|
||||
.first {
|
||||
margin-top: 0; }
|
||||
.align-center {
|
||||
text-align: center; }
|
||||
.align-right {
|
||||
text-align: right; }
|
||||
.align-left {
|
||||
text-align: left; }
|
||||
.clear {
|
||||
clear: both; }
|
||||
.mt0 {
|
||||
margin-top: 0; }
|
||||
.mb0 {
|
||||
margin-bottom: 0; }
|
||||
.preheader {
|
||||
color: transparent;
|
||||
display: none;
|
||||
height: 0;
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
mso-hide: all;
|
||||
visibility: hidden;
|
||||
width: 0; }
|
||||
.powered-by a {
|
||||
text-decoration: none; }
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
Margin: 20px 0; }
|
||||
/* -------------------------------------
|
||||
RESPONSIVE AND MOBILE FRIENDLY STYLES
|
||||
------------------------------------- */
|
||||
@media only screen and (max-width: 620px) {
|
||||
table[class=body] h1 {
|
||||
font-size: 28px !important;
|
||||
margin-bottom: 10px !important; }
|
||||
table[class=body] p,
|
||||
table[class=body] ul,
|
||||
table[class=body] ol,
|
||||
table[class=body] td,
|
||||
table[class=body] span,
|
||||
table[class=body] a {
|
||||
font-size: 16px !important; }
|
||||
table[class=body] .wrapper,
|
||||
table[class=body] .article {
|
||||
padding: 10px !important; }
|
||||
table[class=body] .content {
|
||||
padding: 0 !important; }
|
||||
table[class=body] .container {
|
||||
padding: 0 !important;
|
||||
width: 100% !important; }
|
||||
table[class=body] .main {
|
||||
border-left-width: 0 !important;
|
||||
border-radius: 0 !important;
|
||||
border-right-width: 0 !important; }
|
||||
table[class=body] .btn table {
|
||||
width: 100% !important; }
|
||||
table[class=body] .btn a {
|
||||
width: 100% !important; }
|
||||
table[class=body] .img-responsive {
|
||||
height: auto !important;
|
||||
max-width: 100% !important;
|
||||
width: auto !important; }}
|
||||
/* -------------------------------------
|
||||
PRESERVE THESE STYLES IN THE HEAD
|
||||
------------------------------------- */
|
||||
@media all {
|
||||
.ExternalClass {
|
||||
width: 100%; }
|
||||
.ExternalClass,
|
||||
.ExternalClass p,
|
||||
.ExternalClass span,
|
||||
.ExternalClass font,
|
||||
.ExternalClass td,
|
||||
.ExternalClass div {
|
||||
line-height: 100%; }
|
||||
.apple-link a {
|
||||
color: inherit !important;
|
||||
font-family: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
line-height: inherit !important;
|
||||
text-decoration: none !important; }
|
||||
.btn-primary table td:hover {
|
||||
background-color: #34495e !important; }
|
||||
.btn-primary a:hover {
|
||||
background-color: #34495e !important;
|
||||
border-color: #34495e !important; } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="">
|
||||
<table border="0" cellpadding="0" cellspacing="0" class="body">
|
||||
<tr>
|
||||
<td> </td>
|
||||
<td class="container">
|
||||
<div class="content">
|
||||
|
||||
<!-- START CENTERED WHITE CONTAINER -->
|
||||
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span>
|
||||
<table class="main">
|
||||
|
||||
<!-- START MAIN CONTENT AREA -->
|
||||
<tr>
|
||||
<td class="wrapper">
|
||||
<table border="0" cellpadding="0" cellspacing="0">
|
||||
<tr>
|
||||
<td>
|
||||
<p>Dear {recipient},</p>
|
||||
<p>{reasonName} just publish the {name}.</p>
|
||||
|
||||
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="left">
|
||||
<table border="0" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td> <a href="{host}{path}/{id}" target="_blank">Click here to view it.</a> </td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- END MAIN CONTENT AREA -->
|
||||
</table>
|
||||
|
||||
<!-- START FOOTER -->
|
||||
<div class="footer">
|
||||
|
||||
</div>
|
||||
<!-- END FOOTER -->
|
||||
|
||||
<!-- END CENTERED WHITE CONTAINER -->
|
||||
</div>
|
||||
</td>
|
||||
<td> </td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue