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

[IMP] web_editor, *: introduce select & checkboxes for the left panel UI

Browse Source 
* website, website_blog, website_form, website_sale

+ introduce default UI for snippet options
+ refactor style of icon buttons

Part of https://github.com/odoo/odoo/pull/38959
task-2066614
This commit is contained in:
qsm-odoo
2019-11-18 09:56:08 +00:00
parent ed8133c72f
commit 72a2f417ae
14 changed files with 644 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.editor.js
+67 -11
View File
@@ -321,6 +321,56 @@ var SnippetEditor = Widget.extend({
// Private
//--------------------------------------------------------------------------
/**
* Transforms option UI description into actual DOM.
*
* @private
* @param {jQuery} $el
*/
_createOptionUI: function ($el) {
const $optionSection = $(core.qweb.render('web_editor.customize_block_option'));
$optionSection.append($el);
const uiEl = $optionSection[0];
// Build group first as their internal components will be built after
uiEl.querySelectorAll('we-row').forEach(el => {
const infos = this._extraInfoFromDescriptionElement(el);
const groupEl = options.Class.prototype.buildRowElement(infos.title, infos.options);
el.parentNode.insertBefore(groupEl, el);
el.parentNode.removeChild(el);
});
// Build standard components
uiEl.querySelectorAll('we-select').forEach(el => {
const infos = this._extraInfoFromDescriptionElement(el);
const selectEl = options.Class.prototype.buildSelectElement(infos.title, infos.options);
el.parentNode.insertBefore(selectEl, el);
el.parentNode.removeChild(el);
});
uiEl.querySelectorAll('we-checkbox').forEach(el => {
const infos = this._extraInfoFromDescriptionElement(el);
const checkboxEl = options.Class.prototype.buildCheckboxElement(infos.title, infos.options);
el.parentNode.insertBefore(checkboxEl, el);
el.parentNode.removeChild(el);
});
return $optionSection;
},
/**
* @private
* @param {HTMLElement} el
* @returns {Object}
*/
_extraInfoFromDescriptionElement: function (el) {
return {
title: el.getAttribute('string'),
options: {
classes: el.classList,
dataAttributes: el.dataset,
childNodes: [...el.childNodes],
},
};
},
/**
* DOMElements have a default name which appears in the overlay when they
* are being edited. This method retrieves this name; it can be defined
@@ -391,7 +441,8 @@ var SnippetEditor = Widget.extend({
}
var optionName = val.option;
var $el = val.$el.children().clone(true).addClass('snippet-option-' + optionName);
var $ui = val.$el.children().clone(true);
var option = new (options.registry[optionName] || options.Class)(
this,
val.base_target ? this.$target.find(val.base_target).eq(0) : this.$target,
@@ -408,9 +459,8 @@ var SnippetEditor = Widget.extend({
}
this.styles[key] = option;
option.__order = i++;
var $optionSection = $(core.qweb.render('web_editor.customize_block_option'));
$optionSection.append($el);
return option.attachTo($optionSection);
const $option = this._createOptionUI($ui).addClass('snippet-option-' + optionName);
return option.attachTo($option);
});
this.isTargetMovable = (this.selectorSiblings.length > 0 || this.selectorChildren.length > 0);
@@ -664,7 +714,7 @@ var SnippetsMenu = Widget.extend({
id: 'oe_snippets',
cacheSnippetTemplate: {},
events: {
'click we-collapse-area > we-toggler': '_onCollapseTogglerClick',
'click we-select, we-collapse-area > we-toggler': '_onOptionTogglerClick',
'click .o_install_btn': '_onInstallBtnClick',
},
custom_events: {
@@ -1277,7 +1327,7 @@ var SnippetsMenu = Widget.extend({
'$el': $style,
'drop-near': $style.data('drop-near') && self._computeSelectorFunctions($style.data('drop-near'), '', false, noCheck, true),
'drop-in': $style.data('drop-in') && self._computeSelectorFunctions($style.data('drop-in'), '', false, noCheck),
'data': $style.data(),
'data': _.extend({string: $style.attr('string')}, $style.data()),
};
self.templateOptions.push(option);
selectors.push(option.selector);
@@ -1664,11 +1714,17 @@ var SnippetsMenu = Widget.extend({
* @private
* @param {*} ev
*/
_onCollapseTogglerClick: function (ev) {
var $hierarchyTogglers = $(ev.currentTarget).parents('we-collapse-area').children('we-toggler');
this.$('we-collapse-area > we-toggler').not($hierarchyTogglers).removeClass('active');
$hierarchyTogglers.not(ev.currentTarget).addClass('active');
ev.currentTarget.classList.toggle('active');
_onOptionTogglerClick: function (ev) {
var togglerEl = ev.currentTarget;
if (togglerEl.tagName !== 'WE-TOGGLER') {
togglerEl = togglerEl.querySelector('we-toggler');
}
var togglerParentSelector = 'we-select, we-collapse-area';
var $hierarchyTogglers = $(togglerEl).parents(togglerParentSelector).children('we-toggler');
this.$(togglerParentSelector).children('we-toggler').not($hierarchyTogglers).removeClass('active');
$hierarchyTogglers.not(togglerEl).addClass('active');
togglerEl.classList.toggle('active');
},
/**
* Called when the overlay dimensions/positions should be recomputed.
addons/web_editor/static/src/js/editor/snippets.options.js
+131 -11
View File
@@ -35,11 +35,11 @@ var SnippetOption = Widget.extend({
*/
init: function (parent, $target, $overlay, data, options) {
this._super.apply(this, arguments);
this.options = options;
this.$target = $target;
this.ownerDocument = this.$target[0].ownerDocument;
this.$overlay = $overlay;
this.data = data;
this.options = options;
this.ownerDocument = this.$target[0].ownerDocument;
this.__methodNames = [];
},
/**
@@ -49,7 +49,7 @@ var SnippetOption = Widget.extend({
* @override
*/
start: function () {
this._setActive();
this._updateUI();
return this._super.apply(this, arguments);
},
/**
@@ -133,7 +133,7 @@ var SnippetOption = Widget.extend({
* @param {jQuery} $opt - the related DOMElement option
*/
selectClass: function (previewMode, value, $opt) {
var $group = $opt && $opt.parents('we-collapse-area').last();
var $group = $opt && $opt.parents('we-collapse-area, we-select').last();
if (!$group || !$group.length) {
$group = this.$el;
}
@@ -206,7 +206,7 @@ var SnippetOption = Widget.extend({
*/
setTarget: function ($target) {
this.$target = $target;
this._setActive();
this._updateUI();
this.$target.trigger('snippet-option-change', [this]);
},
@@ -242,7 +242,7 @@ var SnippetOption = Widget.extend({
*/
_select: function (previewMode, $opt) {
// Options can say they respond to strong choice
if (previewMode && ($opt.data('noPreview') || $opt.parent().data('noPreview'))) {
if (previewMode && ($opt.data('noPreview') || $opt.closest('[data-no-preview="true"]').length)) {
return;
}
// If it is not preview mode, the user selected the option for good
@@ -278,7 +278,7 @@ var SnippetOption = Widget.extend({
this.__methodNames = _.uniq(this.__methodNames);
if (!previewMode) {
this._setActive();
this._updateUI();
}
this.$target.trigger('content_changed');
@@ -301,8 +301,8 @@ var SnippetOption = Widget.extend({
.addClass('active');
// Get submenus which are not inside submenus
var $submenus = this.$el.find('we-collapse-area')
.not('we-collapse-area we-collapse-area');
var $submenus = this.$el.find('we-collapse-area, we-select')
.not('we-collapse-area *, we-select *');
// Add unique active class for each submenu active item
_.each($submenus, function (submenu) {
@@ -312,7 +312,7 @@ var SnippetOption = Widget.extend({
// Add unique active class for out-of-submenu active item
var $externalElements = this.$el.find('[data-select-class]')
.not('we-collapse-area *, we-collapse-area');
.not('we-collapse-area *, we-select *');
_processSelectClassElements($externalElements);
function _processSelectClassElements($elements) {
@@ -331,6 +331,20 @@ var SnippetOption = Widget.extend({
.addClass('active');
}
},
/**
* @private
*/
_updateUI: function () {
this._setActive();
this.el.querySelectorAll('we-select').forEach(selectEl => {
const activeEl = selectEl.querySelector('we-button.active');
const valueEl = selectEl.querySelector('we-toggler');
if (valueEl) {
valueEl.textContent = activeEl ? activeEl.textContent : "/";
}
});
},
//--------------------------------------------------------------------------
// Handlers
@@ -385,6 +399,112 @@ var SnippetOption = Widget.extend({
}
this._reset();
},
//--------------------------------------------------------------------------
// Static
//--------------------------------------------------------------------------
/**
* Build the correct DOM for an element according to the given options.
*
* @static
* @param {string} tagName
* @param {string} [title]
* @param {Object} [options]
* @param {string[]} [options.classes]
* @param {Object} [options.dataAttributes]
* @returns {HTMLElement}
*/
buildElement: function (tagName, title, options) {
const el = document.createElement(tagName);
if (title) {
const titleEl = SnippetOption.prototype.buildTitleElement(title);
el.appendChild(titleEl);
}
if (options && options.classes) {
el.classList.add(...options.classes);
}
if (options && options.dataAttributes) {
for (const key in options.dataAttributes) {
el.dataset[key] = options.dataAttributes[key];
}
}
return el;
},
/**
* Build the correct DOM for a we-checkbox element.
*
* @static
* @param {string} [title]
* @param {Object} [options] - @see this.buildElement
* @returns {HTMLElement}
*/
buildCheckboxElement: function (title, options) {
const buttonEl = SnippetOption.prototype.buildElement('we-button', title, options);
buttonEl.classList.add('o_we_checkbox_wrapper');
const checkboxEl = document.createElement('we-checkbox');
buttonEl.appendChild(checkboxEl);
return buttonEl;
},
/**
* Build the correct DOM for a we-row element.
*
* @static
* @param {string} [title]
* @param {Object} [options] - @see this.buildElement
* @param {HTMLElement[]} [options.childNodes]
* @returns {HTMLElement}
*/
buildRowElement: function (title, options) {
const groupEl = SnippetOption.prototype.buildElement('we-row', title, options);
const rowEl = document.createElement('div');
groupEl.appendChild(rowEl);
if (options && options.childNodes) {
options.childNodes.forEach(node => rowEl.appendChild(node));
}
return groupEl;
},
/**
* Build the correct DOM for a we-select element.
*
* @static
* @param {string} [title]
* @param {Object} [options] - @see this.buildElement
* @param {HTMLElement[]} [options.childNodes]
* @returns {HTMLElement}
*/
buildSelectElement: function (title, options) {
const selectEl = SnippetOption.prototype.buildElement('we-select', title, options);
const menuTogglerEl = document.createElement('we-toggler');
selectEl.appendChild(menuTogglerEl);
var menuEl = document.createElement('we-select-menu');
if (options && options.childNodes) {
options.childNodes.forEach(node => menuEl.appendChild(node));
}
selectEl.appendChild(menuEl);
return selectEl;
},
/**
* @static
* @param {string} title
* @returns {HTMLElement}
*/
buildTitleElement: function (title) {
const titleEl = document.createElement('we-title');
titleEl.textContent = title;
return titleEl;
},
});
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
@@ -972,7 +1092,7 @@ registry.background = SnippetOption.extend({
this.__customImageSrc = value;
this.background(false, this.__customImageSrc);
this.$target.toggleClass('oe_custom_bg', !!value);
this._setActive();
this._updateUI();
this.$target.trigger('snippet-option-change', [this]);
},
addons/web_editor/static/src/scss/web_editor.variables.scss
+1
View File
@@ -5,6 +5,7 @@
$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$o-we-font-size: 13px;
$o-we-line-height: 1.5;
$o-we-bg-color: #F7F7F7 !default;
$o-we-bg-color-dark: #a7a7a7 !default;
$o-we-color: #212629 !default;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+112 -31
View File
@@ -51,6 +51,8 @@ body.editor_enable.editor_has_snippets {
color: var(--o-we-snippets-color);
box-shadow: 0px 10px 10px -10px black inset;
font-family: Roboto, $font-family-sans-serif;
font-size: $o-we-font-size;
line-height: $o-we-line-height;
transition: left 400ms $o-we-md-ease 0s;
@@ -173,17 +175,38 @@ body.editor_enable.editor_has_snippets {
}
> .o_we_customize_panel {
padding: 0 0.5rem;
we-button, we-toggler {
cursor: pointer;
@include o-text-overflow(inline-block);
padding: 0.25rem 0.5rem;
@include o-text-overflow(block);
padding: 0.1em 0.4em;
margin: 0;
border: 1px solid var(--o-we-bg-color-dark);
border-radius: 0;
background-color: var(--o-we-bg-color-dark);
color: var(--o-we-color);
line-height: 1.5;
font-weight: 500;
white-space: nowrap;
text-align: left;
&.fa {
display: inline-block;
margin: 0 0 0 0.3em;
padding: 0;
border: none;
background-color: transparent;
color: var(--o-we-snippets-color);
text-align: center;
&.active {
padding: 0;
&::after {
display: none;
}
}
}
}
%we-icon-button {
@@ -230,22 +253,6 @@ body.editor_enable.editor_has_snippets {
> we-customizeblock-option {
display: inline-block; // Ideally -> display: contents;
}
we-button {
display: inline-block;
margin: 0 0 0 0.3em;
padding: 0;
border: none;
font-size: 0.9em;
text-align: center;
&.active {
padding: 0;
&::after {
display: none;
}
}
}
}
}
}
@@ -254,21 +261,47 @@ body.editor_enable.editor_has_snippets {
position: relative;
display: block;
> * {
> *, > div > * {
display: block;
margin-top: 0.25rem;
}
we-button, we-toggler {
display: block;
text-align: left;
border-radius: 0;
}
we-button {
&.active {
@include we-icon-button('\f00c', $o-we-color-success);
}
}
.o_we_checkbox_wrapper.active {
padding-right: 0;
&::after {
right: 0;
}
}
we-toggler {
@include we-icon-button('\f107');
}
we-row {
display: block;
> div {
display: flex;
align-items: center;
> * {
flex: 1 1 auto;
+ * {
margin-left: 0.5em;
}
}
> .fa {
flex: 0 0 auto;
}
}
}
we-collapse {
position: relative;
display: block;
@@ -276,16 +309,64 @@ body.editor_enable.editor_has_snippets {
overflow: hidden;
transition: max-height 200ms ease 0s;
}
we-toggler {
@include we-icon-button('\f104');
&.active {
@include we-icon-button('\f107');
we-select {
position: relative;
display: flex;
flex-flow: row wrap;
align-items: center;
+ we-collapse {
max-height: 500px;
we-toggler {
flex: 0 0 100%;
&.active {
background-color: transparent;
border-color: var(--o-we-color);
}
}
we-select-menu {
@include o-position-absolute(100%, 0, auto, 0);
display: none;
z-index: $zindex-dropdown;
border: 1px solid var(--o-we-color);
border-top-style: none;
background-color: var(--o-we-bg-color-dark);
}
}
we-toggler.active {
+ we-collapse {
max-height: 500px;
}
+ we-select-menu {
display: block;
}
}
.o_we_checkbox_wrapper {
display: flex;
align-items: center;
padding: 0;
border: none;
background-color: transparent;
color: inherit;
> we-title {
flex: 1 1 auto;
min-width: 0;
@include o-text-overflow(block);
}
> we-checkbox {
flex: 0 0 auto;
display: block;
width: 1em;
height: 1em;
margin-left: auto;
border: 1px solid var(--o-we-bg-color-dark);
border-radius: 0;
background-color: var(--o-we-bg-color-dark);
}
}
.dropdown-menu {
addons/web_editor/static/tests/test_utils.js
+12 -18
View File
@@ -88,15 +88,12 @@ MockServer.include({
' <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
' </div>' +
' <div data-js="option_test" data-selector=".s_hr">' +
' <we-collapse-area>' +
' <we-toggler>Alignment</we-toggler>' +
' <we-collapse>' +
' <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-button data-select-class="align-items-stretch">Equal height</we-button>' +
' </we-collapse>' +
' </we-collapse-area>' +
' <we-select string="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-button data-select-class="align-items-stretch">Equal height</we-button>' +
' </we-select>' +
' </div>' +
'</div>';
return Promise.resolve(template);
@@ -263,15 +260,12 @@ function wysiwygData(data) {
' <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
' </div>' +
' <div data-js="option_test" data-selector=".s_hr">' +
' <we-collapse-area>' +
' <we-toggler>Alignment</we-toggler>' +
' <we-collapse>' +
' <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-button data-select-class="align-items-stretch">Equal height</we-button>' +
' </we-collapse>' +
' </we-collapse-area>' +
' <we-select string="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-button data-select-class="align-items-stretch">Equal height</we-button>' +
' </we-select>' +
' </div>' +
'</div>';
}
addons/website/static/src/js/editor/snippets.options.js
+36 -7
View File
@@ -84,7 +84,7 @@ options.registry.background.include({
delete target.dataset.bgVideoSrc;
}
this._refreshPublicWidgets();
this._setActive();
this._updateUI();
},
/**
* Returns whether the current target has a background video or not.
@@ -426,7 +426,7 @@ options.registry.navTabs = options.Class.extend({
$activeLink.parent().remove();
$activePane.remove();
self._findLinksAndPanes();
self._setActive(); // TODO forced to do this because we do not return deferred for options
self._updateUI(); // TODO forced to do this because we do not return deferred for options
});
$next.tab('show');
},
@@ -469,7 +469,7 @@ options.registry.navTabs = options.Class.extend({
* @private
* @override
*/
_setActive: function () {
_updateUI: function () {
this._super.apply(this, arguments);
this.$el.filter('[data-remove-tab]').toggleClass('d-none', this.$tabPanes.length <= 2);
},
@@ -1088,7 +1088,7 @@ options.registry.gallery = options.Class.extend({
}
self._reset();
self.trigger_up('cover_update');
this._setActive();
this._updateUI();
});
dialog.open();
},
@@ -1393,7 +1393,7 @@ options.registry.gallery = options.Class.extend({
$intervalOptions.removeClass('active')
.filter('[data-interval="' + activeInterval + '"]')
.addClass('active');
$intervalOptions.closest('we-collapse-area')[0]
$intervalOptions.closest('we-select')[0]
.classList.toggle('d-none', activeMode !== 'slideshow');
var columns = this._getColumns();
@@ -1401,7 +1401,7 @@ options.registry.gallery = options.Class.extend({
$columnOptions.removeClass('active')
.filter('[data-columns="' + columns + '"]')
.addClass('active');
$columnOptions.closest('we-collapse-area')[0]
$columnOptions.closest('we-select')[0]
.classList.toggle('d-none', !(activeMode === 'grid' || activeMode === 'masonry'));
this.el.querySelector('.o_w_image_spacing_option')
@@ -1714,7 +1714,7 @@ options.registry.CoverProperties = options.Class.extend({
var $opt = this.$el.find('.o_record_cover_opt_size_default[data-select-class]');
this.selectClass(previewMode, $opt.data('selectClass'), $opt);
}
this._setActive();
this._updateUI();
});
},
/**
@@ -1809,5 +1809,34 @@ options.registry.SectionStretch = options.Class.extend({
return this._super.apply(this, arguments);
},
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* @see this.selectClass for parameters
*/
toggleContainerFluid: function (previewMode, value, $opt) {
var isFluid = this.$el.find('[data-toggle-container-fluid]').hasClass('active');
this.$target.toggleClass('container', !isFluid)
.toggleClass('container-fluid', isFluid);
if (previewMode !== 'reset') {
this.$target.toggleClass('container').toggleClass('container-fluid');
}
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @private
*/
_setActive: function () {
this._super.apply(this, arguments);
var isFluid = this.$target.hasClass('container-fluid');
this.$el.find('[data-toggle-container-fluid]').toggleClass('active', isFluid);
},
});
});
addons/website/views/snippets.xml
+200 -303
View File
@@ -1025,124 +1025,91 @@
<!-- STYLES | .s_title -->
<div data-selector=".s_title" data-target="[class*='s_title_']">
<we-collapse-area>
<we-toggler>Typography</we-toggler>
<we-collapse>
<we-button data-select-class="s_title_boxed">Boxed</we-button>
<we-button data-select-class="s_title_lines">Line-On-Sides</we-button>
<we-button data-select-class="s_title_thin">Thin</we-button>
<we-button data-select-class="s_title_transparent">Transparent</we-button>
<we-button data-select-class="s_title_underlined">Underlined</we-button>
<we-button data-select-class="s_title_small_caps">Small Caps</we-button>
<we-divider/>
<we-button data-select-class="s_title_default">Default</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Typography">
<we-button data-select-class="s_title_boxed">Boxed</we-button>
<we-button data-select-class="s_title_lines">Line-On-Sides</we-button>
<we-button data-select-class="s_title_thin">Thin</we-button>
<we-button data-select-class="s_title_transparent">Transparent</we-button>
<we-button data-select-class="s_title_underlined">Underlined</we-button>
<we-button data-select-class="s_title_small_caps">Small Caps</we-button>
<we-divider/>
<we-button data-select-class="s_title_default">Default</we-button>
</we-select>
</div>
<!-- H-ALIGN | .s_btn -->
<div data-selector=".s_btn, .s_share">
<we-collapse-area>
<we-toggler>Alignment</we-toggler>
<we-collapse>
<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-collapse>
</we-collapse-area>
<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>
</div>
<div data-selector=".s_alert">
<we-collapse-area>
<we-toggler>Size</we-toggler>
<we-collapse>
<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-collapse>
</we-collapse-area>
<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>
</div>
<div data-selector=".s_alert, .s_card">
<we-collapse-area>
<we-toggler>Width</we-toggler>
<we-collapse>
<we-button data-select-class="w-25">25%</we-button>
<we-button data-select-class="w-50">50%</we-button>
<we-button data-select-class="w-75">75%</we-button>
<we-button data-select-class="w-100">100%</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Width">
<we-button data-select-class="w-25">25%</we-button>
<we-button data-select-class="w-50">50%</we-button>
<we-button data-select-class="w-75">75%</we-button>
<we-button data-select-class="w-100">100%</we-button>
</we-select>
</div>
<!-- STYLES | .s_rating -->
<div data-selector=".s_rating > div">
<we-collapse-area>
<we-toggler>Icon</we-toggler>
<we-collapse>
<we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button>
<we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button>
<we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
<we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Value</we-toggler>
<we-collapse>
<we-button data-select-class="">0</we-button>
<we-button data-select-class="s_rating_1">1/5</we-button>
<we-button data-select-class="s_rating_2">2/5</we-button>
<we-button data-select-class="s_rating_3">3/5</we-button>
<we-button data-select-class="s_rating_4">4/5</we-button>
<we-button data-select-class="s_rating_5">5/5</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Size</we-toggler>
<we-collapse>
<we-button data-select-class="s_rating_1x">Small</we-button>
<we-button data-select-class="s_rating_2x">Medium</we-button>
<we-button data-select-class="s_rating_3x">Big</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Icon">
<we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button>
<we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button>
<we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
<we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button>
</we-select>
<we-select string="Value">
<we-button data-select-class="">0</we-button>
<we-button data-select-class="s_rating_1">1/5</we-button>
<we-button data-select-class="s_rating_2">2/5</we-button>
<we-button data-select-class="s_rating_3">3/5</we-button>
<we-button data-select-class="s_rating_4">4/5</we-button>
<we-button data-select-class="s_rating_5">5/5</we-button>
</we-select>
<we-select string="Size">
<we-button data-select-class="s_rating_1x">Small</we-button>
<we-button data-select-class="s_rating_2x">Medium</we-button>
<we-button data-select-class="s_rating_3x">Big</we-button>
</we-select>
</div>
<!-- STYLES | .s_hr -->
<div data-selector=".s_hr" data-target="hr">
<we-collapse-area>
<we-toggler>Thickness</we-toggler>
<we-collapse>
<t t-foreach="range(1,6)" t-as="s_hr_thickness">
<we-button t-attf-data-select-class="s_hr_{{s_hr_thickness}}px"><t t-esc="s_hr_thickness"/>px</we-button>
</t>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Style</we-toggler>
<we-collapse>
<we-button data-select-class="s_hr_solid">Solid</we-button>
<we-button data-select-class="s_hr_dashed">Dashed</we-button>
<we-button data-select-class="s_hr_dotted">Dotted</we-button>
<we-button data-select-class="s_hr_double">Double</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Width</we-toggler>
<we-collapse>
<we-button data-select-class="w-25">25%</we-button>
<we-button data-select-class="w-50">50%</we-button>
<we-button data-select-class="w-75">75%</we-button>
<we-button data-select-class="w-100">100%</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Alignment</we-toggler>
<we-collapse>
<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-collapse>
</we-collapse-area>
<we-select string="Thickness">
<t t-foreach="range(1,6)" t-as="s_hr_thickness">
<we-button t-attf-data-select-class="s_hr_{{s_hr_thickness}}px"><t t-esc="s_hr_thickness"/>px</we-button>
</t>
</we-select>
<we-select string="Style">
<we-button data-select-class="s_hr_solid">Solid</we-button>
<we-button data-select-class="s_hr_dashed">Dashed</we-button>
<we-button data-select-class="s_hr_dotted">Dotted</we-button>
<we-button data-select-class="s_hr_double">Double</we-button>
</we-select>
<we-select string="Width">
<we-button data-select-class="w-25">25%</we-button>
<we-button data-select-class="w-50">50%</we-button>
<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>
</div>
<!-- Carousel | .s_carousel | .s_quotes_carousel -->
@@ -1151,36 +1118,27 @@
data-target="> .carousel">
<we-button data-add-slide="true" data-no-preview="true">Add Slide</we-button>
<we-button data-remove-slide="true" data-no-preview="true">Remove Slide</we-button>
<we-collapse-area>
<we-toggler>Transition</we-toggler>
<we-collapse>
<we-button data-select-class="slide">Slide</we-button>
<we-button data-select-class="carousel-fade slide">Fade</we-button>
<we-divider/>
<we-button data-select-class="">None</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Style</we-toggler>
<we-collapse>
<we-button data-select-class="s_carousel_bordered">Bordered</we-button>
<we-button data-select-class="s_carousel_boxed">Boxed</we-button>
<we-button data-select-class="s_carousel_rounded">Rounded</we-button>
<we-divider/>
<we-button data-select-class="s_carousel_default">Default</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Speed</we-toggler>
<we-collapse>
<we-button data-interval="1000">1s</we-button>
<we-button data-interval="2000">2s</we-button>
<we-button data-interval="3000">3s</we-button>
<we-button data-interval="5000">5s</we-button>
<we-button data-interval="10000">10s</we-button>
<we-button data-interval="0">Disable autoplay</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Transition">
<we-button data-select-class="slide">Slide</we-button>
<we-button data-select-class="carousel-fade slide">Fade</we-button>
<we-divider/>
<we-button data-select-class="">None</we-button>
</we-select>
<we-select string="Style">
<we-button data-select-class="s_carousel_bordered">Bordered</we-button>
<we-button data-select-class="s_carousel_boxed">Boxed</we-button>
<we-button data-select-class="s_carousel_rounded">Rounded</we-button>
<we-divider/>
<we-button data-select-class="s_carousel_default">Default</we-button>
</we-select>
<we-select string="Speed">
<we-button data-interval="1000">1s</we-button>
<we-button data-interval="2000">2s</we-button>
<we-button data-interval="3000">3s</we-button>
<we-button data-interval="5000">5s</we-button>
<we-button data-interval="10000">10s</we-button>
<we-button data-interval="0">Disable autoplay</we-button>
</we-select>
</div>
<div data-js="navTabs" data-selector="section .row > div" data-target=".nav-tabs">
@@ -1192,68 +1150,51 @@
<we-button data-add-images="true" data-no-preview="true">Add images</we-button>
<we-button data-remove-all-images="true" data-no-preview="true">Remove all images</we-button>
<we-divider/>
<we-collapse-area>
<we-toggler>Mode</we-toggler>
<we-collapse>
<we-button data-mode="nomode">Float</we-button>
<we-button data-mode="masonry">Masonry</we-button>
<we-button data-mode="grid">Grid</we-button>
<we-button data-mode="slideshow">Slideshow</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Slideshow speed</we-toggler>
<we-collapse>
<we-button data-interval="1000">1s</we-button>
<we-button data-interval="2000">2s</we-button>
<we-button data-interval="3000">3s</we-button>
<we-button data-interval="5000">5s</we-button>
<we-button data-interval="10000">10s</we-button>
<we-button data-interval="0">Disable autoplay</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Columns</we-toggler>
<we-collapse>
<we-button data-columns="1">1</we-button>
<we-button data-columns="2">2</we-button>
<we-button data-columns="3">3</we-button>
<we-button data-columns="4">4</we-button>
<we-button data-columns="6">6</we-button>
<we-button data-columns="12">12</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area class="o_w_image_spacing_option">
<we-toggler>Images spacing</we-toggler>
<we-collapse>
<we-button data-select-class="o_spc-none">None</we-button>
<we-button data-select-class="o_spc-small">Small</we-button>
<we-button data-select-class="o_spc-medium">Medium</we-button>
<we-button data-select-class="o_spc-big">Big</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Styling</we-toggler>
<we-collapse>
<we-button data-styling="">Square</we-button>
<we-button data-styling="rounded">Rounded corners</we-button>
<we-button data-styling="img-thumbnail">Thumbnails</we-button>
<we-button data-styling="rounded-circle">Circle</we-button>
<we-button data-styling="shadow">Shadows</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Mode">
<we-button data-mode="nomode">Float</we-button>
<we-button data-mode="masonry">Masonry</we-button>
<we-button data-mode="grid">Grid</we-button>
<we-button data-mode="slideshow">Slideshow</we-button>
</we-select>
<we-select string="Slideshow speed">
<we-button data-interval="1000">1s</we-button>
<we-button data-interval="2000">2s</we-button>
<we-button data-interval="3000">3s</we-button>
<we-button data-interval="5000">5s</we-button>
<we-button data-interval="10000">10s</we-button>
<we-button data-interval="0">Disable autoplay</we-button>
</we-select>
<we-select string="Columns">
<we-button data-columns="1">1</we-button>
<we-button data-columns="2">2</we-button>
<we-button data-columns="3">3</we-button>
<we-button data-columns="4">4</we-button>
<we-button data-columns="6">6</we-button>
<we-button data-columns="12">12</we-button>
</we-select>
<we-select string="Images spacing" class="o_w_image_spacing_option">
<we-button data-select-class="o_spc-none">None</we-button>
<we-button data-select-class="o_spc-small">Small</we-button>
<we-button data-select-class="o_spc-medium">Medium</we-button>
<we-button data-select-class="o_spc-big">Big</we-button>
</we-select>
<we-select string="Styling">
<we-button data-styling="">Square</we-button>
<we-button data-styling="rounded">Rounded corners</we-button>
<we-button data-styling="img-thumbnail">Thumbnails</we-button>
<we-button data-styling="rounded-circle">Circle</we-button>
<we-button data-styling="shadow">Shadows</we-button>
</we-select>
</div>
<div data-js="gallery_img" data-selector=".o_gallery img">
<we-collapse-area>
<we-toggler>Re-order</we-toggler>
<we-collapse data-no-preview="true">
<we-button data-position="first">Move to first</we-button>
<we-button data-position="prev">Move to previous</we-button>
<we-button data-position="next">Move to next</we-button>
<we-button data-position="last">Move to last</we-button>
</we-collapse>
</we-collapse-area>
<div data-no-preview="true">
<we-title>Re-order</we-title>
<we-button data-position="first">Move to first</we-button>
<we-button data-position="prev">Move to previous</we-button>
<we-button data-position="next">Move to next</we-button>
<we-button data-position="last">Move to last</we-button>
</div>
</div>
<!-- Facebook Page -->
@@ -1269,31 +1210,25 @@
<div data-js="layout_column"
data-selector="section"
data-target="> * > .row:not(.s_nb_column_fixed)">
<we-collapse-area>
<we-toggler>Number of columns</we-toggler>
<we-collapse data-no-preview="true">
<we-button data-select-count="1">1</we-button>
<we-button data-select-count="2">2</we-button>
<we-button data-select-count="3">3</we-button>
<we-button data-select-count="4">4</we-button>
<we-button data-select-count="5">5</we-button>
<we-button data-select-count="6">6</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Number of columns" data-no-preview="true">
<we-button data-select-count="1">1</we-button>
<we-button data-select-count="2">2</we-button>
<we-button data-select-count="3">3</we-button>
<we-button data-select-count="4">4</we-button>
<we-button data-select-count="5">5</we-button>
<we-button data-select-count="6">6</we-button>
</we-select>
</div>
<!-- V-ALIGN -->
<div id="row_valign_snippet_option" data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
<we-collapse-area>
<we-toggler>Alignment</we-toggler>
<we-collapse>
<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-collapse>
</we-collapse-area>
<we-select string="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>
</div>
<!-- Background Image -->
@@ -1312,19 +1247,16 @@
<!-- Parallax -->
<div data-js="parallax" data-selector=".parallax">
<we-collapse-area>
<we-toggler>Scroll Speed</we-toggler>
<we-collapse>
<we-button data-scroll="0">No-scroll</we-button>
<we-divider/>
<we-button data-scroll="1">Fixed</we-button>
<we-divider/>
<we-button data-scroll="0.6">Very Slow</we-button>
<we-button data-scroll="1.2">Slow</we-button>
<we-button data-scroll="1.6">Fast</we-button>
<we-button data-scroll="2">Very Fast</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Scroll Speed">
<we-button data-scroll="0">No-scroll</we-button>
<we-divider/>
<we-button data-scroll="1">Fixed</we-button>
<we-divider/>
<we-button data-scroll="0.6">Very Slow</we-button>
<we-button data-scroll="1.2">Slow</we-button>
<we-button data-scroll="1.6">Fast</we-button>
<we-button data-scroll="2">Very Fast</we-button>
</we-select>
</div>
<!-- Color | Section -->
@@ -1361,14 +1293,9 @@
<div data-selector="section .row > div"
data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
<we-collapse-area>
<we-toggler>Styles</we-toggler>
<we-collapse>
<we-button data-toggle-class="border">Border</we-button>
<we-button data-toggle-class="rounded">Rounded</we-button>
<we-button data-toggle-class="shadow">Shadow</we-button>
</we-collapse>
</we-collapse-area>
<we-checkbox string="Border" data-toggle-class="border"/>
<we-checkbox string="Rounded" data-toggle-class="rounded"/>
<we-checkbox string="Shadow" data-toggle-class="shadow"/>
</div>
<div data-js="sizing_y"
@@ -1392,7 +1319,7 @@
<div data-js="ul"
data-selector=":not(li) > ul:has(ul,ol), :not(li) > ol:has(ul,ol)">
<we-button data-toggle-class="o_ul_folded">Folded list</we-button>
<we-checkbox string="Folded list" data-toggle-class="o_ul_folded"/>
</div>
<div data-js="menu_data"
@@ -1407,7 +1334,7 @@
<div data-js="topMenuTransparency"
data-selector="[data-main-object^='website.page('] #wrapwrap > header"
data-no-check="true">
<we-button data-transparent="true" data-no-preview="true">Transparent</we-button>
<we-checkbox string="Transparent" data-transparent="true" data-no-preview="true"/>
</div>
<div data-js="topMenuColor"
@@ -1433,13 +1360,10 @@
<!-- Mega Menu settings -->
<div data-selector=".o_mega_menu">
<we-collapse-area>
<we-toggler>Size</we-toggler>
<we-collapse>
<we-button data-select-class="">Full-Width</we-button>
<we-button data-select-class="o_mega_menu_container_size">Narrow</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Size">
<we-button data-select-class="">Full-Width</we-button>
<we-button data-select-class="o_mega_menu_container_size">Narrow</we-button>
</we-select>
</div>
<div data-selector=".o_mega_menu .nav-link"
@@ -1449,75 +1373,48 @@
<div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
<we-button data-change="true" data-no-preview="true">Change Cover</we-button>
<we-button data-clear="true" data-no-preview="true">Remove Cover</we-button>
<we-collapse-area>
<we-toggler>Size</we-toggler>
<we-collapse>
<we-button data-cover-opt="size" data-select-class="o_record_has_cover cover_full">
Full Screen
</we-button>
<we-button data-cover-opt="size" class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover cover_mid">
Half Screen
</we-button>
<we-button data-cover-opt="size" data-select-class="o_record_has_cover cover_auto">
Fit text
</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Filter Intensity</we-toggler>
<we-collapse>
<we-button data-cover-opt="filters" data-filter-value="0.0">None</we-button>
<we-button data-cover-opt="filters" data-filter-value="0.2">Low</we-button>
<we-button data-cover-opt="filters" data-filter-value="0.4">Medium</we-button>
<we-button data-cover-opt="filters" data-filter-value="0.6">High</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Filter Color</we-toggler>
<we-collapse>
<we-button data-cover-opt="filters" data-filter-color="oe_black">Black</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_none">White</we-button>
<we-button data-cover-opt="filters" data-filter-color="bg-primary">Primary</we-button>
<we-button data-cover-opt="filters" data-filter-color="bg-secondary">Secondary</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_blue">Blue</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_yellow">Yellow</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_red">Red</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_purple">Purple</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_green">Green</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Text Size</we-toggler>
<we-collapse>
<we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_hero">Hero</we-button>
<we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_huge">Huge</we-button>
<we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_big">Big</we-button>
<we-button data-cover-opt="text_size" data-select-class="">Regular</we-button>
<we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_small">Small</we-button>
<we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_tiny">Tiny</we-button>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Text Alignment</we-toggler>
<we-collapse>
<we-button data-cover-opt="text_align" data-select-class="">Left</we-button>
<we-button data-cover-opt="text_align" data-select-class="text-center">Centered</we-button>
<we-button data-cover-opt="text_align" data-select-class="text-right">Right</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Size">
<we-button data-cover-opt="size" data-select-class="o_record_has_cover cover_full">Full Screen</we-button>
<we-button data-cover-opt="size" class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover cover_mid">Half Screen</we-button>
<we-button data-cover-opt="size" data-select-class="o_record_has_cover cover_auto">Fit text</we-button>
</we-select>
<we-select string="Filter Intensity">
<we-button data-cover-opt="filters" data-filter-value="0.0">None</we-button>
<we-button data-cover-opt="filters" data-filter-value="0.2">Low</we-button>
<we-button data-cover-opt="filters" data-filter-value="0.4">Medium</we-button>
<we-button data-cover-opt="filters" data-filter-value="0.6">High</we-button>
</we-select>
<we-select string="Filter Color">
<we-button data-cover-opt="filters" data-filter-color="oe_black">Black</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_none">White</we-button>
<we-button data-cover-opt="filters" data-filter-color="bg-primary">Primary</we-button>
<we-button data-cover-opt="filters" data-filter-color="bg-secondary">Secondary</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_blue">Blue</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_yellow">Yellow</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_red">Red</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_purple">Purple</we-button>
<we-button data-cover-opt="filters" data-filter-color="oe_green">Green</we-button>
</we-select>
<we-select string="Text Size">
<we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_hero">Hero</we-button>
<we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_huge">Huge</we-button>
<we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_big">Big</we-button>
<we-button data-cover-opt="text_size" data-select-class="">Regular</we-button>
<we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_small">Small</we-button>
<we-button data-cover-opt="text_size" data-select-class="o_record_cover_font_tiny">Tiny</we-button>
</we-select>
<we-select string="Text Alignment">
<we-button data-cover-opt="text_align" data-select-class="">Left</we-button>
<we-button data-cover-opt="text_align" data-select-class="text-center">Centered</we-button>
<we-button data-cover-opt="text_align" data-select-class="text-right">Right</we-button>
</we-select>
</div>
<!-- Stretch section -->
<div data-js="SectionStretch"
data-selector="section"
data-target="> .container, > .container-fluid">
<we-collapse-area>
<we-toggler>Stretch</we-toggler>
<we-collapse>
<we-button data-select-class="container-fluid">Yes</we-button>
<we-button data-select-class="container">No</we-button>
</we-collapse>
</we-collapse-area>
<we-checkbox string="Stretch" data-toggle-container-fluid=""/>
</div>
</template>
</odoo>
addons/website_blog/static/src/js/s_latest_posts_editor.js
+1 -1
View File
@@ -59,7 +59,7 @@ sOptions.registry.js_get_posts_selectBlog = sOptions.Class.extend({
el.textContent = blog.name;
menuEl.appendChild(el);
}
this._setActive();
this._updateUI();
});
return Promise.all([this._super.apply(this, arguments), def]);
addons/website_blog/static/src/js/website_blog.editor.js
+1 -1
View File
@@ -111,7 +111,7 @@ options.registry.CoverProperties.include({
/**
* @override
*/
_setActive: function () {
_updateUI: function () {
this._super(...arguments);
var isRegularCover = this.$target.is('.o_wblog_post_page_cover_regular');
var $coverFull = this.$el.find('[data-select-class*="cover_full"]');
addons/website_blog/views/snippets.xml
+16 -22
View File
@@ -11,31 +11,25 @@
<template id="s_latest_posts_options" inherit_id="website.snippet_options">
<xpath expr="//div[@data-js='background']" position="before">
<div data-js="js_get_posts_selectBlog" data-selector=".s_latest_posts, .s_latest_posts_big_picture" data-target=".js_get_posts" data-no-check="true">
<we-collapse-area>
<we-toggler>Choose a blog</we-toggler>
<we-collapse data-no-preview="true">
<we-button data-filter-by-blog-id="0">All blogs</we-button>
<!-- the blog list will be generated in js -->
</we-collapse>
</we-collapse-area>
<we-select string="Choose a blog" data-no-preview="true">
<we-button data-filter-by-blog-id="0">All blogs</we-button>
<!-- the blog list will be generated in js -->
</we-select>
</div>
<div data-js="js_get_posts_limit" data-selector=".s_latest_posts, .s_latest_posts_big_picture" data-target=".js_get_posts" data-no-check="true">
<we-collapse-area>
<we-toggler>Posts limit</we-toggler>
<we-collapse data-no-preview="true">
<we-button data-posts-limit="1">1 post max</we-button>
<we-button data-posts-limit="2">2 posts max</we-button>
<we-button data-posts-limit="3">3 posts max</we-button>
<we-button data-posts-limit="4">4 posts max</we-button>
<we-button data-posts-limit="5">5 posts max</we-button>
<we-button data-posts-limit="6">6 posts max</we-button>
<we-button data-posts-limit="7">7 posts max</we-button>
<we-button data-posts-limit="8">8 posts max</we-button>
<we-button data-posts-limit="9">9 posts max</we-button>
<we-button data-posts-limit="10">10 posts max</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Posts limit" data-no-preview="true">
<we-button data-posts-limit="1">1 post max</we-button>
<we-button data-posts-limit="2">2 posts max</we-button>
<we-button data-posts-limit="3">3 posts max</we-button>
<we-button data-posts-limit="4">4 posts max</we-button>
<we-button data-posts-limit="5">5 posts max</we-button>
<we-button data-posts-limit="6">6 posts max</we-button>
<we-button data-posts-limit="7">7 posts max</we-button>
<we-button data-posts-limit="8">8 posts max</we-button>
<we-button data-posts-limit="9">9 posts max</we-button>
<we-button data-posts-limit="10">10 posts max</we-button>
</we-select>
</div>
</xpath>
<xpath expr="//div[@data-js='layout_column']" position="attributes">
addons/website_form/static/tests/tours/website_form_editor.js
+16
View File
@@ -192,6 +192,10 @@ odoo.define('website_form_editor.tour', function(require) {
content: "Click on Form snippet",
trigger: ".s_website_form[data-model_name]",
},
{
content: "Open custom fields menu",
trigger: "we-select:contains('Multiple Checkboxes')",
},
{
content: "Click on Multiple Checkboxes in menu Add a custom field",
trigger: "we-button:contains('Multiple Checkboxes')",
@@ -244,6 +248,10 @@ odoo.define('website_form_editor.tour', function(require) {
content: "Click on first Check Box",
trigger: "label:contains('Iphone') span",
},
{
content: "Open display menu",
trigger: "we-select:contains('Vertical')",
},
{
content: "Click on 'Vertical' in menu 'Display'",
trigger: "we-button:contains('Vertical')",
@@ -265,6 +273,10 @@ odoo.define('website_form_editor.tour', function(require) {
content: "Click on Form snippet",
trigger: ".s_website_form[data-model_name]",
},
{
content: "Open custom fields menu",
trigger: "we-select:contains('Radio Buttons')"
},
{
content: "Click on Radio Buttons in menu Add a custom field",
trigger: "we-button:contains('Radio Buttons')"
@@ -335,6 +347,10 @@ odoo.define('website_form_editor.tour', function(require) {
content: "Click on Form snippet",
trigger: ".s_website_form[data-model_name]",
},
{
content: "Open custom fields menu",
trigger: "we-select:contains('Selection')"
},
{
content: "Click on Selection in menu Add a custom field",
trigger: "we-button:contains('Selection')",
addons/website_form/views/snippets.xml
+28 -31
View File
@@ -28,43 +28,38 @@
<attribute name="data-selector" add=".s_website_form" separator=","/>
</xpath>
<xpath expr="//div" position="after">
<!-- Form -->
<div data-js="website_form_editor" data-selector=".s_website_form">
<we-button data-website_form_model_modal="" data-no-preview="true">Change Form Parameters</we-button>
<we-button data-website_form_field_modal="" data-no-preview="true">Add an existing field</we-button>
<we-collapse-area>
<we-toggler>Add a custom field</we-toggler>
<we-collapse data-no-preview="true">
<we-button data-website_form_custom_field="char">Text</we-button>
<we-button data-website_form_custom_field="text">Long Text</we-button>
<we-button data-website_form_custom_field="email">Email</we-button>
<we-button data-website_form_custom_field="integer">Number</we-button>
<we-button data-website_form_custom_field="float">Decimal Number</we-button>
<we-button data-website_form_custom_field="boolean">Checkbox</we-button>
<we-button data-website_form_custom_field="selection">Radio Buttons</we-button>
<we-button data-website_form_custom_field="many2one">Selection</we-button>
<we-button data-website_form_custom_field="one2many">Multiple Checkboxes</we-button>
<we-button data-website_form_custom_field="date">Date</we-button>
<we-button data-website_form_custom_field="datetime">Date &amp; Time</we-button>
<we-button data-website_form_custom_field="binary">File Upload</we-button>
</we-collapse>
</we-collapse-area>
</div>
<!-- Form -->
<div data-js="website_form_editor" data-selector=".s_website_form">
<we-button data-website_form_model_modal="" data-no-preview="true">Change Form Parameters</we-button>
<we-button data-website_form_field_modal="" data-no-preview="true">Add an existing field</we-button>
<we-select string="Add a custom field" data-no-preview="true">
<we-button data-website_form_custom_field="char">Text</we-button>
<we-button data-website_form_custom_field="text">Long Text</we-button>
<we-button data-website_form_custom_field="email">Email</we-button>
<we-button data-website_form_custom_field="integer">Number</we-button>
<we-button data-website_form_custom_field="float">Decimal Number</we-button>
<we-button data-website_form_custom_field="boolean">Checkbox</we-button>
<we-button data-website_form_custom_field="selection">Radio Buttons</we-button>
<we-button data-website_form_custom_field="many2one">Selection</we-button>
<we-button data-website_form_custom_field="one2many">Multiple Checkboxes</we-button>
<we-button data-website_form_custom_field="date">Date</we-button>
<we-button data-website_form_custom_field="datetime">Date &amp; Time</we-button>
<we-button data-website_form_custom_field="binary">File Upload</we-button>
</we-select>
</div>
<!-- Field -->
<div data-js='website_form_editor' data-selector=".form-field" data-drop-near=".form-field">
<we-button data-toggle-class="o_website_form_field_hidden" data-no-preview="true">Hidden</we-button>
<we-checkbox string="Hidden" data-no-preview="true"
data-toggle-class="o_website_form_field_hidden"/>
</div>
<!-- Add an option to display radio buttons / checkboxes horizontally or vertically -->
<div data-js='website_form_editor_choice_field_display' data-selector=".o_website_form_flex">
<we-collapse-area>
<we-toggler>Display</we-toggler>
<we-collapse data-no-preview="true">
<we-button data-website_form_choice_field_display="horizontal">Horizontal</we-button>
<we-button data-website_form_choice_field_display="vertical">Vertical</we-button>
</we-collapse>
</we-collapse-area>
<we-select string="Display" data-no-preview="true">
<we-button data-website_form_choice_field_display="horizontal">Horizontal</we-button>
<we-button data-website_form_choice_field_display="vertical">Vertical</we-button>
</we-select>
</div>
<!-- Add move, duplicate and remove controllers to checkboxes and radio buttons -->
@@ -75,7 +70,9 @@
<!-- Required option for fields that are not required fields of the model -->
<div data-js='website_form_editor_field' data-selector=".form-field:not(.o_website_form_required)">
<we-button data-website_form_field_require="" data-toggle-class="o_website_form_required_custom" data-no-preview="true">Required</we-button>
<we-checkbox string="Required" data-no-preview="true"
data-website_form_field_require=""
data-toggle-class="o_website_form_required_custom"/>
</div>
<!-- Remove the duplicate options of model fields -->
addons/website_sale/static/src/js/website_sale.editor.js
+12 -12
View File
@@ -194,8 +194,6 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
* @override
*/
start: function () {
var self = this;
this.ppr = this.$target.closest('[data-ppr]').data('ppr');
this.productTemplateID = parseInt(this.$target.find('[data-oe-model="product.template"]').data('oe-id'));
@@ -204,15 +202,17 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
defs.push(this._rpc({
model: 'product.style',
method: 'search_read',
}).then(function (data) {
var $ul = self.$el.find('[name="style"]');
}).then(data => {
var $menu = this.$el.find('[name="style"]');
for (var k in data) {
$ul.append(
$('<we-button data-style="' + data[k]['id'] + '" data-toggle-class="' + data[k]['html_class'] + '"/>')
.append(data[k]['name'])
);
$menu.append(this.buildCheckboxElement(data[k]['name'], {
dataAttributes: {
'style': data[k]['id'],
'toggleClass': data[k]['html_class'],
},
}));
}
self._setActive();
this._updateUI();
}));
return $.when.apply($, defs);
@@ -262,7 +262,9 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
/**
* @override
*/
_setActive: function () {
_updateUI: function () {
this._super.apply(this, arguments);
var sizeX = parseInt(this.$target.attr('colspan') || 1);
var sizeY = parseInt(this.$target.attr('rowspan') || 1);
@@ -272,8 +274,6 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
// Adapt size array preview to fit ppr
$size.find('tr td:nth-child(n + ' + parseInt(this.ppr + 1) + ')').hide();
return this._super.apply(this, arguments);
},
//--------------------------------------------------------------------------
addons/website_sale/views/snippets.xml
+11 -17
View File
@@ -60,19 +60,12 @@
<div data-js="WebsiteSaleGridLayout"
data-selector="#products_grid .o_wsale_products_grid_table_wrapper > table"
data-no-check="true">
<we-button data-no-preview="true" data-choose-ppg="1">
<i class="fa fa-cart-plus"/> Choose number of products
</we-button>
<we-collapse-area class="o_wsale_ppr_submenu">
<we-toggler>
<i class="fa fa-columns"/> Number of Columns
</we-toggler>
<we-collapse data-no-preview="true">
<we-button data-set-ppr="2">2</we-button>
<we-button data-set-ppr="3">3</we-button>
<we-button data-set-ppr="4">4</we-button>
</we-collapse>
</we-collapse-area>
<we-button data-no-preview="true" data-choose-ppg="1">Choose number of products</we-button>
<we-select string="Number of Columns" class="o_wsale_ppr_submenu" data-no-preview="true">
<we-button data-set-ppr="2">2</we-button>
<we-button data-set-ppr="3">3</we-button>
<we-button data-set-ppr="4">4</we-button>
</we-select>
</div>
<div data-js="WebsiteSaleProductsItem"
@@ -97,10 +90,11 @@
</table>
</we-collapse>
</we-collapse-area>
<we-collapse-area>
<we-toggler>Styles</we-toggler>
<we-collapse data-no-preview="true" name="style"/>
</we-collapse-area>
<div name="style" data-no-preview="true">
<!-- Placeholder to be filled in JS -->
</div>
<we-collapse-area>
<we-toggler>Promote</we-toggler>
<we-collapse data-no-preview="true">