[IMP] base, *: add a field image flag on the lang model

*: website

Add a field image flag on the lang model because when a language has
no country (like the arabic) we cannot use the country flag as a lang
flag. By default we use this new field and as fallback we use the
country image. We also add an arabic flag image in the website data.

Part of https://github.com/odoo/odoo/pull/55300
task-2203383

closes odoo/odoo#55300

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>

6 files changed, 20 insertions, 4 deletions

diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 8140943c9c9..00619cefd25 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -873,6 +873,7 @@ header {
     height: 1.5em;
     margin-right: 0.2em;
     border-radius: $rounded-pill;
+    vertical-align: top;
 }
 
 // Figure with special style
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 3a25ef492df..1ef6cadb956 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -593,7 +593,7 @@
 
 <!-- Language selector templates -->
 <template id="lang_flag" name="Language Flag">
-    <img class="o_lang_flag align-top" t-att-src="'/web/image/res.country/' + str(env.ref('base.' + lang_code.split('_')[1].lower()).id) + '/image'"/>
+    <img class="o_lang_flag" t-attf-src="#{flag_image_src}?height=25"/>
 </template>
 
 <template id="language_selector_add_language">
@@ -622,12 +622,12 @@
     <!-- Add the 'flags' possibility -->
     <xpath expr="//button[hasclass('dropdown-toggle')]/span" position="before">
         <t t-if="flags" t-call="website.lang_flag">
-            <t t-set="lang_code" t-value="active_lang[0]"/>
+            <t t-set="flag_image_src" t-value="active_lang[4]"/>
         </t>
     </xpath>
     <xpath expr="//*[hasclass('js_change_lang')]/span" position="before">
         <t t-if="flags" t-call="website.lang_flag">
-            <t t-set="lang_code" t-value="lg[0]"/>
+            <t t-set="flag_image_src" t-value="lg[4]"/>
         </t>
     </xpath>
 </template>
diff --git a/odoo/addons/base/data/res_lang_data.xml b/odoo/addons/base/data/res_lang_data.xml
index 309b5e2642c..8ed3dc51be3 100644
--- a/odoo/addons/base/data/res_lang_data.xml
+++ b/odoo/addons/base/data/res_lang_data.xml
@@ -7,5 +7,8 @@
         <record id="base.lang_my" model="res.lang">
             <field name="url_code">mya</field>
         </record>
+        <record id="base.lang_ar" model="res.lang">
+            <field name="flag_image" type="base64" file="base/static/img/lang_flags/lang_ar.png"/>
+        </record>
     </data>
 </odoo>
diff --git a/odoo/addons/base/models/res_lang.py b/odoo/addons/base/models/res_lang.py
index f3f54eb3e96..f467b901b0b 100644
--- a/odoo/addons/base/models/res_lang.py
+++ b/odoo/addons/base/models/res_lang.py
@@ -48,6 +48,17 @@ class Lang(models.Model):
     decimal_point = fields.Char(string='Decimal Separator', required=True, default='.', trim=False)
     thousands_sep = fields.Char(string='Thousands Separator', default=',', trim=False)
 
+    @api.depends('code', 'flag_image')
+    def _compute_field_flag_image_url(self):
+        for lang in self:
+            if lang.flag_image:
+                lang.flag_image_url = f"/web/image/res.lang/{lang.id}/flag_image"
+            else:
+                lang.flag_image_url = f"/base/static/img/country_flags/{lang.code.lower().rsplit('_')[-1]}.png"
+
+    flag_image = fields.Image("Image")
+    flag_image_url = fields.Char(compute=_compute_field_flag_image_url)
+
     _sql_constraints = [
         ('name_uniq', 'unique(name)', 'The name of the language must be unique !'),
         ('code_uniq', 'unique(code)', 'The code of the language must be unique !'),
@@ -216,7 +227,7 @@ class Lang(models.Model):
         return langs.get_sorted()
 
     def get_sorted(self):
-        return sorted([(lang.code, lang.url_code, lang.name, lang.active) for lang in self], key=itemgetter(2))
+        return sorted([(lang.code, lang.url_code, lang.name, lang.active, lang.flag_image_url) for lang in self], key=itemgetter(2))
 
     @tools.ormcache('self.id')
     def _get_cached_values(self):
diff --git a/odoo/addons/base/static/img/lang_flags/lang_ar.png b/odoo/addons/base/static/img/lang_flags/lang_ar.png
new file mode 100644
index 00000000000..7f2a13f0875
--- /dev/null
+++ b/odoo/addons/base/static/img/lang_flags/lang_ar.png
diff --git a/odoo/addons/base/views/res_lang_views.xml b/odoo/addons/base/views/res_lang_views.xml
index 6a1d4232b37..52edb9fba6e 100644
--- a/odoo/addons/base/views/res_lang_views.xml
+++ b/odoo/addons/base/views/res_lang_views.xml
@@ -33,6 +33,7 @@
                                 class="oe_stat_button"
                                 icon="fa-refresh" />
                         </div>
+                        <field name="flag_image" widget="image" class="oe_avatar"/>
                         <div class="oe_title">
                             <label for="name" class="oe_edit_only"/>
                             <h1><field name="name"/></h1>