mirror of https://github.com/OCA/web.git
[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 litteringpull/1819/head
Dave Lasley
Sergey Shebanin
parent
e96d891a4b
commit
cd85aa71a4
|
|
@ -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
|
||||
===========
|
||||
|
|
|
|||
|
|
@ -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)",
|
||||
|
|
@ -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');
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,7 +11,32 @@
|
|||
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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,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):
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue