diff --git a/README.md b/README.md index 76c9f8a3..4e483e4c 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/demo/app.scss b/demo/app.scss new file mode 100644 index 00000000..32161680 --- /dev/null +++ b/demo/app.scss @@ -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; + } +} + diff --git a/demo/index.html b/demo/index.html index 5c8be9c6..3d0b6091 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,11 +5,11 @@ Odoo Web Core Demo + -
\ No newline at end of file diff --git a/demo/src/Navbar.ts b/demo/src/Navbar.ts new file mode 100644 index 00000000..f6fc2a7d --- /dev/null +++ b/demo/src/Navbar.ts @@ -0,0 +1,20 @@ +import Widget from "../../src/core/widget"; + +const template = ` +
+ Odoo + +
+`; + +export default class Navbar extends Widget { + name = "navbar"; + template = template; + state = { + items: [{title: 'Discuss'}, {title: 'CRM'}] + }; +} diff --git a/demo/src/RootWidget.ts b/demo/src/RootWidget.ts index 78f137d4..bc3113e8 100644 --- a/demo/src/RootWidget.ts +++ b/demo/src/RootWidget.ts @@ -1,27 +1,31 @@ import Widget from "../../src/core/widget"; import Counter from "./Counter"; +import Navbar from "./Navbar"; const template = ` -
- Root Widget - - - - - - - - - - -
+
+ +
+ Root Widget + + + + + + + + + + +
+
`; export default class RootWidget extends Widget { name = "root"; template = template; - widgets = { Counter }; + widgets = { Counter, Navbar }; state = { validcounter: true}; resetCounter(ev: MouseEvent) { diff --git a/demo/src/main.ts b/demo/src/main.ts index 11543bbe..46598977 100644 --- a/demo/src/main.ts +++ b/demo/src/main.ts @@ -1,23 +1,10 @@ /// -// 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]); - -// (window).h = h; -// (window).patch = patch; -// (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); }); diff --git a/package.json b/package.json index 8761f0a2..0345f963 100644 --- a/package.json +++ b/package.json @@ -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",