[MIG] web_responsive: Migrate to v10

* Bump version
* Change all openerp to odoo
* Fix qunit suite injection
* Remove jQuery require
* Change to new selectors:
  * `oe_leftbar` to `o_sub_menu`
  * `oe_logo` to `o_sub_menu_logo`
  * `oe_footer` to `o_sub_menu_footer`
  * `oe_secondary_menus_container` to `o_sub_menu_content`
* Add style to hide oe_footer instead of remove to not break `support_branding`
* Add note in ReadMe explaining override of `support_branding`
* Set top margin of app drawer title to 0 to fit v10 proportions
* Fix notification badge positioning
* Add o_web_client class to body to fix overlaps
* Scroll control panel with page
* Change navbar z-index to not be overlapped by buttons
* Raise z-index on header to raise over buttons
* Handle layered notifications via z-index
* Remove `#` from navigation links HREF to prevent history littering

web_responsive/README.rst

@@ -35,17 +35,23 @@ The following keyboard shortcuts are implemented:
 
 .. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
    :alt: Try me on Runbot
-   :target: https://runbot.odoo-community.org/runbot/154/9.0
+   :target: https://runbot.odoo-community.org/runbot/154/10.0
 
 Known issues / Roadmap
 ======================
 
+Note: Data added to the footer ``support_branding`` is not shown while using
+this module.
+
 * Provide full menu search feature instead of just App search
 * 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.
 * Override LESS styling to allow for responsive widget layouts
+* Adding ``oe_main_menu_navbar`` ID to the top navigation bar triggers some
+  great styles, but also `JavaScript that causes issues on mobile
+  <https://github.com/OCA/web/pull/446#issuecomment-254827880>`_
 
 Bug Tracker
 ===========

web_responsive/__manifest__.py

@@ -6,7 +6,7 @@
     "name": "Web Responsive",
     "summary": "It provides a mobile compliant interface for Odoo Community "
                "web",
-    "version": "9.0.1.0.0",
+    "version": "10.0.1.0.0",
     "category": "Website",
     "website": "https://laslabs.com/",
     "author": "LasLabs, Tecnativa, Odoo Community Association (OCA)",

web_responsive/static/src/js/web_responsive.js

