[FIX] website: fix theme previews in right to left languages

Since Odoo 16.0, the configurator is translated in the user language.
Unfortunately, the theme previews are not yet translated in the user
language, so the user sees the theme previews in the default language
(English) but on a rtl page which causes alignment issues on the themes
previews. This commit fixes this issue by forcing the SVG containers
to be in ltr.

Steps to reproduce the issue fixed by this commit:
- Set the Arabic (Syria) language for an internal user
- With the internal user, create a new website
- Follow the configurator (in Arabic) until the theme selection step

=> Some text in the theme previews are not aligned correctly.

task-3398707

closes odoo/odoo#130325

X-original-commit: 1d0671a22582f423e55aad2907340700697c966e
Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>
Signed-off-by: Guillaume Dieleman (gdi) <gdi@odoo.com>
This commit is contained in:
Guillaume (gdi)
2023-08-02 05:11:03 +02:00
parent dfd38a6a5a
commit 952c9b4c73
@@ -198,7 +198,8 @@
<t t-if="state.getThemeName(1)">
<div class="theme_preview border rounded position-relative w-100 small o_configurator_show_fast">
<h6 class="theme_preview_tip text-center text-muted">Click to select</h6>
<div class="theme_svg_container rounded overflow-hidden" t-ref="ThemePreview2"/>
<!-- Force LTR to prevent SVG issues in RTL languages -->
<div class="theme_svg_container rounded overflow-hidden" t-ref="ThemePreview2" dir="ltr"/>
<div class="button_area" t-on-click="() => this.chooseTheme(state.getThemeName(1))"/>
</div>
</t>
@@ -207,7 +208,8 @@
<t t-if="state.getThemeName(0)">
<div class="theme_preview border rounded position-relative w-100 o_configurator_show">
<h6 class="theme_preview_tip text-center text-muted">Click to select</h6>
<div class="theme_svg_container rounded overflow-hidden" t-ref="ThemePreview1"/>
<!-- Force LTR to prevent SVG issues in RTL languages -->
<div class="theme_svg_container rounded overflow-hidden" t-ref="ThemePreview1" dir="ltr"/>
<div class="button_area" t-on-click="() => this.chooseTheme(state.getThemeName(0))"/>
</div>
</t>
@@ -216,7 +218,8 @@
<t t-if="state.getThemeName(2)">
<div class="theme_preview border rounded position-relative w-100 small o_configurator_show_fast">
<h6 class="theme_preview_tip text-center text-muted">Click to select</h6>
<div class="theme_svg_container rounded overflow-hidden" t-ref="ThemePreview3"/>
<!-- Force LTR to prevent SVG issues in RTL languages -->
<div class="theme_svg_container rounded overflow-hidden" t-ref="ThemePreview3" dir="ltr"/>
<div class="button_area" t-on-click="() => this.chooseTheme(state.getThemeName(2))"/>
</div>
</t>