From 46c3a9670d98a0110c7a4d867cfcb760142b372e Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 21 Sep 2020 11:26:58 +0000 Subject: [PATCH] [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#58199 X-original-commit: ff81fa4798e232a03daf0eeff7d85ad35a52b25c Related: odoo/design-themes#365 Signed-off-by: Quentin Smetz (qsm) --- .../static/tests/tours/reset_views.js | 2 +- .../static/src/js/editor/snippets.editor.js | 5 ++ .../static/src/js/editor/summernote.js | 4 +- .../static/src/js/wysiwyg/wysiwyg_snippets.js | 10 ++- .../web_editor/static/src/scss/wysiwyg.scss | 15 ++--- .../static/src/scss/wysiwyg_snippets.scss | 66 ++++++++++++++++--- .../static/src/scss/website.edit_mode.scss | 9 ++- .../static/src/scss/website.wysiwyg.scss | 2 +- .../website/static/src/xml/website.editor.xml | 4 +- .../website/static/tests/tours/html_editor.js | 2 +- .../static/src/js/tours/event_tour.js | 2 +- 11 files changed, 90 insertions(+), 31 deletions(-) diff --git a/addons/test_website/static/tests/tours/reset_views.js b/addons/test_website/static/tests/tours/reset_views.js index 0a7ce49e4c4..cf2853f4357 100644 --- a/addons/test_website/static/tests/tours/reset_views.js +++ b/addons/test_website/static/tests/tours/reset_views.js @@ -31,7 +31,7 @@ tour.register('test_reset_page_view_complete_flow_part1', { { content: "save the page", extra_trigger: '#oe_structure_test_website_page.o_dirty', - trigger: "#web_editor-top-edit button[data-action=save]", + trigger: "button[data-action=save]", }, // 2. Edit that COW'd view in the HTML editor to break it. { 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 { diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index ef047d5e4bd..72c3a5f6538 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/addons/website/static/src/scss/website.edit_mode.scss @@ -154,21 +154,26 @@ table.editorbar-panel { } } -// s_popup in edit mode body.editor_enable.editor_has_snippets { + padding-top: 0 !important; + .s_popup .modal { + // s_popup in edit mode top: var(--o-we-toolbar-height); background-color: transparent; &.fade .modal-dialog { transform: none; } } + + #oe_main_menu_navbar + #wrapwrap .o_header_affixed { + top: 0; + } } .editor_has_snippets { .o_header_affixed { right: $o-we-sidebar-width !important; - top: var(--o-we-toolbar-height) !important; } } diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss index 4ed8d173fca..3626d895b9a 100644 --- a/addons/website/static/src/scss/website.wysiwyg.scss +++ b/addons/website/static/src/scss/website.wysiwyg.scss @@ -20,7 +20,7 @@ } // EDITOR TOP BAR AND POPOVER -#web_editor-top-edit .o_we_website_top_actions { +.o_we_website_top_actions { @include o-position-absolute($top: 0, $right: 0); z-index: $zindex-popover + 5; display: flex; diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index 6b2ae2f36e4..07562de1de8 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -11,8 +11,8 @@ -
    -
    +
    + diff --git a/addons/website/static/tests/tours/html_editor.js b/addons/website/static/tests/tours/html_editor.js index e22ded23311..281b53b8dba 100644 --- a/addons/website/static/tests/tours/html_editor.js +++ b/addons/website/static/tests/tours/html_editor.js @@ -22,7 +22,7 @@ tour.register('html_editor_multiple_templates', { { content: "save the page", extra_trigger: '#oe_structure_test_ui.o_dirty', - trigger: "#web_editor-top-edit button[data-action=save]", + trigger: "button[data-action=save]", }, // 2. Edit generic view { diff --git a/addons/website_event/static/src/js/tours/event_tour.js b/addons/website_event/static/src/js/tours/event_tour.js index 9666e76c5e1..cc7177d053b 100644 --- a/addons/website_event/static/src/js/tours/event_tour.js +++ b/addons/website_event/static/src/js/tours/event_tour.js @@ -29,7 +29,7 @@ EventAdditionalTourSteps.include({ position: 'bottom', run: 'drag_and_drop #o_wevent_event_main_col', }, { - trigger: '#web_editor-top-edit button[data-action="save"]', + trigger: 'button[data-action="save"]', content: _t("Don't forget to click save when you're done."), position: 'bottom', }, {