forked from Techsystech/web
[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.10.0
Jairo Llopis
Dave Lasley
parent
b2353e2671
commit
ac0d077031
|
|
@ -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
|
||||
===========
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;">
|
||||
<li t-foreach="menu_data['children']" t-as="menu" class="col-xs-6 col-sm-4 col-md-3 col-lg-2 text-center">
|
||||
<ul class="row list-unstyled oe_application_menu_placeholder"
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue