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

[FIX] web_editor: fix resizing columns out of parent

Browse Source 
Before this commit, it was possible to resize a column so that it
overflows the right border of the row.

Steps to reproduce the bug:
  1. In website edit mode, drop a `media list` snippet in the page.
  2. Select a column.
  3. Resize the column by dragging its left side to the right to make it
  smaller.
  4. Drag its right side to make it bigger and go until the edge of the
  editor => The column overflows and ends outside of the content zone.

This commit prevents the column from overflowing when it has an offset.

task-2837361

closes odoo/odoo#108218

X-original-commit: 1759079cbb084acac0616abfab84b83b1e62ae61
Signed-off-by: Bojabza Soukéina (sobo) <sobo@odoo.com>
This commit is contained in:
Benjamin Vray
2022-12-16 20:38:26 +01:00
committed by Soukéina Bojabza
parent f842ae07d2
commit c54826be4b
1 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+28 -17
View File
@@ -4654,24 +4654,35 @@ registry['sizing_x'] = registry.sizing.extend({
* @override
*/
_onResize: function (compass, beginClass, current) {
if (compass === 'w') {
// don't change the right border position when we change the offset (replace col size)
var beginCol = Number(beginClass.match(/col-lg-([0-9]+)|$/)[1] || 0);
var beginOffset = Number(beginClass.match(/offset-lg-([0-9-]+)|$/)[1] || beginClass.match(/offset-xl-([0-9-]+)|$/)[1] || 0);
var offset = Number(this.grid.w[0][current].match(/offset-lg-([0-9-]+)|$/)[1] || 0);
if (offset < 0) {
offset = 0;
}
var colSize = beginCol - (offset - beginOffset);
if (colSize <= 0) {
colSize = 1;
offset = beginOffset + beginCol - 1;
}
this.$target.attr('class', this.$target.attr('class').replace(/\s*(offset-xl-|offset-lg-|col-lg-)([0-9-]+)/g, ''));
if (compass === 'w' || compass === 'e') {
const beginOffset = Number(beginClass.match(/offset-lg-([0-9-]+)|$/)[1] || beginClass.match(/offset-xl-([0-9-]+)|$/)[1] || 0);
this.$target.addClass('col-lg-' + (colSize > 12 ? 12 : colSize));
if (offset > 0) {
this.$target.addClass('offset-lg-' + offset);
if (compass === 'w') {
// don't change the right border position when we change the offset (replace col size)
var beginCol = Number(beginClass.match(/col-lg-([0-9]+)|$/)[1] || 0);
var offset = Number(this.grid.w[0][current].match(/offset-lg-([0-9-]+)|$/)[1] || 0);
if (offset < 0) {
offset = 0;
}
var colSize = beginCol - (offset - beginOffset);
if (colSize <= 0) {
colSize = 1;
offset = beginOffset + beginCol - 1;
}
this.$target.attr('class', this.$target.attr('class').replace(/\s*(offset-xl-|offset-lg-|col-lg-)([0-9-]+)/g, ''));
this.$target.addClass('col-lg-' + (colSize > 12 ? 12 : colSize));
if (offset > 0) {
this.$target.addClass('offset-lg-' + offset);
}
} else if (beginOffset > 0) {
const endCol = Number(this.grid.e[0][current].match(/col-lg-([0-9]+)|$/)[1] || 0);
// Avoids overflowing the grid to the right if the
// column size + the offset exceeds 12.
if ((endCol + beginOffset) > 12) {
this.$target[0].className = this.$target[0].className.replace(/\s*(col-lg-)([0-9-]+)/g, '');
this.$target[0].classList.add('col-lg-' + (12 - beginOffset));
}
}
}
this._super.apply(this, arguments);