+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+ + Whatsapp Chat Layout in Odoo Discuss
++ Detailed Whatsapp Chat Layout in Odoo Discuss
+ +
+
+
+
+ 
+
+
+ + 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 15.0 Community and Enterprise.
+
+
+
+ Available in Odoo 15.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. +
+ +
+
+ 
+ 
+ 
+
+
+ + Change background color and layout color in configuration + settings. +
+ +
+
+
+
+ 
+ 
+
+
+ + Change background image in configuration settings. +
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + 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/whatsapp_chat_layout.css b/whatsapp_chat_layout/static/src/css/whatsapp_chat_layout.css
new file mode 100644
index 000000000..6ae13f92a
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/css/whatsapp_chat_layout.css
@@ -0,0 +1,113 @@
+:root{
+ --background-color: #ffffff;
+ --layout-color: #3a8180;
+}
+.o_MobileMessagingNavbar_tab{
+ color: var(--layout-color);
+ background-color:var(--background-color)
+}
+.o_DiscussMobileMailboxSelection_button{
+ color: var(--layout-color);
+ background-color:var(--background-color);
+ border-color:var(--background-color);
+}
+.o_Discuss.o-mobile {
+ color: var(--layout-color);
+ background-color: var(--background-color);
+}
+.o_DiscussMobileMailboxSelection_button.active.o-active.btn.btn-secondary {
+ background-color:var(--background-color);
+ border-color:var(--background-color);
+}
+.o_ThreadPreview {
+ background-color:var(--background-color)
+}
+.o_ThreadPreview_core {
+ color: var(--layout-color)
+}
+.o_Discuss_mobileNewChatButton{
+ color: var(--layout-color);
+ background-color: var(--background-color);
+ border-color: var(--background-color);
+}
+.o_Discuss_mobileNewChatButton:hover {
+ color: var(--layout-color);
+ background-color: var(--background-color);
+ border-color: var(--background-color);
+}
+.o_Discuss_mobileNewChannelButton {
+ color: var(--layout-color);
+ background-color: var(--background-color);
+ border-color: var(--background-color);
+}
+.o_Discuss_mobileNewChannelButton:hover {
+ color: var(--layout-color);
+ background-color: var(--background-color);
+ border-color: var(--background-color);
+}
+.o_ThreadViewTopbar {
+ color: var(--layout-color);
+ background-color: var(--background-color);
+}
+.o_ComposerTextInput_textarea{
+ height: 40px;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.o_MessageList{
+ background-color: var(--background-color) !important;
+ background-image: var(--background-image) !important;
+ background-repeat:no-repeat;
+ background-size:cover;
+}
+.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: 140px;
+}
+.o_ChatWindowHeader {
+ background-color:var(--layout-color) !important;
+ color: var(--background-color) !important;
+}
+.text-700 {
+ color: gray!important;
+}
+.o_DiscussSidebarCategory_header.d-flex.align-items-center.my-1 {
+ height: auto;
+ background-color: var(--layout-color) !important;
+ color: var(--background-color) !important;
+}
+.o_DiscussSidebarCategory_commandAdd {
+ color: var(--background-color) !important;
+}
+button.o_DiscussSidebarCategory_title{
+ color: white!important;
+}
+.o_ThreadIcon_mailboxInbox {
+ font-size: 25px;
+ color: var(--layout-color) !important;
+}
+.o_ThreadIcon_mailboxStarred{
+ font-size: 25px;
+ color: var(--layout-color) !important;
+}
+.o_ThreadIcon_mailboxHistory {
+ font-size: 25px;
+ color: var(--layout-color) !important;
+}
+.o_DiscussSidebarMailbox_name{
+ margin-left: 22px;
+ font-size: 18px;
+}
+.o_DiscussSidebarMailbox_item.o_DiscussSidebarMailbox_name.me-2.text-truncate {
+ color: #fff;
+ font-size: 17px;
+}
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..61102d42f
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/js/discuss_container.js
@@ -0,0 +1,26 @@
+/** @odoo-module */
+/**
+ * This file is used to hide the set color to discuss model.
+ */
+import { Discuss } from '@mail/components/discuss/discuss';
+import { patch } from "@web/core/utils/patch";
+var rpc = require('web.rpc');
+patch(Discuss.prototype, 'discuss// model: "mail",ord-patch', {
+ setup() {
+ 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
+ });
+ },
+});
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..e9f87b9e2
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/js/discuss_sidebar.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+import { patch } from "@web/core/utils/patch";
+import { DiscussSidebar } from "@mail/components/discuss_sidebar/discuss_sidebar";
+const { onMounted } = owl.hooks;
+var rpc = require('web.rpc');
+patch(DiscussSidebar.prototype, 'discuss_sidebar// model: "res.users",ord-patch', {
+ setup() {
+ this._super.apply();
+ onMounted(() => {
+ this.sidebar()
+ })
+ },
+ async sidebar() {
+ var self = this
+ await 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.el.querySelector('#img').appendChild(image);
+ });
+ },
+ _onClickMail(ev) { // Click function of mail button
+ this.el.querySelector('.mail').classList.remove("d-none");
+ this.el.querySelector('.channel').classList.add("d-none");
+ this.el.querySelector('.chat').classList.add("d-none");
+ },
+ _onClickChat(ev) { // Click function of chat button
+ this.el.querySelector('.chat').classList.remove("d-none");
+ this.el.querySelector('.mail').classList.add("d-none");
+ this.el.querySelector('.channel').classList.add("d-none");
+ },
+ _onClickChannel(ev) { // Click function of channel button
+ this.el.querySelector('.channel').classList.remove("d-none");
+ this.el.querySelector('.mail').classList.add("d-none");
+ this.el.querySelector('.chat').classList.add("d-none");
+ }
+})
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..4ac0b25aa
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/xml/composer.xml
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select the Background color for discuss.
+
+
+
+
+
+ Select the Layout color for discuss.
+
+
+
+
+
+ Select the Background image for discuss.
+
+