NotificationsYou must be signed in to change notification settings
Fork6.3k
Star52.6k

Refactor mail template and support preview#34990

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Jump to bottom

Merged

wxiaoguang merged 2 commits intogo-gitea:mainfromwxiaoguang:refactor-mail

Jul 9, 2025

Merged

Refactor mail template and support preview#34990

wxiaoguang merged 2 commits intogo-gitea:mainfromwxiaoguang:refactor-mail

Jul 9, 2025

Conversation

Copy link

Contributor

wxiaoguang commentedJul 8, 2025

No description provided.

GiteaBot added the lgtm/need 2This PR needs two approvals by maintainers to be considered for merging. label

Jul 8, 2025

github-actionsbot added modifies/go

Pull requests that update Go code

modifies/templatesThis PR modifies the template files labels

Jul 8, 2025

Copy link

ContributorAuthor

wxiaoguang commentedJul 8, 2025

wxiaoguang mentioned this pull request

Jul 8, 2025

Send email on Workflow Run Success/Failure#34982

Merged

fix

a3e7606

wxiaoguang force-pushed therefactor-mail branch from704b570 toa3e7606Compare

July 8, 2025 06:21

delvh approved these changes

Jul 8, 2025

View reviewed changes

GiteaBot added lgtm/need 1This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2This PR needs two approvals by maintainers to be considered for merging. labels

Jul 8, 2025

Copy link

Member

silverwind commentedJul 8, 2025•
edited
Loading

This preview does not look good in dark theme. We could either add CSS:root {color-scheme: light dark} to make the browser's preference work but better would be to derivecolor-scheme from the current theme's--is-dark-theme value.

Copy link

ContributorAuthor

wxiaoguang commentedJul 8, 2025

This preview does not look good in dark theme. We could either add CSS:root {color-scheme: light dark} to make the browser's preference work but better would be to derivecolor-scheme from the current theme's--is-dark-theme value.

No.

This is for "development" purpose only, no end users need it.
Email clients handle the styles by themselves.
It only renders pure email body, it has its own complete<html> struct, your suggestion won't work

Copy link

Member

silverwind commentedJul 8, 2025•
edited
Loading

E-Mail clients handle dark theme differently than browsers, they don't rely oncolor-scheme. I still suggest we setcolor-scheme to fix the browser rendering which apparently E-Mail clients automatically do. You could inject the CSS via JS into the iframe's<head>.

Copy link

ContributorAuthor

wxiaoguang commentedJul 8, 2025

E-Mail clients handle dark theme differently than browsers, they don't rely oncolor-scheme. I still suggest we setcolor-scheme to fix the browser rendering which apparently E-Mail clients automatically do. You could inject the CSS via JS into the iframe's<head>.

No, please fully read the code first, I do not think injecting anything else is right.

Copy link

Member

silverwind commentedJul 8, 2025

Well I don't mind this if it's dev only, the rendering is not really what a mail client would show in multiple regards not just color, font too.

Copy link

ContributorAuthor

wxiaoguang commentedJul 8, 2025

Well I don't mind this if it's dev only, the rendering is not really what a mail client would show in multiple regards not just color, font too.

Many clients even don't render<style>

wxiaoguang requested review fromhiifong,lunny andsilverwind

July 9, 2025 01:40

lunny approved these changes

Jul 9, 2025

View reviewed changes

GiteaBot added lgtm/doneThis PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1This PR needs approval from one additional maintainer to be merged. labels

Jul 9, 2025

Merge branch 'main' into refactor-mail

6eda2fc

Copy link

Member

hiifong commentedJul 9, 2025•
edited
Loading

