From c5188d457fa1d62934b2cce22dc24f07fea40f28 Mon Sep 17 00:00:00 2001 From: trisdoan Date: Tue, 17 Dec 2024 18:01:37 +0700 Subject: [PATCH] [IMP] web_chatter_position: implement feature on controller and add switch button --- web_chatter_position/README.rst | 6 +- web_chatter_position/__manifest__.py | 5 + web_chatter_position/readme/CONTRIBUTORS.rst | 3 + web_chatter_position/readme/DESCRIPTION.rst | 2 +- web_chatter_position/readme/USAGE.rst | 1 + .../static/description/index.html | 24 ++- .../static/src/js/web_chatter_position.esm.js | 165 ------------------ .../src/views/form/form_controller.esm.js | 140 +++++++++++++++ .../static/src/views/form/form_controller.xml | 17 ++ 9 files changed, 188 insertions(+), 175 deletions(-) delete mode 100644 web_chatter_position/static/src/js/web_chatter_position.esm.js create mode 100644 web_chatter_position/static/src/views/form/form_controller.esm.js create mode 100644 web_chatter_position/static/src/views/form/form_controller.xml diff --git a/web_chatter_position/README.rst b/web_chatter_position/README.rst index 79555092a1f0..bcfc7c29069e 100644 --- a/web_chatter_position/README.rst +++ b/web_chatter_position/README.rst @@ -29,7 +29,7 @@ Chatter Position |badge1| |badge2| |badge3| |badge4| |badge5| Configurable chatter position from the user preferences. - +Change Chatter Position on the fly. Supports Both Community & Enterprise Edition. **Table of contents** @@ -42,6 +42,7 @@ Usage #. There's a **Chatter Position** option in **User Preferences**, where you can choose between ``auto``, ``bottom`` and ``sided``. +#. The position can also be changed on the fly using a new button on the top right side of Form Views. Bug Tracker =========== @@ -70,6 +71,9 @@ Contributors * `Camptocamp `_ * Iván Todorovich +* `Trobz ` + + * Tris Doan Maintainers ~~~~~~~~~~~ diff --git a/web_chatter_position/__manifest__.py b/web_chatter_position/__manifest__.py index 4318d9da48cf..eaaeacc874fa 100644 --- a/web_chatter_position/__manifest__.py +++ b/web_chatter_position/__manifest__.py @@ -14,6 +14,11 @@ "assets": { "web.assets_backend": [ "/web_chatter_position/static/src/**/*.js", + ( + "after", + "/web/static/src/views/form/form_controller.xml", + "/web_chatter_position/static/src/views/form/form_controller.xml", + ), ], }, } diff --git a/web_chatter_position/readme/CONTRIBUTORS.rst b/web_chatter_position/readme/CONTRIBUTORS.rst index e0a264ebb7a2..8d3f2f5ec190 100644 --- a/web_chatter_position/readme/CONTRIBUTORS.rst +++ b/web_chatter_position/readme/CONTRIBUTORS.rst @@ -3,3 +3,6 @@ * `Camptocamp `_ * Iván Todorovich +* `Trobz ` + + * Tris Doan diff --git a/web_chatter_position/readme/DESCRIPTION.rst b/web_chatter_position/readme/DESCRIPTION.rst index 9c874e16e322..b05861e2025e 100644 --- a/web_chatter_position/readme/DESCRIPTION.rst +++ b/web_chatter_position/readme/DESCRIPTION.rst @@ -1,3 +1,3 @@ Configurable chatter position from the user preferences. - +Change Chatter Position on the fly. Supports Both Community & Enterprise Edition. diff --git a/web_chatter_position/readme/USAGE.rst b/web_chatter_position/readme/USAGE.rst index dd826549601e..299740a2bc19 100644 --- a/web_chatter_position/readme/USAGE.rst +++ b/web_chatter_position/readme/USAGE.rst @@ -1,2 +1,3 @@ #. There's a **Chatter Position** option in **User Preferences**, where you can choose between ``auto``, ``bottom`` and ``sided``. +#. The position can also be changed on the fly using a new button on the top right side of Form Views. diff --git a/web_chatter_position/static/description/index.html b/web_chatter_position/static/description/index.html index 71e5669fe5bb..8211f769faea 100644 --- a/web_chatter_position/static/description/index.html +++ b/web_chatter_position/static/description/index.html @@ -1,4 +1,3 @@ - @@ -9,10 +8,11 @@ /* :Author: David Goodger (goodger@python.org) -:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $ +:Id: $Id: html4css1.css 9511 2024-01-13 09:50:07Z milde $ :Copyright: This stylesheet has been placed in the public domain. Default cascading style sheet for the HTML output of Docutils. +Despite the name, some widely supported CSS2 features are used. See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to customize this style sheet. @@ -275,7 +275,7 @@ margin-left: 2em ; margin-right: 2em } -pre.code .ln { color: grey; } /* line numbers */ +pre.code .ln { color: gray; } /* line numbers */ pre.code, code { background-color: #eeeeee } pre.code .comment, code .comment { color: #5C6576 } pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold } @@ -301,7 +301,7 @@ span.pre { white-space: pre } -span.problematic { +span.problematic, pre.problematic { color: red } span.section-subtitle { @@ -370,8 +370,9 @@

