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

[REF] mail: rtc components, adapt to new navbar design

Browse Source 
This commit is part of v16 overall restyle (task-2704984).

task-2712151

Part-of: odoo/odoo#82434
This commit is contained in:
stefanorigano (SRI)
2022-02-09 13:47:20 +00:00
parent ad64f56f6f
commit 09f854a726
5 changed files with 26 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.scss
+2 -16
View File
@@ -4,30 +4,16 @@
.o_RtcActivityNotice_buttonContent {
max-width: 150px;
align-items: center;
display: flex;
}
.o_RtcActivityNotice_buttonTitle {
@include text-truncate();
}
.o_RtcActivityNotice_outputIndicator {
margin-inline-start: map-get($spacers, 2);
margin-inline-end: map-get($spacers, 2);
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
.o_RtcActivityNotice {
cursor: pointer;
&:hover {
background-color: rgba(black, 0.1);
}
}
.o_RtcActivityNotice_button {
font-weight: bold;
user-select: none;
box-shadow: 0 ($border-width * 2) 0 $border-width $o-navbar-entry-bg--hover;
}
addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
+7 -7
View File
@@ -7,14 +7,14 @@
<RtcInvitations/>
<t t-if="messaging.rtc.channel">
<t t-set="title">Open conference: <t t-esc="messaging.rtc.channel.displayName"/></t>
<a class="o_RtcActivityNotice_button dropdown-toggle o-no-caret o-dropdown--narrow" t-att-title="title" role="button" t-on-click="_onClick">
<div class="o_RtcActivityNotice_buttonContent">
<span class="o_RtcActivityNotice_buttonTitle" t-esc="messaging.rtc.channel.displayName"/>
<i class="o_RtcActivityNotice_outputIndicator fa" t-att-class="{
'fa-microphone': !messaging.rtc.sendDisplay and !messaging.rtc.sendUserVideo,
'fa-video-camera': messaging.rtc.sendUserVideo,
'fa-desktop': messaging.rtc.sendDisplay,
<a class="o_RtcActivityNotice_button px-3 user-select-none dropdown-toggle o-no-caret o-dropdown--narrow" t-att-title="title" role="button" t-on-click="_onClick">
<div class="o_RtcActivityNotice_buttonContent d-flex align-items-center">
<i class="o_RtcActivityNotice_outputIndicator oi oi-lg" t-att-class="{
'oi-phone--voice': !messaging.rtc.sendDisplay and !messaging.rtc.sendUserVideo,
'oi-video': messaging.rtc.sendUserVideo,
'oi-screen': messaging.rtc.sendDisplay,
}"/>
<em class="o_RtcActivityNotice_buttonTitle text-truncate" t-esc="messaging.rtc.channel.displayName"/>
</div>
</a>
</t>
addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
+2 -2
View File
@@ -51,12 +51,12 @@
<div class="o_RtcCallParticipantCard_overlayTop">
<t t-if="callParticipantCard.rtcSession.isSelfMuted and !callParticipantCard.rtcSession.isDeaf">
<span class="o_RtcCallParticipantCard_overlayTopElement" t-att-class="{'o-isMinimized': callParticipantCard.isMinimized }" title="muted" aria-label="muted">
<i class="fa fa-microphone-slash"/>
<i class="oi oi-microphone--off--filled"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.isDeaf">
<span class="o_RtcCallParticipantCard_overlayTopElement" t-att-class="{'o-isMinimized': callParticipantCard.isMinimized }" title="deaf" aria-label="deaf">
<i class="fa fa-deaf"/>
<i class="oi oi-volume--mute--filled"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.channel.rtc and callParticipantCard.rtcSession.isAudioInError">
addons/mail/static/src/components/rtc_controller/rtc_controller.xml
+14 -14
View File
@@ -14,10 +14,10 @@
t-att-title="microphoneTitle"
t-on-click="rtcController.onClickMicrophone">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa" t-att-class="{
'fa-lg': !rtcController.isSmall,
'fa-microphone': !messaging.rtc.currentRtcSession.isMute,
'fa-microphone-slash': messaging.rtc.currentRtcSession.isMute,
<i class="oi" t-att-class="{
'oi-lg': !rtcController.isSmall,
'oi-microphone--filled': !messaging.rtc.currentRtcSession.isMute,
'oi-microphone--off--filled': messaging.rtc.currentRtcSession.isMute,
'text-danger': messaging.rtc.currentRtcSession.isMute,
}"/>
</div>
@@ -30,10 +30,10 @@
t-att-title="headphoneTitle"
t-on-click="rtcController.onClickDeafen">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa" t-att-class="{
'fa-lg': !rtcController.isSmall,
'fa-headphones': !messaging.rtc.currentRtcSession.isDeaf,
'fa-deaf': messaging.rtc.currentRtcSession.isDeaf,
<i class="oi" t-att-class="{
'oi-lg': !rtcController.isSmall,
'oi-volume--up--filled': !messaging.rtc.currentRtcSession.isDeaf,
'oi-volume--mute--filled': messaging.rtc.currentRtcSession.isDeaf,
'text-danger': messaging.rtc.currentRtcSession.isDeaf,
}"/>
</div>
@@ -49,7 +49,7 @@
t-att-title="cameraTitle"
t-on-click="rtcController.onClickCamera">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-video-camera" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
<i class="oi oi-video--filled" t-att-class="{ 'oi-lg': !rtcController.isSmall }"/>
</div>
</button>
<t t-if="messaging.rtc.sendDisplay"><t t-set="displayTitle">Stop screen sharing</t></t>
@@ -63,7 +63,7 @@
t-att-title="displayTitle"
t-on-click="rtcController.onClickScreen">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-desktop" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
<i class="oi oi-screen" t-att-class="{ 'oi-lg': !rtcController.isSmall }"/>
</div>
</button>
<Popover position="'top'">
@@ -73,7 +73,7 @@
t-att-class="{ 'o-isSmall': rtcController.isSmall }"
>
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-ellipsis-h" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
<i class="oi oi-overflow-menu--horizontal" t-att-class="{ 'oi-2x': !rtcController.isSmall }"/>
</div>
</button>
<t t-set="opened">
@@ -89,7 +89,7 @@
t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
t-on-click="rtcController.onClickToggleVideoCall">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-video-camera" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
<i class="oi oi-video--filled" t-att-class="{ 'oi-lg': !rtcController.isSmall }"/>
</div>
</button>
</t>
@@ -102,7 +102,7 @@
t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
t-on-click="rtcController.onClickRejectCall">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-phone" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
<i class="oi oi-phone--filled" t-att-class="{ 'oi-lg': !rtcController.isSmall }"/>
</div>
</button>
</t>
@@ -115,7 +115,7 @@
t-att-title="phoneTitle"
t-on-click="rtcController.onClickToggleAudioCall">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-phone" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
<i class="oi oi-phone--filled" t-att-class="{ 'oi-lg': !rtcController.isSmall }"/>
</div>
</button>
</t>
addons/mail/static/src/services/systray_service/systray_service.js
+1 -1
View File
@@ -15,6 +15,6 @@ export const SystrayService = AbstractService.extend({
*/
async start() {
systrayRegistry.add('mail.MessagingMenuContainer', { Component: MessagingMenuContainer });
systrayRegistry.add('mail.RtcActivityNoticeContainer', { Component: RtcActivityNoticeContainer });
systrayRegistry.add('mail.RtcActivityNoticeContainer', { Component: RtcActivityNoticeContainer }, { sequence: 100 });
},
});