From 4345df3aeeb83463d81bc24749856fef3a58fb3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= Date: Tue, 26 Sep 2023 16:11:51 +0200 Subject: [PATCH] [IMP] web_editor, website: add a spacing option to modify the grid gaps The `display: grid` property allows to modify the spacing (or gaps) between the rows and columns of the grid with the `row-gap` and `column- gap` CSS properties. When the grid mode was added with [1], these properties were deliberately ignored and the gaps were forced to 0px. This commit adds the "Spacing (Y, X)" option that allows to modify these grid gaps. A grid preview is also added when using this option, in order to visualize what is being changed in the grid. [1]: https://github.com/odoo/odoo/commit/cc406afcea7bf5846233a9f97a4a8ac5f618f3ec task-3369695 Part-of: odoo/odoo#136683 --- .../static/src/js/common/grid_layout_utils.js | 3 +- .../static/src/js/editor/snippets.options.js | 46 +++++++++++++++++++ .../static/src/scss/web_editor.frontend.scss | 5 ++ .../static/src/scss/wysiwyg_snippets.scss | 16 +++++++ addons/website/views/snippets/snippets.xml | 4 ++ 5 files changed, 73 insertions(+), 1 deletion(-) diff --git a/addons/web_editor/static/src/js/common/grid_layout_utils.js b/addons/web_editor/static/src/js/common/grid_layout_utils.js index 4946327ce44..c076156e8ff 100644 --- a/addons/web_editor/static/src/js/common/grid_layout_utils.js +++ b/addons/web_editor/static/src/js/common/grid_layout_utils.js @@ -29,7 +29,8 @@ export function _getGridProperties(rowEl) { * @param {Element} rowEl the parent grid element of the element */ export function _setElementToMaxZindex(element, rowEl) { - const childrenEls = [...rowEl.children].filter(el => el !== element); + const childrenEls = [...rowEl.children].filter(el => el !== element + && !el.classList.contains("o_we_grid_preview")); element.style.zIndex = Math.max(...childrenEls.map(el => el.style.zIndex)) + 1; } /** 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 783886ff7a6..9fe5feec4e5 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -5111,6 +5111,12 @@ registry.Box = SnippetOptionWidget.extend({ registry.layout_column = SnippetOptionWidget.extend({ + /** + * @override + */ + cleanUI() { + this._removeGridPreview(); + }, //-------------------------------------------------------------------------- // Options @@ -5257,6 +5263,30 @@ registry.layout_column = SnippetOptionWidget.extend({ gridUtils._resizeGrid(rowEl); this.trigger_up('activate_snippet', {$snippet: $(newColumnEl)}); }, + /** + * @override + */ + async selectStyle(previewMode, widgetValue, params) { + await this._super(previewMode, widgetValue, params); + + const rowEl = this.$target[0]; + const mobileViewThreshold = MEDIAS_BREAKPOINTS[SIZES.LG].minWidth; + const isMobileView = rowEl.ownerDocument.defaultView.frameElement.clientWidth < mobileViewThreshold; + if (["row-gap", "column-gap"].includes(params.cssProperty) && !isMobileView) { + // Reset the animation. + this._removeGridPreview(); + void rowEl.offsetWidth; // Trigger a DOM reflow. + + // Add an animated grid preview. + this.options.wysiwyg.odooEditor.observerUnactive("addGridPreview"); + this.gridPreviewEl = gridUtils._addBackgroundGrid(rowEl, 0); + this.gridPreviewEl.classList.add("o_we_grid_preview"); + gridUtils._setElementToMaxZindex(this.gridPreviewEl, rowEl); + this.options.wysiwyg.odooEditor.observerActive("addGridPreview"); + this.removeGridPreview = this._removeGridPreview.bind(this); + rowEl.addEventListener("animationend", this.removeGridPreview); + } + }, //-------------------------------------------------------------------------- // Private @@ -5377,6 +5407,22 @@ registry.layout_column = SnippetOptionWidget.extend({ // Kept for compatibility. rowEl.style.removeProperty('--grid-item-padding-x'); rowEl.style.removeProperty('--grid-item-padding-y'); + rowEl.style.removeProperty("gap"); + }, + /** + * Removes the grid preview that was added when changing the grid gaps. + * + * @private + */ + _removeGridPreview() { + this.options.wysiwyg.odooEditor.observerUnactive("removeGridPreview"); + this.$target[0].removeEventListener("animationend", this.removeGridPreview); + if (this.gridPreviewEl) { + this.gridPreviewEl.remove(); + delete this.gridPreviewEl; + } + delete this.removeGridPreview; + this.options.wysiwyg.odooEditor.observerActive("removeGridPreview"); }, }); diff --git a/addons/web_editor/static/src/scss/web_editor.frontend.scss b/addons/web_editor/static/src/scss/web_editor.frontend.scss index bc488d61575..ca9c1626c82 100644 --- a/addons/web_editor/static/src/scss/web_editor.frontend.scss +++ b/addons/web_editor/static/src/scss/web_editor.frontend.scss @@ -34,6 +34,11 @@ // GRID LAYOUT .o_grid_mode { + @include media-breakpoint-down(lg) { + // No gaps in mobile view. + row-gap: 0px !important; + column-gap: 0px !important; + } @include media-breakpoint-up(lg) { display: grid !important; grid-auto-rows: 50px; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index c20c19a2c96..15a9c1c0dd5 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -2614,6 +2614,22 @@ we-select.o_grid we-toggler { stroke-opacity: .2; stroke-width: 1px; } + + &.o_we_grid_preview { + pointer-events: none; + + .o_we_cell { + animation: gridPreview 2s 0.5s; + } + } +} + +// Grid preview. +@keyframes gridPreview { + to { + fill-opacity: 0; + stroke-opacity: 0; + } } .o_we_drag_helper { diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 3634d4d7dfd..36be8ac819d 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -361,6 +361,10 @@ Text Button + + + +