[MM-37730] - Self-managed: Update email template to new branding - Batch Email (#18221)

* [MM-37730] - Self-managed: Update email template to new branding - Batch Email

* batch email fixes

* simplify email title

* More fixes

* fix tests

* fix group message name on card

* fix bracket issue

* style the count

* account for  merged changes

* change truncating rule
Этот коммит содержится в:
Allan Guwatudde
2021-09-16 22:08:31 +03:00
коммит произвёл GitHub
родитель acec8db7c5
Коммит ad5591cf75
6 изменённых файлов: 108 добавлений и 51 удалений

Просмотреть файл

@@ -71,9 +71,9 @@
max-width: 100%;
}
.mj-column-per-50 {
width: 50% !important;
max-width: 50%;
.mj-column-per-33-333333333333336 {
width: 33.333333333333336% !important;
max-width: 33.333333333333336%;
}
.mj-column-per-90 {
@@ -88,9 +88,9 @@
max-width: 100%;
}
.moz-text-html .mj-column-per-50 {
width: 50% !important;
max-width: 50%;
.moz-text-html .mj-column-per-33-333333333333336 {
width: 33.333333333333336% !important;
max-width: 33.333333333333336%;
}
.moz-text-html .mj-column-per-90 {
@@ -255,6 +255,7 @@
background: rgba(63, 67, 80, 0.08);
border-radius: 4px;
display: flex;
padding-left: 4px;
}
.channelLogo {
@@ -275,6 +276,13 @@
padding: 2px 6px 2px 0px;
}
.gmChannelCount {
background-color: rgba(63, 67, 80, 0.2);
padding: 0 5px;
border-radius: 2px;
margin-right: 2px;
}
.senderMessage div {
text-align: left !important;
font-size: 14px !important;
@@ -427,8 +435,8 @@
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="width:552px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0;line-height:0;text-align:left;display:inline-block;width:100%;direction:ltr;">
<!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:276px;" ><![endif]-->
<div class="mj-column-per-50 mj-outlook-group-fix messageAvatarCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:50%;">
<!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td style="vertical-align:top;width:184px;" ><![endif]-->
<div class="mj-column-per-33-333333333333336 mj-outlook-group-fix messageAvatarCol" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:33%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
<tr>
@@ -436,8 +444,8 @@
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:276px;">
<img alt="" height="auto" src="cid:{{.SenderPhoto}}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="276" />
<td style="width:184px;">
<img alt="" height="auto" src="cid:{{.SenderPhoto}}" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="184" />
</td>
</tr>
</tbody>
@@ -460,8 +468,15 @@
{{end}}
{{if .ChannelName}}
<div class="channelBg">
{{if .ShowChannelIcon}}
<div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
<div class="channelName">{{.ChannelName}}</div>
{{end}}
<div class="channelName">
{{if .OtherChannelMembersCount}}
<span class="gmChannelCount">{{.OtherChannelMembersCount}}</span>
{{end}}
{{.ChannelName}}
</div>
</div>
{{end}}
</div>
@@ -472,6 +487,13 @@
<div style="font-family:Open Sans, sans-serif;font-size:13px;line-height:1;text-align:center;color:#000000;">{{.Message}}</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td><td style="vertical-align:top;width:552px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tbody>
{{if .MessageURL}}
<tr>
<td align="center" vertical-align="middle" class="messageButton" style="font-size:0px;padding:16px 0px 0px 0px;word-break:break-word;">

Просмотреть файл

@@ -14,8 +14,15 @@
{{end}}
{{if .ChannelName}}
<div class="channelBg">
<div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
<div class="channelName">{{.ChannelName}}</div>
{{if .ShowChannelIcon}}
<div class="channelLogo"><img src="{{$.Props.SiteURL}}/static/images/channel_icon.png" width=10px height=10px></img></div>
{{end}}
<div class="channelName">
{{if .OtherChannelMembersCount}}
<span class="gmChannelCount">{{.OtherChannelMembersCount}}</span>
{{end}}
{{.ChannelName}}
</div>
</div>
{{end}}
</div>
@@ -25,6 +32,8 @@
<mj-text css-class="senderMessage" padding="0px">
{{.Message}}
</mj-text>
</mj-column>
<mj-column width=100%>
<mj-raw>{{if .MessageURL}}</mj-raw>
<mj-button href="{{.MessageURL}}" padding="16px 0px 0px 0px" css-class="messageButton">{{$.Props.MessageButton}}</mj-button>
<mj-raw>{{end}}</mj-raw>

Просмотреть файл

@@ -152,6 +152,7 @@
background: rgba(63, 67, 80, 0.08);
border-radius: 4px;
display: flex;
padding-left: 4px;
}
.channelLogo {
@@ -171,6 +172,13 @@
color: rgba(63, 67, 80, 0.64);
padding: 2px 6px 2px 0px;
}
.gmChannelCount {
background-color: rgba(63, 67, 80, 0.2);
padding: 0 5px;
border-radius: 2px;
margin-right: 2px;
}
.senderMessage div {
text-align: left !important;