OCA
/
web
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
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/1066/head
Dave Lasley 8 years ago
committed by Jairo Llopis
parent
3459bb8d83
commit
bc47367746
No known key found for this signature in database GPG Key ID: 59564BF1E22F314F
11 changed files with 132 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      web_responsive/README.rst
  2. 2
      web_responsive/__manifest__.py
  3. 9
      web_responsive/static/src/js/web_responsive.js
  4. 29
      web_responsive/static/src/less/app_drawer.less
  5. 37
      web_responsive/static/src/less/main.less
  6. 16
      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
View File

@ -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
<https://github.com/OCA/web/pull/446#issuecomment-254827880>`_
Bug Tracker
===========

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

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

9
web_responsive/static/src/js/web_responsive.js
View File

@ -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');
},

29
web_responsive/static/src/less/app_drawer.less
View File

@ -11,6 +11,31 @@
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 {

37
web_responsive/static/src/less/main.less
View File

@ -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;
}
}
}
}

16
web_responsive/static/src/less/navbar.less
View File

@ -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;
}
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;
}
.main-nav ul.nav > li > a {
padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal;
}
.oe_topbar_avatar {

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

@ -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;

2
web_responsive/static/tests/js/web_responsive.js
View File

@ -23,7 +23,7 @@ odoo.define_section('web_responsive', ['web_responsive'], function(test) {
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">');

2
web_responsive/tests/test_ui.py
View File

@ -2,7 +2,7 @@
# Copyright 2016 LasLabs Inc.
# 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):

2
web_responsive/views/assets.xml
View File

@ -37,7 +37,7 @@
</xpath>
</template>
<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"
src="/web_responsive/static/tests/js/web_responsive.js"
/>

59
web_responsive/views/web.xml
View File

@ -12,7 +12,7 @@
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">
<meta charset="utf-8" />
@ -25,7 +25,7 @@
<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">
<nav id="odooAppDrawer" class="app-drawer-nav drawer-nav" role="navigation">
@ -40,12 +40,14 @@
<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"
>
<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>
<button type="button"
@ -62,7 +64,10 @@
data-target="#odooMenuBarNav"
>
<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>
</div>
@ -72,7 +77,7 @@
data-parent="#odooMenuBarToggle"
aria-expanded="false"
>
<div class="oe_leftbar"
<div class="o_sub_menu"
groups="base.group_user,base.group_portal"
>
<t t-call="web.menu_secondary" />
@ -100,14 +105,13 @@
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">
<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" />
</ul>
</t>
@ -133,8 +137,7 @@
</t>
</t>
<t t-if="not submenu">
<a href="#"
class="dropdown-toggle"
<a class="dropdown-toggle"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
@ -206,12 +209,26 @@
<div class="panel-default app-drawer-app-panel" id="appDrawerAppMenu">
<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>
</h4>
</div>
</div>
<div class="panel-body" id="appDrawerAppPanelBody">
<ul class="row list-unstyled oe_application_menu_placeholder"
@ -223,7 +240,7 @@
</t>
</li>
<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>
</li>
</ul>

Write Preview
Loading…
Cancel
Save