pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] mail: create CallSidebarView component and model

Browse Source 
Move the sideBar part of the `CallView` to its new model and component.

part of task-2692836

Part-of: odoo/odoo#94035
This commit is contained in:
Thanh Dodeur
2022-06-21 15:41:49 +02:00
parent 19f48283d2
commit 12326de30f
7 changed files with 115 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.js
+26
View File
@@ -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);
addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.scss
+32
View File
@@ -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');
}
}
addons/mail/static/src/components/call_sidebar_view/call_sidebar_view.xml
+17
View File
@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="mail.CallSidebarView" owl="1">
<t t-if="callSidebarView">
<div class="o_CallSidebarView d-flex align-items-center h-100 flex-column">
<t t-foreach="callSidebarView.callView.tileParticipantCards" t-as="participantCard" t-key="participantCard.localId">
<CallParticipantCard
className="'o_CallSidebarView_participantCard w-100'"
record="participantCard"
/>
</t>
</div>
</t>
</t>
</templates>
addons/mail/static/src/components/call_view/call_view.scss
+6 -30
View File
@@ -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;
}
addons/mail/static/src/components/call_view/call_view.xml
+5 -8
View File
@@ -17,15 +17,13 @@
<i t-else="" class="o_CallView_sidebarButton position-absolute fa fa-arrow-left" title="Show sidebar" t-on-click="callView.onClickShowSidebar"/>
</t>
</div>
<t t-if="callView.callSidebarView">
<CallSidebarView record="callView.callSidebarView"/>
</t>
</t>
<t t-if="callView.tileParticipantCards.length > 0">
<t t-elif="callView.tileParticipantCards.length > 0">
<div
class="o_CallView_grid d-flex align-items-center h-100"
t-att-class="{
'o-isTiled flex-wrap justify-content-center w-100': !callView.mainParticipantCard,
'flex-column': callView.mainParticipantCard,
'o-isSidebar': callView.hasSidebar and callView.mainParticipantCard,
}"
class="o_CallView_grid d-flex align-items-center h-100 w-100 flex-wrap justify-content-center"
t-ref="tileContainer"
t-attf-style="--height:{{callView.tileHeight}}px; --width:{{callView.tileWidth}}px;"
>
@@ -34,7 +32,6 @@
<!-- maybe filter focused partner out? -->
<CallParticipantCard
className="'o_CallView_participantCard o_CallView_gridTile'"
classNameObj="{ 'w-100' : callView.hasSidebar and callView.mainParticipantCard }"
record="participantCard"
/>
</t>
addons/mail/static/src/models/call_sidebar_view.js
+16
View File
@@ -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,
})
},
});
addons/mail/static/src/models/call_view.js
+13
View File
@@ -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