mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
preliminary work for better menu support
This commit is contained in:
+120
-3
@@ -3,12 +3,129 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Odoo Web Core Demo</title>
|
||||
<script src="/static/libs/almond/almond.js"></script>
|
||||
<script src="/main.js"></script>
|
||||
<link rel="icon" href="data:,">
|
||||
<link rel="stylesheet" href="/app.css">
|
||||
|
||||
<!-- Bootstrap... This sucks. -->
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Font awesome -->
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
|
||||
|
||||
<!-- AMD module system -->
|
||||
<script src="/static/libs/almond/almond.js"></script>
|
||||
|
||||
<!-- Application JS/CSS -->
|
||||
<script src="/main.js"></script>
|
||||
<link rel="stylesheet" href="/app.css">
|
||||
|
||||
<script>
|
||||
window.odoo = {};
|
||||
odoo.menus = [
|
||||
{
|
||||
id: 96,
|
||||
name: "Discuss",
|
||||
parent_id: false,
|
||||
action: "ir.actions.client,131",
|
||||
icon: "fa fa-comment",
|
||||
children: [
|
||||
{
|
||||
id: 97,
|
||||
name: "Integrations",
|
||||
parent_id: 96,
|
||||
action: false,
|
||||
icon: false,
|
||||
children: [
|
||||
{
|
||||
id: 188,
|
||||
name: "Github Repositories",
|
||||
parent_id: 97,
|
||||
action: "ir.actions.act_window,233",
|
||||
icon: false,
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 205,
|
||||
name: "Notes",
|
||||
parent_id: false,
|
||||
action: "ir.actions.act_window,250",
|
||||
icon: "fa fa-pen",
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 409,
|
||||
name: "CRM",
|
||||
parent_id: false,
|
||||
action: "ir.actions.act_window,597",
|
||||
icon: "fa fa-handshake",
|
||||
children: [
|
||||
{
|
||||
id: 418,
|
||||
name: "Sales",
|
||||
parent_id: 409,
|
||||
action: false,
|
||||
icon: false,
|
||||
children: [
|
||||
{
|
||||
id: 423,
|
||||
name: "My Pipeline",
|
||||
parent_id: 418,
|
||||
action: "ir.actions.act_window,597",
|
||||
icon: false,
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 812,
|
||||
name: "My Quotations",
|
||||
parent_id: 418,
|
||||
action: "ir.actions.act_window,1051",
|
||||
icon: false,
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 419,
|
||||
name: "Team Pipelines",
|
||||
parent_id: 418,
|
||||
action: "ir.actions.act_window,275",
|
||||
icon: false,
|
||||
children: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 421,
|
||||
name: "Leads",
|
||||
parent_id: 409,
|
||||
action: false,
|
||||
icon: false,
|
||||
children: [
|
||||
{
|
||||
id: 422,
|
||||
name: "Leads",
|
||||
parent_id: 421,
|
||||
action: "ir.actions.act_window,595",
|
||||
icon: false,
|
||||
children: []
|
||||
},
|
||||
{
|
||||
id: 752,
|
||||
name: "Scoring Rules",
|
||||
parent_id: 421,
|
||||
icon: false,
|
||||
action: "ir.actions.act_window,1083",
|
||||
children: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
require('main');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { debounce } from "./core/utils";
|
||||
import { makeEnvironment } from "./env";
|
||||
import { Root } from "./widgets/root";
|
||||
import { MenuItem, processMenuItems } from "./misc/menu_helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Application bootstrapping
|
||||
@@ -10,9 +11,18 @@ import { Root } from "./widgets/root";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async function() {
|
||||
const env = await makeEnvironment();
|
||||
const rootWidget = new Root(env);
|
||||
await rootWidget.mount(document.body);
|
||||
|
||||
// menu processing
|
||||
const menuItems: MenuItem[] = (<any>window).odoo.menus;
|
||||
const menuInfo = processMenuItems(menuItems);
|
||||
delete (<any>window).odoo.menus; // overkill?
|
||||
|
||||
// creating root widget
|
||||
const rootWidget = new Root(env, { menuInfo });
|
||||
await rootWidget.mount(document.body);
|
||||
(<any>window).odoo.rootWidget = rootWidget;
|
||||
|
||||
// adding reactiveness to mobile/non mobile
|
||||
window.addEventListener("resize", <any>debounce(() => {
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
if (isMobile !== env.isMobile) {
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
//------------------------------------------------------------------------------
|
||||
// Types
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
export interface BaseMenuItem {
|
||||
id: number;
|
||||
name: string;
|
||||
parent_id: number | false;
|
||||
action: string | false;
|
||||
icon: string | false;
|
||||
}
|
||||
|
||||
export interface MenuItem extends BaseMenuItem {
|
||||
children: MenuItem[];
|
||||
}
|
||||
|
||||
export interface ProcessedMenuItem extends BaseMenuItem {
|
||||
children: number[];
|
||||
}
|
||||
|
||||
export interface MenuInfo {
|
||||
menuMap: { [key: number]: ProcessedMenuItem | undefined };
|
||||
roots: number[];
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
export function processMenuItems(items: MenuItem[]): MenuInfo {
|
||||
const menuMap: MenuInfo["menuMap"] = {};
|
||||
const roots: number[] = [];
|
||||
|
||||
for (let root of items) {
|
||||
roots.push(root.id);
|
||||
addToMap(root);
|
||||
}
|
||||
|
||||
function addToMap(m: MenuItem) {
|
||||
let processedItem: ProcessedMenuItem = Object.assign({}, m, {
|
||||
children: m.children.map(c => c.id)
|
||||
});
|
||||
menuMap[processedItem.id] = processedItem;
|
||||
m.children.forEach(addToMap);
|
||||
}
|
||||
|
||||
return { menuMap, roots };
|
||||
}
|
||||
|
||||
// todo
|
||||
|
||||
// menu -> formatURL(menuID, menus),
|
||||
// findApp(menuID, menus),
|
||||
// findMenu
|
||||
@@ -1,7 +1,8 @@
|
||||
import { INotification } from "../core/notifications";
|
||||
import { Widget } from "../core/widget";
|
||||
import { Env } from "../env";
|
||||
import { MenuInfo } from "../misc/menu_helpers";
|
||||
import { ActionStack } from "../services/action_manager";
|
||||
import { INotification } from "../core/notifications";
|
||||
import { ActionContainer } from "./action_container";
|
||||
import { HomeMenu } from "./home_menu";
|
||||
import { Navbar } from "./navbar";
|
||||
@@ -17,11 +18,15 @@ interface State {
|
||||
inHome: boolean;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
menuInfo: MenuInfo;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Root Widget
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
export class Root extends Widget<Env, {}> {
|
||||
export class Root extends Widget<Env, Props> {
|
||||
template = "web.web_client";
|
||||
widgets = { Navbar, Notification, HomeMenu, ActionContainer };
|
||||
|
||||
@@ -31,11 +36,6 @@ export class Root extends Widget<Env, {}> {
|
||||
inHome: false
|
||||
};
|
||||
|
||||
constructor(env: Env) {
|
||||
super(env);
|
||||
this.toggleHome = this.toggleHome.bind(this);
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.env.notifications.on("notifications_updated", this, notifs =>
|
||||
this.updateState({ notifications: notifs })
|
||||
|
||||
Reference in New Issue
Block a user