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:
Géry Debongnie
+120
-3
@@ -3,12 +3,129 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Odoo Web Core Demo</title>
|
<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="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">
|
<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>
|
<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');
|
require('main');
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
import { debounce } from "./core/utils";
|
import { debounce } from "./core/utils";
|
||||||
import { makeEnvironment } from "./env";
|
import { makeEnvironment } from "./env";
|
||||||
import { Root } from "./widgets/root";
|
import { Root } from "./widgets/root";
|
||||||
|
import { MenuItem, processMenuItems } from "./misc/menu_helpers";
|
||||||
|
|
||||||
//------------------------------------------------------------------------------
|
//------------------------------------------------------------------------------
|
||||||
// Application bootstrapping
|
// Application bootstrapping
|
||||||
@@ -10,9 +11,18 @@ import { Root } from "./widgets/root";
|
|||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", async function() {
|
document.addEventListener("DOMContentLoaded", async function() {
|
||||||
const env = await makeEnvironment();
|
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(() => {
|
window.addEventListener("resize", <any>debounce(() => {
|
||||||
const isMobile = window.innerWidth <= 768;
|
const isMobile = window.innerWidth <= 768;
|
||||||
if (isMobile !== env.isMobile) {
|
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 { Widget } from "../core/widget";
|
||||||
import { Env } from "../env";
|
import { Env } from "../env";
|
||||||
|
import { MenuInfo } from "../misc/menu_helpers";
|
||||||
import { ActionStack } from "../services/action_manager";
|
import { ActionStack } from "../services/action_manager";
|
||||||
import { INotification } from "../core/notifications";
|
|
||||||
import { ActionContainer } from "./action_container";
|
import { ActionContainer } from "./action_container";
|
||||||
import { HomeMenu } from "./home_menu";
|
import { HomeMenu } from "./home_menu";
|
||||||
import { Navbar } from "./navbar";
|
import { Navbar } from "./navbar";
|
||||||
@@ -17,11 +18,15 @@ interface State {
|
|||||||
inHome: boolean;
|
inHome: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
menuInfo: MenuInfo;
|
||||||
|
}
|
||||||
|
|
||||||
//------------------------------------------------------------------------------
|
//------------------------------------------------------------------------------
|
||||||
// Root Widget
|
// Root Widget
|
||||||
//------------------------------------------------------------------------------
|
//------------------------------------------------------------------------------
|
||||||
|
|
||||||
export class Root extends Widget<Env, {}> {
|
export class Root extends Widget<Env, Props> {
|
||||||
template = "web.web_client";
|
template = "web.web_client";
|
||||||
widgets = { Navbar, Notification, HomeMenu, ActionContainer };
|
widgets = { Navbar, Notification, HomeMenu, ActionContainer };
|
||||||
|
|
||||||
@@ -31,11 +36,6 @@ export class Root extends Widget<Env, {}> {
|
|||||||
inHome: false
|
inHome: false
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(env: Env) {
|
|
||||||
super(env);
|
|
||||||
this.toggleHome = this.toggleHome.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.env.notifications.on("notifications_updated", this, notifs =>
|
this.env.notifications.on("notifications_updated", this, notifs =>
|
||||||
this.updateState({ notifications: notifs })
|
this.updateState({ notifications: notifs })
|
||||||
|
|||||||
Reference in New Issue
Block a user