[IMP] website, web_editor: option to add columns on snippet without any
In the previous snippet cleanup, a lot of superfluous row > col were removed in favour of having the bare content directly in the section, this streamlines the interface and prevents having many useless UI elements. At the same time however, there are some snippets on which you might want columns so that you can pull the content off-center and give the block a background color independently of its containing section (namely: the cover, title and text-block snippets) this commit adds an option to add columns on those snippets (and remove those columns completely if they're no longer wanted) task-2120360 closes odoo/odoo#45712 X-original-commit: a44bfc4f7bba16d700650ecc2369fa1445ecbfb9 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Samuel Degueldre
@@ -1017,6 +1017,17 @@ options.registry.sizing_x = options.registry.sizing.extend({
|
||||
});
|
||||
|
||||
options.registry.layout_column = options.Class.extend({
|
||||
/**
|
||||
* @override
|
||||
*/
|
||||
start: function () {
|
||||
// Needs to be done manually for now because _computeWidgetVisibility
|
||||
// doesn't go through this option for buttons inside of a select.
|
||||
// TODO: improve this.
|
||||
this.$el.find('we-button[data-name="zero_cols_opt"]')
|
||||
.toggleClass('d-none', !this.$target.is('.s_allow_columns'));
|
||||
return this._super(...arguments);
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Options
|
||||
@@ -1028,8 +1039,24 @@ options.registry.layout_column = options.Class.extend({
|
||||
* @see this.selectClass for parameters
|
||||
*/
|
||||
selectCount: async function (previewMode, widgetValue, params) {
|
||||
const previousNbColumns = this.$('> .row').children().length;
|
||||
let $row = this.$('> .row');
|
||||
if (!$row.length) {
|
||||
$row = this.$target.contents().wrapAll($('<div class="row"><div class="col-lg-12"/></div>')).parent().parent();
|
||||
}
|
||||
|
||||
const nbColumns = parseInt(widgetValue);
|
||||
await this._updateColumnCount(nbColumns - this.$target.children().length);
|
||||
await this._updateColumnCount($row, (nbColumns || 1) - $row.children().length);
|
||||
// Yield UI thread to wait for event to bubble before activate_snippet is called.
|
||||
// In this case this lets the select handle the click event before we switch snippet.
|
||||
// TODO: make this more generic in activate_snippet event handler.
|
||||
await new Promise(resolve => setTimeout(resolve));
|
||||
if (nbColumns === 0) {
|
||||
$row.contents().unwrap().contents().unwrap();
|
||||
this.trigger_up('activate_snippet', {$snippet: this.$target});
|
||||
} else if (previousNbColumns === 0) {
|
||||
this.trigger_up('activate_snippet', {$snippet: this.$('> .row').children().first()});
|
||||
}
|
||||
},
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
@@ -1041,7 +1068,7 @@ options.registry.layout_column = options.Class.extend({
|
||||
*/
|
||||
_computeWidgetState: function (methodName, params) {
|
||||
if (methodName === 'selectCount') {
|
||||
return '' + this.$target.children().length;
|
||||
return this.$('> .row').children().length;
|
||||
}
|
||||
return this._super(...arguments);
|
||||
},
|
||||
@@ -1050,17 +1077,16 @@ options.registry.layout_column = options.Class.extend({
|
||||
* last x columns.
|
||||
*
|
||||
* @private
|
||||
* @param {jQuery} $row - the row in which to update the columns
|
||||
* @param {integer} count - positif to add, negative to remove
|
||||
*/
|
||||
_updateColumnCount: async function (count) {
|
||||
_updateColumnCount: async function ($row, count) {
|
||||
if (!count) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.trigger_up('request_history_undo_record', {$target: this.$target});
|
||||
|
||||
if (count > 0) {
|
||||
var $lastColumn = this.$target.children().last();
|
||||
var $lastColumn = $row.children().last();
|
||||
for (var i = 0; i < count; i++) {
|
||||
await new Promise(resolve => {
|
||||
this.trigger_up('clone_snippet', {$snippet: $lastColumn, onSuccess: resolve});
|
||||
@@ -1068,23 +1094,23 @@ options.registry.layout_column = options.Class.extend({
|
||||
}
|
||||
} else {
|
||||
var self = this;
|
||||
for (const el of this.$target.children().slice(count)) {
|
||||
for (const el of $row.children().slice(count)) {
|
||||
await new Promise(resolve => {
|
||||
self.trigger_up('remove_snippet', {$snippet: $(el), onSuccess: resolve});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this._resizeColumns();
|
||||
this._resizeColumns($row.children());
|
||||
this.trigger_up('cover_update');
|
||||
},
|
||||
/**
|
||||
* Resizes the columns so that they are kept on one row.
|
||||
*
|
||||
* @private
|
||||
* @param {jQuery} $columns - the columns to resize
|
||||
*/
|
||||
_resizeColumns: function () {
|
||||
var $columns = this.$target.children();
|
||||
_resizeColumns: function ($columns) {
|
||||
const colsLength = $columns.length;
|
||||
var colSize = Math.floor(12 / colsLength) || 1;
|
||||
var colOffset = Math.floor((12 - colSize * colsLength) / 2);
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<template id="s_cover" name="Cover">
|
||||
<section class="s_cover parallax s_parallax_is_fixed bg-black-50 pt96 pb96" data-scroll-background-ratio="1">
|
||||
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
|
||||
<div class="container">
|
||||
<div class="container s_allow_columns">
|
||||
<h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Catchy Headline</font></h1>
|
||||
<p class="lead" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p>
|
||||
<p style="text-align: center;">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<template id="s_text_block" name="Text">
|
||||
<section class="s_text_block pt32 pb32">
|
||||
<div class="container">
|
||||
<div class="container s_allow_columns">
|
||||
<p><b>Great stories have personality.</b> Consider telling a great story that provides personality. Writing a story with personality for potential clients will assists with making a relationship connection. This shows up in small quirks like word choices or phrases. Write from your point of view, not from someone else's experience.</p>
|
||||
<p><b>Great stories are for everyone even when only written for just one person.</b> If you try to write with a wide general audience in mind, your story will ring false and be bland. No one will be interested. Write for one person. If it’s genuine for the one, it’s genuine for the rest.</p>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<template id="s_title" name="Title">
|
||||
<section class="s_title pt32 pb32" data-vcss="001">
|
||||
<div class="container">
|
||||
<div class="container s_allow_columns">
|
||||
<h1 style="text-align: center;"><font style="font-size: 62px;">Your Site Title</font></h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -219,8 +219,9 @@
|
||||
|
||||
<div data-js="layout_column"
|
||||
data-selector="section"
|
||||
data-target="> * > .row:not(.s_nb_column_fixed)">
|
||||
data-target="> *:has(> .row:not(.s_nb_column_fixed)), > .s_allow_columns">
|
||||
<we-select string="Number of columns" data-no-preview="true">
|
||||
<we-button data-select-count="0" data-name="zero_cols_opt">0</we-button>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user