From ac0d07703183fe9adeb44e02868e574f4c36dd3a Mon Sep 17 00:00:00 2001 From: Jairo Llopis Date: Tue, 4 Oct 2016 17:30:18 +0200 Subject: [PATCH] [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 | 2 + .../static/src/js/web_app_drawer.js | 76 +++++++++--------- .../static/src/less/app_drawer.less | 23 +++--- web_app_drawer/static/src/less/main.less | 10 +++ web_app_drawer/static/src/less/navbar.less | 7 +- web_app_drawer/static/src/less/variables.less | 4 +- web_app_drawer/views/web.xml | 77 +++++++++---------- 7 files changed, 103 insertions(+), 96 deletions(-) diff --git a/web_app_drawer/README.rst b/web_app_drawer/README.rst index b81e6b7b..92e981fd 100755 --- a/web_app_drawer/README.rst +++ b/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 =========== diff --git a/web_app_drawer/static/src/js/web_app_drawer.js b/web_app_drawer/static/src/js/web_app_drawer.js index 6642b7da..03af47de 100755 --- a/web_app_drawer/static/src/js/web_app_drawer.js +++ b/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, }; - + }); diff --git a/web_app_drawer/static/src/less/app_drawer.less b/web_app_drawer/static/src/less/app_drawer.less index c64827b3..506ec0ee 100755 --- a/web_app_drawer/static/src/less/app_drawer.less +++ b/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; - width: @app-drawer-icon-size; - margin: @app-drawer-icon-margin; + height: 100%; + width: 100%; + 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 { diff --git a/web_app_drawer/static/src/less/main.less b/web_app_drawer/static/src/less/main.less index 15c6569d..ca2e3236 100755 --- a/web_app_drawer/static/src/less/main.less +++ b/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 { diff --git a/web_app_drawer/static/src/less/navbar.less b/web_app_drawer/static/src/less/navbar.less index 04f25299..bbf0d453 100755 --- a/web_app_drawer/static/src/less/navbar.less +++ b/web_app_drawer/static/src/less/navbar.less @@ -27,12 +27,7 @@ a.navbar-collapse.collapse { overflow-x: hidden; } -.badge { - position: absolute; - right: @app-drawer-padding-horizontal; -} - -@media (max-width: @screen-sm - 1px) { +@media (max-width: @screen-xs-max) { #odooMenuBarNav[aria-expanded="false"] { /* Hack to hide the visibly expanded mobile menu on load. */ position: absolute; diff --git a/web_app_drawer/static/src/less/variables.less b/web_app_drawer/static/src/less/variables.less index 82d7ca85..9ab6bdac 100755 --- a/web_app_drawer/static/src/less/variables.less +++ b/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: 7em; +@app-drawer-icon-size: 6em; @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; diff --git a/web_app_drawer/views/web.xml b/web_app_drawer/views/web.xml index e02fd6cc..6c207810 100644 --- a/web_app_drawer/views/web.xml +++ b/web_app_drawer/views/web.xml @@ -11,9 +11,9 @@ inherit_id="web.webclient_bootstrap" name="App Drawer - Web Client" > - + - + @@ -22,39 +22,39 @@ - + - + - +
- + - +
- +
- +