Chatter Position

!! source digest: sha256:fbb006a9a99fbcf94cbb8823017ff08050ed9294fd3c81929e4a4b2e225ca61b !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->

Beta License: LGPL-3 OCA/web Translate me on Weblate Try me on Runboat

-

Configurable chatter position from the user preferences.

-

Supports Both Community & Enterprise Edition.

+

Configurable chatter position from the user preferences. +Change Chatter Position on the fly. +Supports Both Community & Enterprise Edition.

Table of contents

    @@ -388,7 +389,8 @@

    Chatter Position

    Usage

    #. There’s a Chatter Position option in User Preferences, where you can -choose between auto, bottom and sided.

    +choose between auto, bottom and sided. +#. The position can also be changed on the fly using a new button on the top right side of Form Views.

    Bug Tracker

    @@ -416,12 +418,18 @@

    Contributors

  • Iván Todorovich <ivan.todorovich@camptocamp.com>
+
  • Trobz <https://www.trobz.com> +

    • Maintainers

    This module is maintained by the OCA.

    -Odoo Community Association + +Odoo Community Association +

    OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.

    diff --git a/web_chatter_position/static/src/js/web_chatter_position.esm.js b/web_chatter_position/static/src/js/web_chatter_position.esm.js deleted file mode 100644 index 43425c1d661f..000000000000 --- a/web_chatter_position/static/src/js/web_chatter_position.esm.js +++ /dev/null @@ -1,165 +0,0 @@ -/** @odoo-module **/ -/* - Copyright 2023 Camptocamp SA (https://www.camptocamp.com). - License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl). -*/ - -import {FormCompiler} from "@web/views/form/form_compiler"; -import {FormController} from "@web/views/form/form_controller"; -import {MailFormCompiler} from "@mail/views/form/form_compiler"; -import {append} from "@web/core/utils/xml"; -import {patch} from "@web/core/utils/patch"; - -/** - * So, you've landed here and you have no idea what this is about. Don't worry, you're - * not the only one. Here's a quick summary of what's going on: - * - * In core, the chatter position depends on the size of the screen and wether there is - * an attachment viewer or not. There are 3 possible positions, and for each position a - * different chatter instance is displayed. - * - * So, in fact, we have 3 chatter instances running, and we switch their visibility - * depending on the desired position. - * - * A) Bottom position - * https://github.com/odoo/odoo/blob/2ef010907/addons/mail/static/src/views/form/form_compiler.js#L160 - * Condition: `!this.props.hasAttachmentViewer and uiService.size < ${SIZES.XXL}` - * - * This is the bottom position you would except. However it can only be there until - * XXL screen sizes, because the container is a flexbox and changes from row to - * column display. It's hidden in the presence of an attachment viewer. - * - * B) Bottom In-sheet position - * https://github.com/odoo/odoo/blob/2ef010907/addons/mail/static/src/views/form/form_compiler.js#L181 - * Condition: `this.props.hasAttachmentViewer` - * - * This is the bottom position that's used when there's an attachment viewer in place. - * It's rendered within the form sheet, possibly to by-pass the flexbox issue - * beforementioned. It's only instanciated when there's an attachment viewer. - * - * C) Sided position - * https://github.com/odoo/odoo/blob/2ef010907/addons/mail/static/src/views/form/form_compiler.js#L83 - * Condition: `!hasAttachmentViewer() and uiService.size >= ${SIZES.XXL}` - * - * This is the sided position, hidden in the presence of an attachment viewer. - * It's the better half of `A`. - * - * The patches and overrides you see below are here to alter these conditions to force - * a specific position regardless of the screen size, depending on an user setting. - */ - -patch(MailFormCompiler.prototype, "web_chatter_position", { - /** - * Patch the visibility of the Sided chatter (`C` above). - * - * @override - */ - compile() { - const res = this._super.apply(this, arguments); - const chatterContainerHookXml = res.querySelector( - ".o_FormRenderer_chatterContainer" - ); - if (!chatterContainerHookXml) { - return res; - } - // Don't patch anything if the setting is "auto": this is the core behaviour - if (odoo.web_chatter_position === "auto") { - return res; - } else if (odoo.web_chatter_position === "sided") { - chatterContainerHookXml.setAttribute("t-if", "!hasAttachmentViewer()"); - } else if (odoo.web_chatter_position === "bottom") { - chatterContainerHookXml.setAttribute("t-if", false); - } - return res; - }, -}); - -patch(FormCompiler.prototype, "web_chatter_position", { - /** - * Patch the css classes of the `Form`, to include an extra `h-100` class. - * Without it, the form sheet will not be full height in some situations, - * looking a bit weird. - * - * @override - */ - compileForm() { - const res = this._super.apply(this, arguments); - if (odoo.web_chatter_position === "sided") { - const classes = res.getAttribute("t-attf-class"); - res.setAttribute("t-attf-class", `${classes} h-100`); - } - return res; - }, - /** - * Patch the visibility of bottom chatters (`A` and `B` above). - * `B` may not exist in some situations, so we ensure it does by creating it. - * - * @override - */ - compile(node, params) { - const res = this._super.apply(this, arguments); - const chatterContainerHookXml = res.querySelector( - ".o_FormRenderer_chatterContainer:not(.o-isInFormSheetBg)" - ); - if (!chatterContainerHookXml) { - return res; - } - if (chatterContainerHookXml.parentNode.classList.contains("o_form_sheet")) { - return res; - } - // Don't patch anything if the setting is "auto": this is the core behaviour - if (odoo.web_chatter_position === "auto") { - return res; - // For "sided", we have to remote the bottom chatter - // (except if there is an attachment viewer, as we have to force bottom) - } else if (odoo.web_chatter_position === "sided") { - const formSheetBgXml = res.querySelector(".o_form_sheet_bg"); - if (!formSheetBgXml) { - return res; - } - chatterContainerHookXml.setAttribute("t-if", false); - // For "bottom", we keep the chatter in the form sheet - // (the one used for the attachment viewer case) - // If it's not there, we create it. - } else if (odoo.web_chatter_position === "bottom") { - if (params.hasAttachmentViewerInArch) { - const sheetBgChatterContainerHookXml = res.querySelector( - ".o_FormRenderer_chatterContainer.o-isInFormSheetBg" - ); - sheetBgChatterContainerHookXml.setAttribute("t-if", true); - chatterContainerHookXml.setAttribute("t-if", false); - } else { - const formSheetBgXml = res.querySelector(".o_form_sheet_bg"); - if (!formSheetBgXml) { - return res; - } - const sheetBgChatterContainerHookXml = - chatterContainerHookXml.cloneNode(true); - sheetBgChatterContainerHookXml.classList.add("o-isInFormSheetBg"); - sheetBgChatterContainerHookXml.setAttribute("t-if", true); - append(formSheetBgXml, sheetBgChatterContainerHookXml); - const sheetBgChatterContainerXml = - sheetBgChatterContainerHookXml.querySelector("ChatterContainer"); - sheetBgChatterContainerXml.setAttribute("isInFormSheetBg", "true"); - chatterContainerHookXml.setAttribute("t-if", false); - } - } - return res; - }, -}); - -patch(FormController.prototype, "web_chatter_position", { - /** - * Patch the css classes of the form container, to include an extra `flex-row` class. - * Without it, it'd go for flex columns direction and it won't look good. - * - * @override - */ - get className() { - const result = this._super(); - if (odoo.web_chatter_position === "sided") { - result["flex-row"] = true; - } - return result; - }, -}); diff --git a/web_chatter_position/static/src/views/form/form_controller.esm.js b/web_chatter_position/static/src/views/form/form_controller.esm.js new file mode 100644 index 000000000000..9277e7ce8fdf --- /dev/null +++ b/web_chatter_position/static/src/views/form/form_controller.esm.js @@ -0,0 +1,140 @@ +/** @odoo-module **/ +/* + Copyright 2023 Camptocamp SA (https://www.camptocamp.com). + License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl). +*/ +import {browser} from "@web/core/browser/browser"; + +import {append, combineAttributes} from "@web/core/utils/xml"; +import {FormController} from "@web/views/form/form_controller"; +import {patch} from "@web/core/utils/patch"; +import {onMounted, onPatched, useRef, useState} from "@odoo/owl"; + +/** + * So, you've landed here and you have no idea what this is about. Don't worry, you're + * not the only one. Here's a quick summary of what's going on: + * + * In core, the chatter position depends on the size of the screen and wether there is + * an attachment viewer or not. There are 3 possible positions, and for each position a + * different chatter instance is displayed. + * + * So, in fact, we have 3 chatter instances running, and we switch their visibility + * depending on the desired position. + * + * A) Bottom position + * https://github.com/odoo/odoo/blob/2ef010907/addons/mail/static/src/views/form/form_compiler.js#L160 + * Condition: `!this.props.hasAttachmentViewer and uiService.size < ${SIZES.XXL}` + * + * This is the bottom position you would except. However it can only be there until + * XXL screen sizes, because the container is a flexbox and changes from row to + * column display. It's hidden in the presence of an attachment viewer. + * + * B) Bottom In-sheet position + * https://github.com/odoo/odoo/blob/2ef010907/addons/mail/static/src/views/form/form_compiler.js#L181 + * Condition: `this.props.hasAttachmentViewer` + * + * This is the bottom position that's used when there's an attachment viewer in place. + * It's rendered within the form sheet, possibly to by-pass the flexbox issue + * beforementioned. It's only instanciated when there's an attachment viewer. + * + * C) Sided position + * https://github.com/odoo/odoo/blob/2ef010907/addons/mail/static/src/views/form/form_compiler.js#L83 + * Condition: `!hasAttachmentViewer() and uiService.size >= ${SIZES.XXL}` + * + * This is the sided position, hidden in the presence of an attachment viewer. + * It's the better half of `A`. + * + * The patches and overrides you see below are here to alter these conditions to force + * a specific position regardless of the screen size, depending on an user setting. + + */ + +patch(FormController.prototype, "web_chatter_position", { + setup() { + this._super(); + this.state = useState({ + ...this.state, + currentPosition: odoo.web_chatter_position, + }); + + this.rootRef = useRef("root"); + + onMounted(() => { + this.moveChatter(); + }); + + browser.addEventListener("resize", () => { + // Quick hack to avoid DOMException + // Node.insertBefore: Child to insert before is not a child of this node + if (this.state.currentPosition === "bottom") { + this._moveChatter(this.rootRef.el); + // W/o it, cannot see content of chatter + this.rootRef.el.style.overflow = "auto"; + } + }); + + onPatched(() => { + // After resizing, move Chatter back to bottom + const fullSize = this.rootRef.el.classList.contains("o_xxl_form_view"); + if (this.state.currentPosition === "bottom" && fullSize) { + const formSheetBg = this.rootRef.el.querySelector(".o_form_sheet_bg"); + this._moveChatter(formSheetBg); + } + }); + }, + + //* * + // * Change position in-place: either Bottom or Sided + // */ + onClickChangePosition() { + const newPosition = + this.state.currentPosition === "bottom" ? "sided" : "bottom"; + this.state.currentPosition = newPosition; + this.moveChatter(); + }, + + moveChatter() { + if (this.hasAttachmentViewerInArch || this.state.currentPosition === "auto") { + return; + } + const rootEl = this.rootRef.el; + if (!rootEl) { + return; + } + const formSheetBg = rootEl.querySelector(".o_form_sheet_bg"); + if (!formSheetBg) return; + + if (this.state.currentPosition === "bottom") { + this._moveChatter(formSheetBg); + } else if (this.state.currentPosition === "sided") { + this._moveChatter(rootEl); + } + }, + + _moveChatter(target) { + const currentChatter = this.rootRef.el.querySelector( + "div.o_FormRenderer_chatterContainer.oe_chatter" + ); + if (!currentChatter) { + return; + } + append(target, currentChatter); + + if (this.state.currentPosition === "bottom") { + currentChatter.classList.replace("o-aside", "o-isInFormSheetBg"); + const chatterContainer = currentChatter.querySelector( + "div.o_ChatterContainer" + ); + const hasClassOIsInFormSheetBg = + chatterContainer.classList.contains("o-isInFormSheetBg"); + const hasClassMxAuto = chatterContainer.classList.contains("mx-auto"); + if (!hasClassOIsInFormSheetBg && !hasClassMxAuto) + combineAttributes(chatterContainer, "class", [ + "o-isInFormSheetBg", + "mx-auto", + ]); + } else { + currentChatter.classList.replace("o-isInFormSheetBg", "o-aside"); + } + }, +}); diff --git a/web_chatter_position/static/src/views/form/form_controller.xml b/web_chatter_position/static/src/views/form/form_controller.xml new file mode 100644 index 000000000000..8773545d2577 --- /dev/null +++ b/web_chatter_position/static/src/views/form/form_controller.xml @@ -0,0 +1,17 @@ + + + + + + + +