[MIG] web_responsive: Migration to 18.0

web_responsive/README.rst

@@ -61,13 +61,9 @@ This module adds responsiveness to web backend.
 **Features for mobile**: \* View type picker dropdown displays
 comfortably
 
--  Control panel buttons use icons to save space.
-
-   |image6|
-
 -  Followers and send button is displayed on mobile. Avatar is hidden.
 
-   |image7|
+   |image6|
 
 -  Big inputs on form in edit mode
 
@@ -79,36 +75,35 @@ comfortably
    be more intuitive or accessible by fingers of one hand. F.x. Alt + S
    for Save
 
-   |image8|
+   |image7|
 
 -  Autofocus on search menu box when opening the app menu
 
-   |image9|
+   |image8|
 
 -  When the chatter is on the side part, the document viewer fills that
    part for side-by-side reading instead of full screen. You can still
    put it on full width preview clicking on the new maximize button.
 
-   |image10|
+   |image9|
 
 -  When the user chooses to send a public message the color of the
    composer is different from the one when the message is an internal
    log.
 
-   |image11|
+   |image10|
 
 .. |image| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/redirecthome.gif
 .. |image1| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/appmenu.gif
 .. |image2| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/appsearch.gif
 .. |image3| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/listview.gif
 .. |image4| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/formview.gif
 .. |image5| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/listview.gif
-.. |image6| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/form_buttons.gif
-.. |image7| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/chatter.png
-.. |image8| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/shortcuts.gif
-.. |image9| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/appsearch.gif
-.. |image10| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/document_viewer.gif
-.. |image11| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/chatter-colors.png
+.. |image6| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/chatter.png
+.. |image7| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/shortcuts.gif
+.. |image8| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/appsearch.gif
+.. |image9| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/document_viewer.gif
+.. |image10| image:: https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/chatter-colors.png
 
 **Table of contents**
 
@@ -179,6 +174,14 @@ Contributors
 
 -  Angel Patel <patelangel1414@gmail.com>
 
+-  Chau Le <chaulb@trobz.com>
+
+Other credits
+-------------
+
+The migration of this module from 17.0 to 18.0 was financially supported
+by Trobz.
+
 Maintainers
 -----------
 

web_responsive/__manifest__.py

@@ -9,7 +9,7 @@
 {
     "name": "Web Responsive",
     "summary": "Responsive web client, community-supported",
-    "version": "17.0.1.1.3",
+    "version": "18.0.1.0.0",
     "category": "Website",
     "website": "https://github.com/OCA/web",
     "author": "LasLabs, Tecnativa, ITerra, Onestein, "
@@ -50,9 +50,6 @@
             "/web_responsive/static/src/components/command_palette/*",
             "/web_responsive/static/src/views/form/*",
         ],
