[IMP] web_responsive: public message chatter color

We give a color clue to the users so they can better tell if they're sending an internal note or a public message. Dislaimer: we use the `has()` pseudo class mainly because is simpler to implement and the support is quite extended right now. Even Firefox will catch up soon (now it has support behing a config flag). So users with compatible browser will enjoy it, while others will just stay as they were. TT44953
OCA · Sep 8, 2023 · d0abc2a · d0abc2a
1 parent 93441b4
commit d0abc2a
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 22 deletions.
diff --git a/web_responsive/README.rst b/web_responsive/README.rst
@@ -7,7 +7,7 @@ Web Responsive
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-   !! source digest: sha256:e35aae801ffde408fd73aa0e1c786c289aad930371f4070439c10e5fccb8097a
+   !! source digest: sha256:daabd383cb2a8ae07dec41bbb9a4adf61b7a9732feb9dd512ce8f7c32fcc5c8f
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Production%2FStable-green.png
@@ -147,6 +147,11 @@ This module adds responsiveness to web backend.
 
   .. image:: https://raw.githubusercontent.com/OCA/web/15.0/web_responsive/static/img/document_viewer.gif
 
+* When the user chooses to send a public message the color of the composer is different
+  from the one when the message is an internal log.
+
+  .. image:: https://raw.githubusercontent.com/OCA/web/15.0/web_responsive/static/img/chatter-colors.gif
+
 **Table of contents**
 
 .. contents::
@@ -198,6 +203,7 @@ Contributors
 * Mathias Markl <[email protected]>
 * Iván Todorovich <[email protected]>
 * Sergey Shebanin <[email protected]>
+* David Vidal <[email protected]>
 
 Maintainers
 ~~~~~~~~~~~

diff --git a/web_responsive/readme/CONTRIBUTORS.rst b/web_responsive/readme/CONTRIBUTORS.rst
@@ -6,3 +6,4 @@
 * Mathias Markl <[email protected]>
 * Iván Todorovich <[email protected]>
 * Sergey Shebanin <[email protected]>
+* David Vidal <[email protected]>
diff --git a/web_responsive/readme/DESCRIPTION.rst b/web_responsive/readme/DESCRIPTION.rst
@@ -116,3 +116,8 @@ This module adds responsiveness to web backend.
   width preview clicking on the new maximize button.
 
   .. image:: ../static/img/document_viewer.gif
+
+* When the user chooses to send a public message the color of the composer is different
+  from the one when the message is an internal log.
+
+  .. image:: ../static/img/chatter-colors.gif
diff --git a/web_responsive/static/description/index.html b/web_responsive/static/description/index.html
@@ -1,20 +1,20 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
+<meta name="generator" content="Docutils: http://docutils.sourceforge.net/" />
 <title>Web Responsive</title>
 <style type="text/css">
 
 /*
 :Author: David Goodger ([email protected])
-:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
+:Id: $Id: html4css1.css 7952 2016-07-26 18:15:59Z milde $
 :Copyright: This stylesheet has been placed in the public domain.
 
 Default cascading style sheet for the HTML output of Docutils.
 
-See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
+See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
 customize this style sheet.
 */
 
@@ -367,9 +367,9 @@ <h1 class="title">Web Responsive</h1>
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! source digest: sha256:e35aae801ffde408fd73aa0e1c786c289aad930371f4070439c10e5fccb8097a
+!! source digest: sha256:daabd383cb2a8ae07dec41bbb9a4adf61b7a9732feb9dd512ce8f7c32fcc5c8f
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Production/Stable" src="https://img.shields.io/badge/maturity-Production%2FStable-green.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/15.0/web_responsive"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_responsive"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=15.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
+<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Production/Stable" src="https://img.shields.io/badge/maturity-Production%2FStable-green.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_responsive"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_responsive"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=15.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>This module adds responsiveness to web backend.</p>
 <p><strong>Features for all devices</strong>:</p>
 <ul>
@@ -465,23 +465,27 @@ <h1 class="title">Web Responsive</h1>
 width preview clicking on the new maximize button.</p>
 <img alt="https://raw.githubusercontent.com/OCA/web/15.0/web_responsive/static/img/document_viewer.gif" src="https://raw.githubusercontent.com/OCA/web/15.0/web_responsive/static/img/document_viewer.gif" />
 </li>
+<li><p class="first">When the user chooses to send a public message the color of the composer is different
+from the one when the message is an internal log.</p>
+<img alt="https://raw.githubusercontent.com/OCA/web/15.0/web_responsive/static/img/chatter-colors.gif" src="https://raw.githubusercontent.com/OCA/web/15.0/web_responsive/static/img/chatter-colors.gif" />
+</li>
 </ul>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">
 <ul class="simple">
-<li><a class="reference internal" href="#usage" id="toc-entry-1">Usage</a></li>
-<li><a class="reference internal" href="#known-issues-roadmap" id="toc-entry-2">Known issues / Roadmap</a></li>
-<li><a class="reference internal" href="#bug-tracker" id="toc-entry-3">Bug Tracker</a></li>
-<li><a class="reference internal" href="#credits" id="toc-entry-4">Credits</a><ul>
-<li><a class="reference internal" href="#authors" id="toc-entry-5">Authors</a></li>
-<li><a class="reference internal" href="#contributors" id="toc-entry-6">Contributors</a></li>
-<li><a class="reference internal" href="#maintainers" id="toc-entry-7">Maintainers</a></li>
+<li><a class="reference internal" href="#usage" id="id1">Usage</a></li>
+<li><a class="reference internal" href="#known-issues-roadmap" id="id2">Known issues / Roadmap</a></li>
+<li><a class="reference internal" href="#bug-tracker" id="id3">Bug Tracker</a></li>
+<li><a class="reference internal" href="#credits" id="id4">Credits</a><ul>
+<li><a class="reference internal" href="#authors" id="id5">Authors</a></li>
+<li><a class="reference internal" href="#contributors" id="id6">Contributors</a></li>
+<li><a class="reference internal" href="#maintainers" id="id7">Maintainers</a></li>
 </ul>
 </li>
 </ul>
 </div>
 <div class="section" id="usage">
