NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

work on navbar

Browse Source
This commit is contained in:
Géry Debongnie
2019-02-05 08:56:33 +01:00
parent 05e9797f7a
commit 52d855241d
14 changed files with 138 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/src/scss/app.scss
+45 -13
View File
@@ -1,4 +1,4 @@
$navbar-height: 40px;
$navbar-height: 46px;
$main-color: #875a7b;
$o-notification-info-bg-color: #fcfbea;
$o-main-text-color: #666666;
@@ -12,6 +12,25 @@ body {
margin: 0;
}
/***** Generic stuff *****/
.dropdown-toggle.o-no-caret::before,
.dropdown-toggle.o-no-caret::after {
content: normal;
}
.dropdown-item {
font-size: 13px;
line-height: 20px;
&:hover {
background-color: #e9ecef;
}
&:active {
color: #212529;
background-color: #dee2e6;
}
}
/***** Web Client *****/
.o_web_client {
font-family: sans-serif;
@@ -26,17 +45,28 @@ body {
color: white;
display: flex;
line-height: $navbar-height;
font-size: 18px;
font-size: 13px;
&.o_in_home {
background-color: #bba2a5;
}
a.o_title {
padding: 10px 16px 16px 20px;
&:hover {
background-color: #68465f;
}
padding: 13px 16px 16px 20px;
color: white;
font-size: 18px;
}
a.o_title:hover,
a.o_menu_brand:hover {
background-color: darken($main-color, 10);
}
a.o_menu_brand {
font-size: 20px;
color: white;
text-decoration: none;
padding: 1px 12px;
}
ul {
@@ -46,18 +76,20 @@ body {
margin: 0;
}
li {
.o_menu_sections > li {
margin: 0 4px;
font-size: 20px;
&:hover {
background-color: darken($main-color, 10);
}
}
a {
color: white;
text-decoration: none;
padding: 0 5px;
> a {
display: block;
height: 40px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 0 10px;
}
}
}
web/static/src/ts/core/base_widget.ts
+6 -2
View File
@@ -40,7 +40,11 @@ export interface Type<T> extends Function {
// Widget
//------------------------------------------------------------------------------
export class BaseWidget<T extends WEnv, Props, State> extends EventBus {
export class BaseWidget<
T extends WEnv,
Props,
State extends {}
> extends EventBus {
__widget__: Meta<WEnv>;
template: string = "default";
inlineTemplate: string | null = null;
@@ -50,7 +54,7 @@ export class BaseWidget<T extends WEnv, Props, State> extends EventBus {
}
env: T;
state: Object = {};
state: State = <State>{};
props: Props;
refs: {
[key: string]: BaseWidget<T, any, any> | HTMLElement | undefined;
web/static/src/ts/env.ts
-11
View File
@@ -36,9 +36,6 @@ export interface Env extends WEnv {
// registries
actionRegistry: Registry<ActionWidget>;
// data
menus: Menu[];
// helpers
rpc: IAjax["rpc"];
@@ -72,12 +69,6 @@ export const makeEnvironment = memoize(async function(): Promise<Env> {
const actionManager = new ActionManager(actionRegistry);
const notifications = new NotificationManager();
// demo data
const menus = [
{ title: "Discuss", actionID: 1 },
{ title: "CRM", actionID: 2 }
];
// templates
const result = await fetch("templates.xml");
if (!result.ok) {
@@ -98,8 +89,6 @@ export const makeEnvironment = memoize(async function(): Promise<Env> {
actionRegistry,
router,
menus,
rpc: ajax.rpc,
debug: false,
web/static/src/ts/misc/menu_helpers.ts
+8 -2
View File
@@ -14,6 +14,7 @@ export interface BaseMenuItem {
}
export interface MenuItem extends BaseMenuItem {
// root menu id
menuId: number;
actionId: number;
children: MenuItem[];
@@ -28,6 +29,10 @@ export interface MenuInfo {
// Helpers
//------------------------------------------------------------------------------
/**
* Generate a valid MenuInfo object from a list of BaseMenuItems. This function
* is supposed to be called once at startup.
*/
export function processMenuItems(items: BaseMenuItem[]): MenuInfo {
const menuMap: MenuInfo["menuMap"] = {};
const roots: number[] = [];
@@ -38,10 +43,11 @@ export function processMenuItems(items: BaseMenuItem[]): MenuInfo {
addToMap(root, root.id);
}
function addToMap(m: BaseMenuItem, menuId: number) {
function addToMap(m: BaseMenuItem, menuId: number): MenuItem {
let item: MenuItem = Object.assign({ menuId, actionId: -1 }, <MenuItem>m);
menuMap[item.id] = item;
m.children.forEach(c => addToMap(c, menuId));
item.children = m.children.map(c => addToMap(c, menuId));
return item;
}
// add proper actionId to every menuitems
web/static/src/ts/services/action_manager.ts
+4 -2
View File
@@ -59,10 +59,12 @@ export class ActionManager extends EventBus implements IActionManager {
}
doAction(request: ActionRequest) {
console.log("doaction", request);
if (typeof request === "number") {
// this is an action ID
let name = request === 1 ? "discuss" : "crm";
let title = request === 1 ? "Discuss" : "CRM";
let name = request === 131 ? "discuss" : "crm";
let title =
request === 131 ? "Discuss" : request === 250 ? "Notes" : "CRM";
let Widget = this.registry.get(name);
this.stack = [
{
web/static/src/ts/widgets/Discuss.ts
+1 -1
View File
@@ -18,7 +18,7 @@ interface State {
export class Discuss extends Widget<{}, State> {
template = "web.discuss";
widgets = { Clock, Counter, ColorWidget };
state = { validcounter: true, color: "red" };
state: State = { validcounter: true, color: "red" };
resetCounter(ev: MouseEvent) {
if (this.refs.counter instanceof Counter) {
web/static/src/ts/widgets/Navbar.ts
+10 -6
View File
@@ -1,6 +1,5 @@
import { Menu } from "../env";
import { MenuItem } from "../misc/menu_helpers";
import { Widget } from "./widget";
import { PureWidget } from "./widget";
//------------------------------------------------------------------------------
// Types
@@ -15,16 +14,21 @@ export interface Props {
// Navbar
//------------------------------------------------------------------------------
export class Navbar extends Widget<Props, {}> {
export class Navbar extends PureWidget<Props, {}> {
template = "web.navbar";
getUrl(menu: Menu) {
const action_id = String(menu.actionID);
return this.env.router.formatURL("", { action_id });
getUrl(menu: MenuItem) {
const action_id = String(menu.actionId);
const menu_id = String(menu.menuId);
return this.env.router.formatURL("", { action_id, menu_id });
}
toggleHome(ev: MouseEvent) {
ev.preventDefault();
this.trigger("toggle_home_menu");
}
openMenu(menu: MenuItem) {
this.trigger("open_menu", menu);
}
}
web/static/src/ts/widgets/home_menu.ts
+2 -2
View File
@@ -21,8 +21,8 @@ export class HomeMenu extends Widget<Props, {}> {
return info.roots.map(root => info.menuMap[root]!);
}
openApp(app: MenuItem, event: MouseEvent) {
openMenu(app: MenuItem, event: MouseEvent) {
event.preventDefault();
this.trigger("app_opened", app);
this.trigger("open_menu", app);
}
}
web/static/src/ts/widgets/notification.ts
+3 -1
View File
@@ -4,7 +4,9 @@ import { Widget } from "./widget";
export class Notification extends Widget<INotification, {}> {
template = "web.notification";
close() {
close(ev: MouseEvent) {
// we do not want the url to change
ev.preventDefault();
this.env.notifications.close(this.props.id);
}
}
web/static/src/ts/widgets/root.ts
+3 -2
View File
@@ -89,7 +89,8 @@ export class Root extends Widget<Props, State> {
this.updateState({ inHome: !this.state.inHome });
}
openApp(app: MenuItem) {
this.updateAppState(app, app.actionId);
openMenu(menu: MenuItem) {
const app = this.props.menuInfo.menuMap[menu.menuId]!;
this.updateAppState(app, menu.actionId);
}
}
web/static/src/ts/widgets/widget.ts
+20
View File
@@ -2,3 +2,23 @@ import { BaseWidget } from "../core/base_widget";
import { Env } from "../env";
export class Widget<Props, State> extends BaseWidget<Env, Props, State> {}
// TODO: move this to PureComponent in core
export class PureWidget<Props, State> extends Widget<Props, State> {
shouldUpdate(nextProps: Props): boolean {
for (let k in nextProps) {
if (nextProps[k] !== this.props[k]) {
return true;
}
}
return false;
}
async updateState(nextState: Partial<State>) {
for (let k in nextState) {
if (nextState[k] !== this.state[k]) {
return;
}
}
return super.updateState(nextState);
}
}
web/static/src/xml/templates.xml
+34 -12
View File
@@ -2,9 +2,9 @@
<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-widget="Navbar" t-props="{inHome:state.inHome,app:state.currentApp}" t-on-toggle_home_menu="toggleHome" t-on-open_menu="openMenu"/>
<t t-if="state.inHome">
<t t-widget="HomeMenu" t-keep-alive="1" t-props="{menuInfo:props.menuInfo}" t-on-app_opened="openApp"/>
<t t-widget="HomeMenu" t-keep-alive="1" t-props="{menuInfo:props.menuInfo}" t-on-open_menu="openMenu"/>
</t>
<t t-else="1">
<t t-widget="ActionContainer" t-props="{stack:state.stack}" t-keep-alive="1"/>
@@ -18,22 +18,44 @@
<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 &amp;&amp; props.app">
<a class="o_menu_brand" href="#" role="button">
<t t-if="!props.inHome &amp;&amp; props.app">
<a class="o_menu_brand" t-att-href="getUrl(props.app)" role="button" t-on-click="openMenu(props.app)">
<t t-esc="props.app.name"/>
</a>
<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>
<ul class="o_menu_sections">
<li t-foreach="props.app.children" t-as="menu">
<t t-if="menu.children.length === 0">
<a t-att-href="getUrl(menu)" role="menuitem" t-on-click="openMenu(menu)">
<span>
<t t-esc="menu.name"/>
</span>
</a>
</t>
<t t-else="1">
<a href="#" role="button" class="dropdown-toggle o-no-caret" data-toggle="dropdown">
<span>
<t t-esc="menu.name"/>
</span>
</a>
<div class="dropdown-menu" role="menu">
<t t-foreach="menu.children" t-as="submenu">
<a t-att-href="getUrl(submenu)" data-toggle="collapse" data-target="#someid" role="menuitem" class="dropdown-item" t-on-click="openMenu(submenu)">
<span>
<t t-esc="submenu.name"/>
</span>
</a>
</t>
</div>
</t>
</li>
<li t-if="env.isMobile">MOBILEMODE</li>
</ul>
</t>
</div>
<div t-name="web.home_menu" class="o_home_menu">
<div class="o_apps">
<a t-foreach="apps" t-as="app" t-att-href="'#menu_id=' + app.menuId + '&amp;action_id=' + app.actionId" class="o_app" t-on-click="openApp(app)">
<a t-foreach="apps" t-as="app" t-att-href="'#menu_id=' + app.menuId + '&amp;action_id=' + app.actionId" class="o_app" t-on-click="openMenu(app)">
<i t-att-class="app.icon + ' o_app_icon fa-3x fa-fw'"/>
<div class="o_caption">
<t t-esc="app.name"/>
web/static/tests/helpers.ts
+1 -2
View File
@@ -40,8 +40,7 @@ export function makeTestEnv(): Env {
router,
rpc: ajax.rpc,
debug: false,
isMobile: false,
menus: []
isMobile: false
};
}
web/static/tests/widgets/navbar.test.ts
+1 -3
View File
@@ -1,4 +1,3 @@
import { Env } from "../../src/ts/env";
import { Navbar, Props } from "../../src/ts/widgets/navbar";
import { makeTestEnv, makeTestFixture, loadTemplates } from "../helpers";
@@ -7,7 +6,7 @@ import { makeTestEnv, makeTestFixture, loadTemplates } from "../helpers";
//------------------------------------------------------------------------------
let fixture: HTMLElement;
let env: Env;
let env: ReturnType<typeof makeTestEnv>;
let props: Props;
let templates: string;
@@ -37,7 +36,6 @@ test("can be rendered", async () => {
});
test("can render one menu item", async () => {
env.menus.push({ title: "menu", actionID: 4 });
const navbar = new Navbar(env, props);
await navbar.mount(fixture);
expect(fixture.innerHTML).toMatchSnapshot();