move demo code to examples/

examples/web/static/src/ts/ui/control_panel.ts

@@ -0,0 +1,17 @@
+import { Widget } from "../widget";
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+export interface Props {
+  title: string;
+}
+
+//------------------------------------------------------------------------------
+// Navbar
+//------------------------------------------------------------------------------
+
+export class ControlPanel extends Widget<Props, {}> {
+  template = "web.control_panel";
+}

examples/web/static/src/ts/ui/home_menu.ts

@@ -0,0 +1,28 @@
+import { MenuInfo, MenuItem } from "../store/store";
+import { Widget } from "../widget";
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+export interface Props {
+  menuInfo: MenuInfo;
+}
+
+//------------------------------------------------------------------------------
+// Home Menu
+//------------------------------------------------------------------------------
+
+export class HomeMenu extends Widget<Props, {}> {
+  template = "web.home_menu";
+
+  get apps(): MenuItem[] {
+    const info = this.props.menuInfo;
+    return info.roots.map(root => info.menus[root]!);
+  }
+
+  openMenu(app: MenuItem, event: MouseEvent) {
+    event.preventDefault();
+    this.env.activateMenuItem(app.id);
+  }
+}

examples/web/static/src/ts/ui/navbar.ts

@@ -0,0 +1,34 @@
+import { MenuItem } from "../store/store";
+import { PureWidget } from "../widget";
+
+//------------------------------------------------------------------------------
+// Types
+//------------------------------------------------------------------------------
+
+export interface Props {
+  inHome: boolean;
+  app: MenuItem | null;
+}
+
+//------------------------------------------------------------------------------
+// Navbar
+//------------------------------------------------------------------------------
+
+export class Navbar extends PureWidget<Props, {}> {
+  template = "web.navbar";
+
+  getUrl(menu: MenuItem) {
+    const action_id = String(menu.actionId);
+    const menu_id = String(menu.app.id);
+    return this.env.services.router.formatURL("", { action_id, menu_id });
+  }
+
+  toggleHome(ev: MouseEvent) {
+    ev.preventDefault();
+    this.env.toggleHomeMenu();
+  }
+
+  openMenu(menu: MenuItem) {
+    this.env.activateMenuItem(menu.id);
+  }
+}

examples/web/static/src/ts/ui/notification.ts

@@ -0,0 +1,16 @@
+import { Notification as INotification } from "../store/store";
+import { Widget } from "../widget";
+
+export class Notification extends Widget<INotification, {}> {
+  template = "web.notification";
+
+  close(ev: MouseEvent) {
+    // we do not want the url to change
+    ev.preventDefault();
+    this.env.closeNotification(this.props.id);
+  }
+
+  get icon() {
+    return this.props.type === "warning" ? "fa-exclamation" : "fa-lightbulb";
+  }
+}

examples/web/static/src/ts/ui/root.ts

@@ -0,0 +1,61 @@
+import { debounce } from "../../../../../../src/utils";
+import { Env } from "../env";
+import { Controller } from "../store/action_manager_mixin";
+import { State, Store } from "../store/store";
+import { Widget } from "../widget";
+import { HomeMenu } from "./home_menu";
+import { Navbar } from "./navbar";
+import { Notification } from "./notification";
+
+//------------------------------------------------------------------------------
+// Root Widget
+//------------------------------------------------------------------------------
+
+export class Root extends Widget<Store, State> {
+  template = "web.web_client";
+  widgets = { Navbar, HomeMenu, Notification };
+
+  store: Store;
+
+  constructor(env: Env, store: Store) {
+    super(env, store);
+    this.store = store;
+    this.state = store.state;
+  }
+
+  mounted() {
+    this.store.on("state_updated", this, this.setState);
+    this.store.on("rpc_status", this, this.toggleLoadingIndicator);
+    this.store.on("update_action", this, this.applyController);
+    if (this.store.lastController) {
+      this.applyController(this.store.lastController);
+    }
+
+    // adding reactiveness to mobile/non mobile
+    window.addEventListener("resize", <any>(
+      debounce(this.applyMobileInterface.bind(this), 50)
+    ));
+  }
+
+  applyMobileInterface() {
+    const isMobile = window.innerWidth <= 768;
+    if (isMobile !== this.env.isMobile) {
+      this.env.isMobile = isMobile;
+      this.render();
+    }
+  }
+
+  toggleLoadingIndicator(status: "loading" | "notloading") {
+    const method = status === "loading" ? "remove" : "add";
+    (<any>this.refs.loading_indicator).classList[method]("d-none");
+  }
+
+  async applyController(controller: Controller) {
+    const widget = await controller.create(this);
+    if (widget) {
+      this.attachChild(widget, <HTMLElement>this.refs.content);
+      widget.el!.classList.add("o_action_controller");
+      this.store.activateController(controller);
+    }
+  }
+}