[IMP] web_responsive: Possibility of putting the chatter in the right (#951)

web_responsive/__init__.py

@@ -1 +1,4 @@
-# -*- coding: utf-8 -*-
+# Copyright 2018  Alexandre Díaz
+# License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
+
+from . import models

web_responsive/__manifest__.py

@@ -1,5 +1,5 @@
-# -*- coding: utf-8 -*-
 # Copyright 2016-2017 LasLabs Inc.
+# Copyright 2018 Alexandre Díaz
 # License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
 
 {
@@ -9,7 +9,8 @@
     "version": "11.0.1.0.2",
     "category": "Website",
     "website": "https://laslabs.com/",
-    "author": "LasLabs, Tecnativa, Odoo Community Association (OCA)",
+    "author": "LasLabs, Tecnativa, Alexandre Díaz, "
+              "Odoo Community Association (OCA)",
     "license": "LGPL-3",
     "installable": True,
     "depends": [
@@ -18,6 +19,7 @@
     "data": [
         'views/assets.xml',
         'views/web.xml',
+        'views/inherited_view_users_form_simple_modif.xml',
     ],
     'qweb': [
         'static/src/xml/form_view.xml',

web_responsive/models/__init__.py

@@ -0,0 +1,5 @@
+# Copyright 2018  Alexandre Díaz
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+from . import inherited_res_users
+from . import ir_http

web_responsive/models/inherited_res_users.py

@@ -0,0 +1,13 @@
+# Copyright 2018 Alexandre Díaz
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+from odoo import models, fields
+
+
+class ResUsers(models.Model):
+    _inherit = 'res.users'
+
+    chatter_position = fields.Selection([
+        ('normal', 'Normal'),
+        ('sided', 'Sided'),
+    ], string="Chatter Position", default='normal')

web_responsive/models/ir_http.py

@@ -0,0 +1,16 @@
+# Copyright 2018 Alexandre Díaz
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+from odoo import models
+from odoo.http import request
+
+
+class Http(models.AbstractModel):
+    _inherit = 'ir.http'
+
+    def session_info(self):
+        res = super(Http, self).session_info()
+        res.update({
+            'chatter_position': request.env.user.chatter_position or 'normal',
+        })
+        return res

web_responsive/readme/CONTRIBUTORS.rst

@@ -0,0 +1,5 @@
+* Dave Lasley <dave@laslabs.com>
+* Jairo Llopis <jairo.llopis@tecnativa.com>
+* Dennis Sluijk <d.sluijk@onestein.nl>
+* Sergio Teruel <sergio.teruel@tecnativa.com>
+* Alexandre Díaz <dev@redneboa.es>

web_responsive/readme/DESCRIPTION.rst

@@ -0,0 +1,8 @@
+This module provides a mobile compliant interface for Odoo Community web.
+
+Features:
+
+ * New navigation with an App drawer
+ * Keyboard shortcuts for easier navigation
+ * Display kanban views for small screens if an action or field One2x
+ * Set chatter side (Optional per user)

web_responsive/readme/ROADMAP.rst

@@ -0,0 +1,12 @@
+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>`_

web_responsive/readme/USAGE.rst

@@ -0,0 +1,6 @@
+The following keyboard shortcuts are implemented:
+
+* Toggle App Drawer - `ActionKey <https://en.wikipedia.org/wiki/Access_key#Access_in_different_browsers>` + ``A``
+* Navigate Apps Drawer - Arrow Keys
+* Type to select App Links
+* ``esc`` to close App Drawer

web_responsive/static/src/js/web_responsive.js

@@ -9,8 +9,8 @@ odoo.define('web_responsive', function(require) {
     var SearchView = require('web.SearchView');
     var core = require('web.core');
     var config = require('web.config');
-    var FieldOne2Many = core.form_widget_registry.get('one2many');
     var ViewManager = require('web.ViewManager');
+    var Session = require('web.session');
 
     Menu.include({
 
@@ -26,7 +26,7 @@ odoo.define('web_responsive', function(require) {
             this._super(id);
             if (allowOpen) {
                 return;
-            };
+            }
             var $clicked_menu = this.$secondary_menus.find('a[data-menu=' + id + ']');
             $clicked_menu.parents('.oe_secondary_submenu').css('display', '');
         }
@@ -291,18 +291,18 @@ odoo.define('web_responsive', function(require) {
 
     // It inits a new AppDrawer when the web client is ready
     core.bus.on('web_client_ready', null, function() {
-        new AppDrawer();
+        return new AppDrawer();
     });
 
     // if we are in small screen change default view to kanban if exists
     ViewManager.include({
         get_default_view: function() {
-            var default_view = this._super()
+            var default_view = this._super();
             if (config.device.size_class <= config.device.SIZES.XS &&
                 default_view.type !== 'kanban' &&
                 this.views.kanban) {
                 default_view.type = 'kanban';
-            };
+            }
             return default_view;
         },
     });

web_responsive/static/src/less/form_view.less

@@ -1,14 +1,65 @@
 /* Copyright 2016 Ponto Suprimentos Ltda.
+   Copyright 2018 Alexandre Díaz
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 
+@sheet-margin: @sheet-padding;
+@chatter-side-width: 30%;
+
+// Sided Chatter
+@media (min-width: @screen-md) {
+    .o_chatter_position_sided {
+        .o_form_view {
+            display: flex;
+            height: 100%;
+
+            .o_form_sheet_bg {
+                border-right: 1px solid @table-border-color;
+                overflow: auto;
+                flex: 1 1 auto;
+            }
+
+            .oe_chatter {
+                overflow: auto;
+                flex: 0 0 @chatter-side-width;
+
+                .o_chatter_topbar {
+                    height: auto;
+                    flex-wrap: wrap;
+
+                    button:last-of-type {
+                        flex: 1 0 auto;
+                        text-align: left;
+                    }
+
+                    .o_followers {
+                        order: -10;
+                        flex: 0 1 100%;
+                    }
+                }
+
+                &:empty {
+                    display: none;
+                }
+            }
+        }
+    }
+}
+
+// Normal Chatter
+.o_chatter_position_normal {
+    .oe_chatter {
+        max-width: initial;
+    }
+}
+
 .o_form_view {
     // Form must fill 100% width in any size
     .o_form_sheet_bg {
-        padding: @sheet-padding;
 
         .o_form_sheet {
             min-width: auto;
             max-width: 100%;
+            margin: @sheet-margin;
         }
 
         @media (max-width: @screen-sm-max) {

web_responsive/static/tests/js/web_responsive.js

@@ -1,3 +1,4 @@
+/* global QUnit */
 /* Copyright 2016 LasLabs Inc.
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 

web_responsive/tests/test_ui.py

@@ -1,4 +1,3 @@
-# -*- coding: utf-8 -*-
 # Copyright 2016 LasLabs Inc.
 # License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
 

web_responsive/views/inherited_view_users_form_simple_modif.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0"?>
+
+<!--
+    Copyright 2018
+    @author Alexanre Díaz <dev@redneboa.es>
+    License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
+-->
+
+<odoo>
+
+    <record id="view_users_form_simple_modif" model="ir.ui.view">
+        <field name="model">res.users</field>
+        <field name="inherit_id" ref="base.view_users_form_simple_modif" />
+        <field name="arch" type="xml">
+            <xpath expr="//field[@name='email']" position="after">
+                <field name="chatter_position" />
+            </xpath>
+        </field>
+    </record>
+
+</odoo>

web_responsive/views/web.xml

@@ -2,6 +2,7 @@
 
 <!--
     Copyright 2016 LasLabs Inc.
+    Copyright 2018 Alexandre Díaz
     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
 -->
 
@@ -94,6 +95,10 @@
 
         </xpath>
 
+        <xpath expr="//div[hasclass('o_main')]" position="attributes">
+            <attribute name="t-attf-class">o_main o_chatter_position_{{ json.loads(session_info)['chatter_position'] }}</attribute>
+        </xpath>
+
     </template>
 
     <template id="menu_secondary"
@@ -251,4 +256,4 @@
         </xpath>
     </template>
 
-</odoo>
+</odoo>