Browse Source

[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
pull/443/head
Dave Lasley 8 years ago
parent
commit
f836479461
No known key found for this signature in database GPG Key ID: 7DDBA4BA81B934CF
  1. 8
      web_responsive/README.rst
  2. 2
      web_responsive/__manifest__.py
  3. 15
      web_responsive/static/src/js/web_responsive.js
  4. 31
      web_responsive/static/src/less/app_drawer.less
  5. 25
      web_responsive/static/src/less/main.less
  6. 18
      web_responsive/static/src/less/navbar.less
  7. 2
      web_responsive/static/src/less/variables.less
  8. 2
      web_responsive/static/tests/js/web_responsive.js
  9. 2
      web_responsive/tests/test_ui.py
  10. 2
      web_responsive/views/assets.xml
  11. 59
      web_responsive/views/web.xml

8
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 .. image:: https://odoo-community.org/website/image/ir.attachment/5784_f2813bd/datas
:alt: Try me on Runbot :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 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 * Provide full menu search feature instead of just App search
* Drag drawer from left to open in mobile * Drag drawer from left to open in mobile
* Figure out how to test focus on hidden elements for keyboard nav tests * 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 * 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. 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 * 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 Bug Tracker
=========== ===========

2
web_responsive/__openerp__.py → web_responsive/__manifest__.py

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

15
web_responsive/static/src/js/web_responsive.js

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

31
web_responsive/static/src/less/app_drawer.less

@ -11,7 +11,32 @@
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0, 0, 0, .175)); .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
background-clip: padding-box; 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 { .navbar-left {
width: 100%; width: 100%;
@ -25,7 +50,7 @@
} }
.app-drawer-panel-title { .app-drawer-panel-title {
margin-top: 4px;
margin-top: 5px;
} }
.app-drawer-icon-app { .app-drawer-icon-app {
@ -45,14 +70,12 @@
position: absolute; position: absolute;
height: @app-drawer-title-height; height: @app-drawer-title-height;
width: 100%; width: 100%;
z-index: 9999;
} }
} }
.drawer-nav { .drawer-nav {
width: @app-drawer-width; width: @app-drawer-width;
z-index: 9999;
} }
.drawer--left .drawer-nav { .drawer--left .drawer-nav {

25
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 // Do not fix the search part, it's too big for small screens
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
overflow: inherit; overflow: inherit;
.openerp {
.odoo {
.oe-view-manager { .oe-view-manager {
overflow: inherit; overflow: inherit;
} }
@ -21,3 +21,26 @@ main {
height: 100%; height: 100%;
overflow: hidden; 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;
}

18
web_responsive/static/src/less/navbar.less

@ -2,12 +2,22 @@
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
.main-nav { .main-nav {
margin-bottom: 0; margin-bottom: 0;
min-height: @app-drawer-navbar-height; 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 { .oe_topbar_avatar {

2
web_responsive/static/src/less/variables.less

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

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.$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">'); self.$dropdown = $('<div class="dropdown-scrollable">');

2
web_responsive/tests/test_ui.py

@ -2,7 +2,7 @@
# Copyright 2016 LasLabs Inc. # Copyright 2016 LasLabs Inc.
# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html). # 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): class TestUi(HttpCase):

2
web_responsive/views/assets.xml

@ -37,7 +37,7 @@
</xpath> </xpath>
</template> </template>
<template id="qunit_suite" inherit_id="web.qunit_suite"> <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" <script type="application/javascript"
src="/web_responsive/static/tests/js/web_responsive.js" src="/web_responsive/static/tests/js/web_responsive.js"
/> />

59
web_responsive/views/web.xml

@ -12,7 +12,7 @@
name="App Drawer - Web Client" 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"> <xpath expr="//t[@t-set='head']" position="inside">
<meta charset="utf-8" /> <meta charset="utf-8" />
@ -25,7 +25,7 @@
<xpath expr="//nav[@id='oe_main_menu_navbar']" position="replace"> <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"> <header role="banner">
<nav id="odooAppDrawer" class="app-drawer-nav drawer-nav" role="navigation"> <nav id="odooAppDrawer" class="app-drawer-nav drawer-nav" role="navigation">
@ -40,12 +40,14 @@
<div class="navbar-header"> <div class="navbar-header">
<a href="#"
class="drawer-toggle navbar-collapse collapse btn btn-default app-drawer-toggle"
<a class="drawer-toggle navbar-collapse collapse btn btn-default app-drawer-toggle"
accesskey="A" accesskey="A"
> >
<span class="sr-only">Toggle App Drawer</span> <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> </a>
<button type="button" <button type="button"
@ -62,7 +64,10 @@
data-target="#odooMenuBarNav" data-target="#odooMenuBarNav"
> >
<span class="sr-only">Toggle Navigation</span> <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> </button>
</div> </div>
@ -72,7 +77,7 @@
data-parent="#odooMenuBarToggle" data-parent="#odooMenuBarToggle"
aria-expanded="false" aria-expanded="false"
> >
<div class="oe_leftbar"
<div class="o_sub_menu"
groups="base.group_user,base.group_portal" groups="base.group_user,base.group_portal"
> >
<t t-call="web.menu_secondary" /> <t t-call="web.menu_secondary" />
@ -100,14 +105,13 @@
name="App Drawer - Secondary Menu" 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">
<xpath expr="//div[@class='o_sub_menu_content']/t" position="replace">
<t t-foreach="menu_data['children']" t-as="menu"> <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" /> <t t-call="web.menu_secondary_submenu" />
</ul> </ul>
</t> </t>
@ -133,8 +137,7 @@
</t> </t>
</t> </t>
<t t-if="not submenu"> <t t-if="not submenu">
<a href="#"
class="dropdown-toggle"
<a class="dropdown-toggle"
data-toggle="dropdown" data-toggle="dropdown"
role="button" role="button"
aria-haspopup="true" aria-haspopup="true"
@ -206,12 +209,26 @@
<div class="panel-default app-drawer-app-panel" id="appDrawerAppMenu"> <div class="panel-default app-drawer-app-panel" id="appDrawerAppMenu">
<div class="panel-heading" id="appDrawerAppPanelHead"> <div class="panel-heading" id="appDrawerAppPanelHead">
<h4 class="app-drawer-panel-title">
<a href="#" class="app-drawer-icon-close drawer-toggle">
<i class="fa fa-lg fa-chevron-left" />
Apps
<div class="col-xs-6">
<h4 class="app-drawer-panel-title pull-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> </a>
</h4>
</div>
</div> </div>
<div class="panel-body" id="appDrawerAppPanelBody"> <div class="panel-body" id="appDrawerAppPanelBody">
<ul class="row list-unstyled oe_application_menu_placeholder" <ul class="row list-unstyled oe_application_menu_placeholder"
@ -223,7 +240,7 @@
</t> </t>
</li> </li>
<li id="menu_more_container" class="dropdown" style="display: none;"> <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> <ul id="menu_more" class="dropdown-menu"></ul>
</li> </li>
</ul> </ul>

Loading…
Cancel
Save