From 94b59b1972e1a18e18dfcd6c2ded495391380b9a Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 6 Jul 2020 15:22:12 +0000 Subject: [PATCH] [FIX] web, web_editor, *: review chess-like bg for transparency preview *: website The style to achieve the chess-like bg result was duplicated at many places. The 'web' app was also actually using an image from the 'web_editor' app (we can live with it in stable as web_editor always comes with web in auto_install but this was still a mistake). closes odoo/odoo#54154 Also: fix some layout issue in the colorpicker widget. Signed-off-by: Quentin Smetz (qsm) --- .../static/src/img/transparent.png | Bin addons/web/static/src/scss/colorpicker.scss | 24 ++++++----------- addons/web/static/src/scss/utils.scss | 25 ++++++++++++++++++ addons/web/static/src/xml/colorpicker.xml | 4 +-- .../static/src/scss/web_editor.variables.scss | 21 --------------- .../web_editor/static/src/scss/wysiwyg.scss | 9 ++++--- .../static/src/scss/wysiwyg_snippets.scss | 9 +++---- addons/web_editor/static/src/xml/snippets.xml | 2 +- addons/web_editor/static/src/xml/wysiwyg.xml | 4 +-- .../static/tests/field_html_tests.js | 2 +- addons/web_editor/static/tests/test_utils.js | 4 +-- .../static/src/js/editor/snippets.options.js | 1 - 12 files changed, 50 insertions(+), 55 deletions(-) rename addons/{web_editor => web}/static/src/img/transparent.png (100%) diff --git a/addons/web_editor/static/src/img/transparent.png b/addons/web/static/src/img/transparent.png similarity index 100% rename from addons/web_editor/static/src/img/transparent.png rename to addons/web/static/src/img/transparent.png diff --git a/addons/web/static/src/scss/colorpicker.scss b/addons/web/static/src/scss/colorpicker.scss index c53b31198d4..ada82fe967b 100644 --- a/addons/web/static/src/scss/colorpicker.scss +++ b/addons/web/static/src/scss/colorpicker.scss @@ -33,6 +33,7 @@ } } .o_opacity_slider { + @extend %o-preview-alpha-background; position: relative; margin-left: 5%; width: 4%; @@ -46,13 +47,6 @@ border: 1px solid white; box-shadow: 0px 0px 2px 1px gray('600'); } - - &::before { - content: ""; - @include o-position-absolute(0, 0, 0, 0); - z-index: -1; - background-image: url('/web_editor/static/src/img/transparent.png'); - } } .o_color_picker_inputs { @@ -60,25 +54,23 @@ font-size: 12px; display: flex; - .o_color_preview_parent { + .o_color_preview { + @extend %o-preview-alpha-background; height: 20px; width: 30px; - background-image: url('/web_editor/static/src/img/transparent.png'); - .o_color_preview { - height: inherit; - display: block; - } + } + > * { + display: flex; + align-items: baseline; } .o_hex_div { width: 38%; - display: flex; - border: 1px solid; margin-right: 2%; + border: 1px solid; } .o_rgba_div { width: 60%; border: 1px solid; - display: flex; } input { width: 100%; diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss index 89c38290da3..a3b41471777 100644 --- a/addons/web/static/src/scss/utils.scss +++ b/addons/web/static/src/scss/utils.scss @@ -98,6 +98,31 @@ @return if($luma > $threshold, $-dark, $-light); } +// Extend placeholder which adds a chess-like background below the color and +// image of an element to preview the transparency of that color and image. +// This is done thanks to both ::before and ::after elements so they must both +// be available. +%o-preview-alpha-background { + position: relative; + z-index: 0; + + &::before { + content: ""; + @include o-position-absolute(0, 0, 0, 0); + z-index: -1; + background-image: url('/web/static/src/img/transparent.png'); + background-size: 10px auto; + border-radius: inherit; + } + &::after { + content: ""; + @include o-position-absolute(0, 0, 0, 0); + z-index: -1; + background: inherit; // Inherit all background properties + border-radius: inherit; + } +} + // ------------------------------------------------------------------ // Padding // ------------------------------------------------------------------ diff --git a/addons/web/static/src/xml/colorpicker.xml b/addons/web/static/src/xml/colorpicker.xml index 7fb81da8711..a3f45348990 100644 --- a/addons/web/static/src/xml/colorpicker.xml +++ b/addons/web/static/src/xml/colorpicker.xml @@ -13,9 +13,7 @@
-
- -
+
hex
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 9a980e9a392..c6301e6da2d 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -76,27 +76,6 @@ $o-we-toolbar-height: 32px; box-shadow: 0 0 15px 2px #000; } -// Mixins for buttons with alpha bg-color -@mixin o-alpha-button-preview { - position: relative; - z-index: 1; - - // Place an overlay that inherit the button's bg-color. - &::before { - content: ""; - @include o-position-absolute(0, 0, 0, 0); - background-color: inherit; - } - - &::after { - content: ""; - @include o-position-absolute(0, 0, 0, 0); - z-index: -1; - background-image: url('/web_editor/static/src/img/transparent.png'); - background-size: 10px auto; - } -} - // ============ Preservation mixins =============== // Used to preserve web_editor and website UI from themes customizations diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss index d457b4cf69a..08dc16f8c7b 100644 --- a/addons/web_editor/static/src/scss/wysiwyg.scss +++ b/addons/web_editor/static/src/scss/wysiwyg.scss @@ -221,9 +221,12 @@ body .modal { min-height: 300px; } - .o_we_images > .o_existing_attachment_cell img { - max-width: 100%; - background-image: url("/web_editor/static/src/img/transparent.png"); + .o_we_images > .o_existing_attachment_cell .o_we_media_dialog_img_wrapper { + @extend %o-preview-alpha-background; + + &, > img { + max-width: 100%; + } } .o_existing_attachment_cell { diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index e01d65f9c4e..da7caa44c5f 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -486,7 +486,7 @@ body.editor_enable.editor_has_snippets { flex: 0 0 auto; .o_we_color_preview { - @include o-alpha-button-preview; + @extend %o-preview-alpha-background; display: block; flex: 0 0 auto; width: 1em; @@ -676,9 +676,8 @@ body.editor_enable.editor_has_snippets { } } -.o_we_cc_preview_container { - background-color: white !important; - background-image: url("/web_editor/static/src/img/transparent.png") !important; +.o_we_cc_preview_wrapper { + @extend %o-preview-alpha-background; font-family: sans-serif !important; font-size: 16px !important; } @@ -790,7 +789,7 @@ body.editor_enable.editor_has_snippets { &[data-name="transparent_grayscale"], &[data-name="theme"], &[data-name="reset"] { .o_we_color_btn { - @include o-alpha-button-preview; + @extend %o-preview-alpha-background; &::before, &::after { box-shadow: inherit; diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index aff99211e31..226d4403eea 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -62,7 +62,7 @@
- diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml index 1fe90b044d6..714d0913e5d 100644 --- a/addons/web_editor/static/src/xml/wysiwyg.xml +++ b/addons/web_editor/static/src/xml/wysiwyg.xml @@ -306,9 +306,9 @@ -
+
-
+
diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js index 59d2ce65718..4cd74318d77 100644 --- a/addons/web_editor/static/tests/field_html_tests.js +++ b/addons/web_editor/static/tests/field_html_tests.js @@ -284,7 +284,7 @@ QUnit.module('web_editor', {}, function () { await testUtils.dom.click($('.modal #editor-media-image .o_existing_attachment_cell:first').removeClass('d-none')); var $editable = form.$('.oe_form_field[name="body"] .note-editable'); - assert.ok($editable.find('img')[0].dataset.src.includes('/web_editor/static/src/img/transparent.png'), + assert.ok($editable.find('img')[0].dataset.src.includes('/web/static/src/img/transparent.png'), "should have the image in the dom"); testUtils.mock.unpatch(MediaDialog); diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js index 9cd3249f953..d5b6fc2a7be 100644 --- a/addons/web_editor/static/tests/test_utils.js +++ b/addons/web_editor/static/tests/test_utils.js @@ -271,13 +271,13 @@ function wysiwygData(data) { description: '', mimetype: 'image/png', checksum: false, - url: '/web_editor/static/src/img/transparent.png', + url: '/web/static/src/img/transparent.png', type: 'url', res_id: 0, res_model: false, public: true, access_token: false, - image_src: '/web_editor/static/src/img/transparent.png', + image_src: '/web/static/src/img/transparent.png', image_width: 256, image_height: 256, }], diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index b29e352f2eb..230f74f4884 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -860,7 +860,6 @@ options.registry.Theme = options.Class.extend({ const togglerEl = document.createElement('we-toggler'); togglerEl.classList.add('pt-0', 'pb-0', 'pl-0'); const divEl = document.createElement('div'); - divEl.classList.add('o_we_cc_preview_container'); const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0]; ccPreviewEl.classList.add('p-1', 'text-center', `o_cc${i}`); divEl.appendChild(ccPreviewEl);