diff --git a/web/static/src/scss/app.scss b/web/static/src/scss/app.scss index e1b08497..debf10f6 100644 --- a/web/static/src/scss/app.scss +++ b/web/static/src/scss/app.scss @@ -1,7 +1,50 @@ +// ------------------------------------------------------------------ +// Variables +// ------------------------------------------------------------------ $navbar-height: 46px; $main-color: #875a7b; $o-main-text-color: #666666; +$o-notification-info-bg-color: #fcfbea; +$o-notification-error-bg-color: #f16567; +$o-view-background-color: white; +$o-control-panel-background-color: $o-view-background-color; +$o-horizontal-padding: 16px; +$o-cp-breadcrumb-height: 30px; +// bootstrap overrides +// this does not work: $breadcrumb-bg: $o-control-panel-background-color; +.breadcrumb { + background-color: white; + padding: 0; +} + +// ------------------------------------------------------------------ +// Mixins +// ------------------------------------------------------------------ +@mixin o-webclient-padding( + $top: 0px, + $right: $o-horizontal-padding, + $bottom: 0px, + $left: $o-horizontal-padding +) { + padding-top: $top; + padding-right: $right; + padding-bottom: $bottom; + padding-left: $left; +} + +@mixin o-text-overflow($display: inline-block, $max-width: 100%) { + display: $display; + max-width: $max-width; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; // To update display context changed by overflow:hidden +} + +// ------------------------------------------------------------------ +// CSS +// ------------------------------------------------------------------ html { height: 100%; } @@ -138,9 +181,6 @@ body { } /***** Notifications *****/ -$o-notification-info-bg-color: #fcfbea; -$o-notification-error-bg-color: #f16567; - .o_notification_container { position: absolute; width: 300px; @@ -190,9 +230,20 @@ $o-notification-error-bg-color: #f16567; } /***** Discuss *****/ -.o_discuss { - padding: 20px; +.o_discuss .o_content { font-size: 15px; + display: flex; + + .o_discuss_sidebar { + background-color: #212529; + flex: 0 0 300px; + color: white; + padding: 20px; + } + .o_discuss_content { + padding: 20px; + flex: 1 1 auto; + } button { padding: 5px; @@ -210,3 +261,81 @@ $o-notification-error-bg-color: #f16567; padding: 4px; font-size: 14px; } + +/***** Control Panel *****/ +.o_control_panel { + display: flex; + flex-flow: row wrap; + border-bottom: 1px solid darken($o-control-panel-background-color, 20%); + @include o-webclient-padding($top: 10px, $bottom: 10px); + background-color: $o-control-panel-background-color; + + > .breadcrumb { + width: 50%; + font-size: 18px; + + > li { + @include o-text-overflow($max-width: 90%); + + > a { + cursor: pointer; + } + } + } + + > .o_cp_searchview { + width: 50%; + min-height: $o-cp-breadcrumb-height; + } + + > .o_cp_left { + display: flex; + justify-content: space-between; + width: 50%; + margin-top: 5px; + + > .o_cp_sidebar { + padding-right: 10px; + } + } + + > .o_cp_right { + display: flex; + width: 50%; + margin-top: 5px; + + > .o_cp_pager { + margin: auto 0 auto auto; + padding-left: 5px; + text-align: center; + user-select: none; + + > div { + display: flex; + align-items: center; + } + + .o_pager_counter { + margin-right: 5px; + } + } + } +} + +/***** Action Controller *****/ +.o_action_controller { + height: 100%; + display: flex; + flex-flow: column nowrap; + padding: 0; + + > .o_cp_controller { + flex: 0 0 auto; + } + + > .o_content { + overflow: auto; + flex: 1 1 100%; + position: relative; + } +} diff --git a/web/static/src/ts/discuss/discuss.ts b/web/static/src/ts/discuss/discuss.ts index 56840789..f4db91f9 100644 --- a/web/static/src/ts/discuss/discuss.ts +++ b/web/static/src/ts/discuss/discuss.ts @@ -1,7 +1,7 @@ import { Clock } from "./clock"; import { Counter } from "./counter"; import { Widget } from "../widget"; - +import { ControlPanel } from "../ui/control_panel"; //------------------------------------------------------------------------------ // Types //------------------------------------------------------------------------------ @@ -17,7 +17,7 @@ interface State { export class Discuss extends Widget<{}, State> { template = "web.discuss"; - widgets = { Clock, Counter, ColorWidget }; + widgets = { Clock, Counter, ColorWidget, ControlPanel }; state: State = { validcounter: true, color: "red" }; resetCounter(ev: MouseEvent) { diff --git a/web/static/src/ts/env.ts b/web/static/src/ts/env.ts index 1d49c180..9988a238 100644 --- a/web/static/src/ts/env.ts +++ b/web/static/src/ts/env.ts @@ -2,7 +2,8 @@ import { WEnv } from "./core/component"; import { QWeb } from "./core/qweb_vdom"; import { Registry } from "./core/registry"; import { idGenerator } from "./core/utils"; -import { RPC } from "./services/ajax"; +import { RPC as RPCService } from "./services/ajax"; +import { RPC } from "./store/store"; import { IRouter } from "./services/router"; import { ControllerWidget, Store, Notification } from "./store/store"; @@ -11,7 +12,7 @@ import { ControllerWidget, Store, Notification } from "./store/store"; //------------------------------------------------------------------------------ export interface Services { - rpc: RPC; + rpc: RPCService; router: IRouter; } diff --git a/web/static/src/ts/store/action_manager_mixin.ts b/web/static/src/ts/store/action_manager_mixin.ts index 018cdcf6..19bf840a 100644 --- a/web/static/src/ts/store/action_manager_mixin.ts +++ b/web/static/src/ts/store/action_manager_mixin.ts @@ -95,7 +95,10 @@ export function actionManagerMixin>( this: Controller, parent: Widget ) { - const widget = new View!(parent, { info: descr.views[0][1] }); + const widget = new View!(parent, { + info: descr.views[0][1], + title: descr.name + }); const div = document.createElement("div"); await widget.mount(div); this.widget = widget; diff --git a/web/static/src/ts/ui/control_panel.ts b/web/static/src/ts/ui/control_panel.ts new file mode 100644 index 00000000..1481dcf4 --- /dev/null +++ b/web/static/src/ts/ui/control_panel.ts @@ -0,0 +1,17 @@ +import { Widget } from "../widget"; + +//------------------------------------------------------------------------------ +// Types +//------------------------------------------------------------------------------ + +export interface Props { + title: string; +} + +//------------------------------------------------------------------------------ +// Navbar +//------------------------------------------------------------------------------ + +export class ControlPanel extends Widget { + template = "web.control_panel"; +} diff --git a/web/static/src/ts/ui/root.ts b/web/static/src/ts/ui/root.ts index 01e80309..932da791 100644 --- a/web/static/src/ts/ui/root.ts +++ b/web/static/src/ts/ui/root.ts @@ -56,6 +56,7 @@ export class Root extends Widget { // to do: call some public method of widget instead... (this.refs.content).appendChild(widget.el!); widget.__mount(); + widget.el!.classList.add("o_action_controller"); this.store.activateController(controller); } } diff --git a/web/static/src/ts/views/base_view.ts b/web/static/src/ts/views/base_view.ts new file mode 100644 index 00000000..6a1a5c6a --- /dev/null +++ b/web/static/src/ts/views/base_view.ts @@ -0,0 +1,7 @@ +import { Widget } from "../widget"; +import { ControlPanel } from "../ui/control_panel"; + +export class BaseView extends Widget<{ info: any }, {}> { + template = "web.base_view"; + widgets = { ControlPanel }; +} diff --git a/web/static/src/ts/views/form_view.ts b/web/static/src/ts/views/form_view.ts index f08c5278..32c1aa24 100644 --- a/web/static/src/ts/views/form_view.ts +++ b/web/static/src/ts/views/form_view.ts @@ -1,5 +1,5 @@ -import { Widget } from "../widget"; +import { BaseView } from "./base_view"; -export class FormView extends Widget<{ info: any }, {}> { - inlineTemplate = `
form view:
`; +export class FormView extends BaseView { + viewType = "form"; } diff --git a/web/static/src/ts/views/kanban_view.ts b/web/static/src/ts/views/kanban_view.ts index 63005248..eaa811dc 100644 --- a/web/static/src/ts/views/kanban_view.ts +++ b/web/static/src/ts/views/kanban_view.ts @@ -1,5 +1,5 @@ -import { Widget } from "../widget"; +import { BaseView } from "./base_view"; -export class KanbanView extends Widget<{ info: any }, {}> { - inlineTemplate = `
kanban view:
`; +export class KanbanView extends BaseView { + viewType = "kanban"; } diff --git a/web/static/src/ts/views/list_view.ts b/web/static/src/ts/views/list_view.ts index 87e2a688..274983c6 100644 --- a/web/static/src/ts/views/list_view.ts +++ b/web/static/src/ts/views/list_view.ts @@ -1,5 +1,5 @@ -import { Widget } from "../widget"; +import { BaseView } from "./base_view"; -export class ListView extends Widget<{ info: any }, {}> { - inlineTemplate = `
list view:
`; +export class ListView extends BaseView { + viewType = "list"; } diff --git a/web/static/src/xml/templates.xml b/web/static/src/xml/templates.xml index e68d0065..cd4bf7f2 100644 --- a/web/static/src/xml/templates.xml +++ b/web/static/src/xml/templates.xml @@ -50,6 +50,37 @@ +
+ + +
+ +
+ +
+ + + +
+ +
+ +
+
+
@@ -73,24 +104,31 @@
- DISCUSS!! - - - - - - - - - - - - - - - - - + +
+
+ DISCUSS!! +
+
+ + + + + + + + + + + + + + + + + +
+
diff --git a/web/static/tests/helpers/index.ts b/web/static/tests/helpers/index.ts index 776bac20..0117aa96 100644 --- a/web/static/tests/helpers/index.ts +++ b/web/static/tests/helpers/index.ts @@ -1,11 +1,11 @@ export { MockRouter } from "./mock_router"; export { MockServer } from "./mock_server"; -export { TestData, makeTestData, makeMenuInfo } from "./test_data"; -export { TestEnv, TestInfo, makeTestWEnv, makeTestEnv } from "./test_env"; +export { makeMenuInfo, makeTestData, TestData } from "./test_data"; +export { makeTestEnv, makeTestWEnv, TestEnv, TestInfo } from "./test_env"; export { + makeDeferred, + makeTestFixture, nextMicroTick, nextTick, - makeTestFixture, - normalize, - makeDeferred + normalize } from "./test_utils"; diff --git a/web/static/tests/helpers/test_data.ts b/web/static/tests/helpers/test_data.ts index e3f19604..5027ce99 100644 --- a/web/static/tests/helpers/test_data.ts +++ b/web/static/tests/helpers/test_data.ts @@ -14,7 +14,7 @@ export function makeTestData(): TestData { }; } -function makeMenuInfo(): MenuInfo { +export function makeMenuInfo(): MenuInfo { const items: BaseMenuItem[] = [ { id: 96, diff --git a/web/static/tests/ui/__snapshots__/root.test.ts.snap b/web/static/tests/ui/__snapshots__/root.test.ts.snap index 97699ddb..e01ee020 100644 --- a/web/static/tests/ui/__snapshots__/root.test.ts.snap +++ b/web/static/tests/ui/__snapshots__/root.test.ts.snap @@ -49,7 +49,7 @@ exports[`clicks on client action with invalid key => empty widget is rendered +
-
+
@@ -83,33 +83,60 @@ exports[`if url has action_id, will render action and navigate to proper menu_id
-
- DISCUSS!! - - - - - - - -
+
+
+
    +
  1. + Discuss +
    2. +
+
+
+ +
+
+
+
+ +
+
+
+ + +
+
+
+
+ DISCUSS!! +
+
+ + + + + + + +
Value: 4
-
+
Value: 400
- -
+ +
Current Color: red
- - - + + + +
+
@@ -133,7 +160,7 @@ exports[`open act window action with invalid viewtype => empty widget is rendere
-
+
@@ -167,33 +194,60 @@ exports[`start with no action => clicks on client action => discuss is rendered
-
- DISCUSS!! - - - - - - - -
+
+
+
    +
  1. + Discuss +
    2. +
+
+
+ +
+
+
+
+ +
+
+
+ + +
+
+
+
+ DISCUSS!! +
+
+ + + + + + + +
Value: 4
-
+
Value: 400
- -
+ +
Current Color: red
- - - + + + +
+