pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] mass_mailing: alert snippet improved

Browse Source 
Structure and styling changed to allow padding X when this snippet is
not inside another snippet. Otherwise the alert block, in w-100, didn't
have any space between the edge of the email template and the block.

The "Type" option wasn't working: as all the elements can be changed
with other options anyway, the code for this one has been removed
instead of trying to fix it.

Part-of: odoo/odoo#95940
This commit is contained in:
Elisabeth Dickinson
2022-08-11 17:56:19 +02:00
committed by David Monjoie
parent bc48e48528
commit 7eda17fd4d
3 changed files with 40 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mass_mailing/static/src/snippets/s_alert/000.scss
+16 -10
View File
@@ -1,23 +1,29 @@
.o_mail_snippet_general .s_mail_alert [class^="col-lg"]{
padding-left: 0!important;
padding-right: 0!important;
}
.s_mail_alert {
margin: $grid-gutter-width/2 0;
border-width: $alert-border-width;
border-style: solid;
border-radius: $alert-border-radius;
p, ul, ol {
&:last-child {
margin-bottom: 0;
.s_alert {
margin: auto;
border-width: $alert-border-width;
border-style: solid;
border-radius: $alert-border-radius;
p, ul, ol {
&:last-child {
margin-bottom: 0;
}
}
}
&.s_alert_sm {
.s_alert_sm {
padding: $grid-gutter-width/3;
font-size: $font-size-sm;
}
&.s_alert_md {
.s_alert_md {
padding: $grid-gutter-width/2;
font-size: $font-size-base;
}
&.s_alert_lg {
.s_alert_lg {
padding: $grid-gutter-width;
font-size: $font-size-lg;
}
addons/mass_mailing/views/snippets/s_alert.xml
+22 -21
View File
@@ -1,43 +1,44 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_alert" name="Alert">
<div class="s_mail_alert s_alert_md alert-info w-100 clearfix o_mail_snippet_general pt16 pb16 px-3" data-snippet="s_alert">
<div class="s_alert_icon" valign="top">
<i class="fa fa-2x fa-info-circle"/>
</div>
<div class="s_alert_content">
<p><b>Explain the benefits you offer</b>
<br/>Don't write about products or services here, write about solutions.</p>
<div class="s_mail_alert o_mail_snippet_general pt16 pb16 mx-auto" data-snippet="s_alert">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="s_alert s_alert_md s_alert_info w-100" style="background-color: rgb(209 236 241); border-width: 1px !important; border-color: rgb(190 229 235) !important;">
<div class="s_alert_icon" valign="top">
<i class="fa fa-2x fa-info-circle" style="color: rgb(12 84 96);"/>
</div>
<div class="s_alert_content">
<h3><span style="color: rgb(12 84 96); font-size: 16px; font-weight: bolder;">Explain the benefits you offer</span></h3>
<p><font style="color: rgb(12 84 96);">Don't write about products or services here, write about solutions.</font></p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<template id="s_alert_options" inherit_id="mass_mailing.snippet_options">
<xpath expr="//div[@id='so_width']" position="before">
<div data-selector=".s_mail_alert" data-js="Alert">
<we-select string="Type" data-apply-to=".fa.s_alert_icon" data-trigger="alert_colorpicker_opt">
<we-button data-select-class="fa-user-circle" data-trigger-value="primary">Primary</we-button>
<we-button data-select-class="fa-user-circle-o" data-trigger-value="secondary">Secondary</we-button>
<we-button data-select-class="fa-info-circle" data-trigger-value="info">Info</we-button>
<we-button data-select-class="fa-check-circle" data-trigger-value="success">Success</we-button>
<we-button data-select-class="fa-exclamation-triangle" data-trigger-value="warning">Warning</we-button>
<we-button data-select-class="fa-exclamation-circle" data-trigger-value="danger">Danger</we-button>
</we-select>
</div>
</xpath>
<!-- Keep those options in separate xpath for options order -->
<xpath expr="//div[@id='so_width']" position="after">
<div data-selector=".s_mail_alert">
<div data-selector=".s_mail_alert .s_alert">
<we-select string="Size">
<we-button data-select-class="s_alert_sm">Small</we-button>
<we-button data-select-class="s_alert_md">Medium</we-button>
<we-button data-select-class="s_alert_lg">Large</we-button>
</we-select>
<we-colorpicker string="Color" data-name="alert_colorpicker_opt"
<we-colorpicker string="Background Color" data-name="alert_colorpicker_opt"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="alert-"/>
</div>
<div data-selector=".s_mail_alert .s_alert">
<t t-call="mass_mailing.snippet_options_border_widgets">
<t t-set="so_rounded_no_dependencies" t-value="True"/>
</t>
</div>
</xpath>
</template>
addons/mass_mailing/views/snippets_themes.xml
+2 -2
View File
@@ -433,7 +433,7 @@
</we-button-group>
</div>
<div id="so_width" data-selector=".s_mail_alert, .s_mail_blockquote, .s_mail_text_highlight">
<div id="so_width" data-selector=".s_mail_alert .s_alert, .s_mail_blockquote, .s_mail_text_highlight">
<we-select string="Width">
<we-button data-select-class="w-25">25%</we-button>
<we-button data-select-class="w-50">50%</we-button>
@@ -442,7 +442,7 @@
</we-select>
</div>
<div id="so_block_align" data-selector=".s_mail_alert, .s_mail_blockquote, .s_mail_text_highlight">
<div id="so_block_align" data-selector=".s_mail_alert .s_alert, .s_mail_blockquote, .s_mail_text_highlight">
<we-button-group string="Alignment" data-dependencies="!so_width_100">
<we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="me-auto"/>
<we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>