mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Samuel Degueldre
9475de4d18
The playground hasn't been touched for a while and a few things were broken before this commit: - Exporting as a standalone web application was broken because it still attempted to load the templates like it was done in owl 1 - Resizing the editor tabs still tried to use `this.trigger` While fixing the export feature, the files needed by the app were factored out of hardcoded strings and into real files, as this makes it easier to maintain, since these files get syntax highlighting. The samples received the same treatment: there is now a `samples` folder containing all the samples, it also contains a jsconfig, giving autocompletion on owl functions while editing the files, and allowing the owl import to look how it would when using owl as a node_module. In the browser, this import is translated to the relative path of the owl module using an import map.
59 lines
2.9 KiB
XML
59 lines
2.9 KiB
XML
<templates>
|
|
<div t-name="TabbedEditor" class="tabbed-editor" t-att-style="props.style">
|
|
<div class="tabBar" t-att-class="{resizeable: props.resizeable}" t-on-mousedown="onMouseDown">
|
|
<t t-foreach="['js', 'xml', 'css']" t-as="tab" t-key="tab">
|
|
<a t-ref="{{tab}}" t-if="props[tab] !== false" t-key="tab" class="tab flash" t-att-class="{active: state.currentTab===tab}" t-on-click="() => setTab(tab)">
|
|
<t t-esc="tab"/>
|
|
</a>
|
|
</t>
|
|
</div>
|
|
<div class="code-editor" t-ref="editor"></div>
|
|
</div>
|
|
|
|
<div t-name="Root" class="playground">
|
|
<div class="left-bar" t-att-class="{split: state.splitLayout}"
|
|
t-att-style="leftPaneStyle">
|
|
<div class="menubar">
|
|
<a class="btn run-code flash" t-on-click="runCode" title="Execute this Code">▶ Run</a>
|
|
<select t-on-change="onSampleChange">
|
|
<option t-foreach="samples" t-as="sample" t-key="sample_index">
|
|
<t t-esc="sample.description"/>
|
|
</option>
|
|
</select>
|
|
<a class="btn flash" t-on-click="exportStandaloneApp" title="Download zip that bundles this app with a tiny python web server"><i class="fas fa-download"></i></a>
|
|
<a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas" t-att-class="state.splitLayout ? 'fa-toggle-on' : 'fa-toggle-off'"></i></a>
|
|
<a class="btn flash share-code" t-on-click="shareCode" title="Copy a link to this playground"><span>Share</span><span class="copied-notification" t-if="state.copied">Copied link to clipboard!</span></a>
|
|
</div>
|
|
<TabbedEditor
|
|
js="state.js"
|
|
css="!state.splitLayout and state.css"
|
|
xml="!state.splitLayout and state.xml"
|
|
style="topEditorStyle"
|
|
updateCode="updateCode"/>
|
|
<t t-if="state.splitLayout">
|
|
<div class="separator horizontal"/>
|
|
<TabbedEditor
|
|
js="false"
|
|
css="state.css"
|
|
xml="state.xml"
|
|
resizeable="true"
|
|
updatePanelHeight.bind="updatePanelHeight"
|
|
updateCode="updateCode"/>
|
|
</t>
|
|
</div>
|
|
<div class="separator vertical" t-on-mousedown="onMouseDown"/>
|
|
<div class="right-pane">
|
|
<div class="welcome" t-if="state.displayWelcome">
|
|
<div>🦉 Odoo Web Library 🦉</div>
|
|
<div>v<t t-esc="version"/></div>
|
|
<div class="url"><a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></div>
|
|
<div class="note">
|
|
<p>
|
|
Note: these examples make use of recent features of Javascript, and require a recent browser to work without a transpilation step! Among other things, it uses class fields and import maps. If you encounter issues, make sure your browser is up to date.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="content" t-ref="content"/>
|
|
</div>
|
|
</div>
|
|
</templates> |