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.
51 lines
2.1 KiB
XML
51 lines
2.1 KiB
XML
<templates>
|
|
<section t-name="TodoList" class="todoapp">
|
|
<header class="header">
|
|
<h1>todos</h1>
|
|
<input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
|
|
</header>
|
|
<section class="main" t-if="store.tasks.length">
|
|
<input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="() => store.toggleAll(!allChecked)"/>
|
|
<label for="toggle-all"></label>
|
|
<ul class="todo-list">
|
|
<t t-foreach="displayedTasks" t-as="todo" t-key="todo.id">
|
|
<Todo id="todo.id" isCompleted="todo.isCompleted" text="todo.text"/>
|
|
</t>
|
|
</ul>
|
|
</section>
|
|
<footer class="footer" t-if="store.tasks.length">
|
|
<span class="todo-count">
|
|
<strong>
|
|
<t t-esc="remaining"/>
|
|
</strong>
|
|
<t t-esc="remainingText"/>
|
|
</span>
|
|
<ul class="filters">
|
|
<li>
|
|
<a t-on-click="() => this.setFilter('all')" t-att-class="{selected: state.filter === 'all'}">All</a>
|
|
</li>
|
|
<li>
|
|
<a t-on-click="() => this.setFilter('active')" t-att-class="{selected: state.filter === 'active'}">Active</a>
|
|
</li>
|
|
<li>
|
|
<a t-on-click="() => this.setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
|
|
</li>
|
|
</ul>
|
|
<button class="clear-completed" t-if="store.tasks.length gt remaining" t-on-click="() => store.clearCompleted()">
|
|
Clear completed
|
|
</button>
|
|
</footer>
|
|
</section>
|
|
|
|
<li t-name="Todo" class="todo" t-att-class="{completed: props.isCompleted, editing: state.isEditing}">
|
|
<div class="view">
|
|
<input class="toggle" type="checkbox" t-on-change="() => store.toggleTask(props.id)" t-att-checked="props.completed"/>
|
|
<label t-on-dblclick="() => state.isEditing = true">
|
|
<t t-esc="props.text"/>
|
|
</label>
|
|
<button class="destroy" t-on-click="() => store.deleteTask(props.id)"></button>
|
|
</div>
|
|
<input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.text" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
|
|
</li>
|
|
</templates>
|