[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>

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

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>

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>

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):

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>