mirror of
https://github.com/bringout/oca-technical.git
synced 2026-04-18 15:52:03 +02:00
Initial commit: OCA Technical packages (595 packages)
This commit is contained in:
Ernad Husremovic
commit
2cc02aac6e
24950 changed files with 2318079 additions and 0 deletions
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.2 KiB |
|
|
@ -0,0 +1,454 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
|
||||
<title>Help Framework</title>
|
||||
<style type="text/css">
|
||||
|
||||
/*
|
||||
:Author: David Goodger (goodger@python.org)
|
||||
:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
|
||||
:Copyright: This stylesheet has been placed in the public domain.
|
||||
|
||||
Default cascading style sheet for the HTML output of Docutils.
|
||||
|
||||
See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
|
||||
customize this style sheet.
|
||||
*/
|
||||
|
||||
/* used to remove borders from tables and images */
|
||||
.borderless, table.borderless td, table.borderless th {
|
||||
border: 0 }
|
||||
|
||||
table.borderless td, table.borderless th {
|
||||
/* Override padding for "table.docutils td" with "! important".
|
||||
The right padding separates the table cells. */
|
||||
padding: 0 0.5em 0 0 ! important }
|
||||
|
||||
.first {
|
||||
/* Override more specific margin styles with "! important". */
|
||||
margin-top: 0 ! important }
|
||||
|
||||
.last, .with-subtitle {
|
||||
margin-bottom: 0 ! important }
|
||||
|
||||
.hidden {
|
||||
display: none }
|
||||
|
||||
.subscript {
|
||||
vertical-align: sub;
|
||||
font-size: smaller }
|
||||
|
||||
.superscript {
|
||||
vertical-align: super;
|
||||
font-size: smaller }
|
||||
|
||||
a.toc-backref {
|
||||
text-decoration: none ;
|
||||
color: black }
|
||||
|
||||
blockquote.epigraph {
|
||||
margin: 2em 5em ; }
|
||||
|
||||
dl.docutils dd {
|
||||
margin-bottom: 0.5em }
|
||||
|
||||
object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Uncomment (and remove this text!) to get bold-faced definition list terms
|
||||
dl.docutils dt {
|
||||
font-weight: bold }
|
||||
*/
|
||||
|
||||
div.abstract {
|
||||
margin: 2em 5em }
|
||||
|
||||
div.abstract p.topic-title {
|
||||
font-weight: bold ;
|
||||
text-align: center }
|
||||
|
||||
div.admonition, div.attention, div.caution, div.danger, div.error,
|
||||
div.hint, div.important, div.note, div.tip, div.warning {
|
||||
margin: 2em ;
|
||||
border: medium outset ;
|
||||
padding: 1em }
|
||||
|
||||
div.admonition p.admonition-title, div.hint p.admonition-title,
|
||||
div.important p.admonition-title, div.note p.admonition-title,
|
||||
div.tip p.admonition-title {
|
||||
font-weight: bold ;
|
||||
font-family: sans-serif }
|
||||
|
||||
div.attention p.admonition-title, div.caution p.admonition-title,
|
||||
div.danger p.admonition-title, div.error p.admonition-title,
|
||||
div.warning p.admonition-title, .code .error {
|
||||
color: red ;
|
||||
font-weight: bold ;
|
||||
font-family: sans-serif }
|
||||
|
||||
/* Uncomment (and remove this text!) to get reduced vertical space in
|
||||
compound paragraphs.
|
||||
div.compound .compound-first, div.compound .compound-middle {
|
||||
margin-bottom: 0.5em }
|
||||
|
||||
div.compound .compound-last, div.compound .compound-middle {
|
||||
margin-top: 0.5em }
|
||||
*/
|
||||
|
||||
div.dedication {
|
||||
margin: 2em 5em ;
|
||||
text-align: center ;
|
||||
font-style: italic }
|
||||
|
||||
div.dedication p.topic-title {
|
||||
font-weight: bold ;
|
||||
font-style: normal }
|
||||
|
||||
div.figure {
|
||||
margin-left: 2em ;
|
||||
margin-right: 2em }
|
||||
|
||||
div.footer, div.header {
|
||||
clear: both;
|
||||
font-size: smaller }
|
||||
|
||||
div.line-block {
|
||||
display: block ;
|
||||
margin-top: 1em ;
|
||||
margin-bottom: 1em }
|
||||
|
||||
div.line-block div.line-block {
|
||||
margin-top: 0 ;
|
||||
margin-bottom: 0 ;
|
||||
margin-left: 1.5em }
|
||||
|
||||
div.sidebar {
|
||||
margin: 0 0 0.5em 1em ;
|
||||
border: medium outset ;
|
||||
padding: 1em ;
|
||||
background-color: #ffffee ;
|
||||
width: 40% ;
|
||||
float: right ;
|
||||
clear: right }
|
||||
|
||||
div.sidebar p.rubric {
|
||||
font-family: sans-serif ;
|
||||
font-size: medium }
|
||||
|
||||
div.system-messages {
|
||||
margin: 5em }
|
||||
|
||||
div.system-messages h1 {
|
||||
color: red }
|
||||
|
||||
div.system-message {
|
||||
border: medium outset ;
|
||||
padding: 1em }
|
||||
|
||||
div.system-message p.system-message-title {
|
||||
color: red ;
|
||||
font-weight: bold }
|
||||
|
||||
div.topic {
|
||||
margin: 2em }
|
||||
|
||||
h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,
|
||||
h4.section-subtitle, h5.section-subtitle, h6.section-subtitle {
|
||||
margin-top: 0.4em }
|
||||
|
||||
h1.title {
|
||||
text-align: center }
|
||||
|
||||
h2.subtitle {
|
||||
text-align: center }
|
||||
|
||||
hr.docutils {
|
||||
width: 75% }
|
||||
|
||||
img.align-left, .figure.align-left, object.align-left, table.align-left {
|
||||
clear: left ;
|
||||
float: left ;
|
||||
margin-right: 1em }
|
||||
|
||||
img.align-right, .figure.align-right, object.align-right, table.align-right {
|
||||
clear: right ;
|
||||
float: right ;
|
||||
margin-left: 1em }
|
||||
|
||||
img.align-center, .figure.align-center, object.align-center {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
table.align-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.align-left {
|
||||
text-align: left }
|
||||
|
||||
.align-center {
|
||||
clear: both ;
|
||||
text-align: center }
|
||||
|
||||
.align-right {
|
||||
text-align: right }
|
||||
|
||||
/* reset inner alignment in figures */
|
||||
div.align-right {
|
||||
text-align: inherit }
|
||||
|
||||
/* div.align-center * { */
|
||||
/* text-align: left } */
|
||||
|
||||
.align-top {
|
||||
vertical-align: top }
|
||||
|
||||
.align-middle {
|
||||
vertical-align: middle }
|
||||
|
||||
.align-bottom {
|
||||
vertical-align: bottom }
|
||||
|
||||
ol.simple, ul.simple {
|
||||
margin-bottom: 1em }
|
||||
|
||||
ol.arabic {
|
||||
list-style: decimal }
|
||||
|
||||
ol.loweralpha {
|
||||
list-style: lower-alpha }
|
||||
|
||||
ol.upperalpha {
|
||||
list-style: upper-alpha }
|
||||
|
||||
ol.lowerroman {
|
||||
list-style: lower-roman }
|
||||
|
||||
ol.upperroman {
|
||||
list-style: upper-roman }
|
||||
|
||||
p.attribution {
|
||||
text-align: right ;
|
||||
margin-left: 50% }
|
||||
|
||||
p.caption {
|
||||
font-style: italic }
|
||||
|
||||
p.credits {
|
||||
font-style: italic ;
|
||||
font-size: smaller }
|
||||
|
||||
p.label {
|
||||
white-space: nowrap }
|
||||
|
||||
p.rubric {
|
||||
font-weight: bold ;
|
||||
font-size: larger ;
|
||||
color: maroon ;
|
||||
text-align: center }
|
||||
|
||||
p.sidebar-title {
|
||||
font-family: sans-serif ;
|
||||
font-weight: bold ;
|
||||
font-size: larger }
|
||||
|
||||
p.sidebar-subtitle {
|
||||
font-family: sans-serif ;
|
||||
font-weight: bold }
|
||||
|
||||
p.topic-title {
|
||||
font-weight: bold }
|
||||
|
||||
pre.address {
|
||||
margin-bottom: 0 ;
|
||||
margin-top: 0 ;
|
||||
font: inherit }
|
||||
|
||||
pre.literal-block, pre.doctest-block, pre.math, pre.code {
|
||||
margin-left: 2em ;
|
||||
margin-right: 2em }
|
||||
|
||||
pre.code .ln { color: grey; } /* 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 }
|
||||
pre.code .literal.string, code .literal.string { color: #0C5404 }
|
||||
pre.code .name.builtin, code .name.builtin { color: #352B84 }
|
||||
pre.code .deleted, code .deleted { background-color: #DEB0A1}
|
||||
pre.code .inserted, code .inserted { background-color: #A3D289}
|
||||
|
||||
span.classifier {
|
||||
font-family: sans-serif ;
|
||||
font-style: oblique }
|
||||
|
||||
span.classifier-delimiter {
|
||||
font-family: sans-serif ;
|
||||
font-weight: bold }
|
||||
|
||||
span.interpreted {
|
||||
font-family: sans-serif }
|
||||
|
||||
span.option {
|
||||
white-space: nowrap }
|
||||
|
||||
span.pre {
|
||||
white-space: pre }
|
||||
|
||||
span.problematic {
|
||||
color: red }
|
||||
|
||||
span.section-subtitle {
|
||||
/* font-size relative to parent (h1..h6 element) */
|
||||
font-size: 80% }
|
||||
|
||||
table.citation {
|
||||
border-left: solid 1px gray;
|
||||
margin-left: 1px }
|
||||
|
||||
table.docinfo {
|
||||
margin: 2em 4em }
|
||||
|
||||
table.docutils {
|
||||
margin-top: 0.5em ;
|
||||
margin-bottom: 0.5em }
|
||||
|
||||
table.footnote {
|
||||
border-left: solid 1px black;
|
||||
margin-left: 1px }
|
||||
|
||||
table.docutils td, table.docutils th,
|
||||
table.docinfo td, table.docinfo th {
|
||||
padding-left: 0.5em ;
|
||||
padding-right: 0.5em ;
|
||||
vertical-align: top }
|
||||
|
||||
table.docutils th.field-name, table.docinfo th.docinfo-name {
|
||||
font-weight: bold ;
|
||||
text-align: left ;
|
||||
white-space: nowrap ;
|
||||
padding-left: 0 }
|
||||
|
||||
/* "booktabs" style (no vertical lines) */
|
||||
table.docutils.booktabs {
|
||||
border: 0px;
|
||||
border-top: 2px solid;
|
||||
border-bottom: 2px solid;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table.docutils.booktabs * {
|
||||
border: 0px;
|
||||
}
|
||||
table.docutils.booktabs th {
|
||||
border-bottom: thin solid;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,
|
||||
h4 tt.docutils, h5 tt.docutils, h6 tt.docutils {
|
||||
font-size: 100% }
|
||||
|
||||
ul.auto-toc {
|
||||
list-style-type: none }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="document" id="help-framework">
|
||||
<h1 class="title">Help Framework</h1>
|
||||
|
||||
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
!! This file is generated by oca-gen-addon-readme !!
|
||||
!! changes will be overwritten. !!
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||
!! source digest: sha256:58edff8be040444604931118c74b543873d860d4e6a635d001bab8749eba9fa2
|
||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
||||
<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/16.0/web_help"><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-16-0/web-16-0-web_help"><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=16.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
|
||||
<p>This module introduces a new way to guide the user through Odoo.
|
||||
This module is created because <strong>the standard Odoo tours:</strong></p>
|
||||
<ol class="arabic simple">
|
||||
<li>forces the user to create records;</li>
|
||||
<li>cannot be reopened;</li>
|
||||
<li>is only available for the admin user;</li>
|
||||
<li>the bubbles are not obvious.</li>
|
||||
</ol>
|
||||
<p><strong>Table of contents</strong></p>
|
||||
<div class="contents local topic" id="contents">
|
||||
<ul class="simple">
|
||||
<li><a class="reference internal" href="#usage" id="toc-entry-1">Usage</a></li>
|
||||
<li><a class="reference internal" href="#known-issues-roadmap" id="toc-entry-2">Known issues / Roadmap</a></li>
|
||||
<li><a class="reference internal" href="#bug-tracker" id="toc-entry-3">Bug Tracker</a></li>
|
||||
<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>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="usage">
|
||||
<h1><a class="toc-backref" href="#toc-entry-1">Usage</a></h1>
|
||||
<p><strong>Demo:</strong></p>
|
||||
<blockquote>
|
||||
<img alt="https://raw.githubusercontent.com/OCA/web/16.0/web_help/static/description/demo.gif" src="https://raw.githubusercontent.com/OCA/web/16.0/web_help/static/description/demo.gif" />
|
||||
</blockquote>
|
||||
<p>You can see the demo live by going to the users list view (Settings > Users & Companies > Users)
|
||||
and clicking the little ‘?’ next to the view switcher.</p>
|
||||
<blockquote>
|
||||
<img alt="https://raw.githubusercontent.com/OCA/web/16.0/web_help/static/description/viewswitcher.png" src="https://raw.githubusercontent.com/OCA/web/16.0/web_help/static/description/viewswitcher.png" />
|
||||
</blockquote>
|
||||
<p>Also there’s a demo for the change password wizard:</p>
|
||||
<blockquote>
|
||||
<img alt="https://raw.githubusercontent.com/OCA/web/16.0/web_help/static/description/changepassword.png" src="https://raw.githubusercontent.com/OCA/web/16.0/web_help/static/description/changepassword.png" />
|
||||
</blockquote>
|
||||
<p>It’s easy to create your own guides, please refer to <tt class="docutils literal">static/src/user_trip.esm.js</tt> and
|
||||
<tt class="docutils literal">static/src/change_password_trip.esm.js</tt></p>
|
||||
</div>
|
||||
<div class="section" id="known-issues-roadmap">
|
||||
<h1><a class="toc-backref" href="#toc-entry-2">Known issues / Roadmap</a></h1>
|
||||
<ul class="simple">
|
||||
<li>Implement keyboard shortcuts</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="bug-tracker">
|
||||
<h1><a class="toc-backref" href="#toc-entry-3">Bug Tracker</a></h1>
|
||||
<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
|
||||
In case of trouble, please check there if your issue has already been reported.
|
||||
If you spotted it first, help us to smash it by providing a detailed and welcomed
|
||||
<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_help%0Aversion:%2016.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
|
||||
<p>Do not contact contributors directly about support or help with technical issues.</p>
|
||||
</div>
|
||||
<div class="section" id="credits">
|
||||
<h1><a class="toc-backref" href="#toc-entry-4">Credits</a></h1>
|
||||
<div class="section" id="authors">
|
||||
<h2><a class="toc-backref" href="#toc-entry-5">Authors</a></h2>
|
||||
<ul class="simple">
|
||||
<li>Onestein</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="contributors">
|
||||
<h2><a class="toc-backref" href="#toc-entry-6">Contributors</a></h2>
|
||||
<ul class="simple">
|
||||
<li>Dennis Sluijk <<a class="reference external" href="mailto:d.sluijk@onestein.nl">d.sluijk@onestein.nl</a>></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="section" id="maintainers">
|
||||
<h2><a class="toc-backref" href="#toc-entry-7">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" /></a>
|
||||
<p>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.</p>
|
||||
<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/16.0/web_help">OCA/web</a> project on GitHub.</p>
|
||||
<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
|
|
@ -0,0 +1,23 @@
|
|||
/** @odoo-module **/
|
||||
import {Trip} from "@web_help/trip.esm";
|
||||
import {registry} from "@web/core/registry";
|
||||
|
||||
export class ChangePasswordTrip extends Trip {
|
||||
setup() {
|
||||
this.addStep({
|
||||
selector: "th[data-name='new_passwd'], td[name='new_passwd']",
|
||||
content: this.env._t("Change the password here, make sure it's secure."),
|
||||
});
|
||||
|
||||
this.addStep({
|
||||
selector: "button[name='change_password_button']",
|
||||
content: this.env._t("Click here to confirm it."),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
registry.category("trips").add("change_password_trip", {
|
||||
Trip: ChangePasswordTrip,
|
||||
selector: (model, viewType) =>
|
||||
model === "change.password.wizard" && viewType === "form",
|
||||
});
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
/** @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, onWillStart, useState} from "@odoo/owl";
|
||||
import {ActionDialog} from "@web/webclient/actions/action_dialog";
|
||||
|
||||
export class HelpButton extends Component {
|
||||
setup() {
|
||||
this.state = useState({
|
||||
TripClass: null,
|
||||
});
|
||||
onWillStart(async () => {
|
||||
const foundTrip = await findTrip(this.props.resModel, this.props.viewType);
|
||||
this.state.TripClass = foundTrip;
|
||||
});
|
||||
}
|
||||
|
||||
async onClick() {
|
||||
const TripClass = this.state.TripClass;
|
||||
const trip = new TripClass(this.env);
|
||||
await trip.setup();
|
||||
trip.start();
|
||||
}
|
||||
}
|
||||
|
||||
HelpButton.template = "web_help.HelpButton";
|
||||
|
||||
Object.assign(ControlPanel.components, {HelpButton});
|
||||
Object.assign(LegacyControlPanel.components, {HelpButton});
|
||||
Object.assign(ActionDialog.components, {HelpButton});
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<?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-light'"
|
||||
t-on-click="onClick"
|
||||
tabindex="-1"
|
||||
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_right')]" 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_right')]" 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="env.isSmall and 'btn-link p-1 text-white' or 'btn-link p-1'"
|
||||
/>
|
||||
</xpath>
|
||||
</t>
|
||||
</templates>
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
/** @odoo-module **/
|
||||
import {registry} from "@web/core/registry";
|
||||
import {Component} from "@odoo/owl";
|
||||
|
||||
export async function findTrip(model, viewType) {
|
||||
const trips = registry.category("trips").getAll();
|
||||
const selectorResults = await Promise.all(
|
||||
trips.map((trip) => trip.selector(model, viewType))
|
||||
);
|
||||
const matchedTrips = trips.filter((trip, i) => selectorResults[i]);
|
||||
if (matchedTrips.length >= 1) {
|
||||
if (matchedTrips.length != 1) {
|
||||
console.warn("More than one trip found", model, viewType);
|
||||
}
|
||||
return matchedTrips[0].Trip;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function wait(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
export async function waitUntilAvailable(selector, ms = 50) {
|
||||
const selection = $(selector);
|
||||
|
||||
if (!selection.length) {
|
||||
await wait(ms);
|
||||
return await waitUntilAvailable(selector, ms);
|
||||
}
|
||||
|
||||
return selection;
|
||||
}
|
||||
|
||||
export async function doAction(xmlId, options = {}) {
|
||||
Component.env.bus.trigger("do-action", {
|
||||
action: xmlId,
|
||||
options: options,
|
||||
});
|
||||
}
|
||||
103
odoo-bringout-oca-web-web_help/web_help/static/src/trip.esm.js
Normal file
103
odoo-bringout-oca-web-web_help/web_help/static/src/trip.esm.js
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
/** @odoo-module **/
|
||||
import {renderToString} from "@web/core/utils/render";
|
||||
|
||||
export class Trip {
|
||||
constructor(env) {
|
||||
this.steps = [];
|
||||
this.env = env;
|
||||
this.index = -1;
|
||||
this.highlighterService = this.env.services.highlighter;
|
||||
}
|
||||
|
||||
get count() {
|
||||
return this.steps.length;
|
||||
}
|
||||
|
||||
get isAtLastStep() {
|
||||
return this.index === this.count - 1;
|
||||
}
|
||||
|
||||
_getStepTemplate() {
|
||||
const step = this.steps[this.index];
|
||||
if (step.template) {
|
||||
return step.template;
|
||||
}
|
||||
return this.isAtLastStep ? "web_help.TripStepLast" : "web_help.TripStep";
|
||||
}
|
||||
|
||||
setup() {
|
||||
return;
|
||||
}
|
||||
|
||||
addStep({
|
||||
selector,
|
||||
content,
|
||||
beforeHighlight = async () => {
|
||||
return;
|
||||
},
|
||||
animate = 250,
|
||||
padding = 10,
|
||||
template = null,
|
||||
renderContext = {},
|
||||
}) {
|
||||
this.steps.push({
|
||||
selector: selector,
|
||||
content: content,
|
||||
beforeHighlight: beforeHighlight,
|
||||
animate: animate,
|
||||
padding: padding,
|
||||
template: template,
|
||||
renderContext: renderContext,
|
||||
});
|
||||
}
|
||||
|
||||
start() {
|
||||
this.nextStep();
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.index = -1;
|
||||
this.highlighterService.hide();
|
||||
}
|
||||
|
||||
_getStepRenderContext() {
|
||||
const step = this.steps[this.index];
|
||||
|
||||
return Object.assign(
|
||||
{
|
||||
content: step.content,
|
||||
cbBtnText: this.isAtLastStep
|
||||
? this.env._t("Finish")
|
||||
: this.env._t("Got it"),
|
||||
closeBtnText: this.env._t("Close"),
|
||||
},
|
||||
step.renderContext
|
||||
);
|
||||
}
|
||||
|
||||
async nextStep() {
|
||||
this.index++;
|
||||
let cb = this.nextStep;
|
||||
if (this.isAtLastStep) {
|
||||
cb = this.stop;
|
||||
}
|
||||
const step = this.steps[this.index];
|
||||
|
||||
const $stepRender = $(
|
||||
renderToString(this._getStepTemplate(), this._getStepRenderContext())
|
||||
);
|
||||
const $cbButton = $stepRender.find(".web_help_cb_button");
|
||||
$cbButton.click(() => {
|
||||
$cbButton.attr("disabled", "disabled");
|
||||
cb.bind(this)();
|
||||
});
|
||||
$stepRender.find(".web_help_close").click(this.stop.bind(this));
|
||||
await step.beforeHighlight();
|
||||
this.highlighterService.highlight(
|
||||
step.selector,
|
||||
$stepRender,
|
||||
step.animate,
|
||||
step.padding
|
||||
);
|
||||
}
|
||||
}
|
||||
29
odoo-bringout-oca-web-web_help/web_help/static/src/trip.xml
Normal file
29
odoo-bringout-oca-web-web_help/web_help/static/src/trip.xml
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<?xml version="1.0" encoding="UTF-8" ?>
|
||||
<templates>
|
||||
<t t-name="web_help.TripStep" owl="1">
|
||||
<div>
|
||||
<div class="pb-4">
|
||||
<t t-out="content" />
|
||||
</div>
|
||||
|
||||
<button class="btn btn-lg btn-outline-light web_help_cb_button mr8"><t
|
||||
t-esc="cbBtnText"
|
||||
/></button>
|
||||
<button class="btn btn-lg btn-outline-light web_help_close pull-right"><t
|
||||
t-esc="closeBtnText"
|
||||
/></button>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="web_help.TripStepLast" owl="1">
|
||||
<div>
|
||||
<div class="pb-4">
|
||||
<t t-out="content" />
|
||||
</div>
|
||||
|
||||
<button class="btn btn-lg btn-outline-light web_help_cb_button"><t
|
||||
t-esc="cbBtnText"
|
||||
/></button>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/** @odoo-module **/
|
||||
import {Trip} from "@web_help/trip.esm";
|
||||
import {registry} from "@web/core/registry";
|
||||
|
||||
export class UserTrip extends Trip {
|
||||
setup() {
|
||||
this.addStep({
|
||||
selector: ".o_list_button_add, .o-kanban-button-new",
|
||||
content: this.env._t("To create a new user click here."),
|
||||
});
|
||||
|
||||
this.addStep({
|
||||
selector: ".o_cp_searchview, .o_enable_searchview",
|
||||
content: this.env._t("Use the searchbar to find specific users."),
|
||||
renderContext: {
|
||||
cbBtnText: this.env._t("Next"),
|
||||
closeBtnText: this.env._t("Cancel"),
|
||||
},
|
||||
});
|
||||
|
||||
this.addStep({
|
||||
selector: ".o_cp_switch_buttons",
|
||||
content: this.env._t("You can switch to different views here."),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
registry.category("trips").add("user_trip", {
|
||||
Trip: UserTrip,
|
||||
selector: (model, viewType) =>
|
||||
model === "res.users" && ["list", "kanban"].includes(viewType),
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue