From bac075dbbd2b3813ef6573f9229cc27919f30fbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= Date: Thu, 31 Jan 2019 10:55:41 +0100 Subject: [PATCH] preliminary support for home menu --- web/static/src/scss/app.scss | 10 ++- web/static/src/ts/root.ts | 77 ++++++++++++------- web/static/src/ts/widgets/Action.ts | 14 ++++ web/static/src/ts/widgets/Navbar.ts | 16 +++- web/static/src/ts/widgets/home_menu.ts | 13 ++++ .../widgets/__snapshots__/navbar.test.ts.snap | 6 +- web/static/tests/widgets/navbar.test.ts | 10 ++- 7 files changed, 105 insertions(+), 41 deletions(-) create mode 100644 web/static/src/ts/widgets/Action.ts create mode 100644 web/static/src/ts/widgets/home_menu.ts diff --git a/web/static/src/scss/app.scss b/web/static/src/scss/app.scss index 0ed8fbd4..652e7851 100644 --- a/web/static/src/scss/app.scss +++ b/web/static/src/scss/app.scss @@ -26,11 +26,13 @@ body { color: white; display: flex; line-height: $navbar-height; + font-size: 18px; - span.title { - font-size: 24px; - font-weight: bold; - padding: 0 16px; + a.o_title { + padding: 10px 16px 16px 20px; + &:hover { + background-color: #68465f; + } } ul { diff --git a/web/static/src/ts/root.ts b/web/static/src/ts/root.ts index afbff914..70ce1c22 100644 --- a/web/static/src/ts/root.ts +++ b/web/static/src/ts/root.ts @@ -1,50 +1,69 @@ import { Widget } from "./core/widget"; -import { Navbar } from "./widgets/navbar"; -import { ActionWidget } from "./services/action_manager"; -import { INotification } from "./services/notifications"; -import { Notification } from "./widgets/notification"; import { Env } from "./env"; +import { INotification } from "./services/notifications"; +import { Action } from "./widgets/action"; +import { HomeMenu } from "./widgets/home_menu"; +import { Navbar } from "./widgets/navbar"; +import { Notification } from "./widgets/notification"; const template = `
- -
-
- - - -
+ + + + + + + +
+ + + +
`; +interface State { + notifications: INotification[]; + inMenu: boolean; +} + export class Root extends Widget { name = "root"; template = template; - widgets = { Navbar, Notification }; + widgets = { Navbar, Notification, HomeMenu, Action }; content: Widget | null = null; - state: { notifications: INotification[] } = { notifications: [] }; + state: State = { + notifications: [], + inMenu: false + }; + + constructor(env: Env) { + super(env); + this.toggleHomeMenu = this.toggleHomeMenu.bind(this); + } mounted() { - this.env.actionManager.on("action_ready", this, this.setContentWidget); + // this.env.actionManager.on("action_ready", this, this.setContentWidget); this.env.notifications.on("notification_added", this, this.addNotif); this.env.notifications.on("notification_removed", this, this.removeNotif); - const actionWidget = this.env.actionManager.getCurrentAction(); - if (actionWidget) { - this.setContentWidget(actionWidget); - } + // const actionWidget = this.env.actionManager.getCurrentAction(); + // if (actionWidget) { + // this.setContentWidget(actionWidget); + // } } - async setContentWidget(actionWidget: ActionWidget) { - const currentWidget = this.content; - const newWidget = new actionWidget.Widget(this, actionWidget.props); - await newWidget.mount(this.refs.content); - if (currentWidget) { - currentWidget.destroy(); - } - this.content = newWidget; - } + // async setContentWidget(actionWidget: ActionWidget) { + // const currentWidget = this.content; + // const newWidget = new actionWidget.Widget(this, actionWidget.props); + // await newWidget.mount(this.refs.content); + // if (currentWidget) { + // currentWidget.destroy(); + // } + // this.content = newWidget; + // } addNotif(notif: INotification) { const notifications = this.state.notifications.concat(notif); @@ -54,4 +73,8 @@ export class Root extends Widget { const notifs = this.state.notifications.filter(f => f.id !== notif.id); this.updateState({ notifications: notifs }); } + + toggleHomeMenu() { + this.updateState({ inMenu: !this.state.inMenu }); + } } diff --git a/web/static/src/ts/widgets/Action.ts b/web/static/src/ts/widgets/Action.ts new file mode 100644 index 00000000..a63da5b2 --- /dev/null +++ b/web/static/src/ts/widgets/Action.ts @@ -0,0 +1,14 @@ +import { Widget } from "../core/widget"; +import { Env } from "../env"; + +const template = ` +
+ MAIN ACTION + +
+`; + +export class Action extends Widget { + name = "action"; + template = template; +} diff --git a/web/static/src/ts/widgets/Navbar.ts b/web/static/src/ts/widgets/Navbar.ts index 1b1ce40b..19f95ed0 100644 --- a/web/static/src/ts/widgets/Navbar.ts +++ b/web/static/src/ts/widgets/Navbar.ts @@ -3,8 +3,8 @@ import { Env, Menu } from "../env"; const template = `
- Odoo MOBILE -
`; -export class Navbar extends Widget { +export interface Props { + toggleHomeMenu: () => void; + inMenu: boolean; +} + +export class Navbar extends Widget { name = "navbar"; template = template; @@ -22,4 +27,9 @@ export class Navbar extends Widget { const action_id = String(menu.actionID); return this.env.router.formatURL("", { action_id }); } + + toggleHomeMenu(ev: MouseEvent) { + ev.preventDefault(); + this.props.toggleHomeMenu(); + } } diff --git a/web/static/src/ts/widgets/home_menu.ts b/web/static/src/ts/widgets/home_menu.ts new file mode 100644 index 00000000..83332649 --- /dev/null +++ b/web/static/src/ts/widgets/home_menu.ts @@ -0,0 +1,13 @@ +import { Widget } from "../core/widget"; +import { Env } from "../env"; + +const template = ` +
+ HOME MENU +
+`; + +export class HomeMenu extends Widget { + name = "home"; + template = template; +} diff --git a/web/static/tests/widgets/__snapshots__/navbar.test.ts.snap b/web/static/tests/widgets/__snapshots__/navbar.test.ts.snap index daca628c..6ffe7d35 100644 --- a/web/static/tests/widgets/__snapshots__/navbar.test.ts.snap +++ b/web/static/tests/widgets/__snapshots__/navbar.test.ts.snap @@ -2,7 +2,7 @@ exports[`can be rendered 1`] = ` "
- Odoo +
@@ -11,7 +11,7 @@ exports[`can be rendered 1`] = ` exports[`can render one menu item 1`] = ` "
- Odoo +
  • @@ -24,7 +24,7 @@ exports[`can render one menu item 1`] = ` exports[`mobile mode: navbar is different 1`] = ` "
    - Odoo MOBILE +
    diff --git a/web/static/tests/widgets/navbar.test.ts b/web/static/tests/widgets/navbar.test.ts index 0531244a..6a95d77a 100644 --- a/web/static/tests/widgets/navbar.test.ts +++ b/web/static/tests/widgets/navbar.test.ts @@ -1,5 +1,5 @@ import { Env } from "../../src/ts/env"; -import { Navbar } from "../../src/ts/widgets/navbar"; +import { Navbar, Props } from "../../src/ts/widgets/navbar"; import { makeTestEnv, makeTestFixture } from "../helpers"; //------------------------------------------------------------------------------ @@ -8,10 +8,12 @@ import { makeTestEnv, makeTestFixture } from "../helpers"; let fixture: HTMLElement; let env: Env; +let props: Props; beforeEach(() => { fixture = makeTestFixture(); env = makeTestEnv(); + props = { inMenu: false, toggleHomeMenu: () => {} }; }); afterEach(() => { @@ -23,21 +25,21 @@ afterEach(() => { //------------------------------------------------------------------------------ test("can be rendered", async () => { - const navbar = new Navbar(env); + const navbar = new Navbar(env, props); await navbar.mount(fixture); expect(fixture.innerHTML).toMatchSnapshot(); }); test("can render one menu item", async () => { env.menus.push({ title: "menu", actionID: 4 }); - const navbar = new Navbar(env); + const navbar = new Navbar(env, props); await navbar.mount(fixture); expect(fixture.innerHTML).toMatchSnapshot(); }); test("mobile mode: navbar is different", async () => { env.isMobile = true; - const navbar = new Navbar(env); + const navbar = new Navbar(env, props); await navbar.mount(fixture); expect(fixture.innerHTML).toMatchSnapshot(); });