-<h1><a class="toc-backref" href="#toc-entry-1">Usage</a></h1>
+<h1><a class="toc-backref" href="#id1">Usage</a></h1>
 <p>The following keyboard shortcuts are implemented:</p>
 <ul class="simple">
 <li>Navigate app search results - Arrow keys</li>
@@ -490,32 +494,32 @@ <h1><a class="toc-backref" href="#toc-entry-1">Usage</a></h1>
 </ul>
 </div>
 <div class="section" id="known-issues-roadmap">
-<h1><a class="toc-backref" href="#toc-entry-2">Known issues / Roadmap</a></h1>
+<h1><a class="toc-backref" href="#id2">Known issues / Roadmap</a></h1>
 <ul class="simple">
 <li>App navigation with keyboard.</li>
 <li>Handle long titles on forms in a better way</li>
 </ul>
 </div>
 <div class="section" id="bug-tracker">
-<h1><a class="toc-backref" href="#toc-entry-3">Bug Tracker</a></h1>
+<h1><a class="toc-backref" href="#id3">Bug Tracker</a></h1>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us to smash it by providing a detailed and welcomed
 <a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_responsive%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
-<h1><a class="toc-backref" href="#toc-entry-4">Credits</a></h1>
+<h1><a class="toc-backref" href="#id4">Credits</a></h1>
 <div class="section" id="authors">
-<h2><a class="toc-backref" href="#toc-entry-5">Authors</a></h2>
+<h2><a class="toc-backref" href="#id5">Authors</a></h2>
 <ul class="simple">
 <li>LasLabs</li>
 <li>Tecnativa</li>
 <li>ITerra</li>
 </ul>
 </div>
 <div class="section" id="contributors">
-<h2><a class="toc-backref" href="#toc-entry-6">Contributors</a></h2>
+<h2><a class="toc-backref" href="#id6">Contributors</a></h2>
 <ul class="simple">
 <li>Dave Lasley &lt;<a class="reference external" href="mailto:dave&#64;laslabs.com">dave&#64;laslabs.com</a>&gt;</li>
 <li>Jairo Llopis &lt;<a class="reference external" href="mailto:jairo.llopis&#64;tecnativa.com">jairo.llopis&#64;tecnativa.com</a>&gt;</li>
@@ -525,17 +529,18 @@ <h2><a class="toc-backref" href="#toc-entry-6">Contributors</a></h2>
 <li>Mathias Markl &lt;<a class="reference external" href="mailto:mathias.markl&#64;mukit.at">mathias.markl&#64;mukit.at</a>&gt;</li>
 <li>Iván Todorovich &lt;<a class="reference external" href="mailto:ivan.todorovich&#64;gmail.com">ivan.todorovich&#64;gmail.com</a>&gt;</li>
 <li>Sergey Shebanin &lt;<a class="reference external" href="mailto:sergey&#64;shebanin.ru">sergey&#64;shebanin.ru</a>&gt;</li>
+<li>David Vidal &lt;<a class="reference external" href="mailto:david.vidal&#64;tecnativa.com">david.vidal&#64;tecnativa.com</a>&gt;</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
-<h2><a class="toc-backref" href="#toc-entry-7">Maintainers</a></h2>
+<h2><a class="toc-backref" href="#id7">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose
 mission is to support the collaborative development of Odoo features and
 promote its widespread use.</p>
 <p>Current <a class="reference external" href="https://odoo-community.org/page/maintainer-role">maintainers</a>:</p>
-<p><a class="reference external image-reference" href="https://github.com/Yajo"><img alt="Yajo" src="https://github.com/Yajo.png?size=40px" /></a> <a class="reference external image-reference" href="https://github.com/Tardo"><img alt="Tardo" src="https://github.com/Tardo.png?size=40px" /></a> <a class="reference external image-reference" href="https://github.com/SplashS"><img alt="SplashS" src="https://github.com/SplashS.png?size=40px" /></a></p>
+<p><a class="reference external" href="https://github.com/Yajo"><img alt="Yajo" src="https://github.com/Yajo.png?size=40px" /></a> <a class="reference external" href="https://github.com/Tardo"><img alt="Tardo" src="https://github.com/Tardo.png?size=40px" /></a> <a class="reference external" href="https://github.com/SplashS"><img alt="SplashS" src="https://github.com/SplashS.png?size=40px" /></a></p>
 <p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_responsive">OCA/web</a> project on GitHub.</p>
 <p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
 </div>

diff --git a/web_responsive/static/img/chatter-colors.gif b/web_responsive/static/img/chatter-colors.gif
diff --git a/web_responsive/static/src/legacy/scss/web_responsive.scss b/web_responsive/static/src/legacy/scss/web_responsive.scss
@@ -464,3 +464,13 @@ html .o_web_client .o_action_manager .o_action {
 ul.ui-autocomplete .dropdown-item.ui-menu-item-wrapper {
     white-space: initial;
 }
+
+// Color clue to tell the difference between a note and a public message
+.o_Chatter_composer {
+    // HACK: has() pseudo class is broadly supported in desktop, even FF will deploy
+    // full support soon (now it's available behind a config flag)
+    // https://caniuse.com/css-has
+    &:has(div.o_Composer_coreHeader) {
+        background-color: lighten($o-brand-primary, 40%);
+    }
+}