Skip to content

Commit 3de47f4

Browse files
bso-odoobso-odoo
committed
[REF] mass_mailing: convert DesignTab to Owl
task-3850413
1 parent 7ab66fb commit 3de47f4

File tree

4 files changed

+356
-335
lines changed

4 files changed

+356
-335
lines changed

‎addons/mass_mailing/__manifest__.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,7 @@
158158
('include', 'web_editor.assets_snippets_menu'),
159159
'mass_mailing/static/src/js/snippets.editor.js',
160160
'mass_mailing/static/src/js/snippets.registry.js',
161+
'mass_mailing/static/src/js/design_tab.xml',
161162
'mass_mailing/static/src/xml/mass_mailing.editor.xml',
162163
],
163164
'web.assets_frontend': [

‎addons/mass_mailing/static/src/js/design_tab.xml

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<templates id="template" xml:space="preserve">
3+
<t t-name="mass_mailing.MassMailingWeFontFamilyPicker" t-inherit="web_editor.WeSelect" t-inherit-mode="primary">
4+
<xpath expr="//we-selection-items/t" position="replace">
5+
<WeButton t-foreach="fontFamilies" t-as="fontFamily" t-key="fontFamily"
6+
class="'o_we_user_value_widget'"
7+
customizeCssProperty="fontFamily"
8+
cssProperty="'font-family'"
9+
selectorText="props.selectorText"
10+
>
11+
<span t-attf-style="font-family: {{fontFamily}};" t-out="getFontName(fontFamily)"/>
12+
</WeButton>
13+
</xpath>
14+
</t>
15+
<t t-name="mass_mailing.design_tab">
16+
<!-- BODY WIDTH -->
17+
<WeButtonGroup title.translate="Body Width" applyTo="'.o_mail_wrapper'" noPreview="'true'">
18+
<WeButton selectClass="'o_mail_small'"
19+
img="'/mass_mailing/static/src/img/snippets_options/content_width_small.svg'"
20+
tooltip.translate="Small"/>
21+
<WeButton selectClass="'o_mail_regular'"
22+
img="'/mass_mailing/static/src/img/snippets_options/content_width_normal.svg'"
23+
tooltip.translate="Regular"/>
24+
<WeButton selectClass=""
25+
img="'/mass_mailing/static/src/img/snippets_options/content_width_full.svg'"
26+
tooltip.translate="Full"/>
27+
</WeButtonGroup>
28+
<WeColorpicker title.translate="Mailing Background"
29+
applyTo="'.o_layout, > div:not(.o_layout)'"
30+
selectStyle="'true'"
31+
noTransparency="'true'"
32+
cssProperty="'background-color'"
33+
colorPrefix="'bg-'"/>
34+
<WeColorpicker title.translate="Content Background"
35+
applyTo="'.o_mail_wrapper_td > div'"
36+
selectStyle="'true'"
37+
noTransparency="'true'"
38+
cssProperty="'background-color'"
39+
colorPrefix="'bg-'"/>
40+
<!-- HEADING 1 -->
41+
<WeRow title.translate="Heading 1" class="'o_design_tab_title'">
42+
<WeInput customizeCssProperty="''"
43+
cssProperty="'font-size'"
44+
selectorText="'h1'"
45+
unit="'px'"/>
46+
<WeColorpicker customizeCssProperty="''"
47+
cssProperty="'color'"
48+
selectorText="'h1'"
49+
noTransparency="'true'"
50+
colorPrefix="'text-'"/>
51+
</WeRow>
52+
<WeRow title.translate="" class="'o_we_sublevel_1 o_short_title'">
53+
<MassMailingWeFontFamilyPicker selectorText="'h1'"/>
54+
<span>​</span> <!-- Separate the select from the buttons (styling) -->
55+
<WeButton tooltip.translate="Bold" class="'fa fa-fw fa-bold'" noPreview="'true'" toggle="'true'"
56+
customizeCssProperty="'bolder'"
57+
selectorText="'h1'"
58+
cssProperty="'font-weight'"/>
59+
<WeButton tooltip.translate="Italic" class="'fa fa-fw fa-italic'" noPreview="'true'" toggle="'true'"
60+
customizeCssProperty="'italic'"
61+
selectorText="'h1'"
62+
cssProperty="'font-style'"/>
63+
<WeButton tooltip.translate="Underline" class="'fa fa-fw fa-underline'" noPreview="'true'" toggle="'true'"
64+
customizeCssProperty="'underline'"
65+
selectorText="'h1'"
66+
cssProperty="'text-decoration-line'"/>
67+
</WeRow>
68+
<!-- HEADING 2 -->
69+
<WeRow title.translate="Heading 2" class="'o_design_tab_title'">
70+
<WeInput customizeCssProperty="''"
71+
cssProperty="'font-size'"
72+
selectorText="'h2'"
73+
unit="'px'"/>
74+
<WeColorpicker customizeCssProperty="''"
75+
cssProperty="'color'"
76+
selectorText="'h2'"
77+
noTransparency="'true'"
78+
colorPrefix="'text-'"/>
79+
</WeRow>
80+
<WeRow title.translate="" class="'o_we_sublevel_1 o_short_title'">
81+
<MassMailingWeFontFamilyPicker selectorText="'h2'"/>
82+
<span>​</span> <!-- Separate the select from the buttons (styling) -->
83+
<WeButton tooltip.translate="Bold" class="'fa fa-fw fa-bold'" noPreview="'true'" toggle="'true'"
84+
customizeCssProperty="'bolder'"
85+
selectorText="'h2'"
86+
cssProperty="'font-weight'"/>
87+
<WeButton tooltip.translate="Italic" class="'fa fa-fw fa-italic'" noPreview="'true'" toggle="'true'"
88+
customizeCssProperty="'italic'"
89+
selectorText="'h2'"
90+
cssProperty="'font-style'"/>
91+
<WeButton tooltip.translate="Underline" class="'fa fa-fw fa-underline'" noPreview="'true'" toggle="'true'"
92+
customizeCssProperty="'underline'"
93+
selectorText="'h2'"
94+
cssProperty="'text-decoration-line'"/>
95+
</WeRow>
96+
<!-- HEADING 3 -->
97+
<WeRow title.translate="Heading 3" class="'o_design_tab_title'">
98+
<WeInput customizeCssProperty="''"
99+
cssProperty="'font-size'"
100+
selectorText="'h3'"
101+
unit="'px'"/>
102+
<WeColorpicker customizeCssProperty="''"
103+
cssProperty="'color'"
104+
selectorText="'h3'"
105+
noTransparency="'true'"
106+
colorPrefix="'text-'"/>
107+
</WeRow>
108+
<WeRow title.translate="" class="'o_we_sublevel_1 o_short_title'">
109+
<MassMailingWeFontFamilyPicker selectorText="'h3'"/>
110+
<span>​</span> <!-- Separate the select from the buttons (styling) -->
111+
<WeButton tooltip.translate="Bold" class="'fa fa-fw fa-bold'" noPreview="'true'" toggle="'true'"
112+
customizeCssProperty="'bolder'"
113+
selectorText="'h3'"
114+
cssProperty="'font-weight'"/>
115+
<WeButton tooltip.translate="Italic" class="'fa fa-fw fa-italic'" noPreview="'true'" toggle="'true'"
116+
customizeCssProperty="'italic'"
117+
selectorText="'h3'"
118+
cssProperty="'font-style'"/>
119+
<WeButton tooltip.translate="Underline" class="'fa fa-fw fa-underline'" noPreview="'true'" toggle="'true'"
120+
customizeCssProperty="'underline'"
121+
selectorText="'h3'"
122+
cssProperty="'text-decoration-line'"/>
123+
</WeRow>
124+
<!-- TEXT -->
125+
<WeRow title.translate="Text" class="'o_design_tab_title'">
126+
<WeInput customizeCssProperty="''"
127+
cssProperty="'font-size'"
128+
selectorText="'p, p > *, li, li > *'"
129+
unit="'px'"/>
130+
<WeColorpicker customizeCssProperty="''"
131+
cssProperty="'color'"
132+
selectorText="'p, p > *, li, li > *'"
133+
noTransparency="'true'"
134+
colorPrefix="'text-'"/>
135+
</WeRow>
136+
<WeRow title.translate="" class="'o_we_sublevel_1 o_short_title'">
137+
<MassMailingWeFontFamilyPicker selectorText="'p, p > *, li, li > *'"/>
138+
<span>​</span> <!-- Separate the select from the buttons (styling) -->
139+
<WeButton tooltip.translate="Bold" class="'fa fa-fw fa-bold'" noPreview="'true'" toggle="'true'"
140+
customizeCssProperty="'bolder'"
141+
selectorText="'p, p > *, li, li > *'"
142+
cssProperty="'font-weight'"/>
143+
<WeButton tooltip.translate="Italic" class="'fa fa-fw fa-italic'" noPreview="'true'" toggle="'true'"
144+
customizeCssProperty="'italic'"
145+
selectorText="'p, p > *, li, li > *'"
146+
cssProperty="'font-style'"/>
147+
<WeButton tooltip.translate="Underline" class="'fa fa-fw fa-underline'" noPreview="'true'" toggle="'true'"
148+
customizeCssProperty="'underline'"
149+
selectorText="'p, p > *, li, li > *'"
150+
cssProperty="'text-decoration-line'"/>
151+
</WeRow>
152+
<!-- LINKS -->
153+
<WeRow title.translate="Links" class="'o_design_tab_title'">
154+
<WeInput customizeCssProperty="''"
155+
cssProperty="'font-size'"
156+
selectorText="'a:not(.btn), a.btn.btn-link'"
157+
unit="'px'"/>
158+
<WeColorpicker customizeCssProperty="''"
159+
cssProperty="'color'"
160+
selectorText="'a:not(.btn), a.btn.btn-link'"
161+
noTransparency="'true'"
162+
colorPrefix="'text-'"/>
163+
</WeRow>
164+
<WeRow title.translate="" class="'o_we_sublevel_1 o_short_title'">
165+
<MassMailingWeFontFamilyPicker selectorText="'a:not(.btn), a.btn.btn-link'"/>
166+
<span></span> <!--Separate the select from the buttons (styling)-->
167+
<WeButton tooltip.translate="Bold" class="'fa fa-fw fa-bold'" noPreview="'true'" toggle="'true'"
168+
customizeCssProperty="'bolder'"
169+
selectorText="'a:not(.btn), a.btn.btn-link'"
170+
cssProperty="'font-weight'"/>
171+
<WeButton tooltip.translate="Italic" class="'fa fa-fw fa-italic'" noPreview="'true'" toggle="'true'"
172+
customizeCssProperty="'italic'"
173+
selectorText="'a:not(.btn), a.btn.btn-link'"
174+
cssProperty="'font-style'"/>
175+
<WeButton tooltip.translate="Underline" class="'fa fa-fw fa-underline'" noPreview="'true'" toggle="'true'"
176+
customizeCssProperty="'underline'"
177+
selectorText="'a:not(.btn), a.btn.btn-link'"
178+
cssProperty="'text-decoration-line'"/>
179+
</WeRow>
180+
<!-- PRIMARY BUTTONS -->
181+
<WeRow title.translate="Primary Buttons" class="'o_design_tab_title'">
182+
<WeInput customizeCssProperty="''"
183+
cssProperty="'font-size'"
184+
selectorText="'a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary'"
185+
unit="'px'"/>
186+
<WeColorpicker customizeCssProperty="''"
187+
cssProperty="'color'"
188+
selectorText="'a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary'"
189+
noTransparency="'true'"
190+
colorPrefix="'text-'"/>
191+
<WeColorpicker customizeCssProperty="''"
192+
cssProperty="'background-color'"
193+
selectorText="'a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary'"
194+
noTransparency="'true'"
195+
colorPrefix="'bg-'"/>
196+
</WeRow>
197+
<WeSelect title.translate="Size" class="'o_we_sublevel_1'" selectorText="'a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary'">
198+
<WeButton applyButtonSize="'btn-sm'">Small</WeButton>
199+
<WeButton applyButtonSize="'btn-md'">Medium</WeButton>
200+
<WeButton applyButtonSize="'btn-lg'">Large</WeButton>
201+
</WeSelect>
202+
<WeRow title.translate="Font Family" class="'o_we_sublevel_1'">
203+
<MassMailingWeFontFamilyPicker selectorText="'a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary'"/>
204+
</WeRow>
205+
<WeRow title.translate="Border" class="'o_we_sublevel_1'">
206+
<WeInput customizeCssProperty="''"
207+
cssProperty="'border-width'"
208+
selectorText="'a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary'"
209+
unit="'px'"/>
210+
<WeSelect selectorText="'a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary'" cssProperty="'border-style'">
211+
<WeButton tooltip.translate="Solid" customizeCssProperty="'solid'">
212+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/>
213+
</WeButton>
214+
<WeButton tooltip.translate="Dashed" customizeCssProperty="'dashed'">
215+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/>
216+
</WeButton>
217+
<WeButton tooltip.translate="Dotted" customizeCssProperty="'dotted'">
218+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/>
219+
</WeButton>
220+
<WeButton tooltip.translate="Double" customizeCssProperty="'double'">
221+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/>
222+
</WeButton>
223+
</WeSelect>
224+
<WeColorpicker customizeCssProperty="''"
225+
cssProperty="'border-color'"
226+
selectorText="'a.btn.btn-primary, a.btn.btn-outline-primary, a.btn.btn-fill-primary'"
227+
noTransparency="'true'"
228+
colorPrefix="'border-'"/>
229+
</WeRow>
230+
<!-- SECONDARY BUTTONS -->
231+
<WeRow title.translate="Secondary Buttons" class="'o_design_tab_title'">
232+
<WeInput customizeCssProperty="''"
233+
cssProperty="'font-size'"
234+
selectorText="'a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary'"
235+
unit="'px'"/>
236+
<WeColorpicker customizeCssProperty="''"
237+
cssProperty="'color'"
238+
selectorText="'a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary'"
239+
noTransparency="'true'"
240+
colorPrefix="'text-'"/>
241+
<WeColorpicker customizeCssProperty="''"
242+
cssProperty="'background-color'"
243+
selectorText="'a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary'"
244+
noTransparency="'true'"
245+
colorPrefix="'bg-'"/>
246+
</WeRow>
247+
<WeSelect title.translate="Size" class="'o_we_sublevel_1'" selectorText="'a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary'">
248+
<WeButton applyButtonSize="'btn-sm'">Small</WeButton>
249+
<WeButton applyButtonSize="'btn-md'">Medium</WeButton>
250+
<WeButton applyButtonSize="'btn-lg'">Large</WeButton>
251+
</WeSelect>
252+
<WeRow title.translate="Font Family" class="'o_we_sublevel_1'">
253+
<MassMailingWeFontFamilyPicker selectorText="'a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary'"/>
254+
</WeRow>
255+
<WeRow title.translate="Border" class="'o_we_sublevel_1'">
256+
<WeInput customizeCssProperty="''"
257+
cssProperty="'border-width'"
258+
selectorText="'a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary'"
259+
unit="'px'"/>
260+
<WeSelect selectorText="'a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary'" cssProperty="'border-style'">
261+
<WeButton tooltip.translate="Solid" customizeCssProperty="'solid'">
262+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/>
263+
</WeButton>
264+
<WeButton tooltip.translate="Dashed" customizeCssProperty="'dashed'">
265+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/>
266+
</WeButton>
267+
<WeButton tooltip.translate="Dotted" customizeCssProperty="'dotted'">
268+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/>
269+
</WeButton>
270+
<WeButton tooltip.translate="Double" customizeCssProperty="'double'">
271+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/>
272+
</WeButton>
273+
</WeSelect>
274+
<WeColorpicker customizeCssProperty="''"
275+
cssProperty="'border-color'"
276+
selectorText="'a.btn.btn-secondary, a.btn.btn-outline-secondary, a.btn.btn-fill-secondary'"
277+
noTransparency="'true'"
278+
colorPrefix="'border-'"/>
279+
</WeRow>
280+
<!-- SEPARATORS -->
281+
<WeRow title.translate="Separators" class="'o_design_tab_title'">
282+
<WeInput customizeCssProperty="''"
283+
cssProperty="'border-top-width'"
284+
selectorText="'hr'"
285+
unit="'px'"/>
286+
<WeSelect selectorText="'hr'" cssProperty="'border-top-style'">
287+
<WeButton tooltip.translate="Solid" customizeCssProperty="'solid'">
288+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/>
289+
</WeButton>
290+
<WeButton tooltip.translate="Dashed" customizeCssProperty="'dashed'">
291+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/>
292+
</WeButton>
293+
<WeButton tooltip.translate="Dotted" customizeCssProperty="'dotted'">
294+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/>
295+
</WeButton>
296+
<WeButton tooltip.translate="Double" customizeCssProperty="'double'">
297+
<div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/>
298+
</WeButton>
299+
</WeSelect>
300+
<WeColorpicker customizeCssProperty="''"
301+
cssProperty="'border-top-color'"
302+
selectorText="'hr'"
303+
noTransparency="'true'"
304+
colorPrefix="'border-'"/>
305+
</WeRow>
306+
<WeSelect title.translate="Width" class="'o_we_sublevel_1'" selectorText="'hr'" cssProperty="'width'">
307+
<WeButton customizeCssProperty="'25%'">25%</WeButton>
308+
<WeButton customizeCssProperty="'50%'">50%</WeButton>
309+
<WeButton customizeCssProperty="'75%'">75%</WeButton>
310+
<WeButton customizeCssProperty="'100%'">100%</WeButton>
311+
</WeSelect>
312+
</t>
313+
</templates>

0 commit comments

Comments
 (0)