From 50cb0f3276819e22a6014bdb7895c7cbc0315ca8 Mon Sep 17 00:00:00 2001 From: Romain Derie Date: Tue, 20 Apr 2021 15:56:54 +0000 Subject: [PATCH] [IMP] web_editor: remove the img overlay replace and delete As replace and delete are already in the right panel, this is kind of a duplicate. Related to f3ccc91d423a62 Also, add border around selected image so the used knows what image is selected task-2502679 Closes #69340 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/editor/snippets.editor.js | 19 ++++----- .../static/src/js/editor/snippets.options.js | 40 +------------------ .../static/src/scss/wysiwyg_snippets.scss | 11 ++--- addons/web_editor/views/snippets.xml | 3 -- .../static/src/js/editor/snippets.options.js | 2 +- 5 files changed, 17 insertions(+), 58 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 5d1d105e543..e96bd0cdec8 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -157,7 +157,7 @@ var SnippetEditor = Widget.extend({ this.isTargetParentEditable = false; this.isTargetMovable = false; this.$scrollingElement = $().getScrollingElement(this.ownerDocument); - this.displayHandles = false; + this.displayOverlayOptions = false; this.__isStarted = new Promise(resolve => { this.__isStartedResolveFunc = resolve; @@ -504,9 +504,8 @@ var SnippetEditor = Widget.extend({ // sticky class is added/removed when toggling/untoggling this.$el.removeClass('o_we_overlay_preview'); this.$el.toggleClass('o_we_overlay_sticky', show); - if (!this.displayHandles) { - this.$el.find('.o_handle').addClass('d-none'); - this.$el.find('.o_overlay_options_wrap').addClass('o_inside_parent'); + if (!this.displayOverlayOptions) { + this.$el.find('.o_overlay_options_wrap').addClass('o_we_hidden_overlay_options'); } } @@ -686,8 +685,8 @@ var SnippetEditor = Widget.extend({ this.$el.add($optionsSection).find('.oe_snippet_remove').addClass('d-none'); } - if (option.displayHandles) { - this.displayHandles = true; + if (option.displayOverlayOptions) { + this.displayOverlayOptions = true; } return option.appendTo(document.createDocumentFragment()); @@ -1732,8 +1731,8 @@ var SnippetsMenu = Widget.extend({ // enabled previously by a click if (editorToEnable) { editorToEnable.toggleOverlay(true, previewMode); - if (!previewMode && !editorToEnable.displayHandles) { - const parentEditor = editorToEnableHierarchy.find(ed => ed.displayHandles); + if (!previewMode && !editorToEnable.displayOverlayOptions) { + const parentEditor = editorToEnableHierarchy.find(ed => ed.displayOverlayOptions); if (parentEditor) { parentEditor.toggleOverlay(true, previewMode); } @@ -2075,7 +2074,9 @@ var SnippetsMenu = Widget.extend({ let editableArea = self.getEditableArea(); snippetEditor = new SnippetEditor(parentEditor || self, $snippet, self.templateOptions, $snippet.closest('[data-oe-type="html"], .oe_structure').add(editableArea), self.options); self.snippetEditors.push(snippetEditor); - return snippetEditor.appendTo(self.$snippetEditorArea); + // Keep parent below its child inside the DOM as its `o_handle` + // needs to be (visually) on top of the child ones. + return snippetEditor.prependTo(self.$snippetEditorArea); }).then(function () { return snippetEditor; }); 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 5c0fd87038b..35e3ba52706 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -2769,7 +2769,7 @@ const SnippetOptionWidget = Widget.extend({ * * @type {boolean} */ - displayHandles: false, + displayOverlayOptions: false, /** * The option `$el` is supposed to be the associated DOM UI element. @@ -3846,7 +3846,7 @@ const registry = {}; //:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: registry.sizing = SnippetOptionWidget.extend({ - displayHandles: true, + displayOverlayOptions: true, /** * @override @@ -4105,28 +4105,6 @@ registry['sizing_y'] = registry.sizing.extend({ * Allows for media to be replaced. */ registry.ReplaceMedia = SnippetOptionWidget.extend({ - /** - * @override - */ - start() { - const $button = this.$el.find('we-button.fa'); - this.$overlayRemove = this.$overlay.find('.oe_snippet_remove'); - $button.insertBefore(this.$overlayRemove); - - return this._super(...arguments); - }, - - //-------------------------------------------------------------------------- - // Public - //-------------------------------------------------------------------------- - - /** - * @override - */ - async updateUIVisibility() { - this.$overlayRemove.toggleClass('d-none', this.$target.is('.fa')); - return this._super(...arguments); - }, //-------------------------------------------------------------------------- // Options @@ -4142,20 +4120,6 @@ registry.ReplaceMedia = SnippetOptionWidget.extend({ // to be refactored when the new editor is merged this.$target.dblclick(); }, - - //-------------------------------------------------------------------------- - // Private - //-------------------------------------------------------------------------- - - /** - * @override - */ - async _computeWidgetVisibility(widgetName, params) { - if (widgetName === 'replace_media_overlay_opt') { - return !this.$target.is('.fa'); - } - return this._super(...arguments); - } }); /** diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index ee52ff706f0..11a41e07ce8 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -1389,7 +1389,7 @@ body.editor_enable.editor_has_snippets { padding-left: 2em; line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width; } - + // Many2one create .o_we_m2o_create { margin-top: 1px; @@ -1913,10 +1913,10 @@ body.editor_enable.editor_has_snippets { > .o_overlay_options_wrap { @include o-position-absolute($o-we-handles-offset-to-hide, $left: 50%); transform: translate(-50%, -110%); - &.o_inside_parent { - transform: translate(-50%, 110%); - } + &.o_we_hidden_overlay_options { + display: none; + } &, > .o_overlay_move_options, .o_overlay_edit_options { display: flex; } @@ -1959,9 +1959,6 @@ body.editor_enable.editor_has_snippets { top: auto; bottom: -$o-we-handles-offset-to-hide; transform: translate(-50%, 110%); - &.o_inside_parent { - transform: translate(-50%, -110%); - } } &.o_we_overlay_preview { diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml index 18fc9994568..7fa62c06d81 100644 --- a/addons/web_editor/views/snippets.xml +++ b/addons/web_editor/views/snippets.xml @@ -362,9 +362,6 @@
- - - Replace diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 9bcaf7addb6..111437292e3 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -2670,7 +2670,7 @@ options.registry.ContainerWidth = options.Class.extend({ * Allows snippets to be moved before the preceding element or after the following. */ options.registry.SnippetMove = options.Class.extend({ - displayHandles: true, + displayOverlayOptions: true, /** * @override