[MERGE] base: Improve multi-company UX

TaskID: 2000277

closes odoo/odoo#33876

Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>

2 files changed, 26 insertions, 19 deletions

diff --git a/addons/web/static/src/js/widgets/switch_company_menu.js b/addons/web/static/src/js/widgets/switch_company_menu.js
index 4b52b879447..62e2a27f3d0 100644
--- a/addons/web/static/src/js/widgets/switch_company_menu.js
+++ b/addons/web/static/src/js/widgets/switch_company_menu.js
@@ -31,7 +31,6 @@ var SwitchCompanyMenu = Widget.extend({
         this._onSwitchCompanyClick = _.debounce(this._onSwitchCompanyClick, 1500, true);
         this.allowed_company_ids = String(session.user_context.allowed_company_ids).split(',');
         this.user_companies = session.user_companies.allowed_companies;
-        this.toggle_company = session.toggle_company;
 
         var hash = $.bbq.getState()
         if (!hash.cids || hash.cids === undefined) {
@@ -52,16 +51,21 @@ var SwitchCompanyMenu = Widget.extend({
      * @param {MouseEvent} ev
      */
     _onSwitchCompanyClick: function (ev) {
-        ev.preventDefault();
-        var companyID = $(ev.currentTarget).parent().data('company-id');
+        ev.stopPropagation();
+        var dropdownItem = $(ev.currentTarget).parent()
+        var dropdownMenu = dropdownItem.parent()
+        var companyID = dropdownItem.data('company-id');
         var hash = $.bbq.getState()
         var allowed_company_ids = _.map(hash.cids.split(','), function(company_id) {return parseInt(company_id);});
-        if ($($(ev.currentTarget).parent()).find('.fa-square-o').length) {
+        if (dropdownItem.find('.fa-square-o').length) {
             // 1 enabled company: Stay in single company mode
             if (this.allowed_company_ids.length === 1) {
-                allowed_company_ids = [companyID]    
+                dropdownMenu.find('.fa-check-square').removeClass('fa-check-square').addClass('fa-square-o');
+                dropdownItem.find('.fa-square-o').removeClass('fa-square-o').addClass('fa-check-square');
+                allowed_company_ids = [companyID]
             } else { // Multi company mode
                 allowed_company_ids.push(companyID);
+                dropdownItem.find('.fa-square-o').removeClass('fa-square-o').addClass('fa-check-square');
             }
         }
         session.setCompanies(companyID, allowed_company_ids);
@@ -76,14 +80,19 @@ var SwitchCompanyMenu = Widget.extend({
      * @param {MouseEvent} ev
      */
     _onToggleCompanyClick: function (ev) {
-        var companyID = $(ev.currentTarget).parent().data('company-id');
+        ev.stopPropagation();
+        var dropdownItem = $(ev.currentTarget).parent()
+        var dropdownMenu = dropdownItem.parent()
+        var companyID = dropdownItem.data('company-id');
         var hash = $.bbq.getState()
         var allowed_company_ids = _.map(hash.cids.split(','), function(company_id) {return parseInt(company_id);});
         var current_company_id = allowed_company_ids[0];
-        if ($(ev.currentTarget).find('.fa-square-o').length) {
+        if (dropdownItem.find('.fa-square-o').length) {
             allowed_company_ids.push(companyID);
+            dropdownItem.find('.fa-square-o').removeClass('fa-square-o').addClass('fa-check-square');
         } else {
             allowed_company_ids.splice(allowed_company_ids.indexOf(companyID), 1);
+            dropdownItem.find('.fa-check-square').addClass('fa-square-o').removeClass('fa-check-square');
         }
         session.setCompanies(current_company_id, allowed_company_ids);
     },
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 77e8ab075b1..e46c256b851 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1570,6 +1570,16 @@
             </t>
             <t t-foreach="widget.user_companies" t-as="company">
                 <div role="menuitem" href="#" class="dropdown-item d-flex py-0 px-0" data-menu="company" t-att-data-company-id="company[0]">
+                    <div class="ml-auto pl-3 pr-3 border border-top-0 border-left-0 border-bottom-0 toggle_company o_py">
+                        <span style="height: 2rem;">
+                            <t t-if="widget.allowed_company_ids.includes(company[0].toString())">
+                                <i class="fa fa-fw fa-check-square pt-2"></i>
+                            </t>
+                            <t t-if="!widget.allowed_company_ids.includes(company[0].toString())">
+                                <i class="fa fa-fw fa-square-o pt-2"></i>
+                            </t>
+                        </span>
+                    </div>
                     <div class="d-flex flex-grow-1 align-items-center py-0 log_into pl-3 o_py" t-att-style="company[0] === widget.current_company ? 'background-color: lightgrey;' : ''">
                         <t t-if="widget.allowed_company_ids.includes(company[0].toString())">
                             <span class='mr-3 company_label'>
@@ -1582,18 +1592,6 @@
                             </span>
                         </t>
                     </div>
-                    <t t-if="widget.toggle_company">
-                        <div class="ml-auto pl-3 pr-3 border border-top-0 border-right-0 border-bottom-0 toggle_company o_py">
-                            <span style="height: 2rem;">
-                                <t t-if="widget.allowed_company_ids.includes(company[0].toString())">
-                                    <i class="fa fa-fw fa-check-square pt-2"></i>
-                                </t>
-                                <t t-if="!widget.allowed_company_ids.includes(company[0].toString())">
-                                    <i class="fa fa-fw fa-square-o pt-2"></i>
-                                </t>
-                            </span>
-                        </div>
-                    </t>
                 </div>
             </t>
         </div>