[IMP] web: new navbar in community

The navbar in community now looks more like the navbar in enterprise.

Here is a sum-up of the changes in community:

- The navbar in community is now in blue, instead of black.
- No more app list that almost fills the whole navbar: there is
  now an "Apps Menu" in the left-most side of the navbar.
- No more sidebar for the menus inside an app: those menus are
  now located in the middle part of the navbar.

The navbar in community does not support mobile (< 768px width),
but it should still somewhat usable on most mobile devices.
As for the website navbar, it has been unchanged and should still
support mobile layout.

Task-ID 1878649

2 files changed, 226 insertions, 1 deletions

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index c79dc52ad42..3e8a8c10e71 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1531,7 +1531,7 @@
 
 <t t-name="UserMenu">
     <li class="o_user_menu">
-        <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
+        <a class="dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false" href="#">
             <img class="rounded-circle oe_topbar_avatar" t-att-src="_s + '/web/static/src/img/user_menu_avatar.png'" alt="Avatar"/>
             <span class="oe_topbar_name"/>
         </a>
diff --git a/addons/web/static/src/xml/menu.xml b/addons/web/static/src/xml/menu.xml
new file mode 100644
index 00000000000..1649e630547
--- /dev/null
+++ b/addons/web/static/src/xml/menu.xml
@@ -0,0 +1,225 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+<header t-name="Menu">
+    <nav class="o_main_navbar">
+        <ul class="o_menu_apps"/>
+        <a class="o_menu_brand" role="button"/>
+        <ul class="o_menu_sections" role="menu"/>
+        <ul class="o_menu_systray" role="menu"/>
+    </nav>
+</header>
+
+<!--
+    @param {web.AppsMenu} widget
+-->
+<t t-name="AppsMenu">
+    <li class="dropdown">
+        <a class="dropdown-toggle full" data-toggle="dropdown" href="#">
+            <i class="fa fa-th-large"/>
+        </a>
+        <t t-set="activeApp" t-value="widget.getActiveApp()"/>
+        <div class="dropdown-menu" role="menu">
+            <t t-foreach="widget.getApps()" t-as="app">
+            <a role="menuitem"
+                t-attf-class="dropdown-item o_app #{activeApp.menuID === app.menuID ? 'active' : ''}"
+                t-att-data-menu-id="app.menuID"
+                t-att-data-menu-xmlid="app.xmlID"
+                t-att-data-action-id="app.actionID">
+                    <t t-esc="app.name"/>
+                </a>
+            </t>
+        </div>
+    </li>
+</t>
+
+<t t-name="Menu.link">
+    <t t-set="depth" t-value="(depth || 0) + 1"/>
+
+    <t t-if="!menu.children.length">
+        <t t-set="_link">
+            <a role="menuitem" t-attf-href="#menu_id=#{menu.id}&amp;action=#{menu.action ? menu.action.split(',')[1] : ''}"
+                t-att-data-menu="menu.id"
+                t-att-data-action-model="menu.action ? menu.action.split(',')[0] : ''"
+                t-att-data-action-id="menu.action ? menu.action.split(',')[1] : ''"
+                t-att-data-menu-xmlid="menu.xmlid"
+                t-attf-class="#{inNavbar ? '' : 'dropdown-item '}o_menu_entry_lvl_#{depth}"
+                data-toggle="collapse" data-target="#o_navbar_collapse.in">
+                <span><t t-esc="menu.name"/></span>
+            </a>
+        </t>
+        <li t-if="inNavbar">
+            <t t-raw="_link"/>
+        </li>
+        <t t-else="">
+            <t t-raw="_link"/>
+        </t>
+    </t>
+    <t t-else="">
+        <div t-attf-class="dropdown-header o_menu_header_lvl_#{depth}">
+            <span><t t-esc="menu.name"/></span>
+        </div>
+        <t t-foreach="menu.children" t-as="menu">
+            <t t-call="Menu.link"/>
+        </t>
+    </t>
+</t>
+
+<!-- separate first level dropdown from the others to avoid nested dropdown -->
+<t t-name="Menu.sections">
+    <t t-foreach="menu_data.children" t-as="first_level_menu">
+        <section t-att-class="first_level_menu.id">
+            <t t-foreach="first_level_menu.children" t-as="second_level_menu">
+                <t t-if="!second_level_menu.children.length">
+                    <t t-call="Menu.link">
+                        <t t-set="inNavbar" t-value="true"/>
+                        <t t-set="menu" t-value="second_level_menu"/>
+                    </t>
+                </t>
+                <t t-else="">
+                    <li>
+                        <a href="#" class="dropdown-toggle o-no-caret o_menu_header_lvl_1" t-att-data-menu-xmlid="second_level_menu.xmlid" data-toggle="dropdown" role="button" aria-expanded="false">
+                            <t t-esc="second_level_menu.name"/>
+                        </a>
+                        <div class="dropdown-menu" role="menu">
+                            <t t-foreach="second_level_menu.children" t-as="third_level_menu">
+                                <t t-call="Menu.link">
+                                    <t t-set="depth" t-value="1"/>
+                                    <t t-set="menu" t-value="third_level_menu"/>
+                                </t>
+                            </t>
+                        </div>
+                    </li>
+                </t>
+            </t>
+        </section>
+    </t>
+</t>
+
+<t t-extend="DashboardShare">
+    <t t-jquery=".user-heading h3" t-operation="replace">
+        <h3>
+            Odoo <t t-esc="server_version"/> (Enterprise Edition)
+        </h3>
+    </t>
+    <t t-jquery=".user-heading h3" t-operation="after">
+        <t t-set="expiration_date" t-value="new moment(widget.data.expiration_date).format('LL')"/>
+        <t t-if="expiration_date">
+            <h5>Database expiration: <t t-esc="expiration_date"/></h5>
+        </t>
+    </t>
+</t>
+
+<t t-extend="UserMenu.Actions">
+    <t t-jquery=".dropdown-divider" t-operation="before">
+        <a href="#" data-menu="shortcuts" class="dropdown-item d-none d-md-inline-block">Shortcuts</a>
+    </t>
+</t>
+
+<div t-name="UserMenu.shortcuts">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="offset-md-2 col-md-8">
+                <table class="o_shortcut_table text-center">
+                    <thead>
+                        <tr>
+                            <th style="width:50%;">Description</th>
+                            <th style="width:25%;" class="text-center">Windows/Linux</th>
+                            <th style="width:25%;" class="text-center">Mac</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td align="left">Save a record</td>
+                            <td>
+                                <span class="o_key">Alt</span> + <span class="o_key">s</span>
+                            </td>
+                            <td>
+                                <span class="o_key">Control</span> + <span class="o_key">Alt</span> + <span class="o_key">s</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align="left">Edit a record</td>
+                            <td>
+                                <span class="o_key">Alt</span> + <span class="o_key">a</span>
+                            </td>
+                            <td>
+                                <span class="o_key">Control</span> + <span class="o_key">Alt</span> + <span class="o_key">a</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align="left">Discard a record modification</td>
+                            <td>
+                                <span class="o_key">Alt</span> + <span class="o_key">j</span>
+                            </td>
+                            <td>
+                                <span class="o_key">Control</span> + <span class="o_key">Alt</span> + <span class="o_key">j</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align="left">Create a new record</td>
+                            <td>
+                                <span class="o_key">Alt</span> + <span class="o_key">c</span>
+                            </td>
+                            <td>
+                                <span class="o_key">Control</span> + <span class="o_key">Alt</span> + <span class="o_key">c</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align="left">Open to list view</td>
+                            <td>
+                                <span class="o_key">Alt</span> + <span class="o_key">l</span>
+                            </td>
+                            <td>
+                                <span class="o_key">Control</span> + <span class="o_key">Alt</span> + <span class="o_key">l</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align="left">Open to kanban view</td>
+                            <td>
+                                <span class="o_key">Alt</span> + <span class="o_key">k</span>
+                            </td>
+                            <td>
+                                <span class="o_key">Control</span> + <span class="o_key">Alt</span> + <span class="o_key">k</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align="left">Open the previous record</td>
+                            <td>
+                                <span class="o_key">Alt</span> + <span class="o_key">p</span>
+                            </td>
+                            <td>
+                                <span class="o_key">Control</span> + <span class="o_key">Alt</span> + <span class="o_key">p</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align="left">Open the next record</td>
+                            <td>
+                                <span class="o_key">Alt</span> + <span class="o_key">n</span>
+                            </td>
+                            <td>
+                                <span class="o_key">Control</span> + <span class="o_key">Alt</span> + <span class="o_key">n</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td align="left">Open app menu</td>
+                            <td>
+                                <span class="o_key">Alt</span> + <span class="o_key">h</span>
+                            </td>
+                            <td>
+                                <span class="o_key">Control</span> + <span class="o_key">Alt</span> + <span class="o_key">h</span>
+                            </td>
+                        </tr>
+
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<t t-extend="FormSelection">
+    <t t-jquery=".dropdown-menu.state">$(this).addClass("dropdown-menu-right");</t>
+</t>
+
+</templates>