[FIX] web_responsive: Add logo, fix modularity & style

* Add style to hide oe_footer instead of remove to not break `support_branding`
* Add company logo and editing to App Drawer title bar
* Remove translation and screen reader from glyphs
* Minor style fixes on app drawer toggle button positioning
* Add note in ReadMe explaining override of `support_branding`
* Add note in ReadMe explaining why no `oe_main_menu_navbar`

web_responsive/README.rst

@@ -40,12 +40,18 @@ The following keyboard shortcuts are implemented:
 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/static/src/js/web_responsive.js

@@ -85,7 +85,9 @@ odoo.define('web_responsive', function(require) {
             this.initDrawer();
             var $clickZones = $('.openerp_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);

web_responsive/static/src/less/app_drawer.less

@@ -12,6 +12,26 @@
     .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
     background-clip: padding-box;
     
+    .oe_logo {
+        img {
+            margin-top: -@app-drawer-navbar-padding-vertical;
+            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 +45,7 @@
     }
 
     .app-drawer-panel-title {
-        margin-top: 4px;
+        margin-top: 5px;
     }
 
     .app-drawer-icon-app {

web_responsive/static/src/less/main.less

@@ -21,3 +21,7 @@ main {
     height: 100%;
     overflow: hidden;
 }
+
+div.oe_footer {
+    display: none;
+}

web_responsive/views/web.xml

@@ -45,7 +45,10 @@
                                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 +65,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>
@@ -102,12 +108,13 @@
 
         <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']">
+                <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>
@@ -206,13 +213,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">
+                        <h4 class="app-drawer-panel-title pull-left">
                             <a href="#" class="app-drawer-icon-close drawer-toggle">
-                            <i class="fa fa-lg fa-chevron-left" />
+                                <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;">