NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

work on demo app, add demo:dev command

Browse Source
This commit is contained in:
Géry Debongnie
2019-01-21 23:08:03 +01:00
parent a357ff6b37
commit 82490b2099
7 changed files with 103 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+8 -7
View File
@@ -23,19 +23,20 @@ npm run bundle:core:watch
## Demo page
There are three commands that can be used to play with the demo application:
There are three main commands that can be used to play with the demo application:
```
npm run demo:build
npm run demo:watch
npm run demo:serve
npm run demo:watch
```
- *build* prepare a folder with all the static files compiled. It is located in
dist/demo
- *watch* recompile the typescript files as soon as they are changed
- *serve* starts a live-server pointing to the dist/demo (which will reload the
page whenever the files are changed)
- *demo:build* prepare a folder with all the static files compiled. It is
located in dist/demo
- *demo:serve* simply starts a live-server pointing to the dist/demo (which will
also reload the page whenever the static files are changed)
- *demo:dev* is a single command useful for developping: it will watch the
source files, recompile them as needed, starts a live-server.
## Notes
demo/app.scss
+48
View File
@@ -0,0 +1,48 @@
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
font-family: sans-serif;
}
/* Web Client */
.o_web_client {
height: 100%;
display: grid;
grid-template-rows: 40px auto;
}
/* Navbar */
.o_navbar {
background-color: #875A7B;
color: white;
display: flex;
span.title {
font-size: 22px;
font-weight: bold;
padding: 8px;
}
ul {
list-style-type: none;
display: inline-flex;
height: 100%;
margin: 0;
}
li {
padding: 8px 12px;
font-size: 20px;
}
a {
color: white;
text-decoration: none;
}
}
demo/index.html
+1 -1
View File
@@ -5,11 +5,11 @@
<title>Odoo Web Core Demo</title>
<script src="almond.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="app.css">
<script>
require('main');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
demo/src/Navbar.ts
+20
View File
@@ -0,0 +1,20 @@
import Widget from "../../src/core/widget";
const template = `
<div class="o_navbar">
<span class="title">Odoo</span>
<ul>
<li t-foreach="state.items" t-as="item">
<a href="someaction"><t t-esc="item.title"/></a>
</li>
</ul>
</div>
`;
export default class Navbar extends Widget {
name = "navbar";
template = template;
state = {
items: [{title: 'Discuss'}, {title: 'CRM'}]
};
}
demo/src/RootWidget.ts
+18 -14
View File
@@ -1,27 +1,31 @@
import Widget from "../../src/core/widget";
import Counter from "./Counter";
import Navbar from "./Navbar";
const template = `
<div>
<span>Root Widget</span>
<button t-on-click="resetCounter">Reset</button>
<button t-on-click="resetCounterAsync">Reset in 3s</button>
<button t-on-click="toggle">Toggle Counter</button>
<input/>
<t t-if="state.validcounter">
<t t-widget="Counter" t-ref="counter" t-props="{initialState:4}"/>
</t>
<t t-else="1">
<t t-widget="Counter" t-ref="counter" t-props="{initialState:7}"/>
</t>
<div ref="target"/>
<div class="o_web_client">
<t t-widget="Navbar"/>
<div class="o_content">
<span>Root Widget</span>
<button t-on-click="resetCounter">Reset</button>
<button t-on-click="resetCounterAsync">Reset in 3s</button>
<button t-on-click="toggle">Toggle Counter</button>
<input/>
<t t-if="state.validcounter">
<t t-widget="Counter" t-ref="counter" t-props="{initialState:4}"/>
</t>
<t t-else="1">
<t t-widget="Counter" t-ref="counter" t-props="{initialState:7}"/>
</t>
<div ref="target"/>
</div>
</div>
`;
export default class RootWidget extends Widget {
name = "root";
template = template;
widgets = { Counter };
widgets = { Counter, Navbar };
state = { validcounter: true};
resetCounter(ev: MouseEvent) {
demo/src/main.ts
+1 -14
View File
@@ -1,23 +1,10 @@
///<amd-module name="main" />
// import QWeb from "../../src/core/qweb_vdom";
// import {init} from "../../src/libs/snabbdom/src/snabbdom"
// import h from "../../src/libs/snabbdom/src/h"
// import sdProps from "../../src/libs/snabbdom/src/modules/props"
// import sdListeners from "../../src/libs/snabbdom/src/modules/eventlisteners"
// const patch = init([sdProps, sdListeners]);
// (<any>window).h = h;
// (<any>window).patch = patch;
// (<any>window).QWeb = QWeb;
// import Counter from "./Counter";
import RootWidget from "./RootWidget";
import env from "./env";
document.addEventListener("DOMContentLoaded", async function() {
const rootWidget = new RootWidget(null);
rootWidget.setEnvironment(env);
const mainDiv = document.getElementById("app")!;
await rootWidget.mount(mainDiv);
await rootWidget.mount(document.body);
});
package.json
+7 -4
View File
@@ -8,11 +8,12 @@
"test:watch": "jest --watch",
"bundle:core": "tsc -m es6 --lib es2017,dom --target esnext --outdir dist src/bundles/core.ts && rollup dist/bundles/core.js --file dist/bundle-core.js --format iife",
"bundle:core:watch": "npm run bundle:core -- --watch",
"demo:build": "cp -r demo/ dist/demo && npm run demo:build:js",
"demo:build": "cp -r demo/ dist/demo && npm run demo:build:js && npm run demo:build:css",
"demo:build:css": "sass demo/app.scss dist/demo/app.css",
"demo:build:js": "tsc --allowjs -m amd --lib es2017,dom --target esnext --outfile dist/demo/main.js demo/src/main.ts",
"predemo:watch": "npm run demo:build",
"demo:watch": "npm run demo:build:js -- --watch",
"demo:serve": "live-server dist/demo/"
"demo:serve": "live-server dist/demo/",
"predemo:dev": "npm run demo:build",
"demo:dev": "npm-run-all --parallel \"demo:build:* -- --watch\" demo:serve"
},
"repository": {
"type": "git",
@@ -28,8 +29,10 @@
"@types/jest": "^23.3.12",
"jest": "^23.6.0",
"live-server": "^1.2.1",
"npm-run-all": "^4.1.5",
"rollup": "^1.1.0",
"rollup-plugin-typescript2": "^0.19.0",
"sass": "^1.16.1",
"snabbdom-to-html": "^5.1.1",
"source-map-support": "^0.5.10",
"ts-jest": "^23.10.5",