[FIX] web_responsive: Fix several issues

* one2many tags now not hidden behind inputs.
* Drawer icons now with much better look.
* No overflow bug in small views when closing drawer.
* Documented it when resizing viewport. (+1 squashed commit)
* Whitespace cleanup.

web_app_drawer/README.rst

@@ -39,6 +39,8 @@ Known issues / Roadmap
 * Provide keyboard navigation to secondary (top) menu
 * Drag drawer from left to open in mobile
 * Figure out how to test focus on hidden elements for keyboard nav tests
+* If you resize the window, body gets a wrong ``overflow: auto`` css property
+  and you need to refresh your view or open/close the app drawer to fix that.
 
 Bug Tracker
 ===========

web_app_drawer/static/src/js/web_app_drawer.js

@@ -3,20 +3,20 @@
 
 odoo.define('web_app_drawer', function(require) {
     'use strict';
-    
+
     var $ = require('$');
     var Menu = require('web.Menu');
     var Class = require('web.Class');
     var SearchView = require('web.SearchView');
     var core = require('web.core');
-    
+
     Menu.include({
-        
+
         // Force all_outside to prevent app icons from going into more menu
         reflow: function() {
             this._super('all_outside');
         },
-        
+
         /* Overload to collapse unwanted visible submenus
          * @param allow_open bool Switch to allow submenus to be opened
          */
@@ -26,25 +26,25 @@ odoo.define('web_app_drawer', function(require) {
             var $clicked_menu = this.$secondary_menus.find('a[data-menu=' + id + ']');
             $clicked_menu.parents('.oe_secondary_submenu').css('display', '');
         },
-        
+
     });
-    
+
     SearchView.include({
-        
+
         // Prevent focus of search field on mobile devices
         toggle_visibility: function (is_visible) {
-             $('div.oe_searchview_input').last()
+            $('div.oe_searchview_input').last()
                 .one('focus', $.proxy(this.preventMobileFocus, this));
             return this._super(is_visible);
         },
-        
+
         // It prevents focusing of search el on mobile
         preventMobileFocus: function(event) {
             if (this.isMobile()) {
                 event.preventDefault();
             }
         },
-        
+
         // For lack of Modernizr, TouchEvent will do
         isMobile: function () {
             try{
@@ -54,23 +54,23 @@ odoo.define('web_app_drawer', function(require) {
                 return false;
             }
         },
-        
+
     });
-    
+
     var AppDrawer = Class.extend({
-        
+
         LEFT: 'left',
         RIGHT: 'right',
         UP: 'up',
         DOWN: 'down',
-        
+
         isOpen: false,
         keyBuffer: '',
         keyBufferTime: 500,
         keyBufferTimeoutEvent: false,
         dropdownHeightFactor: 0.90,
         initialized: false,
-        
+
         init: function() {
             this.directionCodes = {
                 'left': this.LEFT,
@@ -91,7 +91,7 @@ odoo.define('web_app_drawer', function(require) {
             core.bus.on('resize', this, this.handleWindowResize);
             core.bus.on('keydown', this, this.handleNavKeys);
         },
-        
+
         // It provides initialization handlers for Drawer
         initDrawer: function() {
             this.$el = $('.drawer');
@@ -109,7 +109,7 @@ odoo.define('web_app_drawer', function(require) {
             });
             this.initialized = true;
         },
-        
+
         // It provides handlers to hide drawer when "unfocused"
         handleClickZones: function() {
             this.$el.drawer('close');
@@ -117,14 +117,14 @@ odoo.define('web_app_drawer', function(require) {
                 .parent()
                 .collapse('hide');
         },
-        
+
         // It resizes bootstrap dropdowns for screen
         handleWindowResize: function() {
             $('.dropdown-scrollable').css(
                 'max-height', $(window).height() * this.dropdownHeightFactor
             );
         },
-        
+
         // It provides keyboard shortcuts for app drawer nav
         handleNavKeys: function(e) {
             if (!this.isOpen){
@@ -144,7 +144,7 @@ odoo.define('web_app_drawer', function(require) {
                 this.selectAppLink(this.searchAppLinks(buffer));
             }
         },
-        
+
         /* It adds to keybuffer, sets expire timer, and returns buffer
          * @returns str of current buffer
          */
@@ -159,11 +159,11 @@ odoo.define('web_app_drawer', function(require) {
             );
             return this.keyBuffer;
         },
-        
+
         clearKeyBuffer: function() {
             this.keyBuffer = '';
         },
-        
+
         /* It performs close actions
          * @fires ``drawer.closed`` to the ``core.bus``
          * @listens ``drawer.opened`` and sends to onDrawerOpen
@@ -172,8 +172,10 @@ odoo.define('web_app_drawer', function(require) {
             core.bus.trigger('drawer.closed');
             this.$el.one('drawer.opened', $.proxy(this.onDrawerOpen, this));
             this.isOpen = false;
+            // Remove inline style inserted by drawer.js
+            this.$el.css("overflow", "");
         },
-        
+
         /* It finds app links and register event handlers
          * @fires ``drawer.opened`` to the ``core.bus``
          * @listens ``drawer.closed`` and sends to :meth:``onDrawerClose``
@@ -185,14 +187,14 @@ odoo.define('web_app_drawer', function(require) {
             core.bus.trigger('drawer.opened');
             this.isOpen = true;
         },
-        
+
-        // It selects an app link visibly    
+        // It selects an app link visibly
         selectAppLink: function($appLink) {
             if ($appLink) {
                 $appLink.focus();
             }
         },
-        
+
         /* It returns first App Link by its name according to query
          * @param query str to search
          * @return jQuery obj
@@ -202,7 +204,7 @@ odoo.define('web_app_drawer', function(require) {
                 return $(this).data('menuName').toUpperCase().startsWith(query);
             }).first();
         },
-        
+
         /* It returns the link adjacent to $appLink in provided direction.
          * It also handles edge cases in the following ways:
          *   * Moves to last link if LEFT on first
@@ -216,10 +218,10 @@ odoo.define('web_app_drawer', function(require) {
          * @return jQuery obj for adjacent applink
          */
         findAdjacentAppLink: function($appLink, direction) {
-            
+
             var obj = [],
                 $objs = this.$appLinks;
-            
+
             switch(direction){
                 case this.LEFT:
                     obj = $objs[$objs.index($appLink) - 1];
@@ -248,15 +250,15 @@ odoo.define('web_app_drawer', function(require) {
                     }
                     break;
             }
-            
+
             if (obj.length) {
                 event.preventDefault();
             }
-            
+
             return $(obj);
-            
+
         },
-        
+
         /* It returns els in the same row
          * @param @obj jQuery object to get row for
          * @param $grid jQuery objects representing grid
@@ -275,18 +277,18 @@ odoo.define('web_app_drawer', function(require) {
                 right = left + $obj.outerWidth();
             return $grid.filter(filterWithin(left, right));
         },
-        
+
     });
-    
+
     // It inits a new AppDrawer when the web client is ready
     core.bus.on('web_client_ready', null, function () {
         new AppDrawer();
     });
-    
+
     return {
         'AppDrawer': AppDrawer,
         'SearchView': SearchView,
         'Menu': Menu,
     };
-    
+
 });

web_app_drawer/static/src/less/app_drawer.less

@@ -13,29 +13,30 @@
     background-clip: padding-box;
 
     .navbar-left {
-        
         width: 100%;
-        
+
         li {
             padding: 0;
         }
-        
     }
-    
+
     .app-drawer-title {
         float: none;
     }
-    
+
     .app-drawer-panel-title {
         margin-top: 4px;
     }
-    
+
     .app-drawer-icon-app {
-        height: @app-drawer-icon-size;
+        height: 100%;
-        width: @app-drawer-icon-size;
+        width: 100%;
-        margin: @app-drawer-icon-margin;
+        max-width: @app-drawer-icon-size;
+        max-height: @app-drawer-icon-size;
+        object-fit: contain;
+        object-position: center;
     }
-    
+
     .panel-body {
         padding-top: @app-drawer-title-height;
     }
@@ -46,7 +47,7 @@
         width: 100%;
         z-index: 9999;
     }
-    
+
 }
 
 .drawer-nav {

web_app_drawer/static/src/less/main.less

@@ -4,6 +4,16 @@
 body {
     width: 100%;
     height: 100%;
+
+    // Do not fix the search part, it's too big for small screens
+    @media (max-width: @screen-sm-max) {
+        overflow: inherit;
+        .openerp {
+            .oe-view-manager {
+                overflow: inherit;
+            }
+        }
+    }
 }
 
 main {

web_app_drawer/static/src/less/navbar.less

@@ -27,12 +27,7 @@ a.navbar-collapse.collapse {
     overflow-x: hidden;
 }
 
-.badge {
+@media (max-width: @screen-xs-max) {
-    position: absolute;
-    right: @app-drawer-padding-horizontal;
-}
-
-@media (max-width: @screen-sm - 1px) {
     #odooMenuBarNav[aria-expanded="false"] {
         /* Hack to hide the visibly expanded mobile menu on load. */
         position: absolute;

web_app_drawer/static/src/less/variables.less

@@ -2,14 +2,12 @@
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 
 // App Drawer / Icons
-
+@app-drawer-icon-size:      6em;
-@app-drawer-icon-size:      7em;
 @app-drawer-icon-margin:    1em;
 @app-drawer-width:          80%;
 @app-drawer-title-height:   @navbar-height;
 
 // Navbar
-
 @app-drawer-navbar-height:  @navbar-height / 2;
 @app-drawer-navbar-padding-vertical: @navbar-padding-vertical / 2;
 @app-drawer-padding-horizontal: @navbar-padding-horizontal / 2;

web_app_drawer/views/web.xml

@@ -11,9 +11,9 @@
               inherit_id="web.webclient_bootstrap"
               name="App Drawer - Web Client"
               >
-        
+
         <xpath expr="//div[@class='oe_leftbar']" position="replace" />
-        
+
         <xpath expr="//t[@t-set='head']" position="inside">
             <meta charset="utf-8" />
             <meta http-equiv="cleartype" content="on" />
@@ -22,39 +22,39 @@
             <meta name="apple-mobile-web-app-capable" content="yes" />
             <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
         </xpath>
-        
+
         <xpath expr="//nav[@id='oe_main_menu_navbar']" position="replace">
-            
+
             <t t-set="body_classname" t-value="'drawer drawer--left'" />
-                
+
             <header role="banner">
                 <nav id="odooAppDrawer" class="app-drawer-nav drawer-nav" role="navigation">
                     <t t-call="web.menu" />
                 </nav>
-                
+
                 <nav class="navbar navbar-default main-nav"
                      role="navigation"
                      groups="base.group_user,base.group_portal"
                      >
                     <div class="container-fluid">
-                        
+
                         <div class="navbar-header">
-                            
+
                             <a href="#"
-                               class="drawer-toggle pull-left navbar-collapse collapse btn btn-default app-drawer-toggle"
+                               class="drawer-toggle navbar-collapse collapse btn btn-default app-drawer-toggle"
                                accesskey="A"
                                >
                                 <span class="sr-only">Toggle App Drawer</span>
                                 <i class="fa fa-th fa-lg app-drawer-icon-open" />
                             </a>
-                            
+
                             <button type="button"
                                     class="app-drawer-toggle drawer-toggle pull-left navbar-toggle collapsed"
                                     >
                                 <span class="sr-only">Toggle App Drawer</span>
-                                <i class="fa fa-th fa-lg app-drawer-icon-open" />
+                                <div class="fa fa-th fa-lg app-drawer-icon-open" />
                             </button>
-                            
+
                             <button type="button"
                                     id="odooMenuBarToggle"
                                     class="navbar-toggle collapsed pull-right"
@@ -64,9 +64,9 @@
                                 <span class="sr-only">Toggle Navigation</span>
                                 <i class="fa fa-bars fa-lg" />
                             </button>
-                            
+
                         </div>
-                        
+
                         <div class="collapse navbar-collapse text-center"
                              id="odooMenuBarNav"
                              data-parent="#odooMenuBarToggle"
@@ -88,41 +88,41 @@
                         </div>
                     </div>
                 </nav>
-                
+
             </header>
-            
+
         </xpath>
-        
+
     </template>
 
     <template id="menu_secondary"
               inherit_id="web.menu_secondary"
               name="App Drawer - Secondary Menu"
               >
-        
+
         <xpath expr="//a[@class='oe_logo']" position="replace" />
-        
+
         <xpath expr="//div[@class='oe_footer']" position="replace" />
-        
+
         <xpath expr="//div[@class='oe_secondary_menus_container']/t" position="replace">
-        
+
             <t t-foreach="menu_data['children']" t-as="menu">
                 <ul style="display: none" class="oe_secondary_menu nav navbar-nav" t-att-data-menu-parent="menu['id']">
                     <t t-call="web.menu_secondary_submenu" />
                 </ul>
             </t>
-            
+
         </xpath>
-        
+
     </template>
 
     <template id="menu_secondary_submenu"
               inherit_id="web.menu_secondary_submenu"
               name="App Drawer - Secondary Submenu"
               >
-        
+
         <xpath expr="//ul" position="replace">
-            
+
             <t t-foreach="menu['children']" t-as="menu">
                 <t t-if="menu['children']">
                     <li t-attf-class="{{ 'dropdown-header' if submenu else '' }}">
@@ -159,20 +159,20 @@
                     </li>
                 </t>
             </t>
-            
+
         </xpath>
-        
+
     </template>
 
     <template id="menu_link"
               inherit_id="web.menu_link"
               name="App Drawer - Menu Link"
               >
-        
+
         <xpath expr="//a" position="attributes">
             <attribute name="t-att-data-menu-name">menu['name']</attribute>
         </xpath>
-        
+
         <xpath expr="//span[@class='oe_menu_text']" position="replace">
             <t t-if="display_images">
                 <img t-attf-src="/web/image/ir.ui.menu/{{ menu['id'] }}/web_icon_data"
@@ -190,20 +190,20 @@
                 </span>
             </t>
         </xpath>
-        
+
     </template>
 
     <template id="menu"
               inherit_id="web.menu"
               name="App Drawer - Menu"
               >
-        
+
         <xpath expr="//ul[contains(@class, 'oe_systray')]" position="replace" />
-        
+
         <xpath expr="//ul[contains(@class, 'oe_user_menu_placeholder')]" position="replace" />
-        
+
         <xpath expr="//ul[contains(@class, 'oe_application_menu_placeholder')]" position="replace">
-            
+
             <div class="panel-default app-drawer-app-panel" id="appDrawerAppMenu">
                 <div class="panel-heading" id="appDrawerAppPanelHead">
                     <h4 class="app-drawer-panel-title">
@@ -214,8 +214,10 @@
                     </h4>
                 </div>
                 <div class="panel-body" id="appDrawerAppPanelBody">
-                    <ul class="nav navbar-nav navbar-left oe_application_menu_placeholder" style="display: none;">
+                    <ul class="row list-unstyled oe_application_menu_placeholder"
-                        <li t-foreach="menu_data['children']" t-as="menu" class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center">
+                        style="display: none;">
+                        <li t-foreach="menu_data['children']" t-as="menu"
+                            class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center mt16">
                             <t t-call="web.menu_link">
                                 <t t-set="display_images" t-value="1" />
                             </t>
@@ -227,10 +229,7 @@
                     </ul>
                 </div>
             </div>
-            
         </xpath>
-        
-        
     </template>
 
 </odoo>