mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
[ADD] web_help
[FIX] web_help: Run pre-commit [FIX] web_help: Run pre-commit [FIX] web_help: Run pre-commit [FIX] web_help: Run pre-commit [IMP] Easy changeable template and buttons texts, more demo, fixed readme. [IMP] Easy changeable template and buttons texts, more demo, fixed readme. [IMP] Easy changeable template and buttons texts, more demo, fixed readme. [FIX] Grammar
This commit is contained in:
tarteo
@@ -0,0 +1,28 @@
|
||||
/** @odoo-module **/
|
||||
import LegacyControlPanel from "web.ControlPanel";
|
||||
import {ControlPanel} from "@web/search/control_panel/control_panel";
|
||||
import {findTrip} from "@web_help/helpers.esm";
|
||||
import {Component, useState} from "@odoo/owl";
|
||||
import {ActionDialog} from "@web/webclient/actions/action_dialog";
|
||||
|
||||
export class HelpButton extends Component {
|
||||
setup() {
|
||||
const foundTrip = findTrip(this.props.resModel, this.props.viewType);
|
||||
this.state = useState({
|
||||
TripClass: foundTrip,
|
||||
});
|
||||
}
|
||||
|
||||
onClick() {
|
||||
const TripClass = this.state.TripClass;
|
||||
const trip = new TripClass(this.env);
|
||||
trip.setup();
|
||||
trip.start();
|
||||
}
|
||||
}
|
||||
|
||||
HelpButton.template = "web_help.HelpButton";
|
||||
|
||||
Object.assign(ControlPanel.components, {HelpButton});
|
||||
Object.assign(LegacyControlPanel.components, {HelpButton});
|
||||
Object.assign(ActionDialog.components, {HelpButton});
|
||||
43
web_help/static/src/components/help_button/help_button.xml
Normal file
43
web_help/static/src/components/help_button/help_button.xml
Normal file
@@ -0,0 +1,43 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates>
|
||||
<t t-name="web_help.HelpButton" owl="1">
|
||||
<button
|
||||
class="btn ml-2 js_web_help_btn"
|
||||
t-att-class="props.btnClass || 'btn-secondary'"
|
||||
t-on-click="onClick"
|
||||
t-if="state.TripClass"
|
||||
>
|
||||
<i class="fa fa-question" />
|
||||
</button>
|
||||
</t>
|
||||
<t t-inherit="web.ControlPanel.Regular" t-inherit-mode="extension">
|
||||
<xpath expr="//div[hasclass('o_cp_bottom')]" t-operation="inside">
|
||||
<nav class="btn-group">
|
||||
<HelpButton
|
||||
resModel="env.searchModel.resModel"
|
||||
viewType="env.config.viewType"
|
||||
/>
|
||||
</nav>
|
||||
</xpath>
|
||||
</t>
|
||||
<t t-inherit="web.ControlPanel.Small" t-inherit-mode="extension">
|
||||
<xpath expr="//div[hasclass('o_cp_bottom')]" t-operation="inside">
|
||||
<nav class="btn-group">
|
||||
<HelpButton
|
||||
resModel="env.searchModel.resModel"
|
||||
viewType="env.config.viewType"
|
||||
/>
|
||||
</nav>
|
||||
</xpath>
|
||||
</t>
|
||||
|
||||
<t t-inherit="web.ActionDialog.header" t-inherit-mode="extension">
|
||||
<xpath expr="//h4[hasclass('modal-title')]" t-operation="after">
|
||||
<HelpButton
|
||||
resModel="props.actionProps.resModel"
|
||||
viewType="props.actionProps.type"
|
||||
btnClass="'btn-link p-1'"
|
||||
/>
|
||||
</xpath>
|
||||
</t>
|
||||
</templates>
|
||||
131
web_help/static/src/components/highlighter/highlighter.esm.js
Normal file
131
web_help/static/src/components/highlighter/highlighter.esm.js
Normal file
@@ -0,0 +1,131 @@
|
||||
/** @odoo-module **/
|
||||
import {Component, EventBus, useRef, useState} from "@odoo/owl";
|
||||
import {registry} from "@web/core/registry";
|
||||
|
||||
export class Highlighter extends Component {
|
||||
setup() {
|
||||
this.state = useState({visible: false});
|
||||
this.bus = this.props.bus;
|
||||
this.bus.on("hide", this, () => this.hide());
|
||||
this.bus.on("highlight", this, (options) => this.highlight(options));
|
||||
this.highlightRef = useRef("highlightRef");
|
||||
this.overlayRef = useRef("overlay");
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.state.visible = false;
|
||||
this.resetAnimation();
|
||||
}
|
||||
|
||||
_getBoundsOfElement($el) {
|
||||
const bounds = {
|
||||
x: Number.MAX_SAFE_INTEGER,
|
||||
y: Number.MAX_SAFE_INTEGER,
|
||||
};
|
||||
|
||||
let xEnd = 0,
|
||||
yEnd = 0;
|
||||
|
||||
$el.filter(":visible").each(function () {
|
||||
const elementBounds = this.getBoundingClientRect();
|
||||
if (elementBounds.x < bounds.x) {
|
||||
bounds.x = elementBounds.x;
|
||||
}
|
||||
if (elementBounds.y < bounds.y) {
|
||||
bounds.y = elementBounds.y;
|
||||
}
|
||||
if (xEnd < elementBounds.x + elementBounds.width) {
|
||||
xEnd = elementBounds.x + elementBounds.width;
|
||||
}
|
||||
if (yEnd < elementBounds.y + elementBounds.height) {
|
||||
yEnd = elementBounds.y + elementBounds.height;
|
||||
}
|
||||
});
|
||||
|
||||
bounds.width = xEnd - bounds.x;
|
||||
bounds.height = yEnd - bounds.y;
|
||||
return bounds;
|
||||
}
|
||||
|
||||
highlight({selector, content, animate = 250, padding = 10}) {
|
||||
const selection = $(selector);
|
||||
|
||||
if (!selection.length) {
|
||||
return console.error("Element not found.", selector);
|
||||
}
|
||||
const bounds = this._getBoundsOfElement(selection);
|
||||
this.state.visible = true;
|
||||
this.animate(content, bounds, animate, padding);
|
||||
}
|
||||
|
||||
animate(content, bounds, animate = 250, padding = 10) {
|
||||
const $el = $(this.highlightRef.el);
|
||||
|
||||
$el.popover("dispose");
|
||||
$el.animate(
|
||||
{
|
||||
top: _.str.sprintf("%spx", Math.floor(bounds.y) - padding),
|
||||
left: _.str.sprintf("%spx", Math.floor(bounds.x) - padding),
|
||||
width: _.str.sprintf("%spx", Math.floor(bounds.width) + padding * 2),
|
||||
height: _.str.sprintf("%spx", Math.floor(bounds.height) + padding * 2),
|
||||
},
|
||||
animate ? animate : 0,
|
||||
function () {
|
||||
$el.popover(
|
||||
_.extend(this._getPopoverOptions(), {
|
||||
content: content,
|
||||
})
|
||||
).popover("show");
|
||||
}.bind(this)
|
||||
);
|
||||
}
|
||||
|
||||
_getPopoverOptions() {
|
||||
return {
|
||||
container: $(this.overlayRef.el),
|
||||
placement: "auto",
|
||||
html: true,
|
||||
trigger: "manual",
|
||||
boundary: "viewport",
|
||||
sanitize: false,
|
||||
template:
|
||||
'<div class="popover" role="tooltip"><div class="popover-body"></div></div>',
|
||||
};
|
||||
}
|
||||
|
||||
resetAnimation() {
|
||||
const $el = $(this.highlightRef.el);
|
||||
$el.popover("dispose");
|
||||
$el.css({
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
Highlighter.template = "web_help.Highlighter";
|
||||
|
||||
export const highlighterService = {
|
||||
start() {
|
||||
const bus = new EventBus();
|
||||
|
||||
registry.category("main_components").add("Highlighter", {
|
||||
Component: Highlighter,
|
||||
props: {bus},
|
||||
});
|
||||
|
||||
return {
|
||||
hide: () => bus.trigger("hide"),
|
||||
highlight: (selector, content, animate = 250, padding = 10) =>
|
||||
bus.trigger("highlight", {
|
||||
selector: selector,
|
||||
content: content,
|
||||
animate: animate,
|
||||
padding: padding,
|
||||
}),
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
registry.category("services").add("highlighter", highlighterService);
|
||||
23
web_help/static/src/components/highlighter/highlighter.scss
Normal file
23
web_help/static/src/components/highlighter/highlighter.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
.web_help_overlay {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
z-index: 1151;
|
||||
|
||||
.web_help_highlight {
|
||||
position: absolute;
|
||||
outline: 1000vw solid rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.popover {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
.popover-body {
|
||||
color: #fff;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
web_help/static/src/components/highlighter/highlighter.xml
Normal file
15
web_help/static/src/components/highlighter/highlighter.xml
Normal file
@@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates>
|
||||
|
||||
<t t-name="web_help.Highlighter" owl="1">
|
||||
<div class="web_help_highlighter">
|
||||
<div
|
||||
class="web_help_overlay"
|
||||
t-att-class="{'d-none': !state.visible}"
|
||||
t-ref="overlay"
|
||||
>
|
||||
<div class="web_help_highlight" t-ref="highlightRef" />
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
Reference in New Issue
Block a user