[GH-15906][MM-22844] Redesign message notification emails. (#17184)
* Redesign message notification emails. * Fix tests and linter. * Fix tests * Fix tests * gofmt. * Fix date separator * Update html files * Remove date for message notification email. * Modify subtitle for mentions and direct and group messages. * Fix lint error * Fix DM subtitle. * Fixing translations Co-authored-by: Mattermod <mattermod@users.noreply.github.com> Co-authored-by: Jesús Espino <jespinog@gmail.com>
Этот коммит содержится в:
Jyoti Patel
@@ -1,15 +1,33 @@
|
||||
<mj-section css-class="messageCard" padding="0px">
|
||||
<mj-group>
|
||||
<mj-column css-class="messageAvatarCol">
|
||||
<mj-image css-class="messageAvatar" src="cid:user-avatar.png" padding="0px" />
|
||||
<mj-image css-class="messageAvatar" src="cid:{{.SenderPhoto}}" padding="0px" />
|
||||
</mj-column>
|
||||
<mj-column css-class="senderInfoCol" width=90% >
|
||||
<mj-text css-class="senderName" padding="0px">
|
||||
{{.Props.SenderName}}
|
||||
</mj-text>
|
||||
<mj-raw>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="postNameAndTime">
|
||||
<div class="senderName">{{.SenderName}}</div>
|
||||
{{if .Time}}
|
||||
<div class="time">{{.Time}}</div>
|
||||
{{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>
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</mj-raw>
|
||||
<mj-text css-class="senderMessage" padding="0px">
|
||||
{{.Props.Message}}
|
||||
{{.Message}}
|
||||
</mj-text>
|
||||
<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>
|
||||
</mj-column>
|
||||
</mj-group>
|
||||
</mj-section>
|
||||
</mj-section>
|
||||
|
||||
@@ -11,168 +11,217 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700);
|
||||
|
||||
.emailBody {
|
||||
background:#F3F3F3 !important;
|
||||
background: #F3F3F3 !important;
|
||||
}
|
||||
|
||||
.emailBody a{
|
||||
text-decoration:none !important;
|
||||
color:#166DE0 !important;
|
||||
text-decoration: none !important;
|
||||
color: #166DE0 !important;
|
||||
}
|
||||
|
||||
.title div {
|
||||
font-weight:600 !important;
|
||||
font-size:28px !important;
|
||||
line-height:36px !important;
|
||||
letter-spacing:-0.02em !important;
|
||||
color:#3D3C40 !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 28px !important;
|
||||
line-height: 36px !important;
|
||||
letter-spacing: -0.01em !important;
|
||||
color: #3D3C40 !important;
|
||||
}
|
||||
|
||||
.subTitle div {
|
||||
font-size:16px !important;
|
||||
line-height:24px !important;
|
||||
color:rgba(61, 60, 64, 0.64) !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 24px !important;
|
||||
color: rgba(61, 60, 64, 0.64) !important;
|
||||
}
|
||||
|
||||
.button a {
|
||||
background-color:#166DE0 !important;
|
||||
font-weight:600 !important;
|
||||
font-size:16px !important;
|
||||
line-height:18px !important;
|
||||
color:#FFFFFF !important;
|
||||
padding:15px 24px !important;
|
||||
background-color: #166DE0 !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 18px !important;
|
||||
color: #FFFFFF !important;
|
||||
padding: 15px 24px !important;
|
||||
}
|
||||
|
||||
.messageButton a{
|
||||
background-color: #FFFFFF !important;
|
||||
border: 1px solid #FFFFFF !important;
|
||||
box-sizing: border-box !important;
|
||||
color: #166DE0 !important;
|
||||
padding: 12px 20px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 14px !important;
|
||||
}
|
||||
|
||||
.info div {
|
||||
font-size:14px !important;
|
||||
line-height:20px !important;
|
||||
color:#3D3C40 !important;
|
||||
padding:40px 0px !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 20px !important;
|
||||
color: #3D3C40 !important;
|
||||
padding: 40px 0px !important;
|
||||
}
|
||||
|
||||
.footerTitle div {
|
||||
font-weight:600 !important;
|
||||
font-size:16px !important;
|
||||
line-height:24px !important;
|
||||
color:#3D3C40 !important;
|
||||
padding:0px 0px 4px 0px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 16px !important;
|
||||
line-height: 24px !important;
|
||||
color: #3D3C40 !important;
|
||||
padding: 0px 0px 4px 0px !important;
|
||||
}
|
||||
|
||||
.footerInfo div {
|
||||
font-size:14px !important;
|
||||
line-height:20px !important;
|
||||
color:#3D3C40 !important;
|
||||
padding:0px 48px 0px 48px !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 20px !important;
|
||||
color: #3D3C40 !important;
|
||||
padding: 0px 48px 0px 48px !important;
|
||||
}
|
||||
|
||||
.footerInfo a {
|
||||
color:#166DE0 !important;
|
||||
color: #166DE0 !important;
|
||||
}
|
||||
|
||||
.appDownloadButton a{
|
||||
background-color:#FFFFFF !important;
|
||||
border:1px solid #166DE0 !important;
|
||||
background-color: #FFFFFF !important;
|
||||
border: 1px solid #166DE0 !important;
|
||||
box-sizing: border-box !important;
|
||||
color:#166DE0 !important;
|
||||
padding:13px 20px !important;
|
||||
font-weight:600 !important;
|
||||
font-size:14px !important;
|
||||
line-height:14px !important;
|
||||
color: #166DE0 !important;
|
||||
padding: 13px 20px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 14px !important;
|
||||
}
|
||||
|
||||
.emailFooter div {
|
||||
font-size:12px !important;
|
||||
line-height:16px !important;
|
||||
color:rgba(61, 60, 64, 0.56) !important;
|
||||
padding:8px 24px 8px 24px !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 16px !important;
|
||||
color: rgba(61, 60, 64, 0.56) !important;
|
||||
padding: 8px 24px 8px 24px !important;
|
||||
}
|
||||
|
||||
.postCard {
|
||||
padding:0px 24px 40px 24px !important;
|
||||
padding: 0px 24px 40px 24px !important;
|
||||
}
|
||||
|
||||
.messageCard {
|
||||
background:#FFFFFF !important;
|
||||
border:1px solid rgba(61, 60, 64, 0.08) !important;
|
||||
box-sizing:border-box !important;
|
||||
box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12) !important;
|
||||
border-radius:4px !important;
|
||||
padding:32px !important;
|
||||
background: #FFFFFF !important;
|
||||
border: 1px solid rgba(61, 60, 64, 0.08) !important;
|
||||
box-sizing: border-box !important;
|
||||
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12) !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 32px !important;
|
||||
}
|
||||
|
||||
.messageAvatar img {
|
||||
width:32px !important;
|
||||
height:32px !important;
|
||||
padding:0px !important;
|
||||
border-radius:32px !important;
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
padding: 0px !important;
|
||||
border-radius: 32px !important;
|
||||
}
|
||||
|
||||
.messageAvatarCol {
|
||||
width:32px !important;
|
||||
width: 32px !important;
|
||||
}
|
||||
|
||||
.senderName div {
|
||||
text-align:left !important;
|
||||
font-weight:600 !important;
|
||||
font-size:14px !important;
|
||||
line-height:20px !important;
|
||||
color:#3D3C40 !important;
|
||||
padding:0px 0px 4px 0px !important;
|
||||
.postNameAndTime {
|
||||
padding: 0px 0px 4px 0px !important;
|
||||
display: flex;
|
||||
}
|
||||
.senderName {
|
||||
font-family: Open Sans, sans-serif;
|
||||
text-align: left !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 20px !important;
|
||||
color: #3D3C40 !important;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: rgba(61, 60, 64, 0.56);
|
||||
padding: 2px 6px;
|
||||
align-items: center;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.channelBg {
|
||||
background: rgba(61, 60, 64, 0.08);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.channelLogo {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding: 5px 4px 5px 6px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.channelName {
|
||||
font-family: Open Sans, sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(61, 60, 64, 0.64);
|
||||
padding: 2px 6px 2px 0px;
|
||||
}
|
||||
|
||||
.senderMessage div {
|
||||
text-align:left !important;
|
||||
font-size:14px !important;
|
||||
line-height:20px !important;
|
||||
color:#3D3C40 !important;
|
||||
padding:0px !important;
|
||||
text-align: left !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 20px !important;
|
||||
color: #3D3C40 !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.senderInfoCol {
|
||||
width:394px !important;
|
||||
padding:0px 0px 0px 12px !important;
|
||||
width: 394px !important;
|
||||
padding: 0px 0px 0px 12px !important;
|
||||
}
|
||||
|
||||
@media all and (min-width: 541px) {
|
||||
.emailBody {
|
||||
padding:32px !important;
|
||||
padding: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 540px) and (min-width: 401px) {
|
||||
.emailBody {
|
||||
padding:16px !important;
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.messageCard {
|
||||
padding:16px !important;
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.senderInfoCol {
|
||||
width:80% !important;
|
||||
padding:0px 0px 0px 12px !important;
|
||||
width: 80% !important;
|
||||
padding: 0px 0px 0px 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 400px) {
|
||||
.emailBody {
|
||||
padding:0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.footerInfo div {
|
||||
padding:0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.messageCard {
|
||||
padding:16px !important;
|
||||
padding: 16px !important;
|
||||
}
|
||||
|
||||
.postCard {
|
||||
padding:0px 0px 40px 0px !important;
|
||||
padding: 0px 0px 40px 0px !important;
|
||||
}
|
||||
|
||||
.senderInfoCol {
|
||||
width:80% !important;
|
||||
padding:0px 0px 0px 12px !important;
|
||||
width: 80% !important;
|
||||
padding: 0px 0px 0px 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Ссылка в новой задаче
Block a user