mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
[MIG] web_chatter_position: Migration to 16.0
This commit is contained in:
Ivàn Todorovich
@@ -1,48 +0,0 @@
|
||||
// Copyright 2022 Hynsys Technologies
|
||||
// License LGPL - 3.0 or later(http://www.gnu.org/licenses/lgpl).
|
||||
|
||||
odoo.define("web_chatter_position.ChatterPositionFormController", function (require) {
|
||||
"use strict";
|
||||
|
||||
var config = require("web.config");
|
||||
var FormController = require("web.FormController");
|
||||
var FormRenderer = require("web.FormRenderer");
|
||||
|
||||
var ChatterPositionFormController = FormController.include({
|
||||
renderButtons: function () {
|
||||
this._super.apply(this, arguments);
|
||||
if (this.$buttons) {
|
||||
this.$buttons.on(
|
||||
"click",
|
||||
".o_chatter_position_button",
|
||||
this._onChatterPosition.bind(this)
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
_onChatterPosition: function () {
|
||||
if (this.$el.offsetParent().hasClass("o_chatter_position_bottom")) {
|
||||
this.$el
|
||||
.offsetParent()
|
||||
.attr("class", "o_web_client o_chatter_position_sided");
|
||||
} else if (this.$el.offsetParent().hasClass("o_chatter_position_sided")) {
|
||||
this.$el
|
||||
.offsetParent()
|
||||
.attr("class", "o_web_client o_chatter_position_bottom");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
FormRenderer.include({
|
||||
_applyFormSizeClass: function () {
|
||||
const formEl = this.$el[0];
|
||||
if (config.device.size_class <= config.device.SIZES.XS) {
|
||||
formEl.classList.add("o_xxs_form_view");
|
||||
} else {
|
||||
formEl.classList.remove("o_xxs_form_view");
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
return ChatterPositionFormController;
|
||||
});
|
||||
158
web_chatter_position/static/src/js/web_chatter_position.esm.js
Normal file
158
web_chatter_position/static/src/js/web_chatter_position.esm.js
Normal file
@@ -0,0 +1,158 @@
|
||||
/** @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") {
|
||||
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");
|
||||
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;
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user