initial commit 2

3 files changed, 269 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.js b/addons/mail/static/src/components/chat_window_header/chat_window_header.js
new file mode 100644
index 00000000..ea560ca2
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.js
@@ -0,0 +1,118 @@
+odoo.define('mail/static/src/components/chat_window_header/chat_window_header.js', function (require) {
+'use strict';
+
+const components = {
+    ThreadIcon: require('mail/static/src/components/thread_icon/thread_icon.js'),
+};
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class ChatWindowHeader extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+        useStore(props => {
+            const chatWindow = this.env.models['mail.chat_window'].get(props.chatWindowLocalId);
+            const thread = chatWindow && chatWindow.thread;
+            return {
+                chatWindow,
+                chatWindowHasShiftLeft: chatWindow && chatWindow.hasShiftLeft,
+                chatWindowHasShiftRight: chatWindow && chatWindow.hasShiftRight,
+                chatWindowName: chatWindow && chatWindow.name,
+                isDeviceMobile: this.env.messaging.device.isMobile,
+                thread,
+                threadLocalMessageUnreadCounter: thread && thread.localMessageUnreadCounter,
+                threadMassMailing: thread && thread.mass_mailing,
+                threadModel: thread && thread.model,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.chat_window}
+     */
+    get chatWindow() {
+        return this.env.models['mail.chat_window'].get(this.props.chatWindowLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        const chatWindow = this.chatWindow;
+        this.trigger('o-clicked', { chatWindow });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickClose(ev) {
+        ev.stopPropagation();
+        if (!this.chatWindow) {
+            return;
+        }
+        this.chatWindow.close();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickExpand(ev) {
+        ev.stopPropagation();
+        this.chatWindow.expand();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickShiftLeft(ev) {
+        ev.stopPropagation();
+        this.chatWindow.shiftLeft();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickShiftRight(ev) {
+        ev.stopPropagation();
+        this.chatWindow.shiftRight();
+    }
+
+}
+
+Object.assign(ChatWindowHeader, {
+    components,
+    defaultProps: {
+        hasCloseAsBackButton: false,
+        isExpandable: false,
+    },
+    props: {
+        chatWindowLocalId: String,
+        hasCloseAsBackButton: Boolean,
+        isExpandable: Boolean,
+    },
+    template: 'mail.ChatWindowHeader',
+});
+
+return ChatWindowHeader;
+
+});
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
new file mode 100644
index 00000000..c5c23634
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss
@@ -0,0 +1,95 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ChatWindowHeader {
+    display: flex;
+    align-items: center;
+    height: $o-mail-chat-window-header-height;
+
+    &.o-mobile {
+        height: $o-mail-chat-window-header-height-mobile;
+    }
+}
+
+.o_ChatWindowHeader_command {
+    padding: 0 8px;
+    display: flex;
+    height: 100%;
+    align-items: center;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+}
+
+.o_ChatWindowHeader_commandBack {
+    margin-right: 5px;
+}
+
+.o_ChatWindowHeader_item {
+    margin: 0 3px;
+
+    &.o_ChatWindowHeader_rightArea {
+        margin-right: 0;
+    }
+
+    &:first-child {
+        margin-left: 10px;
+
+        &.o_ChatWindowHeader_command {
+            margin-left: 0px; // no margin for commands
+        }
+    }
+
+    &.o_ChatWindowHeader_rightArea:last-child .o_ChatWindowHeader_command {
+        margin-right: 0px; // no margin for commands
+    }
+}
+
+.o_ChatWindowHeader_name {
+    max-height: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.o_ChatWindowHeader_rightArea {
+    display: flex;
+    height: 100%;
+    align-items: center;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ChatWindowHeader {
+    background-color: $o-brand-odoo;
+    color: white;
+    cursor: pointer;
+
+    &:not(.o-mobile) {
+
+        &:hover .o_ChatWindowHeader_command {
+            opacity: 0.7;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        &:not(:hover) .o_ChatWindowHeader_command {
+            opacity: 0.5;
+        }
+    }
+
+}
+
+.o_ChatWindowHeader_command.o-mobile {
+    font-size: 1.3rem;
+}
+
+.o_ChatWindowHeader_name {
+    user-select: none;
+}
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
new file mode 100644
index 00000000..b922da15
--- /dev/null
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ChatWindowHeader" owl="1">
+        <div class="o_ChatWindowHeader" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClick">
+            <t t-if="chatWindow">
+                <t t-if="props.hasCloseAsBackButton">
+                    <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickClose" title="Close conversation">
+                        <i class="fa fa-arrow-left"/>
+                    </div>
+                </t>
+                <t t-if="chatWindow.thread and chatWindow.thread.model === 'mail.channel'">
+                    <ThreadIcon
+                        class="o_ChatWindowHeader_icon o_ChatWindowHeader_item"
+                        threadLocalId="chatWindow.thread.localId"
+                    />
+                </t>
+                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_name" t-att-title="chatWindow.name">
+                    <t t-esc="chatWindow.name"/>
+                </div>
+                <t t-if="chatWindow.thread and chatWindow.thread.mass_mailing">
+                    <i class="fa fa-envelope-o" title="Messages are sent by email" role="img"/>
+                </t>
+                <t t-if="chatWindow.thread and chatWindow.thread.localMessageUnreadCounter > 0">
+                    <div class="o_ChatWindowHeader_counter o_ChatWindowHeader_item">
+                        (<t t-esc="chatWindow.thread.localMessageUnreadCounter"/>)
+                    </div>
+                </t>
+                <div class="o-autogrow"/>
+                <div class="o_ChatWindowHeader_item o_ChatWindowHeader_rightArea">
+                    <t t-if="chatWindow.hasShiftLeft">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftLeft" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickShiftLeft" title="Shift left">
+                            <i class="fa fa-angle-left"/>
+                        </div>
+                    </t>
+                    <t t-if="chatWindow.hasShiftRight">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftRight" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickShiftRight" title="Shift right">
+                            <i class="fa fa-angle-right"/>
+                        </div>
+                    </t>
+                    <t t-if="props.isExpandable">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandExpand" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickExpand" title="Open in Discuss">
+                            <i class="fa fa-expand"/>
+                        </div>
+                    </t>
+                    <t t-if="!props.hasCloseAsBackButton">
+                        <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickClose" title="Close chat window">
+                            <i class="fa fa-close"/>
+                        </div>
+                    </t>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>