[IMP] website, web, portal: new options language selector in footer

Add an option to display the language selection inline or with a
dropdown. Add an option to choose if language labels are flags, text
or both.

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

Co-authored-by: qsm-odoo <qsm@odoo.com>

addons/portal/views/portal_templates.xml

@@ -40,32 +40,35 @@
                 </div>
             </div>
         </xpath>
+    </template>
+
+    <!-- Added by another template so that it can be disabled if needed -->
+    <template id="footer_language_selector" inherit_id="portal.frontend_layout" name="Footer Language Selector">
         <xpath expr="//*[hasclass('o_footer_copyright_name')]" position="after">
-            <t t-call="portal.language_selector"/>
+            <t id="language_selector_call" t-call="portal.language_selector"/>
         </xpath>
     </template>
 
     <template id="language_selector" name="Language Selector">
+        <t t-set="active_lang" t-value="list(filter(lambda lg : lg[0] == lang, languages))[0]"/>
         <t t-set="language_selector_visible" t-value="len(languages) &gt; 1"/>
-        <ul class="js_language_selector mb0 list-inline" t-if="language_selector_visible">
-            <li class="list-inline-item">
-                <div class="dropup">
-                    <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                        <span t-esc="list(filter(lambda lg : lg[0] == lang, languages))[0][2].split('/').pop()"/>
-                        <span class="caret ml4"/>
-                    </button>
-                    <div class="dropdown-menu" role="menu">
-                        <t t-foreach="languages" t-as="lg">
-                            <a t-att-href="url_for(request.httprequest.path + '?' + keep_query(), lang_code=lg[0])"
-                            class="dropdown-item js_change_lang"
-                            t-att-data-url_code="lg[1]">
-                                <t t-esc="lg[2].split('/').pop()"/>
-                            </a>
-                        </t>
-                    </div>
-                </div>
-            </li>
-        </ul>
+        <div class="js_language_selector dropup" t-if="language_selector_visible">
+            <button class="btn btn-sm btn-outline-secondary border-0 dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                <span t-if="not no_text"
+                        class="align-middle"
+                        t-esc="active_lang[2].split('/').pop()"/>
+            </button>
+            <div class="dropdown-menu" role="menu">
+                <t t-foreach="languages" t-as="lg">
+                    <a t-att-href="url_for(request.httprequest.path + '?' + keep_query(), lang_code=lg[0])"
+                    class="dropdown-item js_change_lang"
+                    t-att-data-url_code="lg[1]">
+                        <span t-if="not no_text"
+                              t-esc="lg[2].split('/').pop()"/>
+                    </a>
+                </t>
+            </div>
+        </div>
     </template>
 
     <template id="portal_breadcrumbs" name="Portal Breadcrumbs">

addons/web/views/webclient_templates.xml

@@ -502,7 +502,7 @@
                             <div class="row">
                                 <div class="col-sm text-center text-sm-left text-muted">
                                     <t t-call="web.debug_icon"/>
-                                    <span class="o_footer_copyright_name">Copyright &amp;copy; Company name</span>
+                                    <span class="o_footer_copyright_name mr-2">Copyright &amp;copy; Company name</span>
                                 </div>
                                 <div class="col-sm text-center text-sm-right">
                                     <t t-call="web.brand_promotion"/>

addons/website/static/src/js/content/website_root.js

