[FIX+IMP] web_responsive: Chatter Topbar + fix #1189 + added gif

web_responsive/README.rst

@@ -83,6 +83,10 @@ Features for computers:
 
   .. image:: https://user-images.githubusercontent.com/973709/48417428-ac5a5f00-e74a-11e8-8839-5bc538c54c1d.png
 
+* Sticky chatter topbar
+
+  .. image:: https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter_topbar.gif
+
 **Table of contents**
 
 .. contents::

web_responsive/__manifest__.py

@@ -14,6 +14,7 @@
     "installable": True,
     "depends": [
         'web',
+        'mail',
     ],
     "data": [
         'views/assets.xml',

web_responsive/readme/DESCRIPTION.rst

@@ -55,3 +55,7 @@ Features for computers:
 * Full width form sheets
 
   .. image:: https://user-images.githubusercontent.com/973709/48417428-ac5a5f00-e74a-11e8-8839-5bc538c54c1d.png
+
+* Sticky chatter topbar
+
+  .. image:: ./static/img/chatter_topbar.gif

web_responsive/static/description/index.html

@@ -415,6 +415,9 @@ See <a class="reference external" href="https://github.com/odoo/odoo/issues/3006
 <li><p class="first">Full width form sheets</p>
 <img alt="https://user-images.githubusercontent.com/973709/48417428-ac5a5f00-e74a-11e8-8839-5bc538c54c1d.png" src="https://user-images.githubusercontent.com/973709/48417428-ac5a5f00-e74a-11e8-8839-5bc538c54c1d.png" />
 </li>
+<li><p class="first">Sticky chatter topbar</p>
+<img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter_topbar.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter_topbar.gif" />
+</li>
 </ul>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">

web_responsive/static/src/css/web_responsive.scss

@@ -412,6 +412,10 @@ html .o_web_client .o_main .o_main_content {
                 .o_form_sheet_bg {
                     flex: 1 1 60%;
                     overflow: auto;
+
+                    > .o_form_sheet {
+                        min-width: unset;
+                    }
                 }
 
                 .o_chatter {
@@ -421,20 +425,21 @@ html .o_web_client .o_main .o_main_content {
                     min-width: 30%;
                     overflow: auto;
 
-                    .o_chatter_topbar,
+                    .o_chatter_header_container {
-                    .o_thread_composer {
+                        padding-top: $grid-gutter-width*0.5;
+                        top: 0;
                         position: sticky;
-                    }
+                        background-color: $o-view-background-color;
+                        z-index: 1;
 
                         .o_chatter_topbar {
-                        top: 0;
+                            margin-top: 0;
-                        z-index: 2;
-                        background-color: $o-view-background-color;
                         }
 
-                    .o_thread_composer {
+                        .o_attachments_previews {
-                        top: $o-statusbar-height;
+                            overflow: auto;
-                        z-index: 1;
+                            max-height: $o-mail-attachment-image-size * 2 * 3;
+                        }
                     }
                 }
             }

web_responsive/static/src/js/web_responsive.js

@@ -11,6 +11,7 @@ odoo.define('web_responsive', function (require) {
     var FormRenderer = require('web.FormRenderer');
     var Menu = require("web.Menu");
     var RelationalFields = require('web.relational_fields');
+    var Chatter = require('mail.Chatter');
 
     /**
      * Reduce menu data to a searchable format understandable by fuzzy.js
@@ -352,6 +353,19 @@ odoo.define('web_responsive', function (require) {
         },
     });
 
+    // Chatter Hide Composer
+    Chatter.include({
+        _openComposer: function (options) {
+            if (this._composer &&
+                    options.isLog === this._composer.options.isLog &&
+                    this._composer.$el.is(':visible')) {
+                this._closeComposer(false);
+            } else {
+                this._super.apply(this, arguments);
+            }
+        }
+    });
+
     /**
      * Use ALT+SHIFT instead of ALT as hotkey triggerer.
      *

web_responsive/static/src/xml/form_view.xml

@@ -138,4 +138,14 @@
         </t>
     </t>
 
+    <t t-extend="mail.Chatter">
+        <t t-jquery=".o_chatter_topbar" t-operation="replace">
+            <div class="o_chatter_header_container">
+                <div class="o_chatter_topbar">
+                    <div class="o_topbar_right_area"/>
+                </div>
+            </div>
+        </t>
+    </t>
+
 </templates>