[IMP] web_editor, *: move the left panel to the right

*: website, mass_mailing

See parent commit for information about the scrollbar moved to the
'#wrapwrap' element, which was necessary to achieve this right panel
design. Note: in the future, having the scroll on the #wrapwrap may
not be necessary anymore as the edition might be done in an iframe.

Part of https://github.com/odoo/odoo/pull/57975
task-2344227

X-original-commit: 2abe8517063b2696cc89e9a453dcc3921fb3b8c7
This commit is contained in:
qsm-odoo
2020-09-22 10:09:36 +00:00
parent 9f048625e1
commit 48b12387d5
6 changed files with 18 additions and 17 deletions
@@ -175,10 +175,10 @@ body.o_force_mail_theme_choice {
}
body.editor_enable.o_basic_theme.o_in_iframe {
padding-left: 0px !important;
padding-right: 0px !important;
#web_editor-top-edit .note-popover .popover {
left: 0 !important;
right: 0 !important;
}
#oe_snippets {
@@ -201,7 +201,7 @@ body.editor_enable.o_basic_theme.o_in_iframe {
width: 100%;
@media (max-width: map-get($grid-breakpoints, 'lg')) {
width: auto;
margin-left: $o-we-sidebar-width;
margin-right: $o-we-sidebar-width;
}
}
@@ -1893,7 +1893,7 @@ var SnippetsMenu = Widget.extend({
stop: async function (ev, ui) {
$toInsert.removeClass('oe_snippet_body');
if (!dropped && ui.position.top > 3 && ui.position.left > self.el.getBoundingClientRect().right) {
if (!dropped && ui.position.top > 3 && ui.position.left + ui.helper.outerHeight() < self.el.getBoundingClientRect().left) {
var $el = $.nearest({x: ui.position.left, y: ui.position.top}, '.oe_drop_zone', {container: document.body}).first();
if ($el.length) {
scrollValue = $el.offset().top;
@@ -429,7 +429,7 @@ img::selection {
top: 40px;
right: 0;
bottom: 0;
left: $o-we-sidebar-width;
right: $o-we-sidebar-width;
width: auto;
height: auto;
@@ -4,10 +4,10 @@
// OVERRIDES FOR EDITOR WITH SNIPPETS
body.editor_enable.editor_has_snippets {
padding-left: $o-we-sidebar-width !important;
padding-right: $o-we-sidebar-width !important;
#web_editor-top-edit .note-popover .popover {
left: $o-we-sidebar-width !important;
right: $o-we-sidebar-width !important;
}
.modal:not(.o_technical_modal) {
@@ -33,7 +33,7 @@ body.editor_enable.editor_has_snippets {
// Mobile fix for mass mailing
@include media-breakpoint-down(md) {
body.editor_enable.editor_has_snippets {
padding-left: inherit !important;
padding-right: inherit !important;
#web_editor-top-edit {
position: initial !important;
@@ -42,7 +42,7 @@ body.editor_enable.editor_has_snippets {
left: initial !important;
.note-popover .popover {
left: 0 !important;
right: 0 !important;
}
}
}
@@ -198,14 +198,14 @@ body.editor_enable.editor_has_snippets {
#oe_snippets {
@include o-w-preserve-btn;
@include o-position-absolute(var(--o-we-toolbar-height), auto, 0, 0);
@include o-position-absolute(var(--o-we-toolbar-height), 0, 0, auto);
position: fixed;
z-index: $o-we-zindex;
display: flex;
flex-flow: column nowrap;
width: $o-we-sidebar-width;
border-right: $o-we-sidebar-border-width solid $o-we-sidebar-border-color;
border-left: $o-we-sidebar-border-width solid $o-we-sidebar-border-color;
background-color: $o-we-sidebar-bg;
color: $o-we-sidebar-color;
font-family: $o-we-font-family;
@@ -213,7 +213,7 @@ body.editor_enable.editor_has_snippets {
font-weight: 400;
transition: transform 400ms ease 0s;
transform: translateX(-100%);
transform: translateY(-100%);
&.o_loaded {
transform: none;
@@ -1742,5 +1742,5 @@ we-select.o_we_shape_menu {
// be over the content being reloaded (with a covering similar to the editor
// overlay covering).
position: fixed;
left: $o-we-sidebar-width;
right: $o-we-sidebar-width;
}
@@ -167,7 +167,7 @@ body.editor_enable.editor_has_snippets {
.editor_has_snippets {
.o_header_affixed {
left: $o-we-sidebar-width !important;
right: $o-we-sidebar-width !important;
top: var(--o-we-toolbar-height) !important;
}
}
@@ -176,14 +176,14 @@ body.editor_enable.editor_has_snippets {
@if o-website-value('header-template') == 'sidebar' {
#wrapwrap > header {
@if o-website-value('hamburger-position') != 'right' {
left: $o-we-sidebar-width;
right: $o-we-sidebar-width;
}
}
}
@if o-website-value('hamburger-type') == 'off-canvas' {
#top_menu_collapse {
&.collapsing, &.show {
left: $o-we-sidebar-width;
right: $o-we-sidebar-width;
}
}
}
@@ -21,9 +21,10 @@
// EDITOR TOP BAR AND POPOVER
#web_editor-top-edit .o_we_website_top_actions {
@include o-position-absolute($top: 0, $left: 0);
@include o-position-absolute($top: 0, $right: 0);
z-index: $zindex-popover + 5;
display: flex;
justify-content: flex-end;
width: $o-we-sidebar-width;
height: $o-we-sidebar-top-height;
background-color: $o-we-sidebar-tabs-bg;