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/529/head
Dave Lasley 8 years ago
committed by Jairo Llopis
parent
commit
7fc784371b
  1. 2
      web_responsive/README.rst
  2. 2
      web_responsive/__manifest__.py
  3. 11
      web_responsive/static/src/js/web_responsive.js
  4. 9
      web_responsive/static/src/less/app_drawer.less
  5. 23
      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. 20
      web_responsive/views/web.xml

2
web_responsive/README.rst

@ -35,7 +35,7 @@ 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
====================== ======================

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)",

11
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,12 +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, ' + 'a.oe_logo, ' +
'i.oe_logo_edit' '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);
@ -115,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');
}, },

9
web_responsive/static/src/less/app_drawer.less

@ -11,10 +11,15 @@
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 { .oe_logo {
img { img {
margin-top: -@app-drawer-navbar-padding-vertical;
margin-top: -@app-drawer-navbar-padding-vertical * 2;
height: @app-drawer-title-height; height: @app-drawer-title-height;
} }
.oe_logo_edit { .oe_logo_edit {
@ -65,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 {

23
web_responsive/static/src/less/main.less

@ -22,6 +22,25 @@ main {
overflow: hidden; overflow: hidden;
} }
div.oe_footer {
display: none;
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"
/> />

20
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,8 +40,7 @@
<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>
@ -78,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" />
@ -106,9 +105,7 @@
name="App Drawer - Secondary Menu" name="App Drawer - Secondary Menu"
> >
<xpath expr="//a[@class='oe_logo']" 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 class="oe_secondary_menu nav navbar-nav" <ul class="oe_secondary_menu nav navbar-nav"
@ -140,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"
@ -215,7 +211,7 @@
<div class="panel-heading" id="appDrawerAppPanelHead"> <div class="panel-heading" id="appDrawerAppPanelHead">
<div class="col-xs-6"> <div class="col-xs-6">
<h4 class="app-drawer-panel-title pull-left"> <h4 class="app-drawer-panel-title pull-left">
<a href="#" class="app-drawer-icon-close drawer-toggle">
<a 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" t-translation="off"
aria-hidden="true" aria-hidden="true"
@ -244,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