Refactor mail template and support preview by wxiaoguang · Pull Request #34990 · go-gitea/gitea

wxiaoguang · 2025-07-08T06:16:38Z

No description provided.

wxiaoguang · 2025-07-08T06:16:51Z

silverwind · 2025-07-08T08:30:24Z

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 derive color-scheme from the current theme's --is-dark-theme value.

wxiaoguang · 2025-07-08T08:35:10Z

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 derive color-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

silverwind · 2025-07-08T08:37:34Z

E-Mail clients handle dark theme differently than browsers, they don't rely on color-scheme. I still suggest we set color-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>.

wxiaoguang · 2025-07-08T08:41:32Z

E-Mail clients handle dark theme differently than browsers, they don't rely on color-scheme. I still suggest we set color-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.

silverwind · 2025-07-08T10:47:06Z

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.

wxiaoguang · 2025-07-08T10:57:22Z

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>

hiifong · 2025-07-09T02:07:37Z

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">
<html xmlns="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]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="x-apple-disable-message-reformatting">
  <!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
  <title></title>

  <style type="text/css">
      @media only screen and (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-container table,
      .mso-container table {
          table-layout: fixed;
      }

      * {
          line-height: inherit;
      }

      a[x-apple-data-detectors='true'] {
          color: inherit !important;
          text-decoration: none !important;
      }

      table, td { color: #000000; } #u_body a { color: #0000ee; text-decoration: underline; } @media (max-width: 480px) { #u_content_heading_1 .v-container-padding-padding { padding: 30px 10px 10px !important; } #u_content_heading_1 .v-font-size { font-size: 14px !important; } #u_content_heading_2 .v-container-padding-padding { padding: 20px 10px 10px 20px !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: 10px 20px !important; } #u_content_text_1 .v-container-padding-padding { padding: 20px 20px 30px !important; } #u_content_heading_3 .v-container-padding-padding { padding: 30px 20px 10px !important; } #u_content_heading_3 .v-text-align { text-align: center !important; } #u_content_text_2 .v-container-padding-padding { padding: 0px 20px 10px !important; } #u_content_text_2 .v-text-align { text-align: center !important; } #u_content_social_1 .v-container-padding-padding { padding: 10px 0px 10px 75px !important; } }
  </style>
</head>

<body class="clean-body u_body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #e7e7e7;color: #000000">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table id="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>
  <tr style="vertical-align: top">
    <td style="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" style="background-color: #e7e7e7;"><![endif]-->

      <div class="u-row-container" style="padding: 0px;background-color: transparent">
        <div class="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;">
          <div style="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 style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: transparent;"><![endif]-->
            <!--[if (mso)|(IE)]><td align="center" width="600" style="background-color: #ffffff;width: 600px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
            <div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
              <div style="background-color: #ffffff;height: 100%;width: 100% !important;">
                <!--[if (!mso)&(!IE)]><!--><div style="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]-->

                <table id="u_content_heading_1" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                  <tbody>
                  <tr>
                    <td class="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">

                      <h1 class="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>

                <table style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                  <tbody>
                  <tr>
                    <td class="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">

                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="center">

                            <img align="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>

      <div class="u-row-container" style="padding: 0px;background-color: transparent">
        <div class="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;">
          <div style="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 style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: transparent;"><![endif]-->

            <!--[if (mso)|(IE)]><td align="center" width="400" style="background-color: #ffffff;width: 400px;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;" valign="top"><![endif]-->
            <div class="u-col u-col-66p67" style="max-width: 320px;min-width: 400px;display: table-cell;vertical-align: top;">
              <div style="background-color: #ffffff;height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
                <!--[if (!mso)&(!IE)]><!--><div style="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]-->

                <table id="u_content_heading_2" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                  <tbody>
                  <tr>
                    <td class="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">

                      <h1 class="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" style="background-color: #ffffff;width: 200px;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;" valign="top"><![endif]-->
            <div class="u-col u-col-33p33" style="max-width: 320px;min-width: 200px;display: table-cell;vertical-align: top;">
              <div style="background-color: #ffffff;height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
                <!--[if (!mso)&(!IE)]><!--><div style="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]-->

                <table id="u_content_image_2" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                  <tbody>
                  <tr>
                    <td class="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">

                      <table width="100%" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                          <td class="v-text-align" style="padding-right: 0px;padding-left: 0px;" align="right">

                            <img align="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>

      <div class="u-row-container" style="padding: 0px;background-color: transparent">
        <div class="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;">
          <div style="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 style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:600px;"><tr style="background-color: transparent;"><![endif]-->

            <!--[if (mso)|(IE)]><td align="center" width="600" style="background-color: #ffffff;width: 600px;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;" valign="top"><![endif]-->
            <div class="u-col u-col-100" style="max-width: 320px;min-width: 600px;display: table-cell;vertical-align: top;">
              <div style="background-color: #ffffff;height: 100%;width: 100% !important;border-radius: 0px;-webkit-border-radius: 0px; -moz-border-radius: 0px;">
                <!--[if (!mso)&(!IE)]><!--><div style="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]-->

                <table id="u_content_divider_1" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                  <tbody>
                  <tr>
                    <td class="v-container-padding-padding" style="overflow-wrap:break-word;word-break:break-word;padding:10px 48px;font-family:arial,helvetica,sans-serif;" align="left">

                      <table height="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>
                        <tr style="vertical-align: top">
                          <td style="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>

                <table id="u_content_text_1" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                  <tbody>
                  <tr>
                    <td class="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">

                      <div class="v-text-align v-font-size" style="font-size: 14px; line-height: 140%; text-align: left; word-wrap: break-word;">
                        <p style="line-height: 140%;"><span style="line-height: 19.6px;">Hello,  {{- .Name -}}</span></p>
                        <p style="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>

* 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)

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

github-actions Bot added modifies/go labels Jul 8, 2025

wxiaoguang mentioned this pull request Jul 8, 2025

Send email on Workflow Run Success/Failure #34982

Merged

fix

a3e7606

wxiaoguang force-pushed the refactor-mail branch from 704b570 to a3e7606 Compare July 8, 2025 06:21

delvh approved these changes Jul 8, 2025

View reviewed changes

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

wxiaoguang requested review from hiifong, lunny and silverwind July 9, 2025 01:40

lunny approved these changes Jul 9, 2025

View reviewed changes

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

Merge branch 'main' into refactor-mail

6eda2fc

hiifong approved these changes Jul 9, 2025

View reviewed changes

wxiaoguang merged commit 55f3505 into go-gitea:main Jul 9, 2025
26 checks passed

GiteaBot added this to the 1.25.0 milestone Jul 9, 2025

wxiaoguang deleted the refactor-mail branch July 9, 2025 02:25

go-gitea locked as resolved and limited conversation to collaborators Oct 7, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Refactor mail template and support preview#34990

Refactor mail template and support preview#34990
wxiaoguang merged 2 commits into
go-gitea:mainfrom
wxiaoguang:refactor-mail

wxiaoguang commented Jul 8, 2025

Uh oh!

wxiaoguang commented Jul 8, 2025

Uh oh!

silverwind commented Jul 8, 2025 •

edited

Loading

Uh oh!

wxiaoguang commented Jul 8, 2025

Uh oh!

silverwind commented Jul 8, 2025 •

edited

Loading

Uh oh!

wxiaoguang commented Jul 8, 2025

Uh oh!

silverwind commented Jul 8, 2025

Uh oh!

wxiaoguang commented Jul 8, 2025

Uh oh!

hiifong commented Jul 9, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

Conversation

wxiaoguang commented Jul 8, 2025

Uh oh!

wxiaoguang commented Jul 8, 2025

Uh oh!

silverwind commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented Jul 8, 2025

Uh oh!

silverwind commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented Jul 8, 2025

Uh oh!

silverwind commented Jul 8, 2025

Uh oh!

wxiaoguang commented Jul 8, 2025

Uh oh!

hiifong commented Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

silverwind commented Jul 8, 2025 •

edited

Loading

silverwind commented Jul 8, 2025 •

edited

Loading

hiifong commented Jul 9, 2025 •

edited

Loading