Techsystech
/
web
mirror of https://github.com/OCA/web.git
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[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
pull/2613/head
David 2023-09-08 10:00:42 +02:00
parent 416eab933c
commit 095e1bdd59
6 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web_responsive/README.rst
View File

@ -7,7 +7,7 @@ Web Responsive
!! This file is generated by oca-gen-addon-readme !! !! This file is generated by oca-gen-addon-readme !!
!! changes will be overwritten. !! !! changes will be overwritten. !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! source digest: sha256:a52f030f4e0cb70a49e1c2112707adbf1f6b5e901f45f0b6d6ee819ee73c4144 !! source digest: sha256:966bd9eb23db9b5530201212737a0049ab85b5a1bbaa81ddebe2e96f8344d9f6
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
.. |badge1| image:: https://img.shields.io/badge/maturity-Production%2FStable-green.png .. |badge1| image:: https://img.shields.io/badge/maturity-Production%2FStable-green.png
@ -97,6 +97,11 @@ This module adds responsiveness to web backend.
.. image:: https://raw.githubusercontent.com/OCA/web/16.0/web_responsive/static/img/document_viewer.gif .. image:: https://raw.githubusercontent.com/OCA/web/16.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/16.0/web_responsive/static/img/chatter-colors.gif
**Table of contents** **Table of contents**
.. contents:: .. contents::
@ -151,6 +156,7 @@ Contributors
* Mathias Markl <mathias.markl@mukit.at> * Mathias Markl <mathias.markl@mukit.at>
* Iván Todorovich <ivan.todorovich@gmail.com> * Iván Todorovich <ivan.todorovich@gmail.com>
* Sergey Shebanin <sergey@shebanin.ru> * Sergey Shebanin <sergey@shebanin.ru>
* David Vidal <david.vidal@tecnativa.com>
Maintainers Maintainers
~~~~~~~~~~~ ~~~~~~~~~~~

1
web_responsive/readme/CONTRIBUTORS.rst
View File

@ -8,3 +8,4 @@
* Mathias Markl <mathias.markl@mukit.at> * Mathias Markl <mathias.markl@mukit.at>
* Iván Todorovich <ivan.todorovich@gmail.com> * Iván Todorovich <ivan.todorovich@gmail.com>
* Sergey Shebanin <sergey@shebanin.ru> * Sergey Shebanin <sergey@shebanin.ru>
* David Vidal <david.vidal@tecnativa.com>

5
web_responsive/readme/DESCRIPTION.rst
View File

@ -66,3 +66,8 @@ This module adds responsiveness to web backend.
width preview clicking on the new maximize button. width preview clicking on the new maximize button.
.. image:: ../static/img/document_viewer.gif .. 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

45
web_responsive/static/description/index.html
View File

@ -3,18 +3,18 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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> <title>Web Responsive</title>
<style type="text/css"> <style type="text/css">
/* /*
:Author: David Goodger (goodger@python.org) :Author: David Goodger (goodger@python.org)
: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. :Copyright: This stylesheet has been placed in the public domain.
Default cascading style sheet for the HTML output of Docutils. 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. customize this style sheet.
*/ */
@ -367,9 +367,9 @@ ul.auto-toc {
!! This file is generated by oca-gen-addon-readme !! !! This file is generated by oca-gen-addon-readme !!
!! changes will be overwritten. !! !! changes will be overwritten. !!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! source digest: sha256:a52f030f4e0cb70a49e1c2112707adbf1f6b5e901f45f0b6d6ee819ee73c4144 !! source digest: sha256:966bd9eb23db9b5530201212737a0049ab85b5a1bbaa81ddebe2e96f8344d9f6
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --> !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<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/16.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-16-0/web-16-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=16.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/16.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-16-0/web-16-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=16.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>This module adds responsiveness to web backend.</p>
<p><strong>Features for all devices</strong>:</p> <p><strong>Features for all devices</strong>:</p>
<ul> <ul>
@ -428,23 +428,27 @@ part for side-by-side reading instead of full screen. You can still put it on fu
width preview clicking on the new maximize button.</p> width preview clicking on the new maximize button.</p>
<img alt="https://raw.githubusercontent.com/OCA/web/16.0/web_responsive/static/img/document_viewer.gif" src="https://raw.githubusercontent.com/OCA/web/16.0/web_responsive/static/img/document_viewer.gif" /> <img alt="https://raw.githubusercontent.com/OCA/web/16.0/web_responsive/static/img/document_viewer.gif" src="https://raw.githubusercontent.com/OCA/web/16.0/web_responsive/static/img/document_viewer.gif" />
</li> </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/16.0/web_responsive/static/img/chatter-colors.gif" src="https://raw.githubusercontent.com/OCA/web/16.0/web_responsive/static/img/chatter-colors.gif" />
</li>
</ul> </ul>
<p><strong>Table of contents</strong></p> <p><strong>Table of contents</strong></p>
<div class="contents local topic" id="contents"> <div class="contents local topic" id="contents">
<ul class="simple"> <ul class="simple">
<li><a class="reference internal" href="#usage" id="toc-entry-1">Usage</a></li> <li><a class="reference internal" href="#usage" id="id1">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="#known-issues-roadmap" id="id2">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="#bug-tracker" id="id3">Bug Tracker</a></li>
<li><a class="reference internal" href="#credits" id="toc-entry-4">Credits</a><ul> <li><a class="reference internal" href="#credits" id="id4">Credits</a><ul>
<li><a class="reference internal" href="#authors" id="toc-entry-5">Authors</a></li> <li><a class="reference internal" href="#authors" id="id5">Authors</a></li>
<li><a class="reference internal" href="#contributors" id="toc-entry-6">Contributors</a></li> <li><a class="reference internal" href="#contributors" id="id6">Contributors</a></li>
<li><a class="reference internal" href="#maintainers" id="toc-entry-7">Maintainers</a></li> <li><a class="reference internal" href="#maintainers" id="id7">Maintainers</a></li>
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
<div class="section" id="usage"> <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> <p>The following keyboard shortcuts are implemented:</p>
<ul class="simple"> <ul class="simple">
<li>Navigate app search results - Arrow keys</li> <li>Navigate app search results - Arrow keys</li>
@ -453,14 +457,14 @@ width preview clicking on the new maximize button.</p>
</ul> </ul>
</div> </div>
<div class="section" id="known-issues-roadmap"> <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"> <ul class="simple">
<li>App navigation with keyboard.</li> <li>App navigation with keyboard.</li>
<li>Handle long titles on forms in a better way</li> <li>Handle long titles on forms in a better way</li>
</ul> </ul>
</div> </div>
<div class="section" id="bug-tracker"> <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>. <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. 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 If you spotted it first, help us to smash it by providing a detailed and welcomed
@ -468,9 +472,9 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
<p>Do not contact contributors directly about support or help with technical issues.</p> <p>Do not contact contributors directly about support or help with technical issues.</p>
</div> </div>
<div class="section" id="credits"> <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"> <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"> <ul class="simple">
<li>LasLabs</li> <li>LasLabs</li>
<li>Tecnativa</li> <li>Tecnativa</li>
@ -479,7 +483,7 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
</ul> </ul>
</div> </div>
<div class="section" id="contributors"> <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"> <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>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> <li>Jairo Llopis &lt;<a class="reference external" href="mailto:jairo.llopis&#64;tecnativa.com">jairo.llopis&#64;tecnativa.com</a>&gt;</li>
@ -497,17 +501,18 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
<li>Mathias Markl &lt;<a class="reference external" href="mailto:mathias.markl&#64;mukit.at">mathias.markl&#64;mukit.at</a>&gt;</li> <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>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>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> </ul>
</div> </div>
<div class="section" id="maintainers"> <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> <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> <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 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose
mission is to support the collaborative development of Odoo features and mission is to support the collaborative development of Odoo features and
promote its widespread use.</p> promote its widespread use.</p>
<p>Current <a class="reference external" href="https://odoo-community.org/page/maintainer-role">maintainers</a>:</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/16.0/web_responsive">OCA/web</a> project on GitHub.</p> <p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/16.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> <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> </div>

BIN
web_responsive/static/img/chatter-colors.gif 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 137 KiB

10
web_responsive/static/src/legacy/scss/web_responsive.scss
View File

@ -383,3 +383,13 @@ body:not(.o_statusbar_buttons) {
.w-26 { .w-26 {
width: 26%; width: 26%;
} }
// 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%);
}
}