mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
work on home menu
This commit is contained in:
Géry Debongnie
@@ -200,3 +200,5 @@ We have 3 main folders and 3 main files:
|
||||
- when t-widget/t-on directives are compiled, the widget/eval context is actually available. Should we use that info to determine if bound methods exists on the widget?
|
||||
|
||||
- allow t-if t-widget and t-else t-widget on same t tag
|
||||
|
||||
- should we allow class and t-add-class to be additive?
|
||||
|
||||
@@ -12,7 +12,7 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Web Client */
|
||||
/***** Web Client *****/
|
||||
.o_web_client {
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
@@ -20,7 +20,7 @@ body {
|
||||
grid-template-rows: $navbar-height auto;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
/***** Navbar *****/
|
||||
.o_navbar {
|
||||
background-color: $main-color;
|
||||
color: white;
|
||||
@@ -28,6 +28,10 @@ body {
|
||||
line-height: $navbar-height;
|
||||
font-size: 18px;
|
||||
|
||||
&.o_in_home {
|
||||
background-color: #bba2a5;
|
||||
}
|
||||
|
||||
a.o_title {
|
||||
padding: 10px 16px 16px 20px;
|
||||
&:hover {
|
||||
@@ -57,7 +61,44 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Notifications */
|
||||
/***** Home Menu *****/
|
||||
.o_home_menu {
|
||||
background-color: #bba2a5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.o_apps {
|
||||
margin-top: 100px;
|
||||
width: 100%;
|
||||
max-width: 850px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
.o_app {
|
||||
width: 16.6666667%;
|
||||
max-height: 110px;
|
||||
padding: 10px 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: white;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
|
||||
font-size: 15px;
|
||||
transition: background-color 0.3s ease 0s;
|
||||
&:hover {
|
||||
background-color: darken(#bba2a5, 4);
|
||||
}
|
||||
|
||||
.o_app_icon {
|
||||
max-width: 70px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
box-shadow: 0 8px 0 -10px black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***** Notifications *****/
|
||||
.o_notification_container {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
@@ -101,7 +142,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
/* Discuss */
|
||||
/***** Discuss *****/
|
||||
.o_discuss {
|
||||
padding: 20px;
|
||||
font-size: 15px;
|
||||
|
||||
@@ -1,6 +1,28 @@
|
||||
import { Widget } from "../core/widget";
|
||||
import { Env } from "../env";
|
||||
import { MenuInfo, ProcessedMenuItem } from "../misc/menu_helpers";
|
||||
|
||||
export class HomeMenu extends Widget<Env, {}> {
|
||||
template = "web.home_menu";
|
||||
//------------------------------------------------------------------------------
|
||||
// Types
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
export interface Props {
|
||||
menuInfo: MenuInfo;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Home Menu
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
export class HomeMenu extends Widget<Env, Props> {
|
||||
template = "web.home_menu";
|
||||
|
||||
openApp(appId: number) {
|
||||
debugger;
|
||||
}
|
||||
|
||||
get apps(): ProcessedMenuItem[] {
|
||||
const info = this.props.menuInfo;
|
||||
return info.roots.map(root => info.menuMap[root]!);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,72 +1,78 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
|
||||
<div t-name="web.web_client" class="o_web_client">
|
||||
<t t-widget="Navbar" t-props="{inHome:state.inHome,app:state.currentApp}" t-on-toggle-home-menu="toggleHome"/>
|
||||
<t t-if="state.inHome">
|
||||
<t t-widget="HomeMenu" t-keep-alive="1" t-props="{apps:apps, openApp: openApp}"/>
|
||||
</t>
|
||||
<t t-else="1">
|
||||
<t t-widget="ActionContainer" t-props="{stack:state.stack}" t-keep-alive="1"/>
|
||||
</t>
|
||||
<div class="o_notification_container">
|
||||
<t t-foreach="state.notifications" t-as="notif">
|
||||
<t t-widget="Notification" t-props="notif"/>
|
||||
</t>
|
||||
<div t-name="web.web_client" class="o_web_client">
|
||||
<t t-widget="Navbar" t-props="{inHome:state.inHome,app:state.currentApp}" t-on-toggle-home-menu="toggleHome"/>
|
||||
<t t-if="state.inHome">
|
||||
<t t-widget="HomeMenu" t-keep-alive="1" t-props="{menuInfo:props.menuInfo}"/>
|
||||
</t>
|
||||
<t t-else="1">
|
||||
<t t-widget="ActionContainer" t-props="{stack:state.stack}" t-keep-alive="1"/>
|
||||
</t>
|
||||
<div class="o_notification_container">
|
||||
<t t-foreach="state.notifications" t-as="notif">
|
||||
<t t-widget="Notification" t-props="notif"/>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div t-name="web.navbar" class="o_navbar" t-att-class="props.inHome ? 'o_navbar o_in_home' : '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.inHome">
|
||||
<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>
|
||||
|
||||
<div t-name="web.home_menu" class="o_home_menu">
|
||||
<div class="o_apps">
|
||||
<a t-foreach="apps" t-as="app" href="#" class="o_app" t-on-click="openApp(app.id)">
|
||||
<i t-att-class="app.icon + ' o_app_icon fa-3x fa-fw'"/>
|
||||
<div class="o_caption">
|
||||
<t t-esc="app.name"/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div t-name="web.action_container" class="o_content"/>
|
||||
|
||||
<div t-name="web.crm" class="o_crm">
|
||||
<span>CRM!!!!</span>
|
||||
<div t-name="web.notification" 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 t-name="web.discuss" 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 class="o_notification_content" t-if="props.message.length">
|
||||
<t t-raw="props.message"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div t-name="web.home_menu" class="o_home_menu">
|
||||
<span>HOME MENU</span>
|
||||
</div>
|
||||
<div t-name="web.action_container" class="o_content"/>
|
||||
|
||||
<div t-name="web.navbar" 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>
|
||||
<div t-name="web.crm" class="o_crm">
|
||||
<span>CRM!!!!</span>
|
||||
</div>
|
||||
|
||||
<div t-name="web.notification" 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>
|
||||
<div t-name="web.discuss" 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>
|
||||
|
||||
</templates>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`can be rendered 1`] = `
|
||||
"<div class=\\"o_home_menu\\">
|
||||
<div class=\\"o_apps\\">
|
||||
<a href=\\"#\\" class=\\"o_app\\">
|
||||
<i class=\\"fa fa-test o_app_icon fa-3x fa-fw\\"></i>
|
||||
<div class=\\"o_caption\\">
|
||||
Demo
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
@@ -2,34 +2,34 @@
|
||||
|
||||
exports[`can be rendered 1`] = `
|
||||
"<div class=\\"o_navbar\\">
|
||||
<a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
|
||||
<ul>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>"
|
||||
<a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
|
||||
<ul>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`can render one menu item 1`] = `
|
||||
"<div class=\\"o_navbar\\">
|
||||
<a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href=\\"\\">
|
||||
menu
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>"
|
||||
<a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href=\\"\\">
|
||||
menu
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`mobile mode: navbar is different 1`] = `
|
||||
"<div class=\\"o_navbar\\">
|
||||
<a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
|
||||
<ul>
|
||||
|
||||
<li>MOBILEMODE</li>
|
||||
</ul>
|
||||
</div>"
|
||||
<a aria-label=\\"Applications\\" class=\\"o_title fa fa-th\\" href=\\"#\\" title=\\"Applications\\" accesskey=\\"h\\"></a>
|
||||
<ul>
|
||||
|
||||
<li>MOBILEMODE</li>
|
||||
</ul>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
@@ -2,9 +2,8 @@
|
||||
|
||||
exports[`can be rendered 1`] = `
|
||||
"<div class=\\"o_notification\\">
|
||||
|
||||
<div class=\\"o_notification_title\\">title</div>
|
||||
<div class=\\"o_notification_content\\">message</div>
|
||||
|
||||
</div>"
|
||||
|
||||
<div class=\\"o_notification_title\\">title</div>
|
||||
<div class=\\"o_notification_content\\">message</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
import { Env } from "../../src/ts/env";
|
||||
import { HomeMenu, Props } from "../../src/ts/widgets/home_menu";
|
||||
import { makeTestEnv, makeTestFixture, loadTemplates } from "../helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
let env: Env;
|
||||
let props: Props;
|
||||
let templates: string;
|
||||
|
||||
beforeAll(async () => {
|
||||
templates = await loadTemplates();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
env = makeTestEnv();
|
||||
env.qweb.loadTemplates(templates);
|
||||
props = {
|
||||
menuInfo: {
|
||||
menuMap: {
|
||||
14: {
|
||||
id: 14,
|
||||
name: "Demo",
|
||||
parent_id: false,
|
||||
action: false,
|
||||
icon: "fa fa-test",
|
||||
children: []
|
||||
}
|
||||
},
|
||||
roots: [14]
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tests
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
test("can be rendered", async () => {
|
||||
const homeMenu = new HomeMenu(env, props);
|
||||
await homeMenu.mount(fixture);
|
||||
expect(fixture.innerHTML).toMatchSnapshot();
|
||||
});
|
||||
@@ -19,7 +19,7 @@ beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
env = makeTestEnv();
|
||||
env.qweb.loadTemplates(templates);
|
||||
props = { inMenu: false, toggleHome: () => {} };
|
||||
props = { inHome: false };
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
||||
Reference in New Issue
Block a user