[IMP][11.0][web_responsive] Suggested changes (#978)

* [IMP] Chatter Position
* [IMP] Clean unused stuff
* [IMP] FieldStatus hidden-xs
* [IMP] Improvements suggested in #540
* [WIP] Suggested changes
* [WIP] Improve FieldStatus-Responsive
* [IMP] Statusbar Buttons & FieldStatus
* [IMP] Statusbar Buttons Style
* [IMP] Button 'Task' style

web_responsive/static/src/js/web_responsive.js

@@ -10,6 +10,10 @@ odoo.define('web_responsive', function(require) {
     var core = require('web.core');
     var config = require('web.config');
     var ViewManager = require('web.ViewManager');
+    var RelationalFields = require('web.relational_fields');
+    var FormRenderer = require('web.FormRenderer');
+
+    var qweb = core.qweb;
 
     Menu.include({
 
@@ -306,11 +310,53 @@ odoo.define('web_responsive', function(require) {
         },
     });
 
+    // FieldStatus (responsive fold)
+    RelationalFields.FieldStatus.include({
+        _renderQWebValues: function () {
+            return {
+                selections: this.status_information, // Needed to preserve order
+                has_folded: _.filter(this.status_information, {'selected': false}).length > 0,
+                clickable: !!this.attrs.clickable,
+            };
+        },
+
+        _render: function () {
+            // FIXME: Odoo framework creates view values & render qweb in the
+            //     same method. This cause a "double render" process to use
+            //     new custom values.
+            this._super.apply(this, arguments);
+            this.$el.html(qweb.render("FieldStatus.content", this._renderQWebValues()));
+        }
+    });
+
+    // Responsive view "action" buttons
+    FormRenderer.include({
+        _renderHeaderButtons: function (node) {
+            var self = this;
+            var $buttons = this._super(node);
+
+            var $container = $(qweb.render('web_responsive.MenuStatusbarButtons'));
+            $container.find('.o_statusbar_buttons_base').append($buttons);
+
+            var $dropdownMenu = $container.find('.dropdown-menu');
+            _.each(node.children, function (child) {
+                if (child.tag === 'button') {
+                    $dropdownMenu.append($('<LI>').append(self._renderHeaderButton(child)));
+                }
+            });
+
+            return $container;
+        }
+    });
+
+
     return {
         'AppDrawer': AppDrawer,
         'SearchView': SearchView,
         'Menu': Menu,
         'ViewManager': ViewManager,
+        'FieldStatus': RelationalFields.FieldStatus,
+        'FormRenderer': FormRenderer,
     };
 
 });

web_responsive/static/src/less/form_view.less

@@ -92,6 +92,39 @@
             position: sticky;
             top: 0;
             z-index: 1;
+
+            .o-status-more > li > button {
+                border: 0;
+            }
+
+            .o_statusbar_buttons_container {
+                .o_statusbar_buttons_dropdown {
+                    height: 100%;
+
+                    >#dropdownMenuHeader {
+                        height: 100%;
+                        border-top: 0;
+                        border-bottom: 0;
+                        border-radius: 0;
+                    }
+                    >.dropdown-menu > li > button {
+                        width: 100%;
+                        border-radius: 0;
+                        border: 0;
+                    }
+                }
+
+                .o_statusbar_buttons_base > .o_statusbar_buttons {
+                    .o-flex-flow(row, wrap);
+                    >.btn {
+                        @o-statusbar-buttons-vmargin: 4px;
+                        min-height: @odoo-statusbar-height - 2 * @o-statusbar-buttons-vmargin;
+                        margin: @o-statusbar-buttons-vmargin 3px @o-statusbar-buttons-vmargin 0;
+                        padding-top: 2px;
+                        padding-bottom: 2px;
+                    }
+                }
+            }
         }
     }
 

web_responsive/static/src/xml/form_view.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!--
     Copyright 2017 LasLabs Inc.
+    Copyright 2018 Alexandre Díaz
     License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl.html).
 -->
 
@@ -12,4 +13,52 @@
         </t>
     </t>
 
+    <t t-extend="FieldStatus.content.button">
+        <t t-jquery="button" t-operation="replace">
+            <button type="button" t-att-data-value="i.id" t-att-disabled="disabled ? 'disabled' : undefined"
+                t-attf-class="btn btn-sm o_arrow_button btn-#{i.selected ? 'primary' : 'default'}#{disabled ? ' disabled' : ''} #{button_css or ''}">
+                <t t-esc="i.display_name"/>
+            </button>
+        </t>
+    </t>
+
+
+    <t t-extend="FieldStatus.content">
+        <t t-jquery="[t-if='selection_folded.length']" t-operation="replace">
+            <t t-if="selections &amp;&amp; has_folded">
+                <ul class="dropdown-menu o-status-more hidden-lg hidden-md" role="menu">
+                    <t t-set="button_css" t-value="'hidden-lg hidden-md'" />
+                    <li t-foreach="selections" t-as="i">
+                        <t t-if="!i.selected" t-call="FieldStatus.content.button"/>
+                    </li>
+                </ul>
+                <button type="button" class="btn btn-sm o_arrow_button btn-default dropdown-toggle hidden-lg hidden-md" data-toggle="dropdown" aria-expanded="false">More <span class="caret"/></button>
+            </t>
+        </t>
+        <t t-jquery="[t-foreach='selection_unfolded.reverse()']" t-operation="replace">
+            <t t-if="selections">
+                <t t-foreach="selections.reverse()" t-as="i">
+                    <t t-set="button_css" t-value="i.selected?'':'hidden-xs hidden-sm'" />
+                    <t t-call="FieldStatus.content.button"/>
+                </t>
+            </t>
+        </t>
+    </t>
+
+    <t t-name="web_responsive.MenuStatusbarButtons">
+        <div class="o_statusbar_buttons_container">
+            <div class="o_statusbar_buttons_base hidden-xs hidden-sm">
+                <!-- Normal Buttons Zone -->
+            </div>
+            <div class="dropdown o_statusbar_buttons_dropdown hidden-lg hidden-md">
+                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuHeader" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    Task
+                    <span class="caret"></span>
+                </button>
+                <ul class="dropdown-menu" aria-labelledby="dropdownMenuHeader">
+                </ul>
+            </div>
+        </div>
+    </t>
+
 </templates>