From bc47367746a3fe7799e90b0ba642562af9b1361f Mon Sep 17 00:00:00 2001 From: Dave Lasley Date: Fri, 14 Oct 2016 04:08:10 -0700 Subject: [PATCH] [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 | 8 ++- .../{__openerp__.py => __manifest__.py} | 2 +- .../static/src/js/web_responsive.js | 9 +-- .../static/src/less/app_drawer.less | 31 ++++++++-- web_responsive/static/src/less/main.less | 37 +++++++++++- web_responsive/static/src/less/navbar.less | 18 ++++-- web_responsive/static/src/less/variables.less | 2 +- .../static/tests/js/web_responsive.js | 2 +- web_responsive/tests/test_ui.py | 2 +- web_responsive/views/assets.xml | 2 +- web_responsive/views/web.xml | 59 ++++++++++++------- 11 files changed, 132 insertions(+), 40 deletions(-) rename web_responsive/{__openerp__.py => __manifest__.py} (95%) diff --git a/web_responsive/README.rst b/web_responsive/README.rst index 9b76a2ff..f9cc7d3f 100755 --- a/web_responsive/README.rst +++ b/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 + `_ Bug Tracker =========== diff --git a/web_responsive/__openerp__.py b/web_responsive/__manifest__.py similarity index 95% rename from web_responsive/__openerp__.py rename to web_responsive/__manifest__.py index a21ba8c7..835078bb 100755 --- a/web_responsive/__openerp__.py +++ b/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)", diff --git a/web_responsive/static/src/js/web_responsive.js b/web_responsive/static/src/js/web_responsive.js index db4851bb..5e2cd6e8 100755 --- a/web_responsive/static/src/js/web_responsive.js +++ b/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'); }, diff --git a/web_responsive/static/src/less/app_drawer.less b/web_responsive/static/src/less/app_drawer.less index 506ec0ee..ec31048e 100755 --- a/web_responsive/static/src/less/app_drawer.less +++ b/web_responsive/static/src/less/app_drawer.less @@ -11,7 +11,32 @@ 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 { diff --git a/web_responsive/static/src/less/main.less b/web_responsive/static/src/less/main.less index ca2e3236..b82d9a7b 100755 --- a/web_responsive/static/src/less/main.less +++ b/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; + } + } + } +} diff --git a/web_responsive/static/src/less/navbar.less b/web_responsive/static/src/less/navbar.less index bbf0d453..5313bde6 100755 --- a/web_responsive/static/src/less/navbar.less +++ b/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; -} - -.main-nav ul.nav > li > a { - padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal; + z-index: 1; + border: none; + + .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 { diff --git a/web_responsive/static/src/less/variables.less b/web_responsive/static/src/less/variables.less index 9ab6bdac..8e16182a 100755 --- a/web_responsive/static/src/less/variables.less +++ b/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; diff --git a/web_responsive/static/tests/js/web_responsive.js b/web_responsive/static/tests/js/web_responsive.js index c1f96196..686fce3f 100755 --- a/web_responsive/static/tests/js/web_responsive.js +++ b/web_responsive/static/tests/js/web_responsive.js @@ -23,7 +23,7 @@ odoo.define_section('web_responsive', ['web_responsive'], function(test) { self.$clickZone = $(''); - self.$secondaryMenu = $('
'); + self.$secondaryMenu = $('
'); self.$dropdown = $('