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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user