[FIX] theme_*: remove flip classes from theme snippets

Initially, the background shapes were flipped using only CSS. This was
done by adding the classes 'o_we_flip_x' or 'o_we_flip_y' to a shape to
flip it. However, this system caused issues as it sometimes left a gap
between two connected shapes. As a result, the system was changed with
this commit [1], and the classes 'o_we_flip_x' and 'o_we_flip_y' were no
longer used from this point on.

Despite this change, in our themes, we continued to use these obsolete
classes to define whether a shape should be flipped or not. This commit
addresses this by removing all instances of 'o_we_flip_x' and
'o_we_flip_y' classes that were still being used in theme snippets and
replacing them with the new system, where flipping is defined as a
parameter in the background image URL.

Note that in stable versions where we cannot modify theme snippets, we
have added code to automatically adapt the shapes to the new system
(in this commit [2]).

[1]: https://github.com/odoo/odoo/commit/42b3ad10e0b32b7fc72f801e2c67d6baf938c566
[2]: https://github.com/odoo/odoo/commit/256ff539afe331544ccb58848f1ecd0eecbe4daa

task-2824607

closes odoo/design-themes#639

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Benjamin Vray
2023-03-17 15:31:49 +00:00
parent 8ee2b3ac77
commit 44b3badbca
47 changed files with 60 additions and 60 deletions
+1 -1
View File
@@ -10,7 +10,7 @@
<!-- Filter & Shape -->
<xpath expr="//div[hasclass('container')]" position="before">
<div class="o_we_bg_filter bg-black-75"/>
<div class="o_we_shape o_web_editor_Floats_08 o_we_flip_x o_we_flip_y"/>
<div class="o_we_shape o_web_editor_Floats_08" style="background-image: url('/web_editor/shape/web_editor/Floats/08.svg?c1=o-color-1&amp;c2=o-color-2&amp;c3=o-color-3&amp;c5=o-color-1&amp;flip=xy'); background-position: 100% 100%;"/>
</xpath>
<!-- Jumbotron -->
<xpath expr="//div[hasclass('jumbotron')]" position="attributes">
+2 -2
View File
@@ -17,7 +17,7 @@
</xpath>
<!-- Slide #1 - Shape -->
<xpath expr="//div[hasclass('carousel-item')]//div[hasclass('container')]" position="before">
<div class="o_we_shape o_web_editor_Wavy_25 o_we_flip_y"/>
<div class="o_we_shape o_web_editor_Wavy_25" style="background-image: url('/web_editor/shape/web_editor/Wavy/25.svg?c1=o-color-5&amp;c2=o-color-5&amp;flip=y'); background-position: 50% 100%;"/>
</xpath>
<!-- Slide #2 -->
<xpath expr="//div[hasclass('carousel-item')][2]" position="attributes">
@@ -51,7 +51,7 @@
</xpath>
<!-- Slide #3 - Shape -->
<xpath expr="//div[hasclass('carousel-item')][3]//div[hasclass('container')]" position="before">
<div class="o_we_shape o_web_editor_Wavy_25 o_we_flip_y o_third_extra_shape_mapping"/>
<div class="o_we_shape o_web_editor_Wavy_25 o_third_extra_shape_mapping" style="background-image: url('/web_editor/shape/web_editor/Wavy/25.svg?c1=o-color-2&amp;c2=o-color-2&amp;flip=y'); background-position: 50% 100%;"/>
</xpath>
</template>
+1 -1
View File
@@ -9,7 +9,7 @@
</xpath>
<!-- Shape -->
<xpath expr="//div[hasclass('container')]" position="before">
<div class="o_we_shape o_web_editor_Blobs_01_001 o_we_flip_y"/>
<div class="o_we_shape o_web_editor_Blobs_01_001" style="background-image: url('/web_editor/shape/web_editor/Blobs/01_001.svg?c2=o-color-3&amp;flip=y'); background-position: 50% 100%;"/>
</xpath>
<!-- Row #1 -->