From ff81fa4798e232a03daf0eeff7d85ad35a52b25c Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 21 Sep 2020 11:26:58 +0000 Subject: [IMP] web_editor, website, *: move text tools in snippets panel *: website_event, test_website This commit is a series of hacks. The goal is to move the summernote text tools to the editor panel for the website editor. All the code to use the text tools in a top bar is kept (mass mailing, etc) and the text tools are placed at the right place for website in an ugly way. This is obviously temporary, until we can implement those text tools more generically and in a better way thanks to the new editor. Part of https://github.com/odoo/odoo/pull/57975 task-2344227 closes odoo/odoo#57975 Related: odoo/design-themes#364 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/editor/snippets.editor.js | 5 ++ .../web_editor/static/src/js/editor/summernote.js | 4 +- .../static/src/js/wysiwyg/wysiwyg_snippets.js | 10 +++- addons/web_editor/static/src/scss/wysiwyg.scss | 15 ++--- .../static/src/scss/wysiwyg_snippets.scss | 66 +++++++++++++++++++--- 5 files changed, 77 insertions(+), 23 deletions(-) (limited to 'addons/web_editor/static/src') 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 718c2407e57..e7d685262bc 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -888,6 +888,7 @@ var SnippetsMenu = Widget.extend({ this._notActivableElementsSelector = [ '#web_editor-top-edit', + '.o_we_website_top_actions', '#oe_snippets', '#oe_manipulators', '.o_technical_modal', @@ -926,6 +927,9 @@ var SnippetsMenu = Widget.extend({ this.customizePanel = document.createElement('div'); this.customizePanel.classList.add('o_we_customize_panel', 'd-none'); + this.textEditorPanelEl = document.createElement('div'); + this.textEditorPanelEl.classList.add('o_we_snippet_text_tools'); + this.invisibleDOMPanelEl = document.createElement('div'); this.invisibleDOMPanelEl.classList.add('o_we_invisible_el_panel'); this.invisibleDOMPanelEl.appendChild( @@ -1651,6 +1655,7 @@ var SnippetsMenu = Widget.extend({ // Add the computed template and make elements draggable this.$el.html($html); this.$el.append(this.customizePanel); + this.$el.append(this.textEditorPanelEl); this.$el.append(this.invisibleDOMPanelEl); this._makeSnippetDraggable(this.$snippets); this._disableUndroppableSnippets(); diff --git a/addons/web_editor/static/src/js/editor/summernote.js b/addons/web_editor/static/src/js/editor/summernote.js index 01269589811..f1145c8d8c1 100644 --- a/addons/web_editor/static/src/js/editor/summernote.js +++ b/addons/web_editor/static/src/js/editor/summernote.js @@ -984,12 +984,12 @@ renderer.tplButtonInfo.color = function (lang, options) { value: '{"backColor":"#B35E9B"}' }); var foreColorButton = renderer.getTemplate().button(foreColorButtonLabel, { - className: 'note-fore-color-preview mx-1', + className: 'note-fore-color-preview', title: lang.color.foreground, dropdown: renderer.getTemplate().dropdown('
    • '), }); var backColorButton = renderer.getTemplate().button(backColorButtonLabel, { - className: 'note-back-color-preview mx-1', + className: 'note-back-color-preview', title: lang.color.background, dropdown: renderer.getTemplate().dropdown('
    • '), }); diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js index 9b4b9f84222..73801dc93f5 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg_snippets.js @@ -36,11 +36,17 @@ Wysiwyg.include({ * @private */ _relocateEditorBar: function () { + if (!this.options.toolbarHandler.length) { + this.options.toolbarHandler = $('.o_we_snippet_text_tools'); + } this.options.toolbarHandler.append(this.editor.$el); + // TODO the next four lines are a huge hack: since the editor.$el // is repositioned, the snippetsMenu elements are not at the - // correct position anymore... the whole logic has to be refactored. - if (this.editor.snippetsMenu) { + // correct position anymore if it was repositioned outside of it... + // the whole logic has to be refactored... hopefully not needed anymore + // with editor team changes + if (this.editor.snippetsMenu && !this.editor.snippetsMenu.$el.has(this.options.toolbarHandler).length) { this.editor.snippetsMenu.$el.insertAfter(this.options.toolbarHandler); this.editor.snippetsMenu.$snippetEditorArea.insertAfter(this.editor.snippetsMenu.$el); } diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss index e7e62129243..60e7799f455 100644 --- a/addons/web_editor/static/src/scss/wysiwyg.scss +++ b/addons/web_editor/static/src/scss/wysiwyg.scss @@ -18,17 +18,6 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; } } -.editor_enable { - padding-top: var(--o-we-toolbar-height) !important; - - .note-popover .popover .popover-body { - height: var(--o-we-toolbar-height); - } - .note-popover .popover { - transform: none; - } -} - #web_editor-top-edit { @include o-position-absolute(0, 0, auto, 0); position: fixed; @@ -42,6 +31,10 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default; right: 0 !important; border: none !important; max-width: none; + transform: none; + } + .note-popover .popover .popover-body { + height: var(--o-we-toolbar-height); } } diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index daa9f5c7312..2dd12418a04 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -48,6 +48,50 @@ body.editor_enable.editor_has_snippets { } } +// Ugly hack to force ugly rules... while waiting for new editor +#oe_snippets#oe_snippets .o_we_snippet_text_tools { + padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent; + box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5); + z-index: $o-we-zindex; + + .popover { + position: static !important; + top: 0 !important; + left: 0 !important; + transform: none !important; + border: none !important; + } + .popover-body { + padding: 0 !important; + + > * { + margin-bottom: $o-we-sidebar-content-field-spacing; + } + } + .btn { + @extend %we-generic-button; + } + .btn-group { + > .d-none + * { + margin-left: 0 !important; + } + } + .note-color { + .btn-group { + position: static; + } + .dropdown-menu { // Drop up + top: auto; + bottom: 100%; + margin-top: 0; + margin-bottom: $dropdown-spacer; + } + } +} +#o_scroll:not(.d-none) ~ .o_we_snippet_text_tools { + padding-right: $o-we-sidebar-blocks-content-spacing; + padding-left: $o-we-sidebar-blocks-content-spacing; +} .oe_snippet { // No root because can be drag and drop (and the helper is in the body) @@ -264,8 +308,7 @@ body.editor_enable.editor_has_snippets { } > #o_scroll, > .o_we_customize_panel { - flex: 1 1 auto; - height: 100%; + min-height: 0; overflow: auto; } @@ -1166,6 +1209,7 @@ body.editor_enable.editor_has_snippets { flex: 0 0 auto; max-height: 220px; overflow-y: auto; + margin-top: auto; padding: $o-we-sidebar-blocks-content-spacing; background-color: $o-we-sidebar-blocks-content-bg; box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2); @@ -1185,12 +1229,18 @@ body.editor_enable.editor_has_snippets { } &.o_we_backdrop { - > .o_we_customize_panel::after { - content: ""; - @include o-position-absolute(0, 0, 0, 0); - display: block; - pointer-events: none; - background: $o-we-sidebar-content-backdrop-bg; + > .o_we_customize_panel { + // Ensure the panel takes full height so that an opened dropdown + // does not make a scrollbar appear for no reason + flex: 1 1 auto; + + &::after { + content: ""; + @include o-position-absolute(0, 0, 0, 0); + display: block; + pointer-events: none; + background: $o-we-sidebar-content-backdrop-bg; + } } .o_we_widget_opened { -- cgit v1.2.3