Merge pull request #529 from Tecnativa/9.0-web_responsive-backport

[9.0][web_responsive] Backport new features from 10.0

web_responsive/__openerp__.py

@@ -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": "9.0.2.0.0",
     "category": "Website",
     "website": "https://laslabs.com/",
     "author": "LasLabs, Tecnativa, Odoo Community Association (OCA)",

web_responsive/i18n/es.po

@@ -9,8 +9,8 @@ msgid ""
 msgstr ""
 "Project-Id-Version: Odoo Server 9.0c\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-12-15 12:44+0000\n"
+"POT-Creation-Date: 2016-12-23 02:13+0000\n"
-"PO-Revision-Date: 2016-12-15 12:44+0000\n"
+"PO-Revision-Date: 2016-12-23 02:13+0000\n"
 "Last-Translator: Pedro M. Baeza <pedro.baeza@gmail.com>, 2016\n"
 "Language-Team: Spanish (https://www.transifex.com/oca/teams/23907/es/)\n"
 "MIME-Version: 1.0\n"

web_responsive/static/lib/css/drawer.3.2.0.css

@@ -66,6 +66,15 @@
 .drawer-open .drawer-overlay {
   display: block;
 }
+
+/* XXX: local patch waiting for:
+   https://github.com/blivesta/drawer/pull/36
+*/
+.drawer-open {
+  overflow: hidden;
+}
+/* end local patch */
+
 /*!------------------------------------*\
     Top
 \*!------------------------------------*/

web_responsive/static/lib/js/drawer.3.2.0.js

@@ -121,7 +121,10 @@
       return $this
         .removeClass(__.settings.class.close)
         .addClass(__.settings.class.open)