@@ -42,7 +42,7 @@ var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
         KeyboardNavigationMixin.start.call(this);
         // Compatibility lang change ?
         if (!this.$('.js_change_lang').length) {
-            var $links = this.$('ul.js_language_selector li a:not([data-oe-id])');
+            var $links = this.$('.js_language_selector a:not([data-oe-id])');
             var m = $(_.min($links, function (l) {
                 return $(l).attr('href').length;
             })).attr('href');
@@ -216,7 +216,7 @@ var WebsiteRoot = publicRootData.PublicRoot.extend(KeyboardNavigationMixin, {
     _onLangChangeClick: function (ev) {
         ev.preventDefault();
 
-        var $target = $(ev.target);
+        var $target = $(ev.currentTarget);
         // retrieve the hash before the redirect
         var redirect = {
             lang: $target.data('url_code'),

addons/website/static/src/scss/website.edit_mode.scss

@@ -133,8 +133,8 @@ table.editorbar-panel {
     }
 }
 
-.editor_enable .js_language_selector {
-    display: none;
+.editor_enable .o_add_language {
+    display: none !important;
 }
 
 // Facebook Page

addons/website/static/src/scss/website.scss

@@ -864,6 +864,17 @@ header {
     }
 }
 
+// Language selector
+.js_language_selector .dropdown-menu {
+    min-width: 0;
+}
+.o_lang_flag {
+    width: 1.5em;
+    height: 1.5em;
+    margin-right: 0.2em;
+    border-radius: $rounded-pill;
+}
+
 // Figure with special style
 .o_figure_relative_layout {
     position: relative;

addons/website/views/snippets/snippets.xml

@@ -675,9 +675,15 @@
                        data-customize-website-variable="'slideout_shadow'"/>
         </we-select>
         <we-checkbox string="Copyright"
+                data-name="footer_copyright_opt"
                 data-customize-website-views="website.footer_no_copyright|"
                 data-no-preview="true"
                 data-reload="/"/>
+        <we-checkbox string="Language Selector"
+                data-dependencies="!footer_copyright_opt"
+                data-customize-website-views="website.footer_no_copyright|portal.footer_language_selector"
+                data-no-preview="true"
+                data-reload="/"/>
     </div>
 
     <div data-js="HideFooter"
@@ -696,6 +702,17 @@
         <we-colorpicker string="Colors"
                         data-customize-website-color="" data-color="copyright"
                         data-with-combinations="true"/>
+        <we-select string="Language Selector" data-reload="/">
+            <we-button data-name="language_selector_none_opt"
+                       data-customize-website-views="">None</we-button>
+            <we-button data-customize-website-views="portal.footer_language_selector">Dropdown</we-button>
+            <we-button data-customize-website-views="portal.footer_language_selector, website.footer_language_selector_inline">Inline</we-button>
+        </we-select>
+        <we-select string="⌙ Label" data-dependencies="!language_selector_none_opt" data-reload="/">
+            <we-button data-customize-website-views="">Text</we-button>
+            <we-button data-customize-website-views="website.footer_language_selector_flag, website.footer_language_selector_no_text">Flag</we-button>
+            <we-button data-customize-website-views="website.footer_language_selector_flag">Flag and Text</we-button>
+        </we-select>
     </div>
 
     <!-- Anchor Name -->

addons/website/views/website_templates.xml

@@ -591,6 +591,21 @@
     </xpath>
 </template>
 
+<!-- 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'"/>
+</template>
+
+<template id="language_selector_add_language">
+    <a t-attf-class="o_add_language d-none #{dropdown and 'd-sm-block dropdown-item' or 'd-sm-inline-block list-inline-item'}"
+       groups="website.group_website_publisher"
+       t-attf-href="/web#action=base.action_view_base_language_install&amp;website_id=#{website.id if website else ''}&amp;url_return=#{url_return}">
+        <t t-set="url_return" t-value="quote_plus(url_for('', '[lang]') + '?' + keep_query())"/>
+        <i class="fa fa-plus-circle"/>
+        Add a language...
+    </a>
+</template>
+
 <template id="language_selector" inherit_id="portal.language_selector">
     <!-- Always show the language selector on editable websites -->
     <xpath expr="//t[@t-set='language_selector_visible']" position="after">
@@ -598,14 +613,66 @@
     </xpath>
 
     <!-- Add the button to add a language -->
-    <xpath expr="//ul/li" position="after">
-        <li groups="website.group_website_publisher" class="list-inline-item">
-            <t t-set="url_return" t-value="quote_plus(url_for('', '[lang]') + '?' + keep_query())"/>
-            <a class="d-none d-sm-block" t-attf-href="/web#action=base.action_view_base_language_install&amp;website_id=#{website.id if website else ''}&amp;url_return=#{url_return}">
-                <i class="fa fa-plus-circle"/>
-                Add a language...
-            </a>
-        </li>
+    <xpath expr="//t[@t-foreach='languages']" position="after">
+        <t t-call="website.language_selector_add_language">
+            <t t-set="dropdown" t-value="True"/>
+        </t>
+    </xpath>
+
+    <!-- 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>
+    </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>
+    </xpath>
+</template>
+
+<!-- Alternative extension of the language_selector to make it look like an -->
+<!-- inline list instead of a dropdown -->
+<template id="language_selector_inline" inherit_id="website.language_selector" primary="True">
+    <xpath expr="//*[hasclass('js_language_selector')]" position="attributes">
+        <attribute name="class" remove="dropup" separator=" "/>
+    </xpath>
+    <xpath expr="//*[hasclass('dropdown-toggle')]" position="replace"/>
+    <xpath expr="//*[hasclass('dropdown-menu')]" position="attributes">
+        <attribute name="class" remove="dropdown-menu" add="list-inline" separator=" "/>
+    </xpath>
+    <xpath expr="//*[hasclass('dropdown-item')]" position="attributes">
+        <attribute name="class" remove="dropdown-item" add="list-inline-item" separator=" "/>
+    </xpath>
+    <xpath expr="//t[@t-foreach='languages']" position="inside">
+        <t t-if="not lg_last and not no_text">
+            <span class="list-inline-item">|</span>
+        </t>
+    </xpath>
+    <xpath expr="//t[@t-call='website.language_selector_add_language']" position="replace">
+        <span class="o_add_language list-inline-item">|</span>
+        <t t-call="website.language_selector_add_language">
+            <t t-set="dropdown" t-value="False"/>
+        </t>
+    </xpath>
+</template>
+
+<template id="footer_language_selector_inline" name="Footer Language Selector Inline" inherit_id="portal.footer_language_selector" active="False">
+    <xpath expr="//t[@id='language_selector_call']" position="replace">
+        <t id="language_selector_call" t-call="website.language_selector_inline"/>
+    </xpath>
+</template>
+
+<template id="footer_language_selector_flag" name="Footer Language Selector Flag" inherit_id="portal.footer_language_selector" active="True">
+    <xpath expr="//t[@id='language_selector_call']" position="before">
+        <t t-set="flags" t-value="True"/>
+    </xpath>
+</template>
+
+<template id="footer_language_selector_no_text" name="Footer Language Selector No Text" inherit_id="portal.footer_language_selector" active="False">
+    <xpath expr="//t[@id='language_selector_call']" position="before">
+        <t t-set="no_text" t-value="True"/>
     </xpath>
 </template>