-        "web.assets_tests": [
-            "/web_responsive/static/tests/test_patch.js",
-        ],
         "web.qunit_suite_tests": [
             "/web_responsive/static/tests/apps_menu_tests.esm.js",
             "/web_responsive/static/tests/apps_menu_search_tests.esm.js",

web_responsive/readme/CONTRIBUTORS.md

@@ -21,3 +21,5 @@
 - Taras Shabaranskyi \<<shabaranskij@gmail.com>\>
 
 - Angel Patel \<<patelangel1414@gmail.com>\>
+
+- Chau Le \<<chaulb@trobz.com>\>

web_responsive/readme/CREDITS.md

@@ -0,0 +1 @@
+The migration of this module from 17.0 to 18.0 was financially supported by Trobz.

web_responsive/readme/DESCRIPTION.md

@@ -32,10 +32,6 @@ their profile settings.
 **Features for mobile**: \* View type picker dropdown displays
 comfortably
 
-- Control panel buttons use icons to save space.
-
-  ![image](../static/img/form_buttons.gif)
-
 - Followers and send button is displayed on mobile. Avatar is hidden.
 
   ![image](../static/img/chatter.png)

web_responsive/static/description/index.html

@@ -397,11 +397,8 @@ <h1 class="title">Web Responsive</h1>
 <p><strong>Features for mobile</strong>: * View type picker dropdown displays
 comfortably</p>
 <ul>
-<li><p class="first">Control panel buttons use icons to save space.</p>
-<p><img alt="image6" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/form_buttons.gif" /></p>
-</li>
 <li><p class="first">Followers and send button is displayed on mobile. Avatar is hidden.</p>
-<p><img alt="image7" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/chatter.png" /></p>
+<p><img alt="image6" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/chatter.png" /></p>
 </li>
 <li><p class="first">Big inputs on form in edit mode</p>
 </li>
@@ -413,20 +410,20 @@ <h1 class="title">Web Responsive</h1>
 with Firefox Tab switching. Standard Odoo keyboard hotkeys changed to
 be more intuitive or accessible by fingers of one hand. F.x. Alt + S
 for Save</p>
-<p><img alt="image8" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/shortcuts.gif" /></p>
+<p><img alt="image7" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/shortcuts.gif" /></p>
 </li>
 <li><p class="first">Autofocus on search menu box when opening the app menu</p>
-<p><img alt="image9" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/appsearch.gif" /></p>
+<p><img alt="image8" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/appsearch.gif" /></p>
 </li>
 <li><p class="first">When the chatter is on the side part, the document viewer fills that
 part for side-by-side reading instead of full screen. You can still
 put it on full width preview clicking on the new maximize button.</p>
-<p><img alt="image10" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/document_viewer.gif" /></p>
+<p><img alt="image9" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/document_viewer.gif" /></p>
 </li>
 <li><p class="first">When the user chooses to send a public message the color of the
 composer is different from the one when the message is an internal
 log.</p>
-<p><img alt="image11" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/chatter-colors.png" /></p>
+<p><img alt="image10" src="https://raw.githubusercontent.com/OCA/web/18.0/web_responsive/static/img/chatter-colors.png" /></p>
 </li>
 </ul>
 <p><strong>Table of contents</strong></p>
@@ -438,7 +435,8 @@ <h1 class="title">Web Responsive</h1>
 <li><a class="reference internal" href="#credits" id="toc-entry-4">Credits</a><ul>
 <li><a class="reference internal" href="#authors" id="toc-entry-5">Authors</a></li>
 <li><a class="reference internal" href="#contributors" id="toc-entry-6">Contributors</a></li>
-<li><a class="reference internal" href="#maintainers" id="toc-entry-7">Maintainers</a></li>
+<li><a class="reference internal" href="#other-credits" id="toc-entry-7">Other credits</a></li>
+<li><a class="reference internal" href="#maintainers" id="toc-entry-8">Maintainers</a></li>
 </ul>
 </li>
 </ul>
@@ -496,10 +494,16 @@ <h2><a class="toc-backref" href="#toc-entry-6">Contributors</a></h2>
 <li>David Vidal &lt;<a class="reference external" href="mailto:david.vidal&#64;tecnativa.com">david.vidal&#64;tecnativa.com</a>&gt;</li>
 <li>Taras Shabaranskyi &lt;<a class="reference external" href="mailto:shabaranskij&#64;gmail.com">shabaranskij&#64;gmail.com</a>&gt;</li>
 <li>Angel Patel &lt;<a class="reference external" href="mailto:patelangel1414&#64;gmail.com">patelangel1414&#64;gmail.com</a>&gt;</li>
+<li>Chau Le &lt;<a class="reference external" href="mailto:chaulb&#64;trobz.com">chaulb&#64;trobz.com</a>&gt;</li>
 </ul>
 </div>
+<div class="section" id="other-credits">
+<h2><a class="toc-backref" href="#toc-entry-7">Other credits</a></h2>
+<p>The migration of this module from 17.0 to 18.0 was financially supported
+by Trobz.</p>
+</div>
 <div class="section" id="maintainers">
-<h2><a class="toc-backref" href="#toc-entry-7">Maintainers</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-8">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org">
 <img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" />

web_responsive/static/src/components/apps_menu/apps_menu.esm.js

@@ -1,43 +1,48 @@
-/** @odoo-module **/
 /* Copyright 2018 Tecnativa - Jairo Llopis
  * Copyright 2021 ITerra - Sergey Shebanin
  * Copyright 2023 Onestein - Anjeel Haria
  * Copyright 2023 Taras Shabaranskyi
  * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
 
 import {Component, onWillStart, useState} from "@odoo/owl";
-import {session} from "@web/session";
 import {useBus, useService} from "@web/core/utils/hooks";
 import {AppMenuItem} from "@web_responsive/components/apps_menu_item/apps_menu_item.esm";
 import {AppsMenuSearchBar} from "@web_responsive/components/menu_searchbar/searchbar.esm";
 import {NavBar} from "@web/webclient/navbar/navbar";
 import {WebClient} from "@web/webclient/webclient";
+import {browser} from "@web/core/browser/browser";
 import {patch} from "@web/core/utils/patch";
+import {router} from "@web/core/browser/router";
+import {session} from "@web/session";
 import {useHotkey} from "@web/core/hotkeys/hotkey_hook";
-import {browser} from "@web/core/browser/browser";
+import {user} from "@web/core/user";
+
+/* global document */
+/* global location */
+/* global window */
 
 // Patch WebClient to show AppsMenu instead of default app
 patch(WebClient.prototype, {
     setup() {
         super.setup();
+
         useBus(this.env.bus, "APPS_MENU:STATE_CHANGED", ({detail: state}) => {
             document.body.classList.toggle("o_apps_menu_opened", state);
         });
-        this.user = useService("user");
         onWillStart(async () => {
             const is_redirect_home = await this.orm.searchRead(
                 "res.users",
-                [["id", "=", this.user.userId]],
+                [["id", "=", user.userId]],
                 ["is_redirect_home"]
             );
-            this.env.services.user.updateContext({
+            user.updateContext({
                 is_redirect_to_home: is_redirect_home[0]?.is_redirect_home,
             });
         });
         this.redirect = false;
     },
     _loadDefaultApp() {
-        if (this.env.services.user.context.is_redirect_to_home) {
+        if (user.context.is_redirect_to_home) {
             this.env.bus.trigger("APPS_MENU:STATE_CHANGED", true);
         } else {
             super._loadDefaultApp();
@@ -52,9 +57,9 @@ export class AppsMenu extends Component {
         this.theme = session.apps_menu.theme || "milk";
         this.menuService = useService("menu");
         browser.localStorage.setItem("redirect_menuId", "");
-        if (this.env.services.user.context.is_redirect_to_home) {
-            this.router = useService("router");
-            const menuId = Number(this.router.current.hash.menu_id || 0);
+
+        if (user.context.is_redirect_to_home) {
+            const menuId = Number(router.current.menu_id || 0);
             this.state = useState({open: menuId === 0});
         }
         useBus(this.env.bus, "ACTION_MANAGER:UI-UPDATED", () => {
@@ -75,98 +80,75 @@ export class AppsMenu extends Component {
         const repeatable = {
             allowRepeat: true,
         };
-        useHotkey(
-            "ArrowRight",
-            () => {
-                this._onWindowKeydown("next");
-            },
-            repeatable
-        );
-        useHotkey(
-            "ArrowLeft",
-            () => {
-                this._onWindowKeydown("prev");
-            },
-            repeatable
-        );
-        useHotkey(
-            "ArrowDown",
-            () => {
-                this._onWindowKeydown("next");
-            },
-            repeatable
-        );
-        useHotkey(
-            "ArrowUp",
-            () => {
-                this._onWindowKeydown("prev");
-            },
-            repeatable
-        );
+
+        const keyActions = [
+            {key: "ArrowRight", action: "next"},
+            {key: "ArrowLeft", action: "prev"},
+            {key: "ArrowDown", action: "next"},
+            {key: "ArrowUp", action: "prev"},
+        ];
+
+        keyActions.forEach(({key, action}) => {
+            useHotkey(
+                key,
+                () => {
+                    this._onWindowKeydown(action);
+                },
+                repeatable
+            );
+        });
+
         useHotkey("Escape", () => {
             this.env.bus.trigger("ACTION_MANAGER:UI-UPDATED");
         });
     }
 
     _onWindowKeydown(direction) {
-        const focusableInputElements = document.querySelectorAll(".o-app-menu-item");
+        const focusableInputElements = Array.from(
+            document.querySelectorAll(".o-app-menu-item")
+        );
+        const currentIndex = focusableInputElements.indexOf(document.activeElement);
+
         if (focusableInputElements.length) {
-            const focusable = [...focusableInputElements];
-            const index = focusable.indexOf(document.activeElement);
+            const lastIndex = focusableInputElements.length - 1;
+
             let nextIndex = 0;
-            if (direction === "prev" && index >= 0) {
-                if (index > 0) {
-                    nextIndex = index - 1;
-                } else {
-                    nextIndex = focusable.length - 1;
-                }
-            } else if (direction === "next") {
-                if (index + 1 < focusable.length) {
-                    nextIndex = index + 1;
-                } else {
-                    nextIndex = 0;
-                }
+            if (direction === "next") {
+                nextIndex = currentIndex < lastIndex ? currentIndex + 1 : 0;
+            } else if (direction === "prev") {
+                nextIndex = currentIndex > 0 ? currentIndex - 1 : lastIndex;
             }
+
             focusableInputElements[nextIndex].focus();
         }
     }
 
     onMenuClick() {
-        if (!this.env.services.user.context.is_redirect_to_home) {
-            this.setOpenState(!this.state.open);
-        } else {
-            const redirect_menuId =
-                browser.localStorage.getItem("redirect_menuId") || "";
-            if (!redirect_menuId) {
-                this.setOpenState(true);
-            } else {
-                this.setOpenState(!this.state.open);
-            }
-            const {href, hash} = location;
-            const menuId = this.router.current.hash.menu_id;
-            if (menuId && menuId != redirect_menuId) {
-                console.log(this.router.current.hash.menu_id);
-                browser.localStorage.setItem(
-                    "redirect_menuId",
-                    this.router.current.hash.menu_id
-                );
+        const isRedirect = user.context.is_redirect_to_home;
+        const redirectMenuId = browser.localStorage.getItem("redirect_menuId") || "";
+        const {href, hash} = location;
+
+        if (isRedirect) {
+            const shouldOpenState = !redirectMenuId || !this.state.open;
+            this.setOpenState(shouldOpenState);
+
+            const currentMenuId = router.current.menu_id;
+            if (currentMenuId && currentMenuId !== redirectMenuId) {
+                browser.localStorage.setItem("redirect_menuId", currentMenuId);
             }
 
             if (href.includes(hash)) {
                 window.history.replaceState(null, "", href.replace(hash, ""));
             }
+        } else {
+            this.setOpenState(!this.state.open);
         }
     }
 }
 
-Object.assign(AppsMenu, {
-    template: "web_responsive.AppsMenu",
-    props: {
-        slots: {
-            type: Object,
-            optional: true,
-        },
-    },
-});
+AppsMenu.template = "web_responsive.AppsMenu";
+AppsMenu.props = {
+    slots: {type: Object, optional: true},
+};
 
 Object.assign(NavBar.components, {AppsMenu, AppMenuItem, AppsMenuSearchBar});