300 lines
12 KiB
HTML
300 lines
12 KiB
HTML
|
<section class="oe_container">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
<div class="oe_span12">
|
||
|
|
<h2 class="text-center oe_slogan"
|
||
|
|
style="font-family: Montserrat, 'sans-serif' !important; font-weight: bolder !important; color: hsl(0, 0%, 13%);">
|
||
|
|
Odoo Spy
|
||
|
|
</h2>
|
||
|
|
<div class="text-center " style="font-weight: bolder !important; margin-top: -20px; color:#6f6060;" >Third-Party</div>
|
||
|
|
|
||
|
|
<h3 class="oe_slogan" style="text-shadow: 1px 1px 2px rgb(40, 244, 88);color: #cd0909e0;">Help you insight into the rendering Templates of the Odoo web page!</h3>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="oe_container">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
<div class="oe_span12">
|
||
|
|
<h4 class="oe_slogan"><b>Features</b></h4>
|
||
|
|
<div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin: 2rem 0;font-size: 1.5rem !important; ">
|
||
|
|
<ul >
|
||
|
|
<li class="fa fa-star " style="color: rgb(217, 47, 9);"> <span style="color: #4a0404; margin-left: 6px;">Trace & understand the rendering Templates structure more easily;</span>
|
||
|
|
</li> <br><br>
|
||
|
|
<li class="fa fa-star" style="color: rgb(217, 47, 9);"> <span style="color: #4a0404; margin-left: 6px;">Locate the Templates Script source code quickly, save time & speed up development process;</span>
|
||
|
|
</li> <br><br>
|
||
|
|
<li class="fa fa-star" style="color: rgb(217, 47, 9);"> <span style="color: #4a0404; margin-left: 6px;">Apply to the whole website, free mind & happy coding! </span>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- <section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="oe_row_img oe_centered" align="center">
|
||
|
|
<img class="oe_demo oe_picture oe_screenshot" src="assets/frontend.gif"/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section> -->
|
||
|
|
<!-- frontend gif -->
|
||
|
|
<div class=" text-left">
|
||
|
|
<p class="oe_mt32">
|
||
|
|
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Frontend(qweb):</font>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
|
||
|
|
<div class="oe_screenshot" align="center">
|
||
|
|
<img style="max-width: 80%" src="assets/frontend.gif"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- backend gif -->
|
||
|
|
<div class=" text-left">
|
||
|
|
<p class="oe_mt32">
|
||
|
|
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Backend(owl):</font>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
|
||
|
|
<div class="oe_screenshot" align="center">
|
||
|
|
<img style="max-width: 80%" src="assets/backend.gif"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- kit-spy-code.gif -->
|
||
|
|
<div class=" text-left">
|
||
|
|
<p class="oe_mt32">
|
||
|
|
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Spy & Edit:</font>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
|
||
|
|
<div class="oe_screenshot" align="center">
|
||
|
|
<img style="max-width: 80%" src="assets/kit-spy-code.gif"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="col-lg-12 d-flex justify-content-center align-items-center" style="margin: 2rem 0;font-size: 1.5rem !important; ">
|
||
|
|
<ul style="font-size: 80%;">
|
||
|
|
<li class="fa fa-star " style="align-items: left;color: rgb(217, 47, 9);"> <span style="color: #4a0404; margin-left: 6px;">Insight into the Odoo web page structure, super easy locate the feature source code line.</span>
|
||
|
|
</li> <br><br>
|
||
|
|
<li class="fa fa-star" style="align-items: left;color: rgb(217, 47, 9);"> <span style="color: #4a0404; margin-left: 6px;"> Integrate to Code Server IDE, hot reload, quickly and easily experiment, build UIs, add features, fix bugs & more. </span>
|
||
|
|
</li> <br><br>
|
||
|
|
<li class="fa fa-star" style="color: rgb(217, 47, 9);"> <span style="color: #4a0404; margin-left: 6px;">The Edit Template Source Code feature should install the <a href="https://apps.odoo.com/apps/modules/17.0/kit_code">Odoo Code</a> module. </span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- meta tooltip -->
|
||
|
|
<h4 class="oe_slogan"><b>Trace out the key meta information of the Templates </b></h4>
|
||
|
|
<section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
<div class="oe_span6">
|
||
|
|
<div class="oe_row_img oe_centered" align="center">
|
||
|
|
<img class="oe_demo oe_picture oe_screenshot" src="assets/screenshots/home-meta.png"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="oe_span6">
|
||
|
|
<div class="oe_row_img oe_centered" align="center">
|
||
|
|
<img class="oe_demo oe_picture oe_screenshot" src="assets/screenshots/contact-meta.png"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<div class="oe_row text-center" style="background-color: read; width: 80%;">
|
||
|
|
<p class="oe_mt32" style="font-size: 120%; ">
|
||
|
|
The key meta information of the Templates(or widget) includes: name, type, template file path and etc, two rendering template types: <a href="https://www.odoo.com/documentation/17.0/developer/reference/frontend/qweb.html">qweb</a> and <a href="https://odoo.github.io/owl/">owl</a> in Odoo tech stack, the template file path is helpful to locate the template(or widget) source code on disk quickly, save time and free mind!
|
||
|
|
</p>
|
||
|
|
<p class="oe_mt4" style="font-size: 120%; ">
|
||
|
|
The Spy module purpose is trace out the rendering Templates structure, light up meta data of the Templates, speed up the development process of the Odoo application <i class="fa fa-rocket" aria-hidden="true" style="color: rgb(217, 47, 9);"></i>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- -->
|
||
|
|
<h4 class="oe_slogan"><b>Screenshots</b></h4>
|
||
|
|
|
||
|
|
<div class=" text-left">
|
||
|
|
<p class="oe_mt32">
|
||
|
|
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Frontend: Website pages:</font>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
|
||
|
|
<div class="oe_screenshot" align="center">
|
||
|
|
<img style="max-width: 80%" src="assets/screenshots/front-home.png"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
|
||
|
|
<div class="oe_screenshot" align="center">
|
||
|
|
<img style="max-width: 80%" src="assets/screenshots/front-store.png"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- backend class="oe_span12 text-left" -->
|
||
|
|
<div class="text-left">
|
||
|
|
<p class="oe_mt32">
|
||
|
|
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Backend: Sales page: </font>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
|
||
|
|
<div class="oe_screenshot" align="center">
|
||
|
|
<img style="max-width: 80%" src="assets/screenshots/backend-sales.png"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="text-left">
|
||
|
|
<p class="oe_mt32">
|
||
|
|
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Backend: CRM page: </font>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
|
||
|
|
<div class="oe_screenshot" align="center">
|
||
|
|
<img style="max-width: 80%" src="assets/screenshots/backend-crm.png"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="text-left">
|
||
|
|
<p class="oe_mt32">
|
||
|
|
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Backend: Contact page: </font>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
|
||
|
|
<div class="oe_screenshot" align="center">
|
||
|
|
<img style="max-width: 80%" src="assets/screenshots/backend-contact.png"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="text-center">
|
||
|
|
<p class="oe_mt32" style="font-size: 120%;">
|
||
|
|
The spy module will apply to the whole web pages, above only show a few module pages for demo purpose.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<!-- <section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
<div class="oe_span6">
|
||
|
|
<div class="oe_row_img oe_centered" align="center">
|
||
|
|
<img class="oe_demo oe_picture oe_screenshot" src="assets/screenshots/backend-app-studio-1.png"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="oe_span6">
|
||
|
|
<div class="oe_row_img oe_centered" align="center">
|
||
|
|
<img class="oe_demo oe_picture oe_screenshot" src="assets/screenshots/backend-app-studio-2.png"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section> -->
|
||
|
|
|
||
|
|
<h4 class="oe_slogan"><b>Usage</b></h4>
|
||
|
|
|
||
|
|
<section class="oe_container text-left">
|
||
|
|
<div class="oe_row " >
|
||
|
|
<p class="oe_mt0" style="font-size: 120%;margin-left: 16px; margin-right: 16px; ">
|
||
|
|
First install this Spy module, actived the Developer Mode, move the mouse cursor to target html element area on the odoo web page which you want to trace into, a tooltip will be pop over, the tooltip show meta information of the QWeb or OWL Templates for rendering the target element on web page!
|
||
|
|
<br>
|
||
|
|
The Templates meta information help you insight into the rendering Templates of the odoo web page, more easy understand the mechanism of the rendering Templates!
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="oe_row oe_spaced oe_mt0">
|
||
|
|
<p class=" text-left">
|
||
|
|
<font style="font-size: 120%;font-weight: bolder !important;color: #6f6060;">Activating Developer Mode:</font>
|
||
|
|
</p>
|
||
|
|
<div class="oe_span8" style="width: 100%; " >
|
||
|
|
|
||
|
|
<ul style="margin-left: -10px;" >
|
||
|
|
<li class="fa fa-star " style="color: rgb(217, 47, 9);">
|
||
|
|
<span class="font-sans-serif" style="margin-left: 3px;color: black;font-size: 120%; ">Activate through the Settings:</span>
|
||
|
|
</li>
|
||
|
|
<p class="oe_mt8" style="font-size: 120%;">
|
||
|
|
The debug mode can be activated in the Odoo database settings. Go to Settings -> General Settings -> Developer Tools and click on Activate the developer mode.
|
||
|
|
</p>
|
||
|
|
<li class="fa fa-star " style="color: rgb(217, 47, 9);">
|
||
|
|
<span class="font-sans-serif" style="margin-left: 3px;color: black;font-size: 120%;"><a href="https://www.odoo.com/documentation/17.0/applications/general/developer_mode.html">More ways to active the debug mode</a></span>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div class="oe_row " style="margin-top: -20px;">
|
||
|
|
<div class="text-left">
|
||
|
|
<p class="oe_mt16 oe_mb16" style="font-size: 120%; ">
|
||
|
|
<i class="fa fa-exclamation-triangle" style="color: #ffc800;" aria-hidden="true"></i> This module should only use for development phase! Production Environment is not recommend!
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-center">
|
||
|
|
<p class="oe_mb48 oe_mt32" style="font-size: 120%; color: #827d7d;">
|
||
|
|
Enjoy & Happy Coding! <i class="fa fa-smile-o" aria-hidden="true"></i>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h4 class="oe_slogan"><b>Support</b></h4>
|
||
|
|
<section class="oe_container oe_dark">
|
||
|
|
<div class="oe_row oe_spaced">
|
||
|
|
<div class="oe_span6">
|
||
|
|
<div class="oe_row_img oe_centered" align="center">
|
||
|
|
<a href="mailto:odoo@ixkit.com" target="_blank"
|
||
|
|
class="btn btn-block mb-2 deep_hover"
|
||
|
|
style="text-decoration: none; background-color: #b94646af; color: #FFF; border-radius: 4px;"><i
|
||
|
|
class="fa fa-envelope mr-2"></i> odoo@ixkit.com</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="oe_span6">
|
||
|
|
<div class="oe_row_img oe_centered" align="center">
|
||
|
|
<a href="skype:live:.cid.c5d5ecc7e54128e2?call"
|
||
|
|
class="btn btn-block mb-2 deep_hover"
|
||
|
|
style="text-decoration: none; background-color: #1b9beabd; color: #FFF; border-radius: 4px;">
|
||
|
|
<i class="fa fa-skype mr-2"></i> ixkit
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="oe_container oe_dark oe_mt64 oe_mb64"></section>
|
||
|
|
<h4 class="oe_slogan "><i class="fa fa-heart" aria-hidden="true" style="font-size: 90%;color: rgb(217, 47, 9);"></i>
|
||
|
|
<span class="font-sans-serif" style="margin-left: 6px;font-size: 90%; cursor: pointer !important; ">
|
||
|
|
<a style="font-weight: bolder !important; color: #827d7d !important; cursor: pointer !important;" href="http://ixkit.com/odookit">by ixkit team
|
||
|
|
</a>
|
||
|
|
</span>
|
||
|
|
</h4>
|
||
|
|
</section>
|
||
|
|
<section class="oe_container oe_separator">
|
||
|
|
</section>
|