-        .css({ 'overflow': 'hidden' })
+        // XXX: local patch waiting for:
+        // https://github.com/blivesta/drawer/pull/36
+        //.css({ 'overflow': 'hidden' })
+        // end local patch
         .drawerCallback(function triggerOpenedListeners() {
           __.settings.state = true;
           $this.trigger(__.settings.events.opened);
@@ -136,7 +139,10 @@
       return $this
         .removeClass(__.settings.class.open)
         .addClass(__.settings.class.close)
-        .css({ 'overflow': 'auto' })
+        // XXX: local patch waiting for:
+        // https://github.com/blivesta/drawer/pull/36
+        //.css("overflow", "auto")
+        // end local patch
         .drawerCallback(function triggerClosedListeners() {
           __.settings.state = false;
           $this.trigger(__.settings.events.closed);

web_responsive/static/src/js/web_responsive.js

@@ -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,12 +82,18 @@ 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_logo, ' +
                                 'i.oe_logo_edit'
                                 );
+            $('.o_content').scroll(function() {
+                $('.o_control_panel').css(
+                    'margin-top',
+                    -$(this).scrollTop() + 'px'
+                );
+            });
             $clickZones.click($.proxy(this.handleClickZones, this));
             core.bus.on('resize', this, this.handleWindowResize);
             core.bus.on('keydown', this, this.handleNavKeys);

web_responsive/static/src/less/app_drawer.less

@@ -11,10 +11,15 @@
     border-radius: @border-radius-base;
     .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
     background-clip: padding-box;
+    z-index: 10000;
+    
+    .o_tooltip {
+        z-index: 1051;
+    }
     
     .oe_logo {
         img {
-            margin-top: -@app-drawer-navbar-padding-vertical;
+            margin-top: -@app-drawer-navbar-padding-vertical * 2;
             height: @app-drawer-title-height;
         }
         .oe_logo_edit {
@@ -24,7 +29,7 @@
             padding: 4px;
             margin: 14px 0;
             display: none;
-            color: #eee;
+            color: @odoo-list-footer-bg-color;
             background: rgba(37,37,37,0.9);
         }
         &:hover .oe_logo_edit_admin {
@@ -45,7 +50,7 @@
     }
 
     .app-drawer-panel-title {
-        margin-top: 5px;
+        margin-top: 4px;
     }
 
     .app-drawer-icon-app {
@@ -65,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 {

web_responsive/static/src/less/form_view.less

@@ -0,0 +1,90 @@
+/* Copyright 2016 Ponto Suprimentos Ltda.
+ * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+
+.openerp .oe_formview .oe_form {
+    // Form must fill 100% width in any size
+    .oe_form_sheetbg {
+        padding: 16px;
+
+        .oe_form_sheet_width {
+            min-width: auto;
+            max-width: 100%;
+        }
+
+        @media (max-width: @screen-sm-max) {
+            padding: 0;
+
+            .oe_form_sheet_width {
+                border: none;
+            }
+        }
+    }
+
+    // No overflowing buttons or titles
+    .oe_button_box, .oe_title {
+        max-width: 100%;
+    }
+
+    @media (max-width: @screen-sm-max) {
+        .oe_form_field > .ui-autocomplete-input {
+            width: 80%;
+        }
+
+        .oe_form_group_row .oe_form_group_row {
+            margin: 0;
+        }
+
+        .oe_form_group, .oe_form_group_row, .oe_form_group_cell {
+            &, & tbody {
+                display: block;
+                margin-top: 8px;
+                width: 100%;
+            }
+
+            &.oe_group_right {
+                padding: 0;
+            }
+
+            .oe_form_group_row {
+                display: table;
+            }
+
+            .oe_form_group_cell {
+                margin: 0;
+                width: 100%;
+            }
+
+            .oe_form_group_cell_label {
+                @media (min-width: @screen-sm-min) {
+                    display: table-cell;
+                    min-width: 30%;
+                    width: 30%;
+                }
+
+                @media (max-width: @screen-xs-max) {
+                    border: none;
+                }
+
+                + .oe_form_group_cell {
+                    @media (min-width: @screen-sm-min) {
+                        display: table-cell;
+                        max-width: 70%;
+                        width: 70%;
+                    }
+                }
+            }
+        }
+    }
+
+    // Make image editing controls always available, instead of depending on
+    // resolution or hover
+    .oe_form_field_image > .oe_form_field_image_controls {
+        display: block;
+        opacity: 0.7;
+    }
+
+    // Adapt chatter widget to small viewports
+    .oe_chatter {
+        min-width: inherit;
+    }
+}

web_responsive/static/src/less/main.less

@@ -22,6 +22,48 @@ main {
     overflow: hidden;
 }
 
-div.oe_footer {
+.navbar {
-    display: none;
+    z-index: 10;
+}
+
+.o_cp_switch_buttons {
+    .active {
+        z-index: 10;
+    }
+}
+
+.oe_leftbar {
+    .oe_logo {
+        display: none;
+    }
+    .oe_footer {
+        display: none;
+    }
+}
+
+.o_tooltip.active {
+    z-index: 1051;
+}
+
+.o_web_client {
+    >.o_main {
+        overflow: auto;
+        > .o_main_content {
+            overflow: initial;
+            > .o_content {
+                overflow: initial;
+            }
+        }
+    }
+}
+
+// Remove z-index from CP buttons so it doesn't overlap the menu
+.o_control_panel {
+     .btn-group > .btn.active {
+        z-index: initial;
+    }
+}
+
+.o_chat_window {
+    z-index: 1000;
 }

web_responsive/static/src/less/navbar.less

@@ -1,23 +1,178 @@
 /* Copyright 2016 LasLabs Inc.
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 
-.main-nav {
+header {
-    margin-bottom: 0;
+    margin: 0;
-    min-height: @app-drawer-navbar-height;
+    padding: 0;
-}
 
-.main-nav ul.nav > li > a {
+    > .main-nav {
-    padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal;
+        display: block;
-}
+        white-space: nowrap;
 
-.oe_topbar_avatar {
+        .navbar-systray {
-    margin-top: -@app-drawer-padding-horizontal;
+            white-space: nowrap;
-    height: @app-drawer-navbar-height;
+            @media (max-width: @screen-xs-max) {
-    border-radius: 50%;
+                position: absolute;
+                top: 0;
+                right: 56px;
+            }
+            > .oe_user_menu_placeholder > li > a {
+                > .oe_topbar_avatar {
+                    border-radius: 50%;
+                    margin-top: -8px;
+                    max-height: 36px;
+                    height: 36px;
+                    width: 36px;
+                }
+                .oe_topbar_name {
+                    position: relative;
+                    top: -3px;
+                    @media (max-width: @screen-xs-max) {
+                        display: none;
+                    }
+                }
+                .caret {
+                    position: relative;
+                    top: -3.5px;
+                }
+            }
+            > .oe_systray > li > a {
+                .fa {
+                    position: relative;
+                    top: 3px;
+                    font-size: 16px;
+                }
+                .caret {
+                    position: relative;
+                    top: 0.5px;
+                }
+            }
+        }
+
+        .navbar-right {
+            float: right;
+            > li {
+                float: left;
+            }
+            @media (max-width: @screen-xs-max) {
+                .navbar-nav .open .dropdown-menu {
+                    position: fixed;
+                    top: 46px;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    overflow: auto;
+                    float: left;
+                    background-color: @odoo-view-background-color;
+                    border: 1px solid rgba(0, 0, 0, 0.15);
+                    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+                }
+            }
+        }
+
+        .container-fluid:before, .container-fluid:after, .navbar-collapse:before, .navbar-collapse:after {
+            display: inline;
+        }
+
+        > .container-fluid {
+            margin: 0;
+            padding: 0;
+
+            @media (max-width: @screen-xs-max) {
+                > .navbar-collapse {
+                    margin: 0;
+                    padding: 0;
+                    overflow: auto;
+                    &.collapsing {
+                        overflow: hidden;
+                    }
+                }
+            }
+            > .navbar-header {
+                margin: 0;
+                padding: 0;
+                > .drawer-toggle, .navbar-toggle {
+                    margin: 0;
+                    padding: 0;
+                    border: 1px solid @nav-tabs-active-link-hover-border-color;
+                    > i.fa, div.fa {
+                        padding: 16px 14px 15px;
+                    }
+                }
+            }
+
+            .oe_leftbar > .oe_secondary_menus_container > .oe_secondary_menu {
+                ul.dropdown-menu > li.dropdown-header {
+                    color: @odoo-view-background-color;
+                    text-decoration: none;
+                    background-color: @odoo-main-color-muted;
+                    font-weight: bold;
+                }
+                @media (min-width: @screen-sm-min) {
+                    height: @navbar-height;
+                }
+                margin: 0;
+                padding: 0;
+                > li {
+                    @media (min-width: @screen-sm-min) {
+                        height: @navbar-height;
+                    }
+                    margin: 0;
+                    padding: 0;
+                    &.app-name {
+                        display: block;
+                        padding: 7px 8px;
+                        > .oe_menu_text {
+                            font-size: 20px;
+                        }
+                        @media (min-width: @screen-sm-min) {
+                            padding: 8.5px 12px;
+                        }
+                    }
+                    > a {
+                        margin: 0;
+                        @media (min-width: @screen-sm-min) {
+                            height: @navbar-height;
+                            padding: 14px 8px;
+                        }
+                    }
+                }
+            }
+        }
+
+        > .navbar-right.o_menu_systray {
+            display: inline;
+            margin: 0;
+            padding: 0;
+            > ul {
+                margin: 0;
+                padding: 0;
+                > li > a {
+                    margin: 0;
+                    padding: 13px 8px;
+                    height: @navbar-height;
+                }
+            }
+        }
+
+        .badge {
+            position: absolute;
+            top: 3px;
+            right: @navbar-padding-horizontal / 2;
+        }
+
+        ul.nav > li > a {
+            padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal;
+        }
+
+        .o_planner_systray > .progress {
+            margin-top: 15px;
+        }
+    }
 }
 
 a.navbar-collapse.collapse {
-    @media (min-width: @screen-sm) {
+    @media (min-width: @screen-sm-min) {
         padding-bottom: @app-drawer-navbar-padding-vertical;
         padding-top: @app-drawer-navbar-padding-vertical;
     }
@@ -26,11 +181,3 @@ a.navbar-collapse.collapse {
 .dropdown-scrollable {
     overflow-x: hidden;
 }
-
-@media (max-width: @screen-xs-max) {
-    #odooMenuBarNav[aria-expanded="false"] {
-        /* Hack to hide the visibly expanded mobile menu on load. */
-        position: absolute;
-        z-index: -9999;
-    }
-}

web_responsive/static/src/less/variables.less

@@ -5,9 +5,18 @@
 @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
+@navbar-height: 46px;
+@navbar-margin-bottom: 0;
 @app-drawer-navbar-height:  @navbar-height / 2;
 @app-drawer-navbar-padding-vertical: @navbar-padding-vertical / 2;
 @app-drawer-padding-horizontal: @navbar-padding-horizontal / 2;
+
+// Drawer Toggle
+@drawer-toggle-height: @navbar-height;
+@drawer-toggle-width: @navbar-height;
+
+// Backported from v10
+@odoo-list-footer-bg-color: #eee;

web_responsive/tests/test_ui.py

@@ -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):

web_responsive/views/assets.xml

@@ -22,6 +22,9 @@
             <link rel="stylesheet"
                   href="/web_responsive/static/src/less/app_drawer.less"
                   />
+            <link rel="stylesheet"
+                  href="/web_responsive/static/src/less/form_view.less"
+                  />
             <link rel="stylesheet"
                   href="/web_responsive/static/src/less/variables.less"
                   />
@@ -37,7 +40,7 @@
         </xpath>
     </template>
     <template id="qunit_suite" inherit_id="web.qunit_suite">
-        <xpath expr="//html/head" position="inside">
+        <xpath expr="//head" position="inside">
             <script type="application/javascript"
                     src="/web_responsive/static/tests/js/web_responsive.js"
                     />

web_responsive/views/web.xml

@@ -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,8 +40,7 @@
 
                         <div class="navbar-header">
 
-                            <a href="#"
+                            <a class="drawer-toggle 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>
@@ -73,7 +72,7 @@
 
                         </div>
 
-                        <div class="collapse navbar-collapse text-center"
+                        <div class="collapse navbar-collapse"
                              id="odooMenuBarNav"
                              data-parent="#odooMenuBarToggle"
                              aria-expanded="false"
@@ -83,16 +82,12 @@
                                  >
                                 <t t-call="web.menu_secondary" />
                             </div>
-                            <div class="nav navbar-nav navbar-right">
-                                <ul class="nav navbar-nav navbar-right oe_user_menu_placeholder"
-                                    style="display: none;"
-                                    />
-                                <ul class="nav navbar-nav navbar-right oe_systray"
-                                    style="display: none;"
-                                    />
-                            </div>
                         </div>
                     </div>
+                    <div class="nav navbar-nav navbar-right navbar-systray o_menu_systray">
+                        <ul class="nav navbar-nav navbar-right navbar-systray-item oe_user_menu_placeholder"/>
+                        <ul class="nav navbar-nav navbar-right navbar-systray-item oe_systray"/>
+                    </div>
                 </nav>
 
             </header>
@@ -106,16 +101,20 @@
               name="App Drawer - Secondary Menu"
               >
 
-        <xpath expr="//a[@class='oe_logo']" position="replace" />
-
         <xpath expr="//div[@class='oe_secondary_menus_container']/t" position="replace">
 
             <t t-foreach="menu_data['children']" t-as="menu">
-                <ul class="oe_secondary_menu nav navbar-nav"
+                <ul style="display: none"
-                    t-att-data-menu-parent="menu['id']"
+                    class="oe_secondary_menu nav navbar-nav"
-                    style="display: none;"
+                    t-att-data-menu-parent="menu['id']">
-                    >
+                    <li class="app-name">
-                    <t t-call="web.menu_secondary_submenu" />
+                        <span class="oe_menu_text">
+                            <t t-esc="menu['name']"/>
+                        </span>
+                    </li>
+                    <li>
+                        <t t-call="web.menu_secondary_submenu" />
+                    </li>
                 </ul>
             </t>
 
@@ -140,8 +139,7 @@
                             </t>
                         </t>
                         <t t-if="not submenu">
-                            <a href="#"
+                            <a class="dropdown-toggle"
-                               class="dropdown-toggle"
                                data-toggle="dropdown"
                                role="button"
                                aria-haspopup="true"
@@ -215,7 +213,7 @@
                 <div class="panel-heading" id="appDrawerAppPanelHead">
                     <div class="col-xs-6">
                         <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"
                                    t-translation="off"
                                    aria-hidden="true"
@@ -244,7 +242,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>