[FIX] web_editor, *: review icon buttons sizing and paddings

*: mass_mailing, website, website_sale

Before this commit, it was impossible to add `fa-fw` directly on a
`we-button` as it would make the icon half invisible, since the whole
`we-button` would have the font-awesome `.fa-fw` css rule applied on it;
width: ~1.28em.

Then, one would need to insert a `<i/>` tag inside the `we-button` for
it to work.

This commit improves that behavior by handling automatically such cases,
and will preserve the purpose of the `fa-fw` class which is to have a
fixed width for those icons.

Note that the util class introduced in [1] (o_we_button_icon renamed
here in o_we_icon_button) is still useful to handle the case of svg
images, they are not allowed to shrink, the same way the fa buttons are.

[1]: https://github.com/odoo/odoo/commit/e4233643b93b521454cc146c6a2ae876781fb9ba

Related to task-2172311

closes odoo/odoo#77980

X-original-commit: e8ab9d76b802e80bb386812e4c8566825cbc2c92
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Younn Olivier <yol@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
Romain Derie
2021-10-07 13:09:26 +00:00
committed by qsm-odoo
co-authored by Younn Olivier qsm-odoo
parent c981c6ee7b
commit fb20b16d48
14 changed files with 93 additions and 98 deletions
+3 -3
View File
@@ -21,9 +21,9 @@
<we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
</we-select>
<we-button-group string="Alignment" data-dependencies="!so_width_100">
<we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
<we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
<we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
<we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
<we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
<we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
</we-button-group>
</div>
</xpath>
@@ -853,9 +853,9 @@
<!-- H-ALIGN -->
<div id="so_text_align" data-selector=".s_mail_text_highlight">
<we-button-group string="Alignment">
<we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
<we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
<we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
<we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-left"/>
<we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="text-center"/>
<we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-right"/>
</we-button-group>
</div>
@@ -870,9 +870,9 @@
<div id="so_block_align" data-selector=".s_mail_alert, .s_mail_blockquote, .s_mail_text_highlight">
<we-button-group string="Alignment" data-dependencies="!so_width_100">
<we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
<we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
<we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
<we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
<we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
<we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
</we-button-group>
</div>
@@ -665,16 +665,6 @@ const ButtonUserValueWidget = UserValueWidget.extend({
'mouseleave': '_onUserValueReset',
},
/**
* @override
*/
start: function (parent, title, options) {
if (this.options && this.options.childNodes) {
this.options.childNodes.forEach(node => this.containerEl.appendChild(node));
}
return this._super(...arguments);
},
/**
* @override
*/
@@ -689,11 +679,24 @@ const ButtonUserValueWidget = UserValueWidget.extend({
*/
_makeDescriptive() {
const $el = this._super(...arguments);
if (this.imgEl) {
$el[0].classList.add('o_we_icon_button');
}
if (this.activeImgEl) {
this.containerEl.appendChild(this.activeImgEl);
}
return $el;
},
/**
* @override
*/
start: function (parent, title, options) {
if (this.options && this.options.childNodes) {
this.options.childNodes.forEach(node => this.containerEl.appendChild(node));
}
return this._super(...arguments);
},
//--------------------------------------------------------------------------
// Public
@@ -793,10 +793,15 @@ body.editor_enable.editor_has_snippets {
we-button {
margin-top: 0 !important;
margin-left: $o-we-sidebar-content-field-multi-spacing;
padding: 0 $o-we-sidebar-content-field-multi-spacing;
padding: 0 $o-we-sidebar-content-field-multi-spacing !important;
&.fa, &[data-img] {
&.fa, &.o_we_icon_button {
box-sizing: content-box;
width: 1.29em; // Fix width and override potential fa-fw
padding: 0 0.15em !important;
margin-left: $o-we-sidebar-content-field-label-spacing;
text-align: center;
justify-content: center;
}
}
}
@@ -888,9 +893,17 @@ body.editor_enable.editor_has_snippets {
}
}
// Buttons with an icon but no text, so no possible overflow
we-button.o_we_button_icon {
flex: 0 0 auto;
we-button {
// Prevent icon buttons to shrink
&.o_we_icon_button, &.fa {
flex: 0 0 auto;
}
// Buttons being `fa-fw`, prevent font-awesome hardcoded width
&.fa-fw {
padding: 0 .5em;
width: 2.29em; // .fa-fw = 1.28571429em (font-awesome.css)
justify-content: center;
}
}
// Checkboxes
@@ -58,9 +58,7 @@
</button>
<t t-if="widget.resetButton">
<t t-set="trash_title"><t t-if="widget.withCombinations">None</t><t t-else="">Reset</t></t>
<button type="button" class="my-1 ml-5 py-0 o_we_color_btn o_colorpicker_reset o_we_hover_danger" t-att-title="trash_title">
<i class="fa fa-trash"/>
</button>
<button type="button" class="fa fa-trash my-1 ml-5 py-0 o_we_color_btn o_colorpicker_reset o_we_hover_danger" t-att-title="trash_title"/>
</t>
</div>
<div class="o_colorpicker_sections pt-2 px-2 pb-3" data-color-tab="color-combinations">
+12 -17
View File
@@ -8,7 +8,7 @@
</div>
<form class="ml-auto">
<!-- Uncomment the following line when the mobile preview will be available. -->
<!-- <button type="button" class="btn btn-secondary" name="mobile" data-action="mobilePreview"><i class="fa fa-mobile"></i></button> -->
<!-- <button type="button" class="btn btn-secondary fa fa-mobile" name="mobile" data-action="mobilePreview"/> -->
<button type="button" class="btn btn-secondary" data-action="cancel" title="Discard record" accesskey="j">Discard</button>
<button type="button" class="btn btn-primary" data-action="save" title="Save record" accesskey="s">Save</button>
</form>
@@ -140,12 +140,11 @@
<we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
<t t-if="with_colors" t-call="web_editor.snippet_options_background_color_widget"/>
<t t-if="with_images">
<we-button title="Image" class="ml-auto"
<we-button title="Image" class="ml-auto fa fa-fw fa-camera"
data-name="bg_image_toggle_opt"
t-att-data-dependencies="images_dependencies"
data-toggle-bg-image="true"
data-no-preview="true">
<i class="fa fa-fw fa-camera"/>
</we-button>
<we-button title="Shape"
data-toggle-bg-shape="true"
@@ -184,9 +183,7 @@
<we-button data-background-type="cover">Cover</we-button>
<we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
</we-select>
<we-button title="Background Position" data-background-position-overlay="true" data-no-preview="true">
<i class="fa fa-fw fa-crosshairs"/>
</we-button>
<we-button class="fa fa-fw fa-crosshairs" title="Background Position" data-background-position-overlay="true" data-no-preview="true"/>
</we-row>
<we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
<!-- &emsp; -->
@@ -356,8 +353,8 @@
</we-select-page>
</we-select-pager>
<we-row string=" ⌙ Flip"><!-- &emsp; -->
<we-button data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-h"/></we-button>
<we-button data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-v"/></we-button>
<we-button class="fa fa-fw fa-arrows-h" data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"/>
<we-button class="fa fa-fw fa-arrows-v" data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"/>
</we-row>
<we-row string=" ⌙ Colors" data-name="colors">
<we-colorpicker data-select-style="" data-css-property="background-color" data-color-prefix="bg-" data-apply-to="> .o_we_shape"/>
@@ -502,7 +499,7 @@
<we-button data-set-img-shape="web_editor/special/spl_circuit_1" data-select-label="Circuit" data-animated="true"/>
</we-select-page>
</we-select-pager>
<we-button data-set-img-shape="" data-no-preview="true" data-label="None" data-dependencies="shape_img_opt" class="o_we_image_shape_remove"><i class="fa fa-fw fa-times"/></we-button>
<we-button data-set-img-shape="" data-no-preview="true" data-label="None" data-dependencies="shape_img_opt" class="o_we_image_shape_remove fa fa-fw fa-times"/>
</we-row>
<we-row string=" ⌙ Colors">
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-0" data-color-id="0" />
@@ -518,13 +515,11 @@
<div data-js="ImageTools" data-selector="img">
<we-row string="Transform">
<we-button data-crop="true" data-no-preview="true" title="Crop Image"><i class="fa fa-crop"></i></we-button>
<we-button class="fa fa-fw fa-crop" data-crop="true" data-no-preview="true" title="Crop Image"/>
<we-button class="ml-0 border-left-0" data-reset-crop="" data-no-preview="true" title="Reset crop">
Reset
</we-button>
<we-button data-transform="true" data-no-preview="true" title="Transform the picture">
<i class="fa fa-object-ungroup"></i>
</we-button>
<we-button class="fa fa-fw fa-object-ungroup" data-transform="true" data-no-preview="true" title="Transform the picture"/>
<we-button class="ml-0 border-left-0" data-reset-transform="" data-no-preview="true" title="Reset transformation">
Reset
</we-button>
@@ -547,10 +542,10 @@
</we-select>
<we-row string="Style">
<we-button data-select-class="rounded" title="Shape: Rounded"><i class="fa fa-square fa-fw"/></we-button>
<we-button data-select-class="rounded-circle" title="Shape: Circle"><i class="fa fa-circle-o fa-fw"/></we-button>
<we-button data-select-class="shadow" title="Shadow"><i class="fa fa-sun-o fa-fw"/></we-button>
<we-button data-select-class="img-thumbnail" title="Shape: Thumbnail"><i class="fa fa-picture-o fa-fw"/></we-button>
<we-button class="fa fa-fw fa-square" data-select-class="rounded" title="Shape: Rounded"/>
<we-button class="fa fa-fw fa-circle-o" data-select-class="rounded-circle" title="Shape: Circle"/>
<we-button class="fa fa-fw fa-sun-o" data-select-class="shadow" title="Shadow"/>
<we-button class="fa fa-fw fa-picture-o" data-select-class="img-thumbnail" title="Shape: Thumbnail"/>
</we-row>
<we-input string="Padding" data-select-style="" data-unit="px" data-css-property="padding"/>
@@ -704,14 +704,11 @@ options.registry.WebsiteFormEditor = FormEditor.extend({
* @returns {HTMLElement}
*/
_addCreateButton: function (element, action) {
const iconEl = document.createElement('i');
iconEl.classList.add('fa', 'fa-fw', 'fa-plus');
const linkButtonEl = document.createElement('we-button');
linkButtonEl.title = _t("Create new");
linkButtonEl.dataset.noPreview = 'true';
linkButtonEl.dataset.promptSaveRedirect = action;
linkButtonEl.classList.add('o_we_button_icon');
linkButtonEl.append(iconEl);
linkButtonEl.classList.add('fa', 'fa-fw', 'fa-plus');
const projectRowEl = document.createElement('we-row');
projectRowEl.append(element);
projectRowEl.append(linkButtonEl);
@@ -19,9 +19,9 @@
title="Edit embedded code">Edit</we-button>
</we-row>
<we-button-group string="Alignment">
<we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
<we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
<we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
<we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-left"/>
<we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="text-center"/>
<we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-right"/>
</we-button-group>
</div>
</xpath>
+3 -3
View File
@@ -21,9 +21,9 @@
<we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
</we-select>
<we-button-group string="Alignment" data-dependencies="!so_width_100">
<we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
<we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
<we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
<we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
<we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
<we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
</we-button-group>
</div>
</xpath>
@@ -121,10 +121,10 @@
</div>
<div data-js="gallery_img" data-selector=".s_image_gallery img">
<we-row string="Re-order" data-no-preview="true">
<we-button title="Move to first" data-position="first"><i class="fa fa-fw fa-angle-double-left"/></we-button>
<we-button title="Move to previous" data-position="prev"><i class="fa fa-fw fa-angle-left"/></we-button>
<we-button title="Move to next" data-position="next"><i class="fa fa-fw fa-angle-right"/></we-button>
<we-button title="Move to last" data-position="last"><i class="fa fa-fw fa-angle-double-right"/></we-button>
<we-button class="fa fa-fw fa-angle-double-left" title="Move to first" data-position="first"/>
<we-button class="fa fa-fw fa-angle-left" title="Move to previous" data-position="prev"/>
<we-button class="fa fa-fw fa-angle-right" title="Move to next" data-position="next"/>
<we-button class="fa fa-fw fa-angle-double-right" title="Move to last" data-position="last"/>
</we-row>
</div>
</xpath>
@@ -60,9 +60,9 @@
<div data-js="TableOfContent" data-selector=".s_table_of_content"/>
<div data-js="TableOfContentNavbar" data-selector=".s_table_of_content_navbar_wrap">
<we-button-group string="Position">
<we-button title="Left" data-navbar-position="left"><i class="fa fa-fw fa-long-arrow-left"/></we-button>
<we-button title="Top" data-navbar-position="top"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
<we-button title="Right" data-navbar-position="right"><i class="fa fa-fw fa-long-arrow-right"/></we-button>
<we-button class="fa fa-fw fa-long-arrow-left" title="Left" data-navbar-position="left"/>
<we-button class="fa fa-fw fa-long-arrow-up" title="Top" data-navbar-position="top"/>
<we-button class="fa fa-fw fa-long-arrow-right" title="Right" data-navbar-position="right"/>
</we-button-group>
<we-checkbox string="Sticky" data-select-class="s_table_of_content_navbar_sticky" data-no-preview="true"/>
</div>
+5 -5
View File
@@ -84,11 +84,11 @@
</we-select>
<we-divider/>
<we-button-group string="Slide" data-apply-to=".s_tabs_content:first">
<we-button title="Slide Left" data-select-class="s_tabs_slide_left"><i class="fa fa-fw fa-long-arrow-left"/></we-button>
<we-button title="Slide Up" data-select-class="s_tabs_slide_up"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
<we-button title="Slide Down" data-select-class="s_tabs_slide_down"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
<we-button title="Slide Right" data-select-class="s_tabs_slide_right"><i class="fa fa-fw fa-long-arrow-right"/></we-button>
<we-button title="No Slide Effect" data-select-class=""><i class="fa fa-fw fa-ban"/></we-button>
<we-button class="fa fa-fw fa-long-arrow-left" title="Slide Left" data-select-class="s_tabs_slide_left"/>
<we-button class="fa fa-fw fa-long-arrow-up" title="Slide Up" data-select-class="s_tabs_slide_up"/>
<we-button class="fa fa-fw fa-long-arrow-down" title="Slide Down" data-select-class="s_tabs_slide_down"/>
<we-button class="fa fa-fw fa-long-arrow-right" title="Slide Right" data-select-class="s_tabs_slide_right"/>
<we-button class="fa fa-fw fa-ban" title="No Slide Effect" data-select-class=""/>
</we-button-group>
</div>
</xpath>
+19 -30
View File
@@ -179,13 +179,11 @@
<template id="snippet_options_background_options" inherit_id="web_editor.snippet_options_background_options">
<xpath expr="//we-button[@data-toggle-bg-image]" position="after">
<we-button title="Video"
<we-button title="Video" class="fa fa-fw fa-film"
data-name="bg_video_toggler_opt"
t-att-data-dependencies="images_dependencies"
data-toggle-bg-video="true"
data-no-preview="true">
<i class="fa fa-fw fa-film"/>
</we-button>
data-no-preview="true"/>
</xpath>
<xpath expr="//t[@t-set='color_filter_dependencies']" position="after">
<t t-set="color_filter_dependencies" t-valuef="#{color_filter_dependencies}, bg_video_toggler_opt"/>
@@ -357,9 +355,9 @@
<!-- H-ALIGN -->
<div id="so_text_align" data-selector=".s_share, .s_text_highlight">
<we-button-group string="Alignment">
<we-button title="Left" data-select-class="text-left"><i class="fa fa-fw fa-align-left"/></we-button>
<we-button title="Center" data-select-class="text-center"><i class="fa fa-fw fa-align-center"/></we-button>
<we-button title="Right" data-select-class="text-right"><i class="fa fa-fw fa-align-right"/></we-button>
<we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="text-left"/>
<we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="text-center"/>
<we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="text-right"/>
</we-button-group>
</div>
@@ -374,9 +372,9 @@
<div id="so_block_align" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
<we-button-group string="Alignment" data-dependencies="!so_width_100">
<we-button title="Left" data-select-class="mr-auto"><i class="fa fa-fw fa-align-left"/></we-button>
<we-button title="Center" data-select-class="mx-auto"><i class="fa fa-fw fa-align-center"/></we-button>
<we-button title="Right" data-select-class="ml-auto"><i class="fa fa-fw fa-align-right"/></we-button>
<we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="mr-auto"/>
<we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
<we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ml-auto"/>
</we-button-group>
</div>
@@ -416,18 +414,10 @@
<div data-js="CarouselItem"
data-selector=".s_carousel .carousel-item, .s_quotes_carousel .carousel-item">
<we-button data-slide="left" data-no-preview="true" data-tooltip="true" title="Move Backward">
<i class="fa fa-fw fa-angle-left"/>
</we-button>
<we-button data-slide="right" data-no-preview="true" class="mr-2" data-tooltip="true" title="Move Forward">
<i class="fa fa-fw fa-angle-right"/>
</we-button>
<we-button data-add-slide-item="true" data-no-preview="true" class="o_we_bg_success" data-tooltip="true" title="Add Slide">
<i class="fa fa-fw fa-plus"/>
</we-button>
<we-button data-remove-slide="true" data-no-preview="true" class="o_we_bg_danger" data-tooltip="true" title="Remove Slide">
<i class="fa fa-fw fa-minus"/>
</we-button>
<we-button class="fa fa-fw fa-angle-left" data-slide="left" data-no-preview="true" data-tooltip="true" title="Move Backward"/>
<we-button class="fa fa-fw fa-angle-right mr-2" data-slide="right" data-no-preview="true" data-tooltip="true" title="Move Forward"/>
<we-button class="fa fa-fw fa-plus o_we_bg_success" data-add-slide-item="true" data-no-preview="true" data-tooltip="true" title="Add Slide"/>
<we-button class="fa fa-fw fa-minus o_we_bg_danger" data-remove-slide="true" data-no-preview="true" data-tooltip="true" title="Remove Slide"/>
</div>
<!-- Accordion -->
@@ -1044,8 +1034,7 @@
</t>
<we-button-group class="ml-auto">
<we-imagepicker title="Image" data-background="" data-button-style="true"/>
<we-button title="None" data-background="">
<i class="fa fa-fw fa-ban"/>
<we-button class="fa fa-fw fa-ban" title="None" data-background="">
</we-button>
</we-button-group>
</we-row>
@@ -1303,12 +1292,12 @@
data-customize-website-color=""
data-color="body"/>
<we-button-group data-imagepicker="body_bg_image_opt">
<we-button title="Image"
data-customize-body-bg-type="'image'"><i class="fa fa-fw fa-camera"/></we-button>
<we-button title="Pattern"
data-customize-body-bg-type="'pattern'"><i class="fa fa-fw fa-th"/></we-button>
<we-button title="None"
data-customize-body-bg-type="NONE"><i class="fa fa-fw fa-ban"/></we-button>
<we-button title="Image" class="fa fa-fw fa-camera"
data-customize-body-bg-type="'image'"/>
<we-button title="Pattern" class="fa fa-fw fa-th"
data-customize-body-bg-type="'pattern'"/>
<we-button title="None" class="fa fa-fw fa-ban"
data-customize-body-bg-type="NONE"/>
</we-button-group>
<!-- Hidden imagepicker enabled by above button-group -->
<we-imagepicker data-name="body_bg_image_opt"
@@ -89,8 +89,8 @@
</div>
<div data-selector="#product_detail #o-carousel-product" data-no-check="true">
<we-button-group string="Thumbnails Position" data-no-preview="true" data-reload="/">
<we-button title="Left" data-customize-website-views="website_sale.carousel_product_indicators_left"><i class="fa fa-fw fa-long-arrow-left"/></we-button>
<we-button title="Bottom" data-customize-website-views="website_sale.carousel_product_indicators_bottom"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
<we-button class="fa fa-fw fa-long-arrow-left" title="Left" data-customize-website-views="website_sale.carousel_product_indicators_left"/>
<we-button class="fa fa-fw fa-long-arrow-down" title="Bottom" data-customize-website-views="website_sale.carousel_product_indicators_bottom"/>
</we-button-group>
</div>
</xpath>