Skip to content

Commit 01d74a8

Browse files
abd-msyukyu-odooabd-msyukyu-odoo
committed
default values for design tab
1 parent f28f3f2 commit 01d74a8

File tree

6 files changed

+267
-31
lines changed

6 files changed

+267
-31
lines changed

‎addons/mass_mailing_egg/static/src/builder/fontfamily_picker.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import { BaseOptionComponent } from "@html_builder/core/utils";
22

33
export const FONT_FAMILIES = {
4-
Arial: 'Arial,Helvetica Neue,Helvetica,sans-serif',
5-
"Courier New": 'Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace',
6-
Georgia: 'Georgia,Times,Times New Roman,serif',
7-
"Helvetica Neue": 'Helvetica Neue,Helvetica,Arial,sans-serif',
8-
"Lucida Grande": 'Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif',
9-
Tahoma: 'Tahoma,Verdana,Segoe,sans-serif',
10-
"Times New Roman": 'TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif',
11-
"Trebuchet MS": 'Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif',
12-
Verdana: 'Verdana,Geneva,sans-serif',
13-
}
4+
Arial: "Arial,Helvetica Neue,Helvetica,sans-serif",
5+
"Courier New": "Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace",
6+
Georgia: "Georgia,Times,Times New Roman,serif",
7+
"Helvetica Neue": "Helvetica Neue,Helvetica,Arial,sans-serif",
8+
"Lucida Grande": "Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif",
9+
Tahoma: "Tahoma,Verdana,Segoe,sans-serif",
10+
"Times New Roman": "TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif",
11+
"Trebuchet MS": "Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif",
12+
Verdana: "Verdana,Geneva,sans-serif",
13+
};
1414

1515
export class FontFamilyPicker extends BaseOptionComponent {
1616
static template = "mass_mailing_egg.FontFamilyPicker";
1717
static props = {
1818
action: String,
1919
actionParam: Object,
20-
}
20+
};
2121
FONT_FAMILIES = FONT_FAMILIES;
2222
}

‎addons/mass_mailing_egg/static/src/builder/mass_mailing_builder.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export class MassMailingBuilder extends Component {
2424
const mainEditorPluginsToRemove = [
2525
"PowerButtonsPlugin",
2626
"DoubleClickImagePreviewPlugin",
27+
"SeparatorPlugin",
2728
"StarPlugin",
2829
"BannerPlugin",
2930
"MoveNodePlugin",

‎addons/mass_mailing_egg/static/src/builder/plugins/customize_mailing_plugin.js

Lines changed: 45 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Plugin } from "@html_editor/plugin";
33
import { registry } from "@web/core/registry";
44
import { memoize } from "@web/core/utils/functions";
55
import { CUSTOMIZE_MAILING_VARIABLES } from "@mass_mailing_egg/builder/plugins/customize_mailing_variables";
6+
import { CUSTOMIZE_MAILING_VARIABLES_DEFAULTS } from "./customize_mailing_variables";
67

78
const RE_SELECTOR_ENDS_WITH_GT_STAR = />\s*\*\s*$/;
89
export const PRIORITY_STYLES = {
@@ -101,17 +102,22 @@ export class CustomizeMailingPlugin extends Plugin {
101102

102103
setupMailingVariables() {
103104
const varRule = this.getRule(this.cssPrefix);
104-
for (const [variable, options] of Object.entries(CUSTOMIZE_MAILING_VARIABLES)) {
105+
this.toRemove = {};
106+
for (const variable of Object.keys(CUSTOMIZE_MAILING_VARIABLES)) {
105107
const currentValue = this.getVariableValue(variable);
106-
const defaultValue = options.default ?? "";
108+
const defaultValue =
109+
Object.values(CUSTOMIZE_MAILING_VARIABLES_DEFAULTS[variable] ?? {})[0] ?? "";
107110
if (currentValue === "" && defaultValue !== "") {
108111
varRule.style.setProperty(variable, defaultValue);
109112
}
110113
this.refreshMailingVariableSelector(variable);
111114
}
115+
console.log(this.toRemove);
112116
}
113117

114118
refreshMailingVariableSelector(variable) {
119+
const toRemove = {};
120+
this.toRemove[variable] = toRemove;
115121
const options = CUSTOMIZE_MAILING_VARIABLES[variable];
116122
const currentValue = this.getVariableValue(variable);
117123
let value = "";
@@ -125,6 +131,15 @@ export class CustomizeMailingPlugin extends Plugin {
125131
rule.style.setProperty(property, value, important);
126132
}
127133
}
134+
// toremove
135+
const selector = options.selectors
136+
.map((selector) => this.addSelectorPrefix(selector))
137+
.join(", ");
138+
const target = this.editable.querySelector(selector);
139+
const computedStyle = target ? getComputedStyle(target) : null;
140+
for (const property of options.properties) {
141+
toRemove[property] = computedStyle?.[property];
142+
}
128143
}
129144

130145
parseDesignElement(styleEl) {
@@ -137,20 +152,27 @@ export class CustomizeMailingPlugin extends Plugin {
137152
// TODO EGGMAIL: maybe a better way to protect FontAwesome.
138153
// Ensure font-family gets passed to all descendants and never
139154
// overwrite font awesome.
155+
// currently the `variable` flow does not handle custom selectors
156+
// for font-family, this needs to be reworked
140157
selectors = this.transformFontFamilySelector(selector);
141158
}
142159
for (const selector of selectors) {
143-
this.addCSSRule({ selector, ruleStyle: rule.style, whitelist: [style] });
160+
this.addCSSRule(selector, rule.style, [style]);
144161
}
145162
}
146163
}
147164
}
148165
}
149166

