diff --git a/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.js b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.js new file mode 100644 index 00000000000..27fb9b28b64 --- /dev/null +++ b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.js @@ -0,0 +1,26 @@ +/** @odoo-module **/ + +import { registerMessagingComponent } from '@mail/utils/messaging_component'; + +const { Component } = owl; + +export class CallSidebarView extends Component { + + //-------------------------------------------------------------------------- + // Getters / Setters + //-------------------------------------------------------------------------- + + /** + * @returns {CallSidebarView} + */ + get callSidebarView() { + return this.props.record; + } +} + +Object.assign(CallSidebarView, { + props: { record: Object }, + template: 'mail.CallSidebarView', +}); + +registerMessagingComponent(CallSidebarView); diff --git a/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss new file mode 100644 index 00000000000..af1ba2065a0 --- /dev/null +++ b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss @@ -0,0 +1,32 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_CallSidebarView { + width: 120px; + min-width: 120px; + overflow-y: auto; + overflow-x: hidden; + + &::-webkit-scrollbar { + width: 0.3vw; + } +} + +.o_CallSidebarView_participantCard { + aspect-ratio: 16/9; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_CallSidebarView { + + &::-webkit-scrollbar { + background: gray('900'); + } + &::-webkit-scrollbar-thumb { + background: gray('700'); + } +} diff --git a/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.xml b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.xml new file mode 100644 index 00000000000..f2ff5d9e424 --- /dev/null +++ b/addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.xml @@ -0,0 +1,17 @@ + + + + + +
+ + + +
+
+
+ +
diff --git a/addons/mail/static/src/components/call_view/call_view.scss b/addons/mail/static/src/components/call_view/call_view.scss index 81d005aa5d3..26daaf4ec43 100644 --- a/addons/mail/static/src/components/call_view/call_view.scss +++ b/addons/mail/static/src/components/call_view/call_view.scss @@ -16,27 +16,13 @@ } .o_CallView_grid { - overflow-y: auto; - overflow-x: hidden; + overflow: hidden; - &::-webkit-scrollbar { - width: 0.3vw; - } - - &.o-isTiled { - overflow-y: hidden; - - .o_CallView_participantCard { - width: var(--width); - height: var(--height); - min-width: var(--width); - min-height: var(--height); - } - } - - &.o-isSidebar { - width: 120px; - min-width: 120px; + .o_CallView_participantCard { + width: var(--width); + height: var(--height); + min-width: var(--width); + min-height: var(--height); } } @@ -55,16 +41,6 @@ // Style // ------------------------------------------------------------------ -.o_CallView_grid { - - &::-webkit-scrollbar { - background: gray('900'); - } - &::-webkit-scrollbar-thumb { - background: gray('700'); - } -} - .o_CallView_mainParticipantContainer { background-color: black; } diff --git a/addons/mail/static/src/components/call_view/call_view.xml b/addons/mail/static/src/components/call_view/call_view.xml index c8bf9b9a526..7faaba57d87 100644 --- a/addons/mail/static/src/components/call_view/call_view.xml +++ b/addons/mail/static/src/components/call_view/call_view.xml @@ -17,15 +17,13 @@ + + + - +
@@ -34,7 +32,6 @@ diff --git a/addons/mail/static/src/models/call_sidebar_view.js b/addons/mail/static/src/models/call_sidebar_view.js new file mode 100644 index 00000000000..5b5385c3db3 --- /dev/null +++ b/addons/mail/static/src/models/call_sidebar_view.js @@ -0,0 +1,16 @@ +/** @odoo-module **/ + +import { registerModel } from '@mail/model/model_core'; +import { one } from '@mail/model/model_field'; + +registerModel({ + name: 'CallSidebarView', + identifyingFields: ['callView'], + fields: { + callView: one('CallView', { + inverse: 'callSidebarView', + required: true, + readonly: true, + }) + }, +}); diff --git a/addons/mail/static/src/models/call_view.js b/addons/mail/static/src/models/call_view.js index b9245d83b9e..8d4b8608725 100644 --- a/addons/mail/static/src/models/call_view.js +++ b/addons/mail/static/src/models/call_view.js @@ -180,6 +180,13 @@ registerModel({ // if we are in minimized mode (round avatar frames), we treat the cards like squares. return this.isMinimized ? 1 : aspectRatio; }, + /** + * @private + */ + _computeCallSideBarView() { + const willShowSidebar = this.hasSidebar; + return willShowSidebar ? insertAndReplace() : clear(); + }, /** * @private */ @@ -321,6 +328,12 @@ registerModel({ default: 16 / 9, compute: '_computeAspectRatio', }), + callSidebarView: one('CallSidebarView', { + compute: '_computeCallSideBarView', + inverse: 'callView', + isCausal: true, + readonly: true, + }), tileContainerRef: attr(), /** * Determines whether we only display the videos or all the participants