100 lines
5.7 KiB
XML
100 lines
5.7 KiB
XML
|
<?xml version="1.0" encoding="utf-8" ?>
|
||
|
|
<odoo>
|
||
|
|
<template id="onboarding_panel">
|
||
|
|
<t t-call="onboarding.onboarding_container">
|
||
|
|
<t t-foreach="steps" t-as="step">
|
||
|
|
<t t-call="onboarding.onboarding_step">
|
||
|
|
<t t-set="title" t-value="step.title"/>
|
||
|
|
<t t-set="description" t-value="step.description"/>
|
||
|
|
<t t-set="done_icon" t-value="step.done_icon"/>
|
||
|
|
<t t-set="btn_text" t-value="step.button_text"/>
|
||
|
|
<t t-set="done_text" t-value="step.done_text"/>
|
||
|
|
<t t-set="image" t-value="'/web/image/onboarding.onboarding.step/'+str(step.id)+'/step_image'"/>
|
||
|
|
<t t-set="alt" t-value="step.step_image_alt"/>
|
||
|
|
<!-- Model/method used by JS implementation of banners for each step-->
|
||
|
|
<t t-set="method" t-value="step.panel_step_open_action_name"/>
|
||
|
|
<t t-set="model">onboarding.onboarding.step</t>
|
||
|
|
<!-- to mimic first implementation of onboarding, the 'state' queried holds
|
||
|
|
a rendering state for all steps. See _get_and_update_onboarding_state -->
|
||
|
|
<t t-set="state" t-value="state.get(step.id)"/>
|
||
|
|
</t>
|
||
|
|
</t>
|
||
|
|
</t>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template id="onboarding_container">
|
||
|
|
<div class="modal o_onboarding_modal o_technical_modal" tabindex="-1" role="dialog">
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title">Hide Onboarding Tips</h5>
|
||
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<p>Are you sure you want to hide these configuration steps?</p>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer justify-content-start">
|
||
|
|
<a type="action" class="btn btn-primary me-1" data-bs-dismiss="modal"
|
||
|
|
data-o-hide-banner="true" t-att-data-model="close_model" t-att-data-method="close_method"
|
||
|
|
>
|
||
|
|
Get them out of my sight!
|
||
|
|
</a>
|
||
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="o_onboarding_main position-relative border-bottom overflow-hidden">
|
||
|
|
<div class="o_onboarding_wrap py-3 py-lg-4">
|
||
|
|
<a href="#" data-bs-toggle="modal" data-bs-target=".o_onboarding_modal" class="o_onboarding_btn_close position-absolute top-0 end-0 py-2 px-3 h2 z-index-1" title="Close the onboarding panel"><i class="oi oi-close"/></a>
|
||
|
|
<div class="o_onboarding_steps d-flex" t-out="0"/>
|
||
|
|
|
||
|
|
<div t-if="state.get('onboarding_state') == 'just_done'"
|
||
|
|
t-att-state="state.get('onboarding_state')"
|
||
|
|
class="o_onboarding_completed_message position-absolute end-0 start-0 border-bottom py-4 bg-white d-flex align-items-center justify-content-center">
|
||
|
|
<span class="h3 m-0">
|
||
|
|
<i class="fa fa-check text-success me-3" />
|
||
|
|
<t t-if="text_completed" t-out="text_completed" />
|
||
|
|
</span>
|
||
|
|
<a type="action" class="btn btn-primary ms-4" t-att-data-model="close_model" t-att-data-method="close_method">
|
||
|
|
Close Panel
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<template id="onboarding_step">
|
||
|
|
<div class="o_onboarding_step position-relative d-flex flex-column align-items-center justify-content-start text-center" t-att-data-step-state="state">
|
||
|
|
<img t-if="state == 'just_done'" class="o_onboarding_confetti position-absolute w-100" src="/base/static/img/onboarding_confetti.svg" alt="o_onboarding_confetti"/>
|
||
|
|
|
||
|
|
<div class="o_onboarding_line position-absolute"/>
|
||
|
|
<div class="o_onboarding_step_side d-flex">
|
||
|
|
<img class="z-index-1" t-attf-src="#{image}" t-attf-alt="#{alt}"/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="o_onboarding_step_content position-relative pt-2 flex-grow-1 d-flex flex-column align-items-center justify-content-around">
|
||
|
|
<div class="o_onboarding_step_content_info flex-grow-1 mb-2">
|
||
|
|
<a type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
|
||
|
|
<h5 class="o_onboarding_step_title mb-1" t-out="title"/>
|
||
|
|
</a>
|
||
|
|
<p class="m-0 small" t-out="description"/>
|
||
|
|
</div>
|
||
|
|
<a t-if="state == 'not_done'" class="o_onboarding_step_action btn px-4" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
|
||
|
|
<span>
|
||
|
|
<t t-if="btn_text" t-out="btn_text" />
|
||
|
|
<t t-else="">Let's do it</t>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
<a t-else="" class="o_onboarding_step_action__done btn" type="action" data-reload-on-close="true" role="button" t-att-data-method="method" t-att-data-model="model">
|
||
|
|
<span>
|
||
|
|
<i t-attf-class="p-1 me-1 fa #{done_icon if done_icon else 'fa-check'} rounded-circle" />
|
||
|
|
<t t-if="done_text" t-out="done_text" />
|
||
|
|
<t t-else="">All done!</t>
|
||
|
|
</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</odoo>
|