From 73ca6f191ef79dae7e8b85c13f6e0eba025b02ac Mon Sep 17 00:00:00 2001 From: Goaman Date: Mon, 16 Nov 2020 16:14:40 +0000 Subject: [PATCH] [FIX] website, web_editor: #wrapwrap in body Make the element #wrapwrap be placed directly in the body as in 14.0 instead of wrapped inside containers. FIX: [QSM] Header effects don't work in edit mode even though they are started FIX: [QSM] The editor overlay on top of snippets does not disappear during scroll anymore FIX: [QSM] Click on the header, it is deletable while it should not (I precise that here asit is a kinda different case: the header has options even though it's not editable but it's not deletable) closes odoo/odoo#63268 X-original-commit: e0331583cf995b7cfe7d7928918c71b51c854f2d Signed-off-by: David Monjoie (dmo) --- .../static/src/js/editor/snippets.editor.js | 8 ++-- .../static/src/js/wysiwyg/wysiwyg.js | 7 +-- .../web_editor/static/src/scss/wysiwyg.scss | 10 ++-- .../static/src/scss/wysiwyg_snippets.scss | 47 ++++++++++++++----- addons/website/static/src/js/menu/edit.js | 15 ++++++ .../static/src/scss/website.edit_mode.scss | 2 +- .../website/static/src/scss/website.ui.scss | 9 ---- .../static/src/scss/website.wysiwyg.scss | 4 -- 8 files changed, 67 insertions(+), 35 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 d4d56da174a..c850e39c7d6 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -1121,7 +1121,7 @@ var SnippetsMenu = Widget.extend({ }); this.updateCurrentSnippetEditorOverlay(); }, 250)); - this.$editor.find('#wrapwrap').on('scroll.snippets_menu', () => { + this.$editor.on('scroll.snippets_menu', () => { this.updateCurrentSnippetEditorOverlay(); }); // Hide the active overlay when scrolling. @@ -1198,7 +1198,7 @@ var SnippetsMenu = Widget.extend({ this.$window.off('.snippets_menu'); this.$document.off('.snippets_menu'); this.$scrollingElement.off('.snippets_menu'); - this.$editor.find('#wrapwrap').off('.snippets_menu'); + this.$editor.off('.snippets_menu'); } core.bus.off('deactivate_snippet', this, this._onDeactivateSnippet); delete this.cacheSnippetTemplate[this.options.snippets]; @@ -2155,7 +2155,7 @@ var SnippetsMenu = Widget.extend({ } }, }); - this.draggableComponent = new SmoothScrollOnDrag(this, $snippets, this.$editor.find('#wrapwrap').addBack().last(), smoothScrollOptions); + this.draggableComponent = new SmoothScrollOnDrag(this, $snippets, this.$editor.addBack().last(), smoothScrollOptions); }, /** * Adds the 'o_default_snippet_text' class on nodes which contain only @@ -2604,7 +2604,7 @@ var SnippetsMenu = Widget.extend({ _onContentMouseDown: function (ev) { const el = this.editorHelpers.elementFromPoint(ev.clientX, ev.clientY); - const editable = el && el.closest('.note-editable'); + const editable = el && el.closest('#wrapwrap, .note-editable'); if (!editable || !this.$editor.is(editable) || this.lastElement === el) { return; diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index c83a9812d18..27d1aae1c03 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -275,6 +275,7 @@ var Wysiwyg = Widget.extend({ } const $mainSidebar = $('
'); + if (this.options.enableWebsite) $mainSidebar.addClass('o_website_sidebar'); const $snippetManipulators = $('
'); const customCommands = { @@ -322,12 +323,12 @@ var Wysiwyg = Widget.extend({ const rootElement = this.editorHelpers.getDomNodes(domLayout.root.firstDescendant(JWEditorLib.ContainerNode))[0]; this.editorEditable = this.editorHelpers.getDomNodes(this.zoneMain)[0] || this.editorHelpers.getDomNodes(this.zoneMain.parent)[0]; - this.$toolbar = $(rootElement).find('jw-toolbar').detach(); + this.$toolbar = $(rootElement).add('body').find('jw-toolbar').detach(); if (this.options.enableWebsite) { const $wrapwrap = $('#wrapwrap'); $wrapwrap.removeClass('o_editable'); // clean the dom before edition - this._getEditable($wrapwrap).addClass('o_editable o_editable_no_shadow'); + this._getEditable($wrapwrap).addClass('o_editable'); $wrapwrap.data('wysiwyg', this); // add class when page content is empty to show the "DRAG BUILDING BLOCKS HERE" block @@ -353,7 +354,6 @@ var Wysiwyg = Widget.extend({ }; if (this.options.snippets) { - document.body.classList.add('editor_has_snippets'); this.$webEditorToolbar = $('
'); var $toolbarHandler = $('#web_editor-top-edit'); @@ -369,6 +369,7 @@ var Wysiwyg = Widget.extend({ onlyStyleTab: this.options.enableTranslation, }, this.options)); await this.snippetsMenu.appendTo($mainSidebar); + document.body.classList.add('editor_has_snippets'); // Place the history buttons in their right location. const $undoButton = $(''); diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss index 3f17077cd77..8bfdfcca24f 100644 --- a/addons/web_editor/static/src/scss/wysiwyg.scss +++ b/addons/web_editor/static/src/scss/wysiwyg.scss @@ -474,9 +474,6 @@ img::selection { .wrap_editor { height: 100vh; } -.o_main_sidebar { - display: flex; -} .o_editor_center { flex: 1 1 auto; outline: none; @@ -725,6 +722,13 @@ table.table-picker { position: fixed !important; } +body jw-devtools { + position: fixed; + bottom: 0; + width: 100%; + z-index: 10000; +} + .oe_absolute_dropdown { border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color; border-radius: $o-we-sidebar-content-field-border-radius; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 5b5f7490bfc..b83859964f4 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -4,7 +4,12 @@ // OVERRIDES FOR EDITOR WITH SNIPPETS body.editor_enable.editor_has_snippets { - position: fixed; + padding-right: $o-we-sidebar-width !important; + transition: padding-right 400ms ease 0s; + + #web_editor-top-edit .note-popover .popover { + right: $o-we-sidebar-width !important; + } .modal:not(.o_technical_modal) { top: 0 !important; @@ -20,6 +25,34 @@ body.editor_enable.editor_has_snippets { } } +.o_main_sidebar { + overflow: hidden; + display: flex; + + &.o_loaded { + transform: none; + width: $o-we-sidebar-width; + transition: transform 400ms ease 0s !important; + } +} +.o_main_sidebar.o_website_sidebar { + @include o-position-absolute(0, 0, 0, auto); + // transition: width 400ms ease 0s !important; + transition: transform 400ms ease 0s; + transform: translateX(100%); + position: fixed; + z-index: $o-we-zindex; + + overflow: hidden; + display: flex; + + &.o_loaded { + transform: none; + width: $o-we-sidebar-width; + transition: transform 400ms ease 0s !important; + } +} + // Mobile fix for mass mailing @include media-breakpoint-down(md) { body.editor_enable.editor_has_snippets { @@ -187,9 +220,10 @@ body.editor_enable.editor_has_snippets { #oe_snippets { @include o-w-preserve-btn; overflow: auto; + + width: 100%; display: flex; flex-flow: column nowrap; - width: $o-we-sidebar-width; border-left: $o-we-sidebar-border-width solid $o-we-sidebar-border-color; background-color: $o-we-sidebar-bg; @@ -198,12 +232,6 @@ body.editor_enable.editor_has_snippets { font-size: $o-we-sidebar-font-size; font-weight: 400; - transition: transform 400ms ease 0s; - transform: translateX(100%); - - &.o_loaded { - transform: none; - } *::selection { background: lighten($o-we-accent, 9); @@ -1894,9 +1922,6 @@ we-select.o_we_shape_menu { position: fixed; right: $o-we-sidebar-width; } -.o_main_sidebar:not(.o_loaded) #oe_snippets { - display: none !important; -} .o_we_force_no_transition { // Note: this is forced through a CSS class instead of inline style to avoid diff --git a/addons/website/static/src/js/menu/edit.js b/addons/website/static/src/js/menu/edit.js index d3382932560..2d41d14c100 100644 --- a/addons/website/static/src/js/menu/edit.js +++ b/addons/website/static/src/js/menu/edit.js @@ -277,6 +277,19 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({ ], ] + const layoutTemplate = ` + +
+ + + + + + + `; + + $('#wrapwrap').attr('contenteditable', 'true'); + const params = { legacy: false, snippets: 'website.snippets', @@ -289,8 +302,10 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({ discardButton: true, saveButton: true, devicePreview: true, + wrapMain: false, toolbarLayout: enableTranslation ? translationToolbar : websiteToolbar, location: [document.getElementById('wrapwrap'), 'replace'], + interface: layoutTemplate, }; params.enableTranslation = enableTranslation; diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index 8c6cbba3d20..e8be4235e71 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/addons/website/static/src/scss/website.edit_mode.scss @@ -29,7 +29,7 @@ $-editor-messages-margin-x: 2%; .o_editable { &:not(:empty), &[data-oe-type] { - &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):not(.o_editable_no_shadow):hover, + &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover, &.o_editable_date_field_linked { box-shadow: $o-brand-odoo 0 0 5px 2px inset; } diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index 534e7225c05..2fc45c758c3 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/addons/website/static/src/scss/website.ui.scss @@ -9,15 +9,6 @@ body { // rtlcss for right-to-left text direction. direction: ltr; } -.o_main_sidebar { - transition: width 400ms ease 0s !important; - width: 0; - overflow: hidden; - flex-shrink: 0; - &.o_loaded { - width: $o-we-sidebar-width; - } -} body.o_connected_user { padding-top: $o-navbar-height!important; diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss index bce704af562..14cb70674fb 100644 --- a/addons/website/static/src/scss/website.wysiwyg.scss +++ b/addons/website/static/src/scss/website.wysiwyg.scss @@ -58,10 +58,6 @@ } } -#oe_snippets { - top: $o-we-sidebar-top-height; -} - .note-statusbar { display: none; }