[IMP] web: show user menu in small devices

The user menu was not visible in portrait mode with multi company in mobile.  This was caused by the company menu taking too much room. We fix the issue by making the company menu smaller (just the size of an icon)

(PR #16685, task 29394)

addons/web/static/src/js/widgets/switch_company_menu.js

@@ -1,13 +1,18 @@
 odoo.define('web.SwitchCompanyMenu', function(require) {
 "use strict";
 
+var config = require('web.config');
+var core = require('web.core');
 var session = require('web.session');
 var SystrayMenu = require('web.SystrayMenu');
 var Widget = require('web.Widget');
 
+var _t = core._t;
+
 var SwitchCompanyMenu = Widget.extend({
     template: 'SwitchCompanyMenu',
     willStart: function() {
+        this.isMobile = config.isMobile;
         if (!session.user_companies) {
             return $.Deferred().reject();
         }
@@ -28,9 +33,13 @@ var SwitchCompanyMenu = Widget.extend({
                 });
         }, 1500, true));
 
-        self.$('.oe_topbar_name').text(session.user_companies.current_company[1]);
-
         var companies_list = '';
+        if (this.isMobile) {
+            companies_list = '<li class="bg-info">' + _t('Tap on the list to change company') + '</li>';
+        }
+        else {
+            self.$('.oe_topbar_name').text(session.user_companies.current_company[1]);
+        }
         _.each(session.user_companies.allowed_companies, function(company) {
             var a = '';
             if (company[0] === session.user_companies.current_company[0]) {

addons/web/static/src/less/navbar.less

@@ -210,3 +210,12 @@
         }
     }
 }
+
+@media (max-width: @screen-xs-max) {
+     .o_switch_company_menu > .dropdown-menu {
+         padding-top: 0px;
+         li.bg-info {
+             padding: 10px;
+         }
+     }
+ }

addons/web/static/src/xml/base_common.xml

@@ -128,7 +128,7 @@
 <t t-name="SwitchCompanyMenu">
     <li class="o_switch_company_menu">
         <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
-            <span class="oe_topbar_name"/> <span class="caret"></span>
+            <span t-attf-class="#{widget.isMobile ? 'fa fa-building-o' : 'oe_topbar_name'}"/> <span class="caret"/>
         </a>
         <ul class="dropdown-menu" role="menu"/>
     </li>