[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 f3ccc91d42
Also, add border around selected image so the used knows what image is selected
task-2502679
Closes #69340
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Romain Derie
@@ -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;
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -362,9 +362,6 @@
|
||||
<!-- Replace a media -->
|
||||
<!-- TODO probably review this system once the new editor is merged to not duplicate the selector, etc -->
|
||||
<div data-js="ReplaceMedia" data-selector="img, .media_iframe_video, span.fa, i.fa">
|
||||
<!-- Overlay button -->
|
||||
<we-button data-name="replace_media_overlay_opt" title="Replace" class="fa fa-refresh" data-replace-media="true" data-no-preview="true"/>
|
||||
<!-- Panel button-->
|
||||
<we-row string="Media">
|
||||
<we-button class="o_we_bg_brand_primary" data-replace-media="true" data-no-preview="true">Replace</we-button>
|
||||
</we-row>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user