pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: keep showing dropzone message even if content inside

Browse Source 
There is a very nice and clear system that helps the user to figure
what are the available area to drop content inside, and what will they
do: are they shared between products, or product specific etc.

The issue is that once you have dropped a snippet inside, that helper
message is not shown anymore, but it's still not obvious which area is
used for what, actually you have no clue which one is which, especially
if you come back on the page later: at best remember there were 2
separate zones but you don't especially remember which one is which.

Keeping the message helps in that regard without any negative impact.

Note that making the message appear when there are already a snippet
will work out of the box in the sense that the message will be
duplicated and shown twice: one at the very bottom of the area and one
at the very top.

Note that there is 5 cases to consider here:
- Empty website.page in edit mode (no drag & drop)
- Empty website.page with drag & drop
- Non empty website.page with drag & drop
- Empty product description with drag & drop
- Non empty product description with drag & drop

This commit also takes care of fixing the text color issue where the
"editor message" could not be read because of text color too close to
bg color.

task-3160416

closes odoo/odoo#117705

X-original-commit: 9236628b0d037a0a9444d13a30d813f4a8413377
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
This commit is contained in:
Romain Derie
2023-04-04 19:11:53 +02:00
parent b7dd007396
commit ef8dc0a167
3 changed files with 41 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js
+1
View File
@@ -345,6 +345,7 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
_addEditorMessages() {
const $wrap = this.$editable.find('.oe_structure.oe_empty, [data-oe-type="html"]');
this.$editorMessageElement = $wrap.not('[data-editor-message]')
.attr('data-editor-message-default', true)
.attr('data-editor-message', this.env._t('DRAG BUILDING BLOCKS HERE'));
$wrap.filter(':empty').attr('contenteditable', false);
}
addons/website/static/src/js/editor/wysiwyg.js
+1
View File
@@ -330,6 +330,7 @@ snippetsEditor.SnippetsMenu.include({
_insertDropzone: function ($hook) {
var $hookParent = $hook.parent();
var $dropzone = this._super(...arguments);
$dropzone.attr('data-editor-message-default', $hookParent.attr('data-editor-message-default'));
$dropzone.attr('data-editor-message', $hookParent.attr('data-editor-message'));
$dropzone.attr('data-editor-sub-message', $hookParent.attr('data-editor-sub-message'));
return $dropzone;
addons/website/static/src/scss/website.edit_mode.scss
+39 -18
View File
@@ -1,17 +1,19 @@
$-editor-messages-margin-x: 2%;
%o-editor-messages {
width: 100% - $-editor-messages-margin-x * 2; // Need to be forced here to avoid flickering
margin: 20px $-editor-messages-margin-x;
border: 2px dashed #999999;
padding: 12px 0px;
text-align: center;
color: #999999;
color: white;
&:before {
content: attr(data-editor-message);
display: block;
font-size: 20px;
line-height: 50px; // Useful for the "wizz" animation on snippet click to be more visible
}
// Show the default editor message only for "empty" elements
&:not(:empty), &:not(:only-child) {
&[data-editor-message-default]:before {
content: none;
}
}
&:after {
content: attr(data-editor-sub-message);
@@ -27,13 +29,6 @@ $-editor-messages-margin-x: 2%;
}
}
.oe_structure_not_nearest .oe_drop_zone {
&:before {
opacity: 0.5;
line-height: 35px !important;
}
}
.o_editable {
&:not(:empty), &[data-oe-type] {
&:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):not(.o_editable_no_shadow):not([data-oe-type="image"]):hover,
@@ -80,16 +75,42 @@ $-editor-messages-margin-x: 2%;
pointer-events: none;
}
// This style block is about the "editor message" which highlights the areas
// where the user can drag & drop snippets.
&.oe_structure.oe_empty, &[data-oe-type=html], .oe_structure.oe_empty {
&#wrap:empty, &#wrap > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
@extend %o-editor-messages;
padding: 112px 0px;
}
> .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
// Base case (website.page (#wrap), t-field (product description), ..)
> .oe_drop_zone.oe_insert:not(.oe_vertical) {
@extend %o-editor-messages;
height: auto;
color: $o-brand-odoo;
text-shadow: -1px -1px 0 $o-brand-odoo, 1px -1px 0 $o-brand-odoo, -1px 1px 0 $o-brand-odoo, 1px 1px 0 $o-brand-odoo;
// Empty editable element during drag & drop
&:only-child {
margin: 20px $-editor-messages-margin-x;
width: 100% - $-editor-messages-margin-x * 2;
padding: 12px 0px;
}
&:not(:only-child)::before {
font-size: 16px;
}
}
// Exception 1: empty wrap NOT during drag & drop
&#wrap:empty {
@extend %o-editor-messages;
padding: 112px 0px;
margin: 20px $-editor-messages-margin-x;
color: #999999;
}
// Exception 2: empty wrap during drag & drop (override of base case)
&#wrap > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
padding: 112px 0px;
color: #999999;
text-shadow: none;
}
> p:empty:only-child {
color: #aaa;
}