diff --git a/README.md b/README.md index 59c96e94..cfe5e25d 100644 --- a/README.md +++ b/README.md @@ -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? diff --git a/web/static/src/scss/app.scss b/web/static/src/scss/app.scss index 652e7851..50655d8c 100644 --- a/web/static/src/scss/app.scss +++ b/web/static/src/scss/app.scss @@ -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; diff --git a/web/static/src/ts/widgets/home_menu.ts b/web/static/src/ts/widgets/home_menu.ts index d90f27f9..04ac6d1a 100644 --- a/web/static/src/ts/widgets/home_menu.ts +++ b/web/static/src/ts/widgets/home_menu.ts @@ -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 { - template = "web.home_menu"; +//------------------------------------------------------------------------------ +// Types +//------------------------------------------------------------------------------ + +export interface Props { + menuInfo: MenuInfo; +} + +//------------------------------------------------------------------------------ +// Home Menu +//------------------------------------------------------------------------------ + +export class HomeMenu extends Widget { + template = "web.home_menu"; + + openApp(appId: number) { + debugger; + } + + get apps(): ProcessedMenuItem[] { + const info = this.props.menuInfo; + return info.roots.map(root => info.menuMap[root]!); + } } diff --git a/web/static/src/xml/templates.xml b/web/static/src/xml/templates.xml index e049c97f..ecda302e 100644 --- a/web/static/src/xml/templates.xml +++ b/web/static/src/xml/templates.xml @@ -1,72 +1,78 @@ -
- - - - - - - -
- - - +
+ + + + + + + +
+ + + +
+
+ +
+ + +
+ +
+
+ + +
+
+
+
-
- -
- CRM!!!! +
+ +
+
- -
- DISCUSS!! - - - - - - - - - - - - - - - - +
+
+
-
- HOME MENU -
+
-
- - -
+
+ CRM!!!! +
-
- -
- -
-
- -
- -
+
+ DISCUSS!! + + + + + + + + + + + + + + + + +
diff --git a/web/static/tests/widgets/__snapshots__/home_menu.test.ts.snap b/web/static/tests/widgets/__snapshots__/home_menu.test.ts.snap new file mode 100644 index 00000000..5d12b7e5 --- /dev/null +++ b/web/static/tests/widgets/__snapshots__/home_menu.test.ts.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`can be rendered 1`] = ` +"
+
+ + +
+ Demo +
+ +
+
" +`; diff --git a/web/static/tests/widgets/__snapshots__/navbar.test.ts.snap b/web/static/tests/widgets/__snapshots__/navbar.test.ts.snap index 2cdf565f..f7e29083 100644 --- a/web/static/tests/widgets/__snapshots__/navbar.test.ts.snap +++ b/web/static/tests/widgets/__snapshots__/navbar.test.ts.snap @@ -2,34 +2,34 @@ exports[`can be rendered 1`] = ` "
- -
    - - -
-
" + +
    + + +
+
" `; exports[`can render one menu item 1`] = ` "
- - -
" + + +
" `; exports[`mobile mode: navbar is different 1`] = ` "
- -
    - -
  • MOBILEMODE
    • -
-
" + +
    + +
  • MOBILEMODE
    • +
+
" `; diff --git a/web/static/tests/widgets/__snapshots__/notification.test.ts.snap b/web/static/tests/widgets/__snapshots__/notification.test.ts.snap index a03504ac..fedd1cbd 100644 --- a/web/static/tests/widgets/__snapshots__/notification.test.ts.snap +++ b/web/static/tests/widgets/__snapshots__/notification.test.ts.snap @@ -2,9 +2,8 @@ exports[`can be rendered 1`] = ` "
- -
title
-
message
- -
" + +
title
+
message
+
" `; diff --git a/web/static/tests/widgets/home_menu.test.ts b/web/static/tests/widgets/home_menu.test.ts new file mode 100644 index 00000000..2b8bb57a --- /dev/null +++ b/web/static/tests/widgets/home_menu.test.ts @@ -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(); +}); diff --git a/web/static/tests/widgets/navbar.test.ts b/web/static/tests/widgets/navbar.test.ts index 22ba62ca..89eaf801 100644 --- a/web/static/tests/widgets/navbar.test.ts +++ b/web/static/tests/widgets/navbar.test.ts @@ -19,7 +19,7 @@ beforeEach(() => { fixture = makeTestFixture(); env = makeTestEnv(); env.qweb.loadTemplates(templates); - props = { inMenu: false, toggleHome: () => {} }; + props = { inHome: false }; }); afterEach(() => {