From 72a2f417ae746142a8098129d7629241908769fb Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Wed, 16 Oct 2019 15:46:52 +0000 Subject: [PATCH] [IMP] web_editor, *: introduce select & checkboxes for the left panel UI * 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 --- .../static/src/js/editor/snippets.editor.js | 78 ++- .../static/src/js/editor/snippets.options.js | 142 ++++- .../static/src/scss/web_editor.variables.scss | 1 + .../static/src/scss/wysiwyg_snippets.scss | 143 +++-- addons/web_editor/static/tests/test_utils.js | 30 +- .../static/src/js/editor/snippets.options.js | 43 +- addons/website/views/snippets.xml | 503 +++++++----------- .../static/src/js/s_latest_posts_editor.js | 2 +- .../static/src/js/website_blog.editor.js | 2 +- addons/website_blog/views/snippets.xml | 38 +- .../static/tests/tours/website_form_editor.js | 16 + addons/website_form/views/snippets.xml | 59 +- .../static/src/js/website_sale.editor.js | 24 +- addons/website_sale/views/snippets.xml | 28 +- 14 files changed, 644 insertions(+), 465 deletions(-) diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index c49c6235e1a..c27e7b91ddb 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -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. diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index 16b7355ffc7..2ccc66dc6b6 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -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]); }, diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index f8fd1d7ce04..11b7d7b84ff 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -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; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 0f28857762e..b9d1af61f43 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -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 { diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js index fcc2b895a3a..c757c4dfd93 100644 --- a/addons/web_editor/static/tests/test_utils.js +++ b/addons/web_editor/static/tests/test_utils.js @@ -88,15 +88,12 @@ MockServer.include({ ' Background Image' + ' ' + '
' + - ' ' + - ' Alignment' + - ' ' + - ' Top' + - ' Middle' + - ' Bottom' + - ' Equal height' + - ' ' + - ' ' + + ' ' + + ' Top' + + ' Middle' + + ' Bottom' + + ' Equal height' + + ' ' + '
' + ''; return Promise.resolve(template); @@ -263,15 +260,12 @@ function wysiwygData(data) { ' Background Image' + ' ' + '
' + - ' ' + - ' Alignment' + - ' ' + - ' Top' + - ' Middle' + - ' Bottom' + - ' Equal height' + - ' ' + - ' ' + + ' ' + + ' Top' + + ' Middle' + + ' Bottom' + + ' Equal height' + + ' ' + '
' + ''; } diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index dfa03bcd2c8..fd6b9cb7ff2 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -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); + }, }); }); diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml index 2f32dd70219..dc6a08d0d8d 100644 --- a/addons/website/views/snippets.xml +++ b/addons/website/views/snippets.xml @@ -1025,124 +1025,91 @@
- - Typography - - Boxed - Line-On-Sides - Thin - Transparent - Underlined - Small Caps - - Default - - + + Boxed + Line-On-Sides + Thin + Transparent + Underlined + Small Caps + + Default +
- - Alignment - - Left - Center - Right - - + + Left + Center + Right +
- - Size - - Small - Medium - Large - - + + Small + Medium + Large +
- - Width - - 25% - 50% - 75% - 100% - - + + 25% + 50% + 75% + 100% +
- - Icon - - Stars - Squares - Hearts - Progress Bar - - - - Value - - 0 - 1/5 - 2/5 - 3/5 - 4/5 - 5/5 - - - - Size - - Small - Medium - Big - - + + Stars + Squares + Hearts + Progress Bar + + + 0 + 1/5 + 2/5 + 3/5 + 4/5 + 5/5 + + + Small + Medium + Big +
- - Thickness - - - px - - - - - Style - - Solid - Dashed - Dotted - Double - - - - Width - - 25% - 50% - 75% - 100% - - - - Alignment - - Left - Center - Right - - + + + px + + + + Solid + Dashed + Dotted + Double + + + 25% + 50% + 75% + 100% + + + Left + Center + Right +
@@ -1151,36 +1118,27 @@ data-target="> .carousel"> Add Slide Remove Slide - - Transition - - Slide - Fade - - None - - - - Style - - Bordered - Boxed - Rounded - - Default - - - - Speed - - 1s - 2s - 3s - 5s - 10s - Disable autoplay - - + + Slide + Fade + + None + + + Bordered + Boxed + Rounded + + Default + + + 1s + 2s + 3s + 5s + 10s + Disable autoplay +
@@ -1192,68 +1150,51 @@ Add images Remove all images - - Mode - - Float - Masonry - Grid - Slideshow - - - - Slideshow speed - - 1s - 2s - 3s - 5s - 10s - Disable autoplay - - - - Columns - - 1 - 2 - 3 - 4 - 6 - 12 - - - - Images spacing - - None - Small - Medium - Big - - - - Styling - - Square - Rounded corners - Thumbnails - Circle - Shadows - - + + Float + Masonry + Grid + Slideshow + + + 1s + 2s + 3s + 5s + 10s + Disable autoplay + + + 1 + 2 + 3 + 4 + 6 + 12 + + + None + Small + Medium + Big + + + Square + Rounded corners + Thumbnails + Circle + Shadows +
- - Re-order - - Move to first - Move to previous - Move to next - Move to last - - +
+ Re-order + Move to first + Move to previous + Move to next + Move to last +
@@ -1269,31 +1210,25 @@
- - Number of columns - - 1 - 2 - 3 - 4 - 5 - 6 - - + + 1 + 2 + 3 + 4 + 5 + 6 +
- - Alignment - - Top - Middle - Bottom - - Equal height - - + + Top + Middle + Bottom + + Equal height +
@@ -1312,19 +1247,16 @@
- - Scroll Speed - - No-scroll - - Fixed - - Very Slow - Slow - Fast - Very Fast - - + + No-scroll + + Fixed + + Very Slow + Slow + Fast + Very Fast +
@@ -1361,14 +1293,9 @@
- - Styles - - Border - Rounded - Shadow - - + + +
- Folded list +
- Transparent +
- - Size - - Full-Width - Narrow - - + + Full-Width + Narrow +
Change Cover Remove Cover - - Size - - - Full Screen - - - Half Screen - - - Fit text - - - - - Filter Intensity - - None - Low - Medium - High - - - - Filter Color - - Black - White - Primary - Secondary - Blue - Yellow - Red - Purple - Green - - - - Text Size - - Hero - Huge - Big - Regular - Small - Tiny - - - - Text Alignment - - Left - Centered - Right - - + + Full Screen + Half Screen + Fit text + + + None + Low + Medium + High + + + Black + White + Primary + Secondary + Blue + Yellow + Red + Purple + Green + + + Hero + Huge + Big + Regular + Small + Tiny + + + Left + Centered + Right +
- - Stretch - - Yes - No - - +
diff --git a/addons/website_blog/static/src/js/s_latest_posts_editor.js b/addons/website_blog/static/src/js/s_latest_posts_editor.js index 66de75bb65b..0c6ae3fc948 100644 --- a/addons/website_blog/static/src/js/s_latest_posts_editor.js +++ b/addons/website_blog/static/src/js/s_latest_posts_editor.js @@ -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]); diff --git a/addons/website_blog/static/src/js/website_blog.editor.js b/addons/website_blog/static/src/js/website_blog.editor.js index b741b2197f0..4e2c136b0f1 100644 --- a/addons/website_blog/static/src/js/website_blog.editor.js +++ b/addons/website_blog/static/src/js/website_blog.editor.js @@ -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"]'); diff --git a/addons/website_blog/views/snippets.xml b/addons/website_blog/views/snippets.xml index 63c224f3c35..3e9c8e0bfbe 100644 --- a/addons/website_blog/views/snippets.xml +++ b/addons/website_blog/views/snippets.xml @@ -11,31 +11,25 @@