diff options
Diffstat (limited to 'addons/web_editor/static')
5 files changed, 77 insertions, 23 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 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('<li><div data-event-name="foreColor" class="colorPalette"/></li>'), }); 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('<li><div data-event-name="backColor" class="colorPalette"/></li>'), }); 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 { |