load widget templates separately (so no more inline)

web/static/src/ts/widgets/Action.ts

@@ -7,8 +7,7 @@ export interface Props {
 }
 
 export class Action extends Widget<Env, Props> {
-  name = "action";
-  template = `<div class="o_content"/>`;
+  template = "action";
   currentWidget: any;
 
   shouldUpdate(nextProps: Props) {

web/static/src/ts/widgets/CRM.ts

@@ -1,13 +1,6 @@
 import { Widget } from "../core/widget";
 import { Env } from "../env";
 
-const template = `
-    <div class="o_crm">
-        <span>CRM!!!!</span>
-    </div>
-`;
-
 export class CRM extends Widget<Env, {}> {
-  name = "crm";
-  template = template;
+  template = "crm";
 }

web/static/src/ts/widgets/Counter.ts

@@ -1,21 +1,12 @@
 import { Widget } from "../core/widget";
 import { Env } from "../env";
 
-const template = `
-    <div>
-        <button t-on-click="increment(-1)">-</button>
-        <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
-        <button t-on-click="increment(1)">+</button>
-    </div>
-`;
-
 interface Props {
   initialState?: number;
 }
 
 export class Counter extends Widget<Env, Props> {
-  name = "counter";
-  template = template;
+  template = "counter";
   state = {
     counter: 0
   };

web/static/src/ts/widgets/Discuss.ts

@@ -3,32 +3,8 @@ import { Env } from "../env";
 import { Clock } from "./clock";
 import { Counter } from "./counter";
 
-const template = `
-    <div class="o_discuss">
-        <span>DISCUSS!!</span>
-        <button t-on-click="resetCounter">Reset first counter</button>
-        <button t-on-click="resetCounterAsync">Reset counter 2 in 3s</button>
-        <button t-on-click="toggle">Toggle  Clock/counters</button>
-        <button t-on-click="toggleColor">Toggle Color</button>
-        <button t-on-click="updateState({})">Rerender this widget</button>
-        <input t-ref="textinput"/>
-        <t t-if="state.validcounter">
-            <t t-widget="Counter" t-ref="counter" t-props="{initialState:4}"/>
-            <t t-widget="Counter" t-ref="counter2" t-props="{initialState:400}"/>
-        </t>
-        <t t-else="1">
-            <t t-widget="Clock"/>
-        </t>
-        <t t-widget="ColorWidget" t-props="{color: state.color}"/>
-        <button t-on-click="addNotif(false)">Add notif</button>
-        <button t-on-click="addNotif(true)">Add sticky notif</button>
-
-    </div>
-`;
-
 export class Discuss extends Widget<Env, {}> {
-  name = "discuss";
-  template = template;
+  template = "discuss";
   widgets = { Clock, Counter, ColorWidget };
   state = { validcounter: true, color: "red" };
 
@@ -63,6 +39,5 @@ export class Discuss extends Widget<Env, {}> {
 }
 
 class ColorWidget extends Widget<Env, { color: "red" | "blue" }> {
-  name = "colorwidget";
-  template = `<div>Current Color: <t t-esc="props.color"/></div>`;
+  template = "colorwidget";
 }

web/static/src/ts/widgets/Navbar.ts

@@ -1,28 +1,13 @@
 import { Widget } from "../core/widget";
 import { Env, Menu } from "../env";
 
-const template = `
-    <div class="o_navbar">
-        <a aria-label="Applications" class="o_title fa fa-th" href="#" title="Applications" accesskey="h" t-on-click="toggleHome"/>
-        <ul t-if="!props.inMenu">
-            <li t-foreach="env.menus" t-as="menu">
-                <a t-att-href="getUrl(menu)">
-                    <t t-esc="menu.title"/>
-                </a>
-            </li>
-            <li t-if="env.isMobile">MOBILEMODE</li>
-        </ul>
-    </div>
-`;
-
 export interface Props {
   toggleHome: () => void;
   inMenu: boolean;
 }
 
 export class Navbar extends Widget<Env, Props> {
-  name = "navbar";
-  template = template;
+  template = "navbar";
 
   getUrl(menu: Menu) {
     const action_id = String(menu.actionID);

web/static/src/ts/widgets/clock.ts

@@ -2,8 +2,7 @@ import { Widget } from "../core/widget";
 import { Env } from "../env";
 
 export class Clock extends Widget<Env, {}> {
-  name = "clock";
-  template = `<div class="o_clock"><t t-esc="state.currentTime"/></div>`;
+  template = "clock";
   timeout: any | undefined;
 
   state = {

web/static/src/ts/widgets/home_menu.ts

@@ -1,13 +1,6 @@
 import { Widget } from "../core/widget";
 import { Env } from "../env";
 
-const template = `
-    <div class="o_home_menu">
-        <span>HOME MENU</span>
-    </div>
-`;
-
 export class HomeMenu extends Widget<Env, {}> {
-  name = "home";
-  template = template;
+  template = "home";
 }

web/static/src/ts/widgets/notification.ts

@@ -2,21 +2,8 @@ import { Widget } from "../core/widget";
 import { Env } from "../env";
 import { INotification } from "../services/notifications";
 
-const template = `
-    <div class="o_notification">
-        <a t-if="props.sticky" class="fa fa-times o_close" href="#" title="Close" aria-label="Close" t-on-click="close"/>
-        <div class="o_notification_title">
-            <t t-raw="props.title"/>
-        </div>
-        <div class="o_notification_content" t-if="props.message.length">
-            <t t-raw="props.message"/>
-        </div>
-
-    </div>`;
-
 export class Notification extends Widget<Env, INotification> {
-  name = "notification";
-  template = template;
+  template = "notification";
 
   close() {
     this.env.notifications.close(this.props.id);