+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+ + Whatsapp Chat Layout in Odoo Discuss
+Detailed Whatsapp Chat Layout in Odoo Discuss View.
+ +
+
+
+
+ 
+
+
+ Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ Overview +
+
+
+
+
+
+
+ Whatsapp Chat Layout in Odoo Discuss module Redesigned the discuss module into whatsapp chat layout.User can change the
+ background color and layout color of the discuss module. And also set background image.
+
+
+
+
+ 
+
+
+ Features +
+
+
+
+
+
+
+
+
+ 
+ Dynamically change background and Layout color.
+
+
+ Dynamically change background and Layout color.
+
+
+ Dynamically change background image.
+
+
+ Dynamically change background image.
+
+
+ Current user chat view in left side.
+
+
+ Current user chat view in left side.
+
+
+ Easy to Use and Manage.
+
+
+ Easy to Use and Manage.
+
+
+
+ Available in Odoo 16.0 Community and Enterprise.
+
+
+
+ Available in Odoo 16.0 Community and Enterprise.
+
+
+
+
+ 
+
+
+ Screenshots +
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ Rearranged the sidebar and the Chatter. +
+
+
+ 
+
+ Click Mail icon to view the inbox,starred and history messages. +
+ +
+
+ 
+
+ Click Chat icon to view the Direct messages. +
+ +
+
+ 
+
+ Click Channel icon to view the Channels. +
+ +
+
+ 
+
+ Click Start a meeting icon to start a group video call. +
+ +
+
+ 
+
+
+ Current user chat view in left side. +
+ +
+
+ 
+ 
+ 
+
+
+ + Change background color and layout color in configuration settings. +
+ +
+
+
+
+ 
+ 
+ 
+
+
+ + Change background image in configuration settings. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Related Modules
+Explore our related modules
++
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ Support +
+
+
+
\ No newline at end of file
diff --git a/whatsapp_chat_layout/static/src/css/color.css b/whatsapp_chat_layout/static/src/css/color.css
new file mode 100644
index 000000000..c0cad3742
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/css/color.css
@@ -0,0 +1,4 @@
+:root{
+ --background-color: #ffffff;
+ --layout-color: #3a8180;
+}
\ No newline at end of file
diff --git a/whatsapp_chat_layout/static/src/css/discuss.css b/whatsapp_chat_layout/static/src/css/discuss.css
new file mode 100644
index 000000000..73cdb7da6
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/css/discuss.css
@@ -0,0 +1,50 @@
+.o_DiscussSidebar.o_Discuss_sidebar.flex-shrink-0.h-100.pt-3.border-end.bg-light {
+ width: 400px;
+}
+.o_DiscussSidebar_startAMeetingButton {
+ font-size: 24px;
+ width: 55px;
+ height: 65px;
+ background-color: #eeedee!important;
+ color: #979797;
+ border-color: #eeedee;
+ margin-left: 10px;
+ padding-top: 18px;
+}
+
+.header {
+ margin-left: 200px;
+}
+
+.text-700 {
+ color: gray!important;
+}
+
+.o_DiscussSidebarCategory_header.d-flex.align-items-center.my-1 {
+ height: 74px;
+ background-color: var(--layout-color) !important;
+}
+button.o_DiscussSidebarCategory_title{
+ color: white!important;
+}
+
+i.o_DiscussSidebarCategory_command.o_DiscussSidebarCategory_commandAdd.fa.fa-plus.btn.p-0.text-start.text-700.opacity-100-hover.opacity-75.ms-1 {
+ color: white!important;
+}
+i.o_DiscussSidebarCategory_command.o_DiscussSidebarCategory_commandView.fa.fa-cog.btn.p-0.text-start.text-700.opacity-100-hover.opacity-75 {
+ color: white!important;
+}
+
+.o_DiscussSidebar.o_Discuss_sidebar.flex-shrink-0 {
+ background-color: #FFFFFF!important;
+}
+.o_ThreadIcon.d-flex.justify-content-center.flex-shrink-0.o_DiscussSidebarMailbox_item.ms-4.me-2 {
+ border-radius: 50%;
+ font-size: 34px;
+ padding-right: 15px;
+ color: var(--layout-color) !important;
+}
+.o_DiscussSidebarMailbox_item.o_DiscussSidebarMailbox_name.me-2.text-truncate {
+ color: black;
+ font-size: 17px;
+}
diff --git a/whatsapp_chat_layout/static/src/css/thread.css b/whatsapp_chat_layout/static/src/css/thread.css
new file mode 100644
index 000000000..99a7bda26
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/css/thread.css
@@ -0,0 +1,49 @@
+.o_ThreadViewTopbar.d-flex.flex-shrink-0.w-100.px-3.bg-100.border-bottom {
+ height: 66px;
+ background-color: #eeedee!important;
+}
+
+.o_MessageList.bg-view.d-flex.flex-column.overflow-auto.o_ThreadView_messageList.flex-grow-1.o-empty.align-items-center.justify-content-center {
+ background-color: var(--background-color) !important;
+ background-image: var(--background-image) !important;
+ background-repeat:no-repeat;
+ background-size:cover;
+}
+.o_MessageList.bg-view.d-flex.flex-column.overflow-auto.o_ThreadView_messageList.flex-grow-1.pb-4{
+ background-color: var(--background-color) !important;
+ background-image: var(--background-image) !important;
+ background-repeat:no-repeat;
+ background-size:cover;
+}
+.o_Composer.o-has-current-partner-avatar.pe-3.ps-1.o-has-footer{
+ background-color: #eeedee!important;
+ height: 85px;
+ padding-top: 15px!important;
+}
+
+button.o_Composer_toolButton{
+ font-size: 25px;
+ background-color: #eeedee;
+}
+.o_Composer_toolButtons.d-flex.py-1.border-top.bg-view.o-composer-has-current-partner-avatar.o-composer-is-compact.border-bottom {
+ height: 50px;
+ background-color: #eeedee!important;
+}
+
+button.o_Composer_actionButton.o_Composer_button.o_Composer_buttonSend.fa.fa-paper-plane.o-last.o-composer-is-compact.border-start-0.o-has-current-partner-avatar.rounded-0.rounded-end-3 {
+ background-color: var(--layout-color) !important;
+ color: white;
+}
+.o_Message.position-relative.py-1.o-discussion.o-currentAuthor.mt-1.px-3.o_MessageList_item.o_MessageList_message {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: end;
+}
+.o_Message.position-relative.py-1.o-discussion.o-squashed.pt-1.o-currentAuthor.px-3.o_MessageList_item.o_MessageList_message {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: end;
+}
+.text-break {
+ word-break: inherit!important;
+}
\ No newline at end of file
diff --git a/whatsapp_chat_layout/static/src/js/discuss_container.js b/whatsapp_chat_layout/static/src/js/discuss_container.js
new file mode 100644
index 000000000..e4920d8e1
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/js/discuss_container.js
@@ -0,0 +1,30 @@
+/** @odoo-module */
+/**
+ * This file is used to hide the set color to discuss model.
+ */
+import { DiscussContainer} from '@mail/components/discuss_container/discuss_container';
+import { patch} from "@web/core/utils/patch";
+var rpc = require('web.rpc');
+const {onWillStart} = owl;
+patch(DiscussContainer.prototype, 'discuss_container// model: "mail",ord-patch', {
+ setup() {
+ this._super();
+ onWillStart(async () => {
+ await rpc.query({ //Call rpc to get color value.
+ model: "res.config.settings",
+ method: "get_color",
+ args: [0],
+ }).then(function(result) {
+ if (result.background_color !== false){
+ document.documentElement.style.setProperty("--background-color",result.background_color);
+ }//set discuss background color
+ if (result.layout_color !== false){
+ document.documentElement.style.setProperty("--layout-color",result.layout_color);
+ }// set discuss layout color
+ if (result.background_image !== false){
+ document.documentElement.style.setProperty("--background-image",'url(data:image/png;base64,'+result.background_image+')');
+ }// set discuss background image
+ });
+ });
+ }
+});
\ No newline at end of file
diff --git a/whatsapp_chat_layout/static/src/js/discuss_sidebar.js b/whatsapp_chat_layout/static/src/js/discuss_sidebar.js
new file mode 100644
index 000000000..d4e8a640e
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/js/discuss_sidebar.js
@@ -0,0 +1,38 @@
+/** @odoo-module **/
+import { patch } from "@web/core/utils/patch";
+import { DiscussSidebar } from "@mail/components/discuss_sidebar/discuss_sidebar";
+const { onMounted, useRef } = owl;
+var rpc = require('web.rpc');
+patch(DiscussSidebar.prototype, 'discuss_sidebar// model: "res.users",ord-patch', {
+setup() {
+ this._super.apply();
+ this.root = useRef("root")
+ onMounted(this.sidebar)
+ },
+ sidebar(){
+ var self = this
+ rpc.query({//Call rpc to get current user image.
+ model: "res.users",
+ method: "get_user_image",
+ }).then(function(result) {
+ let image = document.createElement('div')
+ image.innerHTML = '
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+ 
'
+ self.root.el.querySelector('#img').appendChild(image);
+ });
+ },
+ _onClickMail(ev) {// Click function of mail button
+ this.root.el.querySelector('.mail').classList.remove("d-none");
+ this.root.el.querySelector('.channel').classList.add("d-none");
+ this.root.el.querySelector('.chat').classList.add("d-none");
+ },
+ _onClickChat(ev) {// Click function of chat button
+ this.root.el.querySelector('.chat').classList.remove("d-none");
+ this.root.el.querySelector('.mail').classList.add("d-none");
+ this.root.el.querySelector('.channel').classList.add("d-none");
+ },
+ _onClickChannel(ev) {// Click function of channel button
+ this.root.el.querySelector('.channel').classList.remove("d-none");
+ this.root.el.querySelector('.mail').classList.add("d-none");
+ this.root.el.querySelector('.chat').classList.add("d-none");
+ },
+});
\ No newline at end of file
diff --git a/whatsapp_chat_layout/static/src/xml/composer.xml b/whatsapp_chat_layout/static/src/xml/composer.xml
new file mode 100644
index 000000000..4bf73d0dc
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/xml/composer.xml
@@ -0,0 +1,106 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select the Background color for discuss.
+
+
+
+
+
+ Select the Layout color for discuss.
+
+
+
+
+
+ Select the Background image for discuss.
+
+