Skip to content

Commit

Permalink
fix(mrml-core): handle duplicate border in mj-column (#479)
Browse files Browse the repository at this point in the history 
Signed-off-by: Jérémie Drouet <[email protected]>
  • Loading branch information
@jdrouet
jdrouet authored Oct 20, 2024
1 parent cfea50e commit 23a9177
Show file tree
Hide file tree
Showing 3 changed files with 147 additions and 41 deletions.
123 changes: 123 additions & 0 deletions packages/mrml-core/resources/compare/success/mj-column-border-issue-466.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<title></title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a {
padding: 0;
}

body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

table,
td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}

img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}

p {
display: block;
margin: 13px 0;
}

</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700);

</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}
}

</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 {
width: 100% !important;
max-width: 100%;
}

</style>
</head>

<body style="word-spacing:normal;">
<div style="">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![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" width="100%">
<tbody>
<tr>
<td style="border:3px solid black;vertical-align:top;padding-left:10px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
<tbody>
<tr>
<td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
<div style="font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:1;text-align:left;color:#000000;">Hello World</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>

</html>
9 changes: 9 additions & 0 deletions packages/mrml-core/resources/compare/success/mj-column-border-issue-466.mjml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<mjml>
<mj-body>
<mj-section>
<mj-column padding-left="10px" border="3px solid black">
<mj-text>Hello World</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>
56 changes: 15 additions & 41 deletions packages/mrml-core/src/mj_column/render.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,41 +123,13 @@ impl<'root> Renderer<'root, MjColumn, MjColumnExtra<'root>> {
'root: 'a,
'a: 't,
{
tag.maybe_add_style(
"background-color",
self.attribute("inner-background-color")
.or_else(|| self.attribute("background-color")),
)
.maybe_add_style(
"border",
self.attribute("inner-border")
.or_else(|| self.attribute("border")),
)
.maybe_add_style(
"border-bottom",
self.attribute("inner-border-bottom")
.or_else(|| self.attribute("border-bottom")),
)
.maybe_add_style(
"border-left",
self.attribute("inner-border-left")
.or_else(|| self.attribute("border-left")),
)
.maybe_add_style(
"border-radius",
self.attribute("inner-border-radius")
.or_else(|| self.attribute("border-radius")),
)
.maybe_add_style(
"border-right",
self.attribute("inner-border-right")
.or_else(|| self.attribute("border-right")),
)
.maybe_add_style(
"border-top",
self.attribute("inner-border-top")
.or_else(|| self.attribute("border-top")),
)
tag.maybe_add_style("background-color", self.attribute("inner-background-color"))
.maybe_add_style("border", self.attribute("inner-border"))
.maybe_add_style("border-bottom", self.attribute("inner-border-bottom"))
.maybe_add_style("border-left", self.attribute("inner-border-left"))
.maybe_add_style("border-radius", self.attribute("inner-border-radius"))
.maybe_add_style("border-right", self.attribute("inner-border-right"))
.maybe_add_style("border-top", self.attribute("inner-border-top"))
}

fn set_style_table_simple<'a, 't>(&'a self, tag: Tag<'t>) -> Tag<'t>
Expand Down Expand Up @@ -198,7 +170,7 @@ impl<'root> Renderer<'root, MjColumn, MjColumnExtra<'root>> {
tbody.render_open(&mut cursor.buffer)?;
tr.render_open(&mut cursor.buffer)?;
td.render_open(&mut cursor.buffer)?;
self.render_column(cursor)?;
self.render_column(cursor, true)?;
td.render_close(&mut cursor.buffer);
tr.render_close(&mut cursor.buffer);
tbody.render_close(&mut cursor.buffer);
Expand All @@ -207,21 +179,21 @@ impl<'root> Renderer<'root, MjColumn, MjColumnExtra<'root>> {
Ok(())
}

fn set_style_table<'a, 't>(&'a self, tag: Tag<'t>) -> Tag<'t>
fn set_style_table<'a, 't>(&'a self, tag: Tag<'t>, gutter: bool) -> Tag<'t>
where
'root: 'a,
'a: 't,
{
if self.has_gutter() {
if gutter {
self.set_style_table_gutter(tag)
} else {
self.set_style_table_simple(tag)
}
}

fn render_column(&self, cursor: &mut RenderCursor) -> Result<(), Error> {
fn render_column(&self, cursor: &mut RenderCursor, gutter: bool) -> Result<(), Error> {
let table = self
.set_style_table(Tag::table_presentation())
.set_style_table(Tag::table_presentation(), gutter)
.add_attribute("width", "100%");
let tbody = Tag::tbody();
let siblings = self.element.children.len();
Expand Down Expand Up @@ -342,7 +314,7 @@ impl<'root> Render<'root> for Renderer<'root, MjColumn, MjColumnExtra<'root>> {
if self.has_gutter() {
self.render_gutter(cursor)?;
} else {
self.render_column(cursor)?;
self.render_column(cursor, false)?;
}
div.render_close(&mut cursor.buffer);
Ok(())
Expand Down Expand Up @@ -375,4 +347,6 @@ mod tests {
crate::should_render!(padding, "mj-column-padding");
crate::should_render!(vertical_align, "mj-column-vertical-align");
crate::should_render!(width, "mj-column-width");
// issues
crate::should_render!(border_issue_466, "mj-column-border-issue-466");
}

0 comments on commit 23a9177

Please sign in to comment.