From 073e63b82416cf210d98ecf297985cb7388fadcb Mon Sep 17 00:00:00 2001 From: Younn Olivier Date: Mon, 25 Oct 2021 16:04:27 +0000 Subject: [PATCH] [FIX] website: improve mega menus editability This commit adds the possibility to modify some background colors of the mega menus so that the templates are fully editable. Some of these templates have a column with an extended background, using the :before css pseudo element. As this is not a DOM element, it cannot be changed from javascript. It was decided that using shapes would not produce the same effect as the designer intended, and that it would be too confusing for the user to be provided with an option allowing to extend the background of a column. Therefore, these specific s_mega_menu_gray_area elements must have their background hardcoded. task-2668908 X-original-commit: f01c74118ad4c772fb18866956ab9fb214f781fa Part-of: odoo/odoo#81559 Co-authored-by: qsm-odoo --- addons/website/static/src/scss/website.scss | 21 +++++++++++++++++++ .../s_mega_menu_little_icons/000.scss | 16 +------------- .../snippets/s_mega_menu_menus_logos/000.scss | 16 +------------- .../snippets/s_mega_menu_odoo_menu/000.scss | 15 +++++++++++-- .../snippets/s_mega_menu_thumbnails/000.scss | 12 +++++++++-- addons/website/views/snippets/snippets.xml | 4 ++-- 6 files changed, 48 insertions(+), 36 deletions(-) diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index e04949fb3cf..400c3ebc400 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -1201,6 +1201,7 @@ header { padding-right: $grid-gutter-width / 2; } } + .o_mega_menu_container_size { $-header-template: o-website-value('header-template'); @if not index(('sidebar', 'hamburger', 'magazine'), $-header-template) { @@ -1220,6 +1221,26 @@ header { @include make-container-max-widths($-mm-max-widths); } +// The design of some of the new mega menu templates required a column with +// an overlay that would overflow until the end of the container. For +// technical reasons, this overlay has to be hardcoded here. +%s_mega_menu_gray_area { + z-index: 1; + + &:before { + content: ''; + display: block; + width: 100vw; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: -1; + pointer-events: none; + background: rgba(0, 0, 0, .05); + } +} + #wrapwrap.o_header_overlay { > header:not(.o_header_affixed):not(.o_top_menu_collapse_shown) { @include o-position-absolute(0, 0, auto, 0); diff --git a/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss b/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss index 612fb0ef77e..c676723cb2c 100644 --- a/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss +++ b/addons/website/static/src/snippets/s_mega_menu_little_icons/000.scss @@ -7,20 +7,6 @@ } .s_mega_menu_gray_area:last-child { - // Allow to show the grey background used in the pseudo-element - z-index: 1; - - &:before { - content: ''; - display: block; - width: 100vw; - height: 100%; - position: absolute; - left: 0; - top: 0; - z-index: -1; - pointer-events: none; - background: rgba(0, 0, 0, .05); - } + @extend %s_mega_menu_gray_area; } } diff --git a/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss b/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss index 290a17b4221..04be8c258ee 100644 --- a/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss +++ b/addons/website/static/src/snippets/s_mega_menu_menus_logos/000.scss @@ -1,21 +1,7 @@ .s_mega_menu_menus_logos:not([data-vcss]) { .s_mega_menu_gray_area:last-child { - // Allow to show the grey background used in the pseudo-element - z-index: 1; - - &:before { - content: ''; - display: block; - width: 100vw; - height: 100%; - position: absolute; - left: 0; - top: 0; - z-index: -1; - pointer-events: none; - background: rgba(0, 0, 0, .05); - } + @extend %s_mega_menu_gray_area; } .s_mega_menu_menus_logos_wrapper { diff --git a/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss b/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss index c1e66b14140..8b3f9a45df4 100644 --- a/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss +++ b/addons/website/static/src/snippets/s_mega_menu_odoo_menu/000.scss @@ -2,7 +2,18 @@ .s_mega_menu_odoo_menu:not([data-vcss]) { .s_mega_menu_odoo_menu_footer { // Apply color transparency to match with the preset used - border-color: rgba(0, 0, 0, .05) !important; - background: rgba(0, 0, 0, .05) !important; + border-color: rgba(0, 0, 0, .05); + + .row > div:not(.o_cc) { + // TODO this should be replaced by proper structure and color + // classes + @extend %s_mega_menu_gray_area; + + &::before { + @include o-position-absolute(0, 0, 0, 0); + width: auto; + height: auto; + } + } } } diff --git a/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss b/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss index 23861564cc6..232e3591d0e 100644 --- a/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss +++ b/addons/website/static/src/snippets/s_mega_menu_thumbnails/000.scss @@ -1,5 +1,13 @@ .s_mega_menu_thumbnails:not([data-vcss]) { - .s_mega_menu_thumbnails_footer { - background: rgba(0, 0, 0, .05); + .s_mega_menu_thumbnails_footer:not(.o_cc) { + // TODO this should be replaced by proper structure and color + // classes + @extend %s_mega_menu_gray_area; + + &::before { + @include o-position-absolute(0, 0, 0, 0); + width: auto; + height: auto; + } } } diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index d4c142fe036..f7b8738bd2d 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -463,8 +463,8 @@ - - + +