initial commit 2

3 files changed, 121 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js
new file mode 100644
index 00000000..45b53e87
--- /dev/null
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js
@@ -0,0 +1,61 @@
+odoo.define('mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js', function (require) {
+'use strict';
+
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+
+const { Component } = owl;
+
+class MobileMessagingNavbar extends Component {
+
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps({
+            compareDepth: {
+                tabs: 2,
+            },
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        this.trigger('o-select-mobile-messaging-navbar-tab', {
+            tabId: ev.currentTarget.dataset.tabId,
+        });
+    }
+
+}
+
+Object.assign(MobileMessagingNavbar, {
+    defaultProps: {
+        tabs: [],
+    },
+    props: {
+        activeTabId: String,
+        tabs: {
+            type: Array,
+            element: {
+                type: Object,
+                shape: {
+                    icon: {
+                        type: String,
+                        optional: true,
+                    },
+                    id: String,
+                    label: String,
+                },
+            },
+        },
+    },
+    template: 'mail.MobileMessagingNavbar',
+});
+
+return MobileMessagingNavbar;
+
+});
diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
new file mode 100644
index 00000000..df0611f9
--- /dev/null
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss
@@ -0,0 +1,43 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_MobileMessagingNavbar {
+    display: flex;
+    flex: 0 0 auto;
+    z-index: 1;
+}
+
+.o_MobileMessagingNavbar_tab {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    flex: 1 1 0;
+    padding: 8px;
+}
+
+.o_MobileMessagingNavbar_tabIcon {
+    margin-bottom: 4%;
+    font-size: 1.3em;
+}
+
+.o_MobileMessagingNavbar_tabLabel {
+    font-size: 0.8em;
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_MobileMessagingNavbar {
+    background-color: white;
+    box-shadow: 0 0 8px gray('400');
+}
+
+.o_MobileMessagingNavbar_tab {
+    box-shadow: 1px 0 0 gray('400');
+
+    &.o-active {
+        color: $o-brand-primary;
+    }
+}
diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
new file mode 100644
index 00000000..d60611bf
--- /dev/null
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.MobileMessagingNavbar" owl="1">
+        <div class="o_MobileMessagingNavbar">
+            <t t-foreach="props.tabs" t-as="tab" t-key="tab.id">
+                <div class="o_MobileMessagingNavbar_tab" t-att-class="{ 'o-active': props.activeTabId === tab.id }" t-on-click="_onClick" t-att-data-tab-id="tab.id">
+                    <t t-if="tab.icon">
+                        <span class="o_MobileMessagingNavbar_tabIcon" t-att-class="tab.icon"/>
+                    </t>
+                    <span class="o_MobileMessagingNavbar_tabLabel"><t t-esc="tab.label"/></span>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>