This is the template I created with the email template design tool, I forget which tool it is!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xmlns:v="urn:schemas-microsoft-com:vml"xmlns:o="urn:schemas-microsoft-com:office:office"><head><!--[if gte mso 9]>  <xml>    <o:OfficeDocumentSettings>      <o:AllowPNG/>      <o:PixelsPerInch>96</o:PixelsPerInch>    </o:OfficeDocumentSettings>  </xml>  <![endif]--><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metaname="x-apple-disable-message-reformatting"><!--[if !mso]><!--><metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--<![endif]--><title></title><styletype="text/css">@mediaonly screenand (min-width:620px) {          .u-row {width:600px!important;          }          .u-row .u-col {vertical-align: top;          }          .u-row .u-col-33p33 {width:199.98px!important;          }          .u-row .u-col-66p67 {width:400.02px!important;          }          .u-row .u-col-100 {width:600px!important;          }      }@media (max-width:620px) {          .u-row-container {max-width:100%!important;padding-left:0px!important;padding-right:0px!important;          }          .u-row .u-col {min-width:320px!important;max-width:100%!important;display: block!important;          }          .u-row {width:100%!important;          }          .u-col {width:100%!important;          }          .u-col>div {margin:0 auto;          }      }body {margin:0;padding:0;      }table,tr,td {vertical-align: top;border-collapse: collapse;      }p {margin:0;      }      .ie-containertable,      .mso-containertable {table-layout: fixed;      }* {line-height: inherit;      }a[x-apple-data-detectors='true'] {color: inherit!important;text-decoration: none!important;      }table,td {color:#000000; }#u_bodya {color:#0000ee;text-decoration: underline; }@media (max-width:480px) {#u_content_heading_1 .v-container-padding-padding {padding:30px10px10px!important; }#u_content_heading_1 .v-font-size {font-size:14px!important; }#u_content_heading_2 .v-container-padding-padding {padding:20px10px10px20px!important; }#u_content_heading_2 .v-font-size {font-size:23px!important; }#u_content_image_2 .v-container-padding-padding {padding:10px!important; }#u_content_image_2 .v-text-align {text-align: center!important; }#u_content_divider_1 .v-container-padding-padding {padding:10px20px!important; }#u_content_text_1 .v-container-padding-padding {padding:20px20px30px!important; }#u_content_heading_3 .v-container-padding-padding {padding:30px20px10px!important; }#u_content_heading_3 .v-text-align {text-align: center!important; }#u_content_text_2 .v-container-padding-padding {padding:0px20px10px!important; }#u_content_text_2 .v-text-align {text-align: center!important; }#u_content_social_1 .v-container-padding-padding {padding:10px0px10px75px!important; } }</style></head><bodyclass="clean-body u_body"style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #e7e7e7;color: #000000"><!--[if IE]><div><![endif]--><!--[if mso]><div><![endif]--><tableid="u_body"style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #e7e7e7;width:100%"cellpadding="0"cellspacing="0"><tbody><trstyle="vertical-align: top"><tdstyle="word-break: break-word;border-collapse: collapse !important;vertical-align: top"><!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><![endif]--><divclass="u-row-container"style="padding: 0px;background-color: transparent"><divclass="u-row"style="margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;"><divstyle="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;"><!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0"><tr><![endif]--><!--[if (mso)|(IE)]><td align="center" width="600" valign="top"><![endif]--><divclass="u-col u-col-100"style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;"><divstyle="background-color: #ffffff;height: 100%;width: 100% !important;"><!--[if (!mso)&(!IE)]><!--><divstyle="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]--><tableid="u_content_heading_1"style="font-family:arial,helvetica,sans-serif;"role="presentation"cellpadding="0"cellspacing="0"width="100%"border="0"><tbody><tr><tdclass="v-container-padding-padding"style="overflow-wrap:break-word;word-break:break-word;padding:40px 10px 10px;font-family:arial,helvetica,sans-serif;"align="left"><h1class="v-text-align v-font-size"style="margin: 0px; line-height: 140%; text-align: center; word-wrap: break-word; font-size: 17px; font-weight: 400;"><strong>{{.AppName}}</strong></h1></td></tr></tbody></table><tablestyle="font-family:arial,helvetica,sans-serif;"role="presentation"cellpadding="0"cellspacing="0"width="100%"border="0"><tbody><tr><tdclass="v-container-padding-padding"style="overflow-wrap:break-word;word-break:break-word;padding:20px 0px 0px;font-family:arial,helvetica,sans-serif;"align="left"><tablewidth="100%"cellpadding="0"cellspacing="0"border="0"><tr><tdclass="v-text-align"style="padding-right: 0px;padding-left: 0px;"align="center"><imgalign="center"border="0"src="https://img.hiif.ong/mail/image-1.png"alt="image"title="image"style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 530px;"width="530"/></td></tr></table></td></tr></tbody></table><!--[if (!mso)&(!IE)]><!--></div><!--<![endif]--></div></div><!--[if (mso)|(IE)]></td><![endif]--><!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div></div></div><divclass="u-row-container"style="padding: 0px;background-color: transparent"><divclass="u-row"style="margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;"><divstyle="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;"><!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0"><tr><![endif]--><!--[if (mso)|(IE)]><td align="center" width="400" valign="top"><![endif]--><divclass="u-col u-col-66p67"style="max-width: 320px;min-width: 400px;display: table-cell;vertical-align: top;"><divstyle="background-color: #ffffff;height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"><!--[if (!mso)&(!IE)]><!--><divstyle="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"><!--<![endif]--><tableid="u_content_heading_2"style="font-family:arial,helvetica,sans-serif;"role="presentation"cellpadding="0"cellspacing="0"width="100%"border="0"><tbody><tr><tdclass="v-container-padding-padding"style="overflow-wrap:break-word;word-break:break-word;padding:20px 10px 10px 60px;font-family:arial,helvetica,sans-serif;"align="left"><h1class="v-text-align v-font-size"style="margin: 0px; color: #242424; line-height: 140%; text-align: left; word-wrap: break-word; font-size: 27px; font-weight: 700;"><span>Thank you use {{.AppName}}!</span></h1></td></tr></tbody></table><!--[if (!mso)&(!IE)]><!--></div><!--<![endif]--></div></div><!--[if (mso)|(IE)]></td><![endif]--><!--[if (mso)|(IE)]><td align="center" width="200" valign="top"><![endif]--><divclass="u-col u-col-33p33"style="max-width: 320px;min-width: 200px;display: table-cell;vertical-align: top;"><divstyle="background-color: #ffffff;height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"><!--[if (!mso)&(!IE)]><!--><divstyle="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"><!--<![endif]--><tableid="u_content_image_2"style="font-family:arial,helvetica,sans-serif;"role="presentation"cellpadding="0"cellspacing="0"width="100%"border="0"><tbody><tr><tdclass="v-container-padding-padding"style="overflow-wrap:break-word;word-break:break-word;padding:25px 60px 10px 10px;font-family:arial,helvetica,sans-serif;"align="left"><tablewidth="100%"cellpadding="0"cellspacing="0"border="0"><tr><tdclass="v-text-align"style="padding-right: 0px;padding-left: 0px;"align="right"><imgalign="right"border="0"src="https://img.hiif.ong/mail/image-2.png"alt="image"title="image"style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: inline-block !important;border: none;height: auto;float: none;width: 100%;max-width: 28px;"width="28"/></td></tr></table></td></tr></tbody></table><!--[if (!mso)&(!IE)]><!--></div><!--<![endif]--></div></div><!--[if (mso)|(IE)]></td><![endif]--><!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div></div></div><divclass="u-row-container"style="padding: 0px;background-color: transparent"><divclass="u-row"style="margin: 0 auto;min-width: 320px;max-width: 600px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;"><divstyle="border-collapse: collapse;display: table;width: 100%;height: 100%;background-color: transparent;"><!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><table cellpadding="0" cellspacing="0" border="0"><tr><![endif]--><!--[if (mso)|(IE)]><td align="center" width="600" valign="top"><![endif]--><divclass="u-col u-col-100"style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;"><divstyle="background-color: #ffffff;height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"><!--[if (!mso)&(!IE)]><!--><divstyle="box-sizing: border-box; height: 100%; padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;"><!--<![endif]--><tableid="u_content_divider_1"style="font-family:arial,helvetica,sans-serif;"role="presentation"cellpadding="0"cellspacing="0"width="100%"border="0"><tbody><tr><tdclass="v-container-padding-padding"style="overflow-wrap:break-word;word-break:break-word;padding:10px 48px;font-family:arial,helvetica,sans-serif;"align="left"><tableheight="0px"align="center"border="0"cellpadding="0"cellspacing="0"width="100%"style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;border-top: 1px solid #000000;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><tbody><trstyle="vertical-align: top"><tdstyle="word-break: break-word;border-collapse: collapse !important;vertical-align: top;font-size: 0px;line-height: 0px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%"><span>&#160;</span></td></tr></tbody></table></td></tr></tbody></table><tableid="u_content_text_1"style="font-family:arial,helvetica,sans-serif;"role="presentation"cellpadding="0"cellspacing="0"width="100%"border="0"><tbody><tr><tdclass="v-container-padding-padding"style="overflow-wrap:break-word;word-break:break-word;padding:20px 90px 30px 60px;font-family:arial,helvetica,sans-serif;"align="left"><divclass="v-text-align v-font-size"style="font-size: 14px; line-height: 140%; text-align: left; word-wrap: break-word;"><pstyle="line-height: 140%;"><spanstyle="line-height: 19.6px;">Hello,  {{- .Name -}}</span></p><pstyle="line-height: 140%;"> </p><div>【.AppName】<b>{{- .Code -}}</b> 为本次验证的验证码，请在5分钟内完成验证。为保证账号安全，请勿泄漏此验证码。</div></div></td></tr></tbody></table><!--[if (!mso)&(!IE)]><!--></div><!--<![endif]--></div></div><!--[if (mso)|(IE)]></td><![endif]--><!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]--></div></div></div><!--[if (mso)|(IE)]></td></tr></table><![endif]--></td></tr></tbody></table><!--[if mso]></div><![endif]--><!--[if IE]></div><![endif]--></body></html>

hiifong approved these changes

Jul 9, 2025

View reviewed changes

wxiaoguang merged commit55f3505 intogo-gitea:main

Jul 9, 2025

26 checks passed

GiteaBot added this to the1.25.0 milestone

Jul 9, 2025

wxiaoguang deleted the refactor-mail branch

July 9, 2025 02:25

zjjhot added a commit to zjjhot/gitea that referenced this pull request

Jul 9, 2025

Merge remote-tracking branch 'giteaofficial/main'

158f99e

* giteaofficial/main:  Refactor mail template and support preview (go-gitea#34990)  [skip ci] Updated translations via Crowdin  Fix bug when displaying git user avatar in commits list (go-gitea#35003)  Tweak placement of diff file menu (go-gitea#34999)  Start automerge check again after the conflict check and the schedule (go-gitea#34989)  Refactor time tracker UI (go-gitea#34983)  [skip ci] Updated translations via Crowdin  Improve NuGet API Parity (go-gitea#21291) (go-gitea#34940)