@@ -4,7 +4,6 @@
 odoo.define('web_responsive', function(require) {
     'use strict';
 
-    var $ = require('$');
     var Menu = require('web.Menu');
     var Class = require('web.Class');
     var SearchView = require('web.SearchView');
@@ -83,9 +82,11 @@ odoo.define('web_responsive', function(require) {
                 '-': this.LEFT,
             };
             this.initDrawer();
-            var $clickZones = $('.openerp_webclient_container, ' +
+            var $clickZones = $('.odoo_webclient_container, ' +
                                 'a.oe_menu_leaf, ' +
-                                'a.oe_menu_toggler'
+                                'a.oe_menu_toggler, ' +
+                                'a.oe_logo, ' +
+                                'i.oe_logo_edit'
                                 );
             $clickZones.click($.proxy(this.handleClickZones, this));
             core.bus.on('resize', this, this.handleWindowResize);
@@ -113,7 +114,7 @@ odoo.define('web_responsive', function(require) {
         // It provides handlers to hide drawer when "unfocused"
         handleClickZones: function() {
             this.$el.drawer('close');
-            $('.oe_secondary_menus_container')
+            $('.o_sub_menu_content')
                 .parent()
                 .collapse('hide');
         },

web_responsive/static/src/less/app_drawer.less

@@ -11,6 +11,31 @@
     border-radius: @border-radius-base;
     .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
     background-clip: padding-box;
+    z-index: 2000;
+    
+    .o_tooltip {
+        z-index: 2051;
+    }
+    
+    .oe_logo {
+        img {
+            margin-top: -@app-drawer-navbar-padding-vertical * 2;
+            height: @app-drawer-title-height;
+        }
+        .oe_logo_edit {
+            position: absolute;
+            top: 1px;
+            width: 100%;
+            padding: 4px;
+            margin: 14px 0;
+            display: none;
+            color: #eee;
+            background: rgba(37,37,37,0.9);
+        }
+        &:hover .oe_logo_edit_admin {
+            display: block;
+        }
+    }
     
     .navbar-left {
         width: 100%;
@@ -25,7 +50,7 @@
     }
 
     .app-drawer-panel-title {
-        margin-top: 4px;
+        margin-top: 5px;
     }
 
     .app-drawer-icon-app {
@@ -45,14 +70,12 @@
         position: absolute;
         height: @app-drawer-title-height;
         width: 100%;
-        z-index: 9999;
     }
 
 }
 
 .drawer-nav {
     width: @app-drawer-width;
-    z-index: 9999;
 }
 
 .drawer--left .drawer-nav {

web_responsive/static/src/less/main.less

@@ -8,7 +8,7 @@ body {
     // Do not fix the search part, it's too big for small screens
     @media (max-width: @screen-sm-max) {
         overflow: inherit;
-        .openerp {
+        .odoo {
             .oe-view-manager {
                 overflow: inherit;
             }
@@ -21,3 +21,38 @@ main {
     height: 100%;
     overflow: hidden;
 }
+
+header {
+    z-index: 10;
+}
+
+.o_cp_switch_buttons {
+    .active {
+        z-index: 10;
+    }
+}
+
+.o_sub_menu {
+    .o_sub_menu_logo {
+        display: none;
+    }
+    .o_sub_menu_footer {
+        display: none;
+    }
+}
+
+.o_tooltip.active {
+    z-index: 2051;
+}
+
+.o_web_client {
+    >.o_main {
+        overflow: auto;
+        > .o_main_content {
+            overflow: initial;
+            > .o_content {
+                overflow: initial;
+            }
+        }
+    }
+}

web_responsive/static/src/less/navbar.less

@@ -2,12 +2,22 @@
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 
 .main-nav {
+
     margin-bottom: 0;
     min-height: @app-drawer-navbar-height;
-}
+    z-index: 1;
+    border: none;
     
-.main-nav ul.nav > li > a {
+    .badge {
+        position: absolute;
+        top: 3px;
+        right: @navbar-padding-horizontal / 2;
+    }
+    
+    ul.nav > li > a {
         padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal;
+    }
+    
 }
 
 .oe_topbar_avatar {

web_responsive/static/src/less/variables.less

@@ -5,7 +5,7 @@
 @app-drawer-icon-size:      6em;
 @app-drawer-icon-margin:    1em;
 @app-drawer-width:          80%;
-@app-drawer-title-height:   @navbar-height;
+@app-drawer-title-height:   54px;
 
 // Navbar
 @app-drawer-navbar-height:  @navbar-height / 2;

web_responsive/static/tests/js/web_responsive.js

@@ -23,7 +23,7 @@ odoo.define_section('web_responsive', ['web_responsive'], function(test) {
         
         self.$clickZone = $('<a class="oe_menu_leaf">');
         
-        self.$secondaryMenu = $('<div><div class="oe_secondary_menus_container">');
+        self.$secondaryMenu = $('<div><div class="o_sub_menu_content">');
         
         self.$dropdown = $('<div class="dropdown-scrollable">');
     

web_responsive/tests/test_ui.py

@@ -2,7 +2,7 @@
 # Copyright 2016 LasLabs Inc.
 # License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
 
-from openerp.tests import HttpCase
+from odoo.tests import HttpCase
 
 
 class TestUi(HttpCase):

web_responsive/views/assets.xml

@@ -37,7 +37,7 @@
         </xpath>
     </template>
     <template id="qunit_suite" inherit_id="web.qunit_suite">
-        <xpath expr="//html/head" position="inside">
+        <xpath expr="//t[@t-set='head']" position="inside">
             <script type="application/javascript"
                     src="/web_responsive/static/tests/js/web_responsive.js"
                     />

web_responsive/views/web.xml

@@ -12,7 +12,7 @@
               name="App Drawer - Web Client"
               >
 
-        <xpath expr="//div[@class='oe_leftbar']" position="replace" />
+        <xpath expr="//div[@class='o_sub_menu']" position="replace" />
 
         <xpath expr="//t[@t-set='head']" position="inside">
             <meta charset="utf-8" />
@@ -25,7 +25,7 @@
 
         <xpath expr="//nav[@id='oe_main_menu_navbar']" position="replace">
 
-            <t t-set="body_classname" t-value="'drawer drawer--left'" />
+            <t t-set="body_classname" t-value="'drawer drawer--left o_web_client'" />
 
             <header role="banner">
                 <nav id="odooAppDrawer" class="app-drawer-nav drawer-nav" role="navigation">
@@ -40,12 +40,14 @@
 
                         <div class="navbar-header">
 
-                            <a href="#"
+                            <a class="drawer-toggle 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" />
+                                <i class="fa fa-th fa-lg app-drawer-icon-open"
+                                   t-translation="off"
+                                   aria-hidden="true"
+                                   />
                             </a>
 
                             <button type="button"
@@ -62,7 +64,10 @@
                                     data-target="#odooMenuBarNav"
                                     >
                                 <span class="sr-only">Toggle Navigation</span>
-                                <i class="fa fa-bars fa-lg" />
+                                <i class="fa fa-bars fa-lg"
+                                   t-translation="off"
+                                   aria-hidden="true"
+                                   />
                             </button>
 
                         </div>
@@ -72,7 +77,7 @@
                              data-parent="#odooMenuBarToggle"
                              aria-expanded="false"
                              >
-                            <div class="oe_leftbar"
+                            <div class="o_sub_menu"
                                  groups="base.group_user,base.group_portal"
                                  >
                                 <t t-call="web.menu_secondary" />
@@ -100,14 +105,13 @@
               name="App Drawer - Secondary Menu"
               >
 
-        <xpath expr="//a[@class='oe_logo']" position="replace" />
+        <xpath expr="//div[@class='o_sub_menu_content']/t" 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']">
+                <ul class="oe_secondary_menu nav navbar-nav"
+                    t-att-data-menu-parent="menu['id']"
+                    style="display: none;"
+                    >
                     <t t-call="web.menu_secondary_submenu" />
                 </ul>
             </t>
@@ -133,8 +137,7 @@
                             </t>
                         </t>
                         <t t-if="not submenu">
-                            <a href="#"
+                            <a class="dropdown-toggle"
-                               class="dropdown-toggle"
                                data-toggle="dropdown"
                                role="button"
                                aria-haspopup="true"
@@ -206,13 +209,27 @@
 
             <div class="panel-default app-drawer-app-panel" id="appDrawerAppMenu">
                 <div class="panel-heading" id="appDrawerAppPanelHead">
-                    <h4 class="app-drawer-panel-title">
+                    <div class="col-xs-6">
-                        <a href="#" class="app-drawer-icon-close drawer-toggle">
+                        <h4 class="app-drawer-panel-title pull-left">
-                            <i class="fa fa-lg fa-chevron-left" />
+                            <a class="app-drawer-icon-close drawer-toggle">
+                                <i class="fa fa-lg fa-chevron-left"
+                                   t-translation="off"
+                                   aria-hidden="true"
+                                   />
                                 Apps
                             </a>
                         </h4>
                     </div>
+                    <div class="col-xs-6">
+                        <a class="oe_logo pull-right" t-attf-href="/web?{{ keep_query() }}">
+                            <i class="fa fa-pencil-square-o oe_logo_edit"
+                               aria-hidden="true"
+                               t-translation="off"
+                               />
+                            <img src='/web/binary/company_logo'/>
+                        </a>
+                    </div>
+                </div>
                 <div class="panel-body" id="appDrawerAppPanelBody">
                     <ul class="row list-unstyled oe_application_menu_placeholder"
                         style="display: none;">
@@ -223,7 +240,7 @@
                             </t>
                         </li>
                         <li id="menu_more_container" class="dropdown" style="display: none;">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
+                            <a class="dropdown-toggle" data-toggle="dropdown">More <b class="caret"></b></a>
                             <ul id="menu_more" class="dropdown-menu"></ul>
                         </li>
                     </ul>