forked from Techsystech/web
[IMP]web_field_tooltip: refactoring for v17
manu
parent
e74989d55f
commit
4e592d7339
|
|
@ -29,7 +29,7 @@ Web Field Tooltip
|
|||
|badge1| |badge2| |badge3| |badge4| |badge5|
|
||||
|
||||
This module gives the possibility to add tooltips next to fields labels
|
||||
on any field of a model. The tooltip displays an html field.
|
||||
on any field of a model.
|
||||
|
||||
**Table of contents**
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ To use this module, you need to:
|
|||
- You can also go directly on the form view of a model on which you
|
||||
want to add a tooltip and use the Manage tooltips Action to add a new
|
||||
tooltip, or edit or delete existing tooltips for this model.
|
||||
- For manager users, they can decide to display an helper to add a
|
||||
- For manager users, they can decide to display a helper to add a
|
||||
tooltip on a field as some fields are not displayed with a label.
|
||||
|
||||
Known issues / Roadmap
|
||||
|
|
|
|||
|
|
@ -19,14 +19,9 @@
|
|||
],
|
||||
"assets": {
|
||||
"web.assets_backend": [
|
||||
"/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.esm.js",
|
||||
"/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.scss",
|
||||
"/web_field_tooltip/static/src/components/field_tooltip/field_tooltip.xml",
|
||||
"/web_field_tooltip/static/src/views/form/form_controller.esm.js",
|
||||
"/web_field_tooltip/static/src/views/form/form_label.esm.js",
|
||||
"/web_field_tooltip/static/src/views/form/form_label.xml",
|
||||
"/web_field_tooltip/static/src/views/list/list_renderer.esm.js",
|
||||
"/web_field_tooltip/static/src/views/list/list_renderer.xml",
|
||||
],
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
# Copyright 2024 Manuel Regidor <manuel.regidor@sygel.es>
|
||||
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
|
||||
|
||||
from odoo import SUPERUSER_ID, api
|
||||
from odoo.tools import html2plaintext
|
||||
|
||||
|
||||
def migrate(cr, version):
|
||||
env = api.Environment(cr, SUPERUSER_ID, {})
|
||||
tooltips = env["ir.model.fields.tooltip"].search([])
|
||||
for tooltip in tooltips:
|
||||
tooltip.write({"tooltip_text": html2plaintext(tooltip.tooltip_text)})
|
||||
|
|
@ -34,7 +34,7 @@ class IrModelFieldsTooltip(models.Model):
|
|||
help="Set active to false to hide the Tooltip without removing it.",
|
||||
)
|
||||
field_name = fields.Char(related="field_id.name")
|
||||
tooltip_text = fields.Html(required=True)
|
||||
tooltip_text = fields.Text(required=True, translate=True)
|
||||
|
||||
@api.model
|
||||
def default_get(self, fields_list):
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
This module gives the possibility to add tooltips next to fields labels
|
||||
on any field of a model. The tooltip displays an html field.
|
||||
on any field of a model.
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@ To use this module, you need to:
|
|||
- You can also go directly on the form view of a model on which you want
|
||||
to add a tooltip and use the Manage tooltips Action to add a new
|
||||
tooltip, or edit or delete existing tooltips for this model.
|
||||
- For manager users, they can decide to display an helper to add a
|
||||
- For manager users, they can decide to display a helper to add a
|
||||
tooltip on a field as some fields are not displayed with a label.
|
||||
|
|
|
|||
|
|
@ -370,7 +370,7 @@ ul.auto-toc {
|
|||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
||||
<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/17.0/web_field_tooltip"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-17-0/web-17-0-web_field_tooltip"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=17.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
|
||||
<p>This module gives the possibility to add tooltips next to fields labels
|
||||
on any field of a model. The tooltip displays an html field.</p>
|
||||
on any field of a model.</p>
|
||||
<p><strong>Table of contents</strong></p>
|
||||
<div class="contents local topic" id="contents">
|
||||
<ul class="simple">
|
||||
|
|
@ -396,7 +396,7 @@ field you selected, the tooltip appear.</li>
|
|||
<li>You can also go directly on the form view of a model on which you
|
||||
want to add a tooltip and use the Manage tooltips Action to add a new
|
||||
tooltip, or edit or delete existing tooltips for this model.</li>
|
||||
<li>For manager users, they can decide to display an helper to add a
|
||||
<li>For manager users, they can decide to display a helper to add a
|
||||
tooltip on a field as some fields are not displayed with a label.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,85 +0,0 @@
|
|||
/** @odoo-module */
|
||||
|
||||
import {Component, markup} from "@odoo/owl";
|
||||
|
||||
import {FormViewDialog} from "@web/views/view_dialogs/form_view_dialog";
|
||||
import {session} from "@web/session";
|
||||
import {useService} from "@web/core/utils/hooks";
|
||||
|
||||
export class FieldTooltipPopover extends Component {}
|
||||
FieldTooltipPopover.template = "web_field_tooltip.FieldTooltipPopover";
|
||||
|
||||
export class FieldTooltip extends Component {
|
||||
setup() {
|
||||
this.popover = useService("popover");
|
||||
this.tooltipPopover = null;
|
||||
this.hasFieldTooltip = this.props.hasFieldTooltip;
|
||||
this.canManageTooltip = session.can_manage_tooltips;
|
||||
this.showAddHelper =
|
||||
session.can_manage_tooltips && session.tooltip_show_add_helper;
|
||||
this.fieldTooltip = this.props.field.field_tooltip;
|
||||
|
||||
if (session.can_manage_tooltips) {
|
||||
this.dialogService = useService("dialog");
|
||||
}
|
||||
}
|
||||
|
||||
get tooltipInfo() {
|
||||
const props = this.props;
|
||||
return {
|
||||
title: props.field.string,
|
||||
help: markup(this.tooltipText),
|
||||
};
|
||||
}
|
||||
|
||||
get tooltipText() {
|
||||
return this.fieldTooltip.tooltip_text;
|
||||
}
|
||||
|
||||
onClickTooltip(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!this.canManageTooltip) {
|
||||
return;
|
||||
}
|
||||
const tooltipId = (this.fieldTooltip && this.fieldTooltip.id) || false;
|
||||
this.dialogService.add(FormViewDialog, {
|
||||
resModel: "ir.model.fields.tooltip",
|
||||
resId: tooltipId,
|
||||
context: {
|
||||
default_model: this.props.resModel,
|
||||
default_field_name: this.props.fieldName,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
onMouseEnter(ev) {
|
||||
if (!this.hasFieldTooltip) {
|
||||
return;
|
||||
}
|
||||
this.closeTooltip();
|
||||
this.tooltipPopover = this.popover.add(
|
||||
ev.currentTarget,
|
||||
FieldTooltipPopover,
|
||||
this.tooltipInfo,
|
||||
{
|
||||
closeOnClickAway: true,
|
||||
position: "top",
|
||||
title: "title",
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
onMouseLeave() {
|
||||
this.closeTooltip();
|
||||
}
|
||||
|
||||
closeTooltip() {
|
||||
if (this.tooltipPopover) {
|
||||
this.tooltipPopover();
|
||||
this.tooltipPopover = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
FieldTooltip.template = "web_field_tooltip.FieldTooltip";
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
sup.field-tooltip {
|
||||
padding-top: 6px;
|
||||
.tooltip-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
margin-left: 0px;
|
||||
|
||||
&[has-tooltip] {
|
||||
color: #666666 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-div {
|
||||
min-width: 100px;
|
||||
min-height: 30px;
|
||||
|
||||
> * {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
font-weight: bold;
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates>
|
||||
|
||||
<t t-name="web_field_tooltip.FieldTooltip" owl="1">
|
||||
<sup
|
||||
class="field-tooltip"
|
||||
t-on-click="(ev) => this.onClickTooltip(ev)"
|
||||
t-on-mouseenter="(ev) => this.onMouseEnter(ev)"
|
||||
t-on-mouseleave="(ev) => this.onMouseLeave(ev)"
|
||||
>
|
||||
<a
|
||||
class="fa fa fa-question-circle tooltip-icon text-info"
|
||||
t-att-has-tooltip="props.hasFieldTooltip"
|
||||
/>
|
||||
</sup>
|
||||
</t>
|
||||
|
||||
<t t-name="web_field_tooltip.FieldTooltipPopover" owl="1">
|
||||
<div class="popup-div">
|
||||
<div class="popover-title">
|
||||
<span t-esc="props.title" />
|
||||
</div>
|
||||
<p class="popover-content">
|
||||
<t t-out="props.help or ''" />
|
||||
</p>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
|
|
@ -1,13 +1,20 @@
|
|||
/** @odoo-module **/
|
||||
|
||||
import {FieldTooltip} from "../../components/field_tooltip/field_tooltip.esm";
|
||||
|
||||
import {FormLabel} from "@web/views/form/form_label";
|
||||
import {FormViewDialog} from "@web/views/view_dialogs/form_view_dialog";
|
||||
import {patch} from "@web/core/utils/patch";
|
||||
|
||||
import {session} from "@web/session";
|
||||
import {useService} from "@web/core/utils/hooks";
|
||||
|
||||
const web_field_tooltip = {
|
||||
setup() {
|
||||
super.setup();
|
||||
this.canManageTooltip = session.can_manage_tooltips;
|
||||
if (session.can_manage_tooltips) {
|
||||
this.dialogService = useService("dialog");
|
||||
}
|
||||
},
|
||||
|
||||
get showTooltipAddHelper() {
|
||||
return session.tooltip_show_add_helper;
|
||||
},
|
||||
|
|
@ -17,20 +24,65 @@ const web_field_tooltip = {
|
|||
return Boolean(props.record.fields[props.fieldName].field_tooltip);
|
||||
},
|
||||
|
||||
get getFieldTooltipProps() {
|
||||
const props = this.props;
|
||||
const record = props.record;
|
||||
return {
|
||||
hasFieldTooltip: this.hasFieldTooltip,
|
||||
resModel: record.resModel,
|
||||
field: record.fields[props.fieldName],
|
||||
fieldName: props.fieldName,
|
||||
};
|
||||
get tooltipHelp() {
|
||||
let help = super.tooltipHelp;
|
||||
const field = this.props.record.fields[this.props.fieldName];
|
||||
if (field.field_tooltip) {
|
||||
help = [help, field.field_tooltip.tooltip_text].filter((x) => x).join("\n");
|
||||
}
|
||||
return help;
|
||||
},
|
||||
|
||||
get hasTooltip() {
|
||||
let has_too_tip = super.hasTooltip;
|
||||
if (this.showTooltipAddHelper && !has_too_tip) {
|
||||
has_too_tip = true;
|
||||
}
|
||||
return has_too_tip;
|
||||
},
|
||||
|
||||
get tooltipInfo() {
|
||||
if (odoo.debug) {
|
||||
if (this.hasFieldTooltip) {
|
||||
const field = this.props.record.fields[this.props.fieldName];
|
||||
if (this.props.fieldInfo.help) {
|
||||
this.props.fieldInfo.help = [
|
||||
this.props.fieldInfo.help,
|
||||
field.field_tooltip.tooltip_text,
|
||||
]
|
||||
.filter((x) => x)
|
||||
.join("\n");
|
||||
} else {
|
||||
this.props.record.fields[this.props.fieldName].help = [
|
||||
field.help,
|
||||
field.field_tooltip.tooltip_text,
|
||||
]
|
||||
.filter((x) => x)
|
||||
.join("\n");
|
||||
}
|
||||
}
|
||||
}
|
||||
return super.tooltipInfo;
|
||||
},
|
||||
|
||||
onClickTooltip(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
if (!this.canManageTooltip) {
|
||||
return;
|
||||
}
|
||||
const field = this.props.record.fields[this.props.fieldName];
|
||||
const fieldTooltip = field.field_tooltip;
|
||||
const tooltipId = (fieldTooltip && fieldTooltip.id) || false;
|
||||
this.dialogService.add(FormViewDialog, {
|
||||
resModel: "ir.model.fields.tooltip",
|
||||
resId: tooltipId,
|
||||
context: {
|
||||
default_model: this.props.record.resModel,
|
||||
default_field_name: field.name,
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
patch(FormLabel.prototype, web_field_tooltip);
|
||||
|
||||
FormLabel.components = Object.assign({}, FormLabel.components, {
|
||||
FieldTooltip,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,10 +7,8 @@
|
|||
t-inherit-mode="extension"
|
||||
owl="1"
|
||||
>
|
||||
<xpath expr="//sup" position="before">
|
||||
<t t-if="hasFieldTooltip or showTooltipAddHelper">
|
||||
<FieldTooltip t-props="getFieldTooltipProps" />
|
||||
</t>
|
||||
<xpath expr="//sup" position="attributes">
|
||||
<attribute name="t-on-click">(ev) => this.onClickTooltip(ev)</attribute>
|
||||
</xpath>
|
||||
</t>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
/** @odoo-module **/
|
||||
|
||||
import {FieldTooltip} from "../../components/field_tooltip/field_tooltip.esm";
|
||||
|
||||
import {ListRenderer} from "@web/views/list/list_renderer";
|
||||
import {patch} from "@web/core/utils/patch";
|
||||
|
||||
import {session} from "@web/session";
|
||||
|
||||
const web_field_tooltip = {
|
||||
showTooltipAddHelper() {
|
||||
return session.tooltip_show_add_helper;
|
||||
},
|
||||
|
||||
hasFieldTooltip(column) {
|
||||
const fieldName = column.name;
|
||||
const fields = this.props.list.fields;
|
||||
return Boolean(fields[fieldName].field_tooltip);
|
||||
},
|
||||
|
||||
getFieldTooltipProps(column) {
|
||||
const props = this.props;
|
||||
const fieldName = column.name;
|
||||
const fields = props.list.fields;
|
||||
return {
|
||||
hasFieldTooltip: this.hasFieldTooltip(column),
|
||||
resModel: props.list.resModel,
|
||||
field: fields[fieldName],
|
||||
fieldName: fieldName,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
patch(ListRenderer.prototype, web_field_tooltip);
|
||||
|
||||
ListRenderer.components = Object.assign({}, ListRenderer.components, {
|
||||
FieldTooltip,
|
||||
});
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t
|
||||
t-name="web_field_tooltip.ListRenderer"
|
||||
t-inherit="web.ListRenderer"
|
||||
t-inherit-mode="extension"
|
||||
owl="1"
|
||||
>
|
||||
<xpath
|
||||
expr="//t[@t-foreach='state.columns']//span[@t-esc='column.label']"
|
||||
position="after"
|
||||
>
|
||||
<div class="d-block min-w-0 text-truncate flex-grow-1">
|
||||
<t t-if="hasFieldTooltip(column) or showTooltipAddHelper()">
|
||||
<FieldTooltip t-props="getFieldTooltipProps(column)" />
|
||||
</t>
|
||||
</div>
|
||||
</xpath>
|
||||
<xpath
|
||||
expr="//t[@t-foreach='state.columns']//span[@t-esc='column.label']"
|
||||
position="attributes"
|
||||
>
|
||||
<attribute name="class">d-block min-w-0 text-truncate</attribute>
|
||||
</xpath>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
Loading…
Reference in New Issue