150-
_getRule(selector) {
167+
addSelectorPrefix(selector) {
151168
if (!selector.trim().startsWith(this.cssPrefix)) {
152169
selector = `${this.cssPrefix} ${selector}`;
153170
}
171+
return selector;
172+
}
173+
174+
_getRule(selector) {
175+
selector = this.addSelectorPrefix(selector);
154176
for (const rule of this.styleSheet.cssRules) {
155177
if (rule.selectorText === selector) {
156178
return rule;
@@ -185,7 +207,8 @@ export class CustomizeMailingPlugin extends Plugin {
185207
// TODO EGGMAIL: currently receives a CSSStyleDeclaration as ruleStyle
186208
// which is not convenient since it can not be created manually
187209
// change/adapt API and usages, see convertObjectToRuleStyle
188-
addCSSRule({ selector, ruleStyle, whitelist }) {
210+
// Prefer using a mail variable.
211+
addCSSRule(selector, ruleStyle, whitelist) {
189212
const IframeCSSStyleDeclaration = this.iframeWindow.CSSStyleDeclaration;
190213
if (!(ruleStyle instanceof IframeCSSStyleDeclaration)) {
191214
ruleStyle = this.convertObjectToRuleStyle(ruleStyle);
@@ -235,6 +258,23 @@ export class CustomizeMailingVariable extends BuilderAction {
235258
},
236259
});
237260
}
261+
clean({ params }) {
262+
const oldValue = this.getValue(...arguments);
263+
this.dependencies.history.applyCustomMutation({
264+
apply: () => {
265+
this.dependencies["mass_mailing.CustomizeMailingPlugin"].setVariable(
266+
params.variable,
267+
params.clean ?? ""
268+
);
269+
},
270+
revert: () => {
271+
this.dependencies["mass_mailing.CustomizeMailingPlugin"].setVariable(
272+
params.variable,
273+
oldValue
274+
);
275+
},
276+
});
277+
}
238278
}
239279

240280
registry.category("mass_mailing-plugins").add(CustomizeMailingPlugin.id, CustomizeMailingPlugin);

‎addons/mass_mailing_egg/static/src/builder/plugins/customize_mailing_variables.js

Lines changed: 190 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
* --optionName-propertyLikeName (i.e. --button-padding-x, --button-padding-y
44
*/
55

6+
import { BASE_CONTAINER_CLASS } from "@html_editor/utils/base_container";
7+
68
function getProperties(propertyDescription) {
79
switch (propertyDescription) {
810
case "padding-y":
@@ -25,6 +27,13 @@ function generateSimpleMailingVariables(prefix, selectors, properties) {
2527
return object;
2628
}
2729

30+
// Properties and default values:
31+
32+
/* eslint-disable */
33+
const wrapperProperties = [
34+
"background-color",
35+
];
36+
2837
const textProperties = [
2938
"font-size",
3039
"font-weight",
@@ -46,8 +55,16 @@ const buttonProperties = [
4655
"border-color",
4756
];
4857

58+
const separatorProperties = [
59+
"border-top-width",
60+
"border-style",
61+
"border-color",
62+
"width",
63+
];
64+
/* eslint-enable */
65+
4966
export const CUSTOMIZE_MAILING_VARIABLES = Object.assign(
50-
generateSimpleMailingVariables("wrapper", ["> [data-snippet]"], ["background-color"]),
67+
generateSimpleMailingVariables("wrapper", ["> [data-snippet]"], wrapperProperties),
5168
(() => {
5269
const objects = [];
5370
for (const depth of [1, 2, 3]) {
@@ -56,7 +73,11 @@ export const CUSTOMIZE_MAILING_VARIABLES = Object.assign(
5673
}
5774
return Object.assign(...objects);
5875
})(),
59-
generateSimpleMailingVariables("text", ["p", "p > *", "li", "li > *"], textProperties),
76+
generateSimpleMailingVariables(
77+
"text",
78+
[`.${BASE_CONTAINER_CLASS}`, `.${BASE_CONTAINER_CLASS} > *`, "p", "p > *", "li", "li > *"],
79+
textProperties
80+
),
6081
generateSimpleMailingVariables("link", ["a:not(.btn)", "a.btn.btn-link"], textProperties),
6182
generateSimpleMailingVariables(
6283
"btn-primary",
@@ -68,9 +89,171 @@ export const CUSTOMIZE_MAILING_VARIABLES = Object.assign(
6889
["a.btn.btn-fill-secondary", "a.btn.btn-outline-secondary", "a.btn.btn-secondary"],
6990
buttonProperties
7091
),
71-
generateSimpleMailingVariables(
72-
"separator",
73-
["hr"],
74-
["border-top-width", "border-style", "border-color", "width"]
75-
)
92+
generateSimpleMailingVariables("separator", ["hr"], separatorProperties)
7693
);
94+
95+
export const CUSTOMIZE_MAILING_VARIABLES_DEFAULTS = {
96+
"--wrapper-background-color": {
97+
"background-color": "",
98+
},
99+
"--h1-font-size": {
100+
"font-size": "28px",
101+
},
102+
"--h1-font-weight": {
103+
"font-weight": "500",
104+
},
105+
"--h1-font-style": {
106+
"font-style": "",
107+
},
108+
"--h1-font-family": {
109+
"font-family": "Arial,Helvetica Neue,Helvetica,sans-serif",
110+
},
111+
"--h1-text-decoration-line": {
112+
"text-decoration-line": "",
113+
},
114+
"--h1-color": {
115+
color: "rgb(0, 0, 0)",
116+
},
117+
"--h2-font-size": {
118+
"font-size": "23px",
119+
},
120+
"--h2-font-weight": {
121+
"font-weight": "500",
122+
},
123+
"--h2-font-style": {
124+
"font-style": "",
125+
},
126+
"--h2-font-family": {
127+
"font-family": "Arial,Helvetica Neue,Helvetica,sans-serif",
128+
},
129+
"--h2-text-decoration-line": {
130+
"text-decoration-line": "",
131+
},
132+
"--h2-color": {
133+
color: "rgb(0, 0, 0)",
134+
},
135+
"--h3-font-size": {
136+
"font-size": "20px",
137+
},
138+
"--h3-font-weight": {
139+
"font-weight": "500",
140+
},
141+
"--h3-font-style": {
142+
"font-style": "",
143+
},
144+
"--h3-font-family": {
145+
"font-family": "Arial,Helvetica Neue,Helvetica,sans-serif",
146+
},
147+
"--h3-text-decoration-line": {
148+
"text-decoration-line": "",
149+
},
150+
"--h3-color": {
151+
color: "rgb(0, 0, 0)",
152+
},
153+
"--text-font-size": {
154+
"font-size": "12px",
155+
},
156+
"--text-font-weight": {
157+
"font-weight": "400",
158+
},
159+
"--text-font-style": {
160+
"font-style": "",
161+
},
162+
"--text-font-family": {
163+
"font-family": "Arial,Helvetica Neue,Helvetica,sans-serif",
164+
},
165+
"--text-text-decoration-line": {
166+
"text-decoration-line": "",
167+
},
168+
"--text-color": {
169+
color: "rgb(0, 0, 0)",
170+
},
171+
"--link-font-size": {
172+
"font-size": "12px",
173+
},
174+
"--link-font-weight": {
175+
"font-weight": "400",
176+
},
177+
"--link-font-style": {
178+
"font-style": "",
179+
},
180+
"--link-font-family": {
181+
"font-family": "Arial,Helvetica Neue,Helvetica,sans-serif",
182+
},
183+
"--link-text-decoration-line": {
184+
"text-decoration-line": "",
185+
},
186+
"--link-color": {
187+
color: "rgb(113, 75, 103)",
188+
},
189+
"--btn-primary-font-size": {
190+
"font-size": "12px",
191+
},
192+
"--btn-primary-color": {
193+
color: "rgb(255, 255, 255)",
194+
},
195+
"--btn-primary-background-color": {
196+
"background-color": "rgb(53, 151, 156)",
197+
},
198+
"--btn-primary-padding-x": {
199+
"padding-left": "10px",
200+
"padding-right": "10px",
201+
},
202+
"--btn-primary-padding-y": {
203+
"padding-top": "5px",
204+
"padding-bottom": "5px",
205+
},
206+
"--btn-primary-font-family": {
207+
"font-family": "Arial,Helvetica Neue,Helvetica,sans-serif",
208+
},
209+
"--btn-primary-border-style": {
210+
"border-style": "solid",
211+
},
212+
"--btn-primary-border-width": {
213+
"border-width": "1px",
214+
},
215+
"--btn-primary-border-color": {
216+
"border-color": "rgb(53, 151, 156)",
217+
},
218+
"--btn-secondary-font-size": {
219+
"font-size": "12px",
220+
},
221+
"--btn-secondary-color": {
222+
color: "rgb(255, 255, 255)",
223+
},
224+
"--btn-secondary-background-color": {
225+
"background-color": "rgb(104, 85, 99)",
226+
},
227+
"--btn-secondary-padding-x": {
228+
"padding-left": "10px",
229+
"padding-right": "10px",
230+
},
231+
"--btn-secondary-padding-y": {
232+
"padding-top": "5px",
233+
"padding-bottom": "5px",
234+
},
235+
"--btn-secondary-font-family": {
236+
"font-family": "Arial,Helvetica Neue,Helvetica,sans-serif",
237+
},
238+
"--btn-secondary-border-style": {
239+
"border-style": "solid",
240+
},
241+
"--btn-secondary-border-width": {
242+
"border-width": "1px",
243+
},
244+
"--btn-secondary-border-color": {
245+
"border-color": "rgb(104, 85, 99)",
246+
},
247+
"--separator-border-top-width": {
248+
"border-top-width": "1px",
249+
},
250+
"--separator-border-style": {
251+
"border-style": "solid",
252+
},
253+
"--separator-border-color": {
254+
"border-color": "rgb(33, 37, 41)",
255+
},
256+
"--separator-width": {
257+
width: "100%",
258+
},
259+
};

0 commit comments

Comments
 (0)