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

[IMP] web_editor, *: introduce new "button group" editor widget

Browse Source 
*: website, website_form

Basically work just as a we-select but with a different design.

Part of https://github.com/odoo/odoo/pull/53930
task-2157252
This commit is contained in:
qsm-odoo
2020-07-14 14:43:16 +00:00
parent b96c0eaf38
commit d23a9c1954
18 changed files with 230 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.editor.js
+1 -1
View File
@@ -457,7 +457,7 @@ var SnippetEditor = Widget.extend({
var $optionsSection = $(core.qweb.render('web_editor.customize_block_options_section', {
name: this.getName(),
})).data('editor', this);
const $optionsSectionBtnGroup = $optionsSection.find('we-button-group');
const $optionsSectionBtnGroup = $optionsSection.find('we-top-button-group');
$optionsSectionBtnGroup.contents().each((i, node) => {
if (node.nodeType === Node.TEXT_NODE) {
node.parentNode.removeChild(node);
addons/web_editor/static/src/js/editor/snippets.options.js
+67 -49
View File
@@ -677,7 +677,63 @@ const CheckboxUserValueWidget = ButtonUserValueWidget.extend({
},
});
const SelectUserValueWidget = UserValueWidget.extend({
const BaseSelectionUserValueWidget = UserValueWidget.extend({
/**
* @override
*/
async start() {
await this._super(...arguments);
this.menuEl = document.createElement('we-selection-items');
if (this.options && this.options.childNodes) {
this.options.childNodes.forEach(node => this.menuEl.appendChild(node));
}
this.containerEl.appendChild(this.menuEl);
},
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
/**
* @override
*/
getValue(methodName) {
let activeWidget = this._userValueWidgets.find(widget => widget.isPreviewed());
if (!activeWidget) {
activeWidget = this._userValueWidgets.find(widget => widget.isActive());
}
if (activeWidget) {
return activeWidget.getActiveValue(methodName);
}
return this._super(...arguments);
},
/**
* @override
*/
isContainer() {
return true;
},
/**
* @override
*/
setValue(value, methodName) {
this._userValueWidgets.forEach(widget => {
widget.setValue('__NULL__', methodName);
});
for (const widget of [...this._userValueWidgets].reverse()) {
widget.setValue(value, methodName);
if (widget.isActive()) {
// Only one select item can be true at a time, we consider the
// last one if multiple would be active.
return;
}
}
this._super(...arguments);
},
});
const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
tagName: 'we-select',
events: {
'click': '_onClick',
@@ -686,9 +742,11 @@ const SelectUserValueWidget = UserValueWidget.extend({
/**
* @override
*/
start: function () {
async start() {
await this._super(...arguments);
if (this.options && this.options.valueEl) {
this.containerEl.appendChild(this.options.valueEl);
this.containerEl.insertBefore(this.options.valueEl, this.menuEl);
}
this.menuTogglerEl = document.createElement('we-toggler');
@@ -699,15 +757,7 @@ const SelectUserValueWidget = UserValueWidget.extend({
iconEl.classList.add('fa', 'fa-fw', this.icon);
this.menuTogglerEl.appendChild(iconEl);
}
this.containerEl.appendChild(this.menuTogglerEl);
this.menuEl = document.createElement('we-select-menu');
if (this.options && this.options.childNodes) {
this.options.childNodes.forEach(node => this.menuEl.appendChild(node));
}
this.containerEl.appendChild(this.menuEl);
return this._super(...arguments);
this.containerEl.insertBefore(this.menuTogglerEl, this.menuEl);
},
//--------------------------------------------------------------------------
@@ -721,25 +771,6 @@ const SelectUserValueWidget = UserValueWidget.extend({
this._super(...arguments);
this.menuTogglerEl.classList.remove('active');
},
/**
* @override
*/
getValue: function (methodName) {
let activeWidget = this._userValueWidgets.find(widget => widget.isPreviewed());
if (!activeWidget) {
activeWidget = this._userValueWidgets.find(widget => widget.isActive());
}
if (activeWidget) {
return activeWidget.getActiveValue(methodName);
}
return this._super(...arguments);
},
/**
* @override
*/
isContainer: function () {
return true;
},
/**
* @override
*/
@@ -753,23 +784,6 @@ const SelectUserValueWidget = UserValueWidget.extend({
this._super(...arguments);
this.menuTogglerEl.classList.add('active');
},
/**
* @override
*/
setValue: function (value, methodName) {
this._userValueWidgets.forEach(widget => {
widget.setValue('__NULL__', methodName);
});
for (const widget of [...this._userValueWidgets].reverse()) {
widget.setValue(value, methodName);
if (widget.isActive()) {
// Only one select item can be true at a time, we consider the
// last one if multiple would be active.
return;
}
}
this._super(...arguments);
},
//--------------------------------------------------------------------------
// Private
@@ -834,6 +848,10 @@ const SelectUserValueWidget = UserValueWidget.extend({
},
});
const ButtonGroupUserValueWidget = BaseSelectionUserValueWidget.extend({
tagName: 'we-button-group',
});
const InputUserValueWidget = UserValueWidget.extend({
tagName: 'we-input',
events: {
@@ -1545,11 +1563,11 @@ const RangeUserValueWidget = UserValueWidget.extend({
},
});
const userValueWidgetsRegistry = {
'we-button': ButtonUserValueWidget,
'we-checkbox': CheckboxUserValueWidget,
'we-select': SelectUserValueWidget,
'we-button-group': ButtonGroupUserValueWidget,
'we-input': InputUserValueWidget,
'we-multi': MultiUserValueWidget,
'we-colorpicker': ColorpickerUserValueWidget,
addons/web_editor/static/src/scss/web_editor.variables.scss
+3
View File
@@ -156,6 +156,9 @@ $o-we-sidebar-content-field-input-font-family: monospace !default;
$o-we-sidebar-content-field-input-unit-font-size: 9px !default;
$o-we-sidebar-content-field-input-border-color: $o-we-accent !default;
// This value allows 5 fa icons (fit one row exactly with this)
$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing * 1.5 !default;
$o-we-sidebar-content-field-progress-height: 3px !default;
$o-we-sidebar-content-field-progress-control-height: 7px !default;
$o-we-sidebar-content-field-progress-color: $o-we-fg-darker !default;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+32 -3
View File
@@ -372,7 +372,7 @@ body.editor_enable.editor_has_snippets {
line-height: $o-we-sidebar-content-main-title-height - $o-we-sidebar-content-main-title-border-width;
}
> we-button-group {
> we-top-button-group {
flex: 0 0 auto;
display: block;
margin-left: auto;
@@ -499,6 +499,13 @@ body.editor_enable.editor_has_snippets {
}
}
// Selection (select and button groups)
we-selection-items {
.o_we_user_value_widget {
margin-top: 0;
}
}
// Selects
we-select.o_we_user_value_widget {
position: relative;
@@ -507,7 +514,7 @@ body.editor_enable.editor_has_snippets {
@include large-component();
}
we-select-menu {
we-selection-items {
@include o-position-absolute(100%, 0, auto, 0);
z-index: $zindex-dropdown;
max-height: 600px;
@@ -520,7 +527,6 @@ body.editor_enable.editor_has_snippets {
we-button {
@include we-icon-button('', $align: left); // Always a padding on the left
margin-top: 0;
border: none;
background: none;
background-clip: padding-box;
@@ -547,6 +553,29 @@ body.editor_enable.editor_has_snippets {
}
}
// Button groups
we-button-group.o_we_user_value_widget {
we-selection-items {
display: flex;
max-width: 100%;
we-button {
padding: 0 $o-we-sidebar-content-field-button-group-button-spacing;
&.active {
padding-left: $o-we-sidebar-content-field-button-group-button-spacing;
&::after {
display: none;
}
}
+ we-button {
border-left: none;
}
}
}
}
// Inputs
we-input.o_we_user_value_widget {
addons/web_editor/static/src/xml/snippets.xml
+2 -2
View File
@@ -23,14 +23,14 @@
<we-customizeblock-options>
<we-title>
<span t-esc="name"/>
<we-button-group>
<we-top-button-group>
<we-button class="fa fa-fw fa-clone oe_snippet_clone"
title="Duplicate Container"
aria-label="Duplicate Container"/>
<we-button class="fa fa-fw fa-trash oe_snippet_remove"
title="Remove Block"
aria-label="Remove Block"/>
</we-button-group>
</we-top-button-group>
</we-title>
</we-customizeblock-options>
</t>
addons/website/static/src/img/snippets_options/content_width_full.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>content_width_full</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Field/Toggle/3-Buttons-Copy" transform="translate(-227.000000, -5.000000)" fill="#FFFFFF">
<path d="M251,5 C251.552285,5 252,5.44771525 252,6 L252,16 C252,16.5522847 251.552285,17 251,17 L228,17 C227.447715,17 227,16.5522847 227,16 L227,6 C227,5.44771525 227.447715,5 228,5 L251,5 Z M251,15 L228,15 L228,16 L251,16 L251,15 Z M251,6 L228,6 L228,7 L251,7 L251,6 Z" id="content_width_full"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 756 B

addons/website/static/src/img/snippets_options/content_width_normal.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>content_width_normal</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Field/Toggle/3-Buttons-Copy" transform="translate(-184.000000, -5.000000)" fill="#FFFFFF">
<path d="M208,5 C208.552285,5 209,5.44771525 209,6 L209,16 C209,16.5522847 208.552285,17 208,17 L185,17 C184.447715,17 184,16.5522847 184,16 L184,6 C184,5.44771525 184.447715,5 185,5 L208,5 Z M208,6 L185,6 L185,16 L208,16 L208,6 Z M205,7 L205,15 L188,15 L188,7 L205,7 Z" id="content_width_normal"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 759 B

addons/website/static/src/img/snippets_options/content_width_small.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>content_width_small</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Field/Toggle/3-Buttons-Copy" transform="translate(-141.000000, -5.000000)" fill="#FFFFFF">
<path d="M165,5 C165.552285,5 166,5.44771525 166,6 L166,16 C166,16.5522847 165.552285,17 165,17 L142,17 C141.447715,17 141,16.5522847 141,16 L141,6 C141,5.44771525 141.447715,5 142,5 L165,5 Z M165,6 L142,6 L142,16 L165,16 L165,6 Z M159,7 L159,15 L148,15 L148,7 L159,7 Z" id="content_width_small"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 757 B

addons/website/static/src/img/snippets_options/height_auto.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>height_auto</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Field/Toggle/3-Buttons" transform="translate(-141.000000, -5.000000)" fill="#FFFFFF">
<path d="M165,5 C165.552285,5 166,5.44771525 166,6 L166,16 C166,16.5522847 165.552285,17 165,17 L142,17 C141.447715,17 141,16.5522847 141,16 L141,6 C141,5.44771525 141.447715,5 142,5 L165,5 Z M165,16 L165,6 L164,6 L164,9 L143,9 L143,6 L142,6 L142,16 L165,16 Z" id="height_auto"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 726 B

addons/website/static/src/img/snippets_options/height_full.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>height_full</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Field/Toggle/3-Buttons" transform="translate(-227.000000, -5.000000)" fill="#FFFFFF">
<path d="M251,5 C251.552285,5 252,5.44771525 252,6 L252,16 C252,16.5522847 251.552285,17 251,17 L228,17 C227.447715,17 227,16.5522847 227,16 L227,6 C227,5.44771525 227.447715,5 228,5 L251,5 Z M229,6 L228,6 L228,16 L229,16 L229,6 Z M251,6 L250,6 L250,16 L251,16 L251,6 Z" id="height_full"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 736 B

addons/website/static/src/img/snippets_options/height_half.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="25px" height="12px" viewBox="0 0 25 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>height_half</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Field/Toggle/3-Buttons" transform="translate(-184.000000, -5.000000)" fill="#FFFFFF">
<path d="M208,5 C208.552285,5 209,5.44771525 209,6 L209,16 C209,16.5522847 208.552285,17 208,17 L185,17 C184.447715,17 184,16.5522847 184,16 L184,6 C184,5.44771525 184.447715,5 185,5 L208,5 Z M208,16 L208,6 L207,6 L207,11 L186,11 L186,6 L185,6 L185,16 L208,16 Z" id="height_half"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 728 B

addons/website/views/snippets/s_hr.xml
+5 -5
View File
@@ -31,11 +31,11 @@
<we-button data-select-class="w-75">75%</we-button>
<we-button data-select-class="w-100">100%</we-button>
</we-select>
<we-select string="Alignment">
<we-button data-select-class="mr-auto">Left</we-button>
<we-button data-select-class="mx-auto">Center</we-button>
<we-button data-select-class="ml-auto">Right</we-button>
</we-select>
<we-button-group string="Alignment">
<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-group>
</div>
</xpath>
</template>
addons/website/views/snippets/s_media_list.xml
+9 -9
View File
@@ -60,17 +60,17 @@
<t t-call="website.snippet_options_shadow"/>
</div>
<div data-selector=".s_media_list_item" data-target="> .row">
<we-select string="Image Position" title="Image Position">
<we-button data-select-class="">Left</we-button>
<we-button data-select-class="flex-row-reverse">Right</we-button>
</we-select>
<we-button-group string="Image Position">
<we-button title="Left" data-select-class=""><i class="fa fa-fw fa-align-left"/></we-button>
<we-button title="Right" data-select-class="flex-row-reverse"><i class="fa fa-fw fa-align-right"/></we-button>
</we-button-group>
<!-- Don't use the standard Vert. Alignement option to not suggest
Equal Height, which is useless for this snippet -->
<we-select string="Vert. Alignment" title="Vertical Alignment">
<we-button data-select-class="align-items-start">Top</we-button>
<we-button data-select-class="align-items-center">Middle</we-button>
<we-button data-select-class="align-items-end">Bottom</we-button>
</we-select>
<we-button-group string="Vert. Alignment" title="Vertical Alignment">
<we-button title="Top" data-select-class="align-items-start"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
<we-button title="Middle" data-select-class="align-items-center"><i class="fa fa-fw fa-circle"/></we-button>
<we-button title="Bottom" data-select-class="align-items-end"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
</we-button-group>
</div>
<div data-js="MediaItemLayout" data-selector=".s_media_list_item">
<we-select string="Layout">
addons/website/views/snippets/s_table_of_content.xml
+5 -5
View File
@@ -54,11 +54,11 @@
<we-checkbox string="Animate Scrolling" data-animate-scrolling="true" data-no-preview="true"/>
</div>
<div data-js="TableOfContentNavbar" data-selector=".s_table_of_content_navbar_wrap">
<we-select string="Position">
<we-button data-navbar-position="left">Left</we-button>
<we-button data-navbar-position="right">Right</we-button>
<we-button data-navbar-position="top">Top</we-button>
</we-select>
<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-group>
<we-checkbox string="Sticky" data-select-class="s_table_of_content_navbar_sticky" data-no-preview="true"/>
</div>
<div data-js="TableOfContentMainColumns" data-selector=".s_table_of_content_navbar_wrap, .s_table_of_content_main"/>
addons/website/views/snippets/s_tabs.xml
+7 -7
View File
@@ -102,13 +102,13 @@
<we-button data-select-class="nav-justified">Justified</we-button>
</we-select>
<we-divider/>
<we-select string="Transition" data-apply-to=".s_tabs_content:first">
<we-button data-select-class="">No Slide Effect</we-button>
<we-button data-select-class="s_tabs_slide_up">Slide Up</we-button>
<we-button data-select-class="s_tabs_slide_down">Slide Down</we-button>
<we-button data-select-class="s_tabs_slide_left">Slide Left</we-button>
<we-button data-select-class="s_tabs_slide_right">Slide Right</we-button>
</we-select>
<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-group>
</div>
</xpath>
</template>
addons/website/views/snippets/s_text_highlight.xml
+5 -5
View File
@@ -22,11 +22,11 @@
</xpath>
<xpath expr="//div[@data-js='background']" position="before">
<div data-selector=".s_text_highlight">
<we-select string="Position">
<we-button data-select-class="">Left</we-button>
<we-button data-select-class="mx-auto">Center</we-button>
<we-button data-select-class="ml-auto">Right</we-button>
</we-select>
<we-button-group string="Position">
<we-button title="Left" data-select-class=""><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-group>
</div>
</xpath>
</template>
addons/website/views/snippets/snippets.xml
+38 -27
View File
@@ -184,11 +184,11 @@
<!-- H-ALIGN -->
<div id="so_text_align" data-selector=".s_share">
<we-select string="Alignment">
<we-button data-select-class="text-left">Left</we-button>
<we-button data-select-class="text-center">Center</we-button>
<we-button data-select-class="text-right">Right</we-button>
</we-select>
<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-group>
</div>
<div id="so_width" data-selector=".s_alert, .s_card, .s_blockquote">
@@ -201,11 +201,11 @@
</div>
<div id="so_block_align" data-selector=".s_alert, .s_card, .s_blockquote">
<we-select string="Alignment" data-dependencies="!so_width_100">
<we-button data-select-class="mr-auto">Left</we-button>
<we-button data-select-class="mx-auto">Center</we-button>
<we-button data-select-class="ml-auto">Right</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-group>
</div>
<!-- Carousel | .s_carousel | .s_quotes_carousel -->
@@ -628,20 +628,32 @@
<!-- Stretch section -->
<div data-js="ContainerWidth" data-selector="section"
data-target="> .container, > .container-fluid, > .o_container_small">
<we-select string="Content Width">
<we-button data-select-class="container-fluid">Full</we-button>
<we-button data-select-class="container">Regular</we-button>
<we-button data-select-class="o_container_small">Small</we-button>
</we-select>
<we-button-group string="Content Width">
<we-button data-select-class="container-fluid"
data-img="/website/static/src/img/snippets_options/content_width_full.svg"
title="Full"/>
<we-button data-select-class="container"
data-img="/website/static/src/img/snippets_options/content_width_normal.svg"
title="Regular"/>
<we-button data-select-class="o_container_small"
data-img="/website/static/src/img/snippets_options/content_width_small.svg"
title="Small"/>
</we-button-group>
</div>
<!-- Min height of section -->
<div data-selector="section">
<we-select string="Height">
<we-button data-select-class="">Fit content</we-button>
<we-button data-select-class="o_half_screen_height">Half screen</we-button>
<we-button data-select-class="o_full_screen_height">Full screen</we-button>
</we-select>
<we-button-group string="Height">
<we-button data-select-class=""
data-img="/website/static/src/img/snippets_options/height_auto.svg"
title="Fit content"/>
<we-button data-select-class="o_half_screen_height"
data-img="/website/static/src/img/snippets_options/height_half.svg"
title="Half screen"/>
<we-button data-select-class="o_full_screen_height"
data-img="/website/static/src/img/snippets_options/height_full.svg"
title="Full screen"/>
</we-button-group>
</div>
<!-- Scroll to next section button (only for full height) -->
@@ -666,13 +678,12 @@
<!-- Vertical Alignment -->
<div id="row_valign_snippet_option" data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
<we-select string="Vert. Alignment" title="Vertical Alignment">
<we-button data-select-class="align-items-start">Top</we-button>
<we-button data-select-class="align-items-center">Middle</we-button>
<we-button data-select-class="align-items-end">Bottom</we-button>
<we-divider/>
<we-button data-select-class="align-items-stretch">Equal height</we-button>
</we-select>
<we-button-group string="Vert. Alignment" title="Vertical Alignment">
<we-button title="Top" data-select-class="align-items-start"><i class="fa fa-fw fa-long-arrow-up"/></we-button>
<we-button title="Middle" data-select-class="align-items-center"><i class="fa fa-fw fa-circle"/></we-button>
<we-button title="Bottom" data-select-class="align-items-end"><i class="fa fa-fw fa-long-arrow-down"/></we-button>
<we-button title="Equal height" data-select-class="align-items-stretch"><i class="fa fa-fw fa-arrows-v"/></we-button>
</we-button-group>
</div>
<!-- Cookies Bar -->
addons/website_form/static/src/snippets/s_website_form/options.js
+2 -2
View File
@@ -1012,7 +1012,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
const togglerEl = document.createElement('we-toggler');
togglerEl.textContent = addItemTitle;
addItemButton.appendChild(togglerEl);
const selectMenuEl = document.createElement('we-select-menu');
const selectMenuEl = document.createElement('we-selection-items');
addItemButton.appendChild(selectMenuEl);
this._loadListDropdown(selectMenuEl);
}
@@ -1035,7 +1035,7 @@ options.registry.WebsiteFieldEditor = FieldEditor.extend({
* @param {HTMLElement} selectMenu
*/
_loadListDropdown: function (selectMenu) {
selectMenu = selectMenu || this.el.querySelector('we-list we-select-menu');
selectMenu = selectMenu || this.el.querySelector('we-list we-selection-items');
if (selectMenu) {
selectMenu.innerHTML = '';
const field = Object.assign({}, this.fields[this._getFieldName()]);