+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+ 
+
+ + Whatsapp Chat Layout In Odoo Discuss
+Redesigned The Discuss Module Into Whatsapp Chat Layout
+ +
+
+
+
+ 
+
+
+ + 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, Enterprise and Odoo.sh.
+
+
+
+ Available in Odoo 15.0 Community, Enterprise and Odoo.sh.
+
+
+
+
+ 
+
+
+ + 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. +
+ +
+
+ 
+ 
+ 
+
+
+ + Change Background Color and Layout Color in General + Settings. +
+ +
+
+
+
+ 
+ 
+
+
+ + Change Background Image in General 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 +
+
+
+
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 100755
index 000000000..3d2b7be8e
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/css/whatsapp_chat_layout.css
@@ -0,0 +1,61 @@
+:root{
+ --background-color: #ffffff;
+ --layout-color: #3a8180;
+}
+.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;
+ color: #fff;
+ margin-left: 15px;
+ padding-top: 18px;
+}
+.header {
+ margin-left: 140px;
+}
+
+.text-700 {
+ color: gray!important;
+}
+.o_DiscussSidebar_groupHeader {
+ height: 40px;
+ background-color: var(--layout-color) !important;
+ font-size:15px;
+}
+div.o_DiscussSidebar_groupTitle{
+ 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;
+}
+.o_DiscussSidebar_groupHeaderItemAdd {
+ color: #fff !important;
+}
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 100755
index 000000000..0dc2a372f
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/js/discuss_container.js
@@ -0,0 +1,33 @@
+odoo.define('whatsapp_chat_layout.discuss_container', function(require) {
+ 'use strict';
+ var rpc = require('web.rpc');
+ const components = {
+ Discuss: require('mail/static/src/components/discuss/discuss.js'),
+ };
+ const {
+ patch
+ } = require('web.utils');
+ /**
+ Patching the components.Discuss for changing the default view
+ */
+ patch(components.Discuss, 'discuss// model: "mail",ord-patch', {
+ setup() {
+ //Call rpc to get color value.
+ rpc.query({
+ 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 100755
index 000000000..922beb490
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/js/discuss_sidebar.js
@@ -0,0 +1,50 @@
+odoo.define('whatsapp_chat_layout.discuss_sidebar', function(require) {
+ 'use strict';
+ const { onMounted } = owl.hooks;
+ var rpc = require('web.rpc');
+ const components = { DiscussSidebar: require('mail/static/src/components/discuss_sidebar/discuss_sidebar.js')};
+ const { patch } = require('web.utils');
+ /**
+ Patching the components. DiscussSidebar for changing the default view
+ */
+ patch(components.DiscussSidebar, 'im_livechat/static/src/components/discuss_sidebar/discuss_sidebar.js', {
+ setup() {
+ this._super.apply();
+ onMounted(() => {
+ this.sidebar()
+ })
+ },
+ // Function for getting the current user image
+ async sidebar() {
+ var self = this
+ //Call rpc to get current user image.
+ await rpc.query({
+ model: "res.users",
+ method: "get_user_image",
+ }).then(function(result) {
+ let image = document.createElement('div')
+ image.innerHTML = '
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+ 
'
+ self.el.querySelector('#img').appendChild(image);
+ });
+ },
+ // Click function of mail button
+ _onClickMail(ev) {
+ console.log(this)
+ this.el.querySelector('.mail').classList.remove("d-none");
+ this.el.querySelector('.channel').classList.add("d-none");
+ this.el.querySelector('.chat').classList.add("d-none");
+ },
+ // Click function of chat button
+ _onClickChat(ev) {
+ this.el.querySelector('.chat').classList.remove("d-none");
+ this.el.querySelector('.mail').classList.add("d-none");
+ this.el.querySelector('.channel').classList.add("d-none");
+ },
+ // Click function of channel button
+ _onClickChannel(ev) {
+ 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_advanced_templates.xml b/whatsapp_chat_layout/static/src/xml/composer_advanced_templates.xml
new file mode 100755
index 000000000..7fa940733
--- /dev/null
+++ b/whatsapp_chat_layout/static/src/xml/composer_advanced_templates.xml
@@ -0,0 +1,143 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ on:
+
+
+
+
+ To:
+ Followers of
+
+
+ "
+
+
+ this document
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select the Background color for discuss.
+
+
+
+
+
+ Select the Layout color for discuss.
+
+
+
+
+
+ Select the Background image for discuss.
+
+