From 952c9b4c73bc7e7cb0ac18e181b1fbbb64ea64e5 Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Thu, 6 Jul 2023 09:35:17 +0000
Subject: [PATCH] [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>
---
 .../src/client_actions/configurator/configurator.xml     | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/addons/website/static/src/client_actions/configurator/configurator.xml b/addons/website/static/src/client_actions/configurator/configurator.xml
index d74a2abafd5..03858d0a5d1 100644
--- a/addons/website/static/src/client_actions/configurator/configurator.xml
+++ b/addons/website/static/src/client_actions/configurator/configurator.xml
@@ -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>