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

[FIX] mail: make webRTC component classname follow BEM convention

Browse Source 
X-original-commit: c8296c4ed6c3f0c95852bc5b3466f6fea34368a3
Part-of: odoo/odoo#77107
This commit is contained in:
Alexandre Kühn
2021-09-23 20:18:41 +00:00
parent 88f18b1ce9
commit 099bde0b75
17 changed files with 162 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.scss
+12 -16
View File
@@ -15,20 +15,20 @@
user-select: none;
}
.o_RtcCallParticipantCard_avatar_image {
.o_RtcCallParticipantCard_avatarImage {
max-height: 100px;
max-width: 100px;
border: 5px solid gray('700');
&.o-is-talking {
&.o-isTalking {
border: 5px solid darken($o-enterprise-primary-color, 5%);
}
&.o-is-invitation:not(:hover) {
&.o-isInvitation:not(:hover) {
animation: border-pulse 3s linear infinite;
}
&.o-is-invitation:hover {
&.o-isInvitation:hover {
border: 5px solid theme-color('danger');
}
}
@@ -57,7 +57,7 @@
margin-inline-end: 5%;
align-items: center;
&.o-minimized {
&.o-isMinimized {
font-size: 0.7rem;
}
}
@@ -85,14 +85,14 @@
top: 0%;
}
.o_RtcCallParticipantCard_overlayTop_element {
.o_RtcCallParticipantCard_overlayTopElement {
display: flex;
justify-content: center;
flex-direction: column;
margin-inline-end: 5%;
padding: map-get($spacers, 2);
&.o-minimized {
&.o-isMinimized {
padding: map-get($spacers, 1);
}
}
@@ -110,11 +110,11 @@
.o_RtcCallParticipantCard {
border-radius: $o-mail-rounded-rectangle-border-radius-sm;
&.o-is-talking {
&.o-isTalking {
box-shadow: inset 0 0 0 map-get($spacers, 2) darken($o-enterprise-primary-color, 5%);
}
&.o-is-invitation {
&.o-isInvitation {
opacity: 0.6;
}
}
@@ -126,11 +126,11 @@
.o_RtcCallParticipantCard_container {
border-radius: $o-mail-rounded-rectangle-border-radius-sm;
&.o-can-click {
&.o-canClick {
cursor: pointer;
}
&:not(.o-minimized) {
&:not(.o-isMinimized) {
background-color: $o-brand-secondary;
}
}
@@ -149,12 +149,8 @@
border-radius: $o-mail-rounded-rectangle-border-radius-sm;
}
.o_RtcCallParticipantCard_overlayTop_element {
.o_RtcCallParticipantCard_overlayTopElement {
color: white;
border-radius: 50%;
background-color: gray('900');
}
.o_RtcCallParticipantCard_video {
cursor: pointer;
}
addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
+12 -12
View File
@@ -4,16 +4,16 @@
<t t-name="mail.RtcCallParticipantCard" owl="1">
<div class="o_RtcCallParticipantCard"
t-att-class="{
'o-is-talking': callParticipantCard and !callParticipantCard.isMinimized and callParticipantCard.isTalking,
'o-is-invitation': callParticipantCard and callParticipantCard.isInvitation,
'o-isTalking': callParticipantCard and !callParticipantCard.isMinimized and callParticipantCard.isTalking,
'o-isInvitation': callParticipantCard and callParticipantCard.isInvitation,
}"
t-on-contextmenu="_onContextMenu"
>
<t t-if="callParticipantCard">
<div class="o_RtcCallParticipantCard_container"
t-att-class="{
'o-minimized': callParticipantCard.isMinimized,
'o-can-click': !callParticipantCard.isInvitation,
'o-isMinimized': callParticipantCard.isMinimized,
'o-canClick': !callParticipantCard.isInvitation,
}"
t-att-title="callParticipantCard.name"
t-att-aria-label="callParticipantCard.name"
@@ -27,10 +27,10 @@
<div class="o_RtcCallParticipantCard_avatar" draggable="false">
<img alt="Avatar"
t-att-class="{
'o-is-talking': callParticipantCard.isTalking,
'o-is-invitation': callParticipantCard.isInvitation,
'o-isTalking': callParticipantCard.isTalking,
'o-isInvitation': callParticipantCard.isInvitation,
}"
class="o_RtcCallParticipantCard_avatar_image rounded-circle"
class="o_RtcCallParticipantCard_avatarImage rounded-circle"
t-att-src="callParticipantCard.avatarUrl"
draggable="false"
/>
@@ -44,29 +44,29 @@
<span class="o_RtcCallParticipantCard_name" t-esc="callParticipantCard.name"/>
</t>
<t t-if="callParticipantCard.rtcSession.isScreenSharingOn and callParticipantCard.isMinimized and !callParticipantCard.rtcSession.channel.mailRtc">
<span class="o_RtcCallParticipantCard_liveIndicator badge-pill o-minimized" title="live" aria-label="live">
<span class="o_RtcCallParticipantCard_liveIndicator badge-pill o-isMinimized" title="live" aria-label="live">
LIVE
</span>
</t>
</span>
<div class="o_RtcCallParticipantCard_overlayTop">
<t t-if="callParticipantCard.rtcSession.isMuted">
<span class="o_RtcCallParticipantCard_overlayTop_element" t-att-class="{'o-minimized': callParticipantCard.isMinimized }" title="muted" aria-label="muted">
<span class="o_RtcCallParticipantCard_overlayTopElement" t-att-class="{'o-isMinimized': callParticipantCard.isMinimized }" title="muted" aria-label="muted">
<i class="fa fa-microphone-slash"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.isDeaf">
<span class="o_RtcCallParticipantCard_overlayTop_element" t-att-class="{'o-minimized': callParticipantCard.isMinimized }" title="deaf" aria-label="deaf">
<span class="o_RtcCallParticipantCard_overlayTopElement" t-att-class="{'o-isMinimized': callParticipantCard.isMinimized }" title="deaf" aria-label="deaf">
<i class="fa fa-deaf"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.channel.mailRtc and callParticipantCard.rtcSession.isAudioInError">
<span class="o_RtcCallParticipantCard_overlayTop_element text-danger" title="Issue with audio">
<span class="o_RtcCallParticipantCard_overlayTopElement text-danger" title="Issue with audio">
<i class="fa fa-exclamation-triangle"/>
</span>
</t>
<t t-if="callParticipantCard.rtcSession.channel.mailRtc and !callParticipantCard.rtcSession.mailRtc and !['connected', 'completed'].includes(callParticipantCard.rtcSession.connectionState)">
<span class="o_RtcCallParticipantCard_overlayTop_element" t-att-title="callParticipantCard.rtcSession.connectionState">
<span class="o_RtcCallParticipantCard_overlayTopElement" t-att-title="callParticipantCard.rtcSession.connectionState">
<i class="fa fa-lg fa-signal o_RtcCallParticipantCard_connectionState"/>
</span>
</t>
addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.scss
+5 -5
View File
@@ -11,7 +11,7 @@
height: 50%;
min-height: 50%;
&.o-minimized {
&.o-isMinimized {
height: 20%;
min-height: 20%;
}
@@ -32,7 +32,7 @@
justify-content: center;
padding-bottom: map-get($spacers, 1);
&.o-floating {
&.o-isFloating {
position: absolute;
padding-bottom: map-get($spacers, 3);
bottom: 0;
@@ -51,7 +51,7 @@
width: 0.3vw;
}
&.o-dynamic-sizing {
&.o-isTiled {
flex-direction: row;
width: 100%;
overflow-y: hidden;
@@ -66,13 +66,13 @@
}
}
&.o-sidebar {
&.o-isSidebar {
width: 120px;
min-width: 120px;
}
}
.o_RtcCallViewer_grid_tile {
.o_RtcCallViewer_gridTile {
width: 100%;
aspect-ratio: 16/9;
}
addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml
+6 -6
View File
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="mail.RtcCallViewer" owl="1">
<div class="o_RtcCallViewer" t-att-class="{ 'o-fullScreen': rtcCallViewer and rtcCallViewer.isFullScreen, 'o-minimized': rtcCallViewer and rtcCallViewer.isMinimized }">
<div class="o_RtcCallViewer" t-att-class="{ 'o-fullScreen': rtcCallViewer and rtcCallViewer.isFullScreen, 'o-isMinimized': rtcCallViewer and rtcCallViewer.isMinimized }">
<t t-if="rtcCallViewer">
<!-- used to make the template depend on window size -->
@@ -21,8 +21,8 @@
<div
class="o_RtcCallViewer_grid"
t-att-class="{
'o-dynamic-sizing': rtcCallViewer.layout === 'tiled',
'o-sidebar': rtcCallViewer.layout === 'sidebar',
'o-isTiled': rtcCallViewer.layout === 'tiled',
'o-isSidebar': rtcCallViewer.layout === 'sidebar',
}"
t-ref="tileContainer"
t-attf-style="--height:{{state.tileHeight}}px; --width:{{state.tileWidth}}px; --columns:{{state.columnCount}};"
@@ -31,7 +31,7 @@
<t t-if="!rtcCallViewer.filterVideoGrid or (participantCard.rtcSession and participantCard.rtcSession.videoStream)">
<!-- maybe filter focused partner out? -->
<RtcCallParticipantCard
class="o_RtcCallViewer_participantCard o_RtcCallViewer_grid_tile"
class="o_RtcCallViewer_participantCard o_RtcCallViewer_gridTile"
callParticipantCardLocalId="participantCard.localId"
/>
</t>
@@ -42,8 +42,8 @@
<!-- Buttons -->
<t t-if="rtcCallViewer.showOverlay or !rtcCallViewer.isControllerFloating">
<div class="o_RtcCallViewer_controls" t-att-class="{ 'o-floating': rtcCallViewer.isControllerFloating }">
<div class="o_RtcCallViewer_controls_overlay_container" t-on-mousemove="rtcCallViewer.onMouseMoveOverlay">
<div class="o_RtcCallViewer_controls" t-att-class="{ 'o-isFloating': rtcCallViewer.isControllerFloating }">
<div class="o_RtcCallViewer_controlsOverlayContainer" t-on-mousemove="rtcCallViewer.onMouseMoveOverlay">
<RtcController localId="rtcCallViewer.rtcController.localId"/>
</div>
</div>
addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.scss
+12 -12
View File
@@ -19,41 +19,41 @@
flex-wrap: wrap;
}
.o_RtcConfigurationMenu_option_deviceSelect {
.o_RtcConfigurationMenu_optionDeviceSelect {
padding: map-get($spacers, 1);
padding-right: map-get($spacers, 3);
}
.o_RtcConfigurationMenu_option_inputGroup {
.o_RtcConfigurationMenu_optionInputGroup {
display: flex;
width: 100%;
}
.o_RtcConfigurationMenu_option_inputGroup_input {
.o_RtcConfigurationMenu_optionInputGroupInput {
flex-grow: 2;
}
.o_RtcConfigurationMenu_option_inputGroup_value {
.o_RtcConfigurationMenu_optionInputGroupValue {
padding: map-get($spacers, 1);
}
.o_RtcConfigurationMenu_option_label {
.o_RtcConfigurationMenu_optionLabel {
display: flex;
align-items: center;
flex-wrap: wrap;
max-width: 100%;
}
.o_RtcConfigurationMenu_option_name {
.o_RtcConfigurationMenu_optionName {
@include text-truncate();
margin-inline-end: map-get($spacers, 2);
}
.o_RtcConfigurationMenu_option_pushToTalkGroup {
.o_RtcConfigurationMenu_optionPushToTalkGroup {
display: flex;
}
.o_RtcConfigurationMenu_option_pushToTalkGroup_key {
.o_RtcConfigurationMenu_optionPushToTalkGroupKey {
padding-left: map-get($spacers, 3);
padding-right: map-get($spacers, 3);
margin-left: map-get($spacers, 1);
@@ -77,21 +77,21 @@
}
}
.o_RtcConfigurationMenu_option_label {
.o_RtcConfigurationMenu_optionLabel {
cursor: pointer;
}
.o_RtcConfigurationMenu_option_name {
.o_RtcConfigurationMenu_optionName {
font-weight: bold;
}
.o_RtcConfigurationMenu_option_pushToTalkGroup_key {
.o_RtcConfigurationMenu_optionPushToTalkGroupKey {
font-size: 1.4em;
font-weight: bold;
border-radius: 3px;
border: 2px solid $o-brand-primary;
&.o-registering {
&.o-isRegistering {
border-color: theme-color('danger');
}
}
addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
+19 -19
View File
@@ -4,10 +4,10 @@
<t t-name="mail.RtcConfigurationMenu" owl="1">
<div class="o_RtcConfigurationMenu">
<div class="o_RtcConfigurationMenu_option">
<label class="o_RtcConfigurationMenu_option_label" title="Input device" aria-label="Input device">
<span class="o_RtcConfigurationMenu_option_name">Input device</span>
<label class="o_RtcConfigurationMenu_optionLabel" title="Input device" aria-label="Input device">
<span class="o_RtcConfigurationMenu_optionName">Input device</span>
<div>
<select name="inputDevice" class="o_RtcConfigurationMenu_option_deviceSelect" t-att-value="userSetting.audioInputDeviceId" t-on-change="_onChangeSelectAudioInput">
<select name="inputDevice" class="o_RtcConfigurationMenu_optionDeviceSelect" t-att-value="userSetting.audioInputDeviceId" t-on-change="_onChangeSelectAudioInput">
<option value="">Browser default</option>
<t t-if="state.userDevices" t-foreach="state.userDevices" t-as="device">
<t t-if="device.kind === 'audioinput'">
@@ -19,18 +19,18 @@
</label>
</div>
<div class="o_RtcConfigurationMenu_option">
<label class="o_RtcConfigurationMenu_option_label" title="Use Push-to-talk" aria-label="Use Push-to-talk">
<span class="o_RtcConfigurationMenu_option_name">Use Push-to-talk</span>
<label class="o_RtcConfigurationMenu_optionLabel" title="Use Push-to-talk" aria-label="Use Push-to-talk">
<span class="o_RtcConfigurationMenu_optionName">Use Push-to-talk</span>
<input type="checkbox" aria-label="toggle push-to-talk" title="toggle push-to-talk" t-on-change="_onChangePushToTalk" t-att-checked="userSetting.usePushToTalk ? 'checked' : ''"/>
</label>
</div>
<t t-if="userSetting.usePushToTalk">
<div class="o_RtcConfigurationMenu_option">
<label class="o_RtcConfigurationMenu_option_label" title="Push-to-talk key" aria-label="Push-to-talk key">
<span class="o_RtcConfigurationMenu_option_name">Push-to-talk key</span>
<span class="o_RtcConfigurationMenu_option_pushToTalkGroup">
<label class="o_RtcConfigurationMenu_optionLabel" title="Push-to-talk key" aria-label="Push-to-talk key">
<span class="o_RtcConfigurationMenu_optionName">Push-to-talk key</span>
<span class="o_RtcConfigurationMenu_optionPushToTalkGroup">
<t t-if="userSetting.pushToTalkKey">
<span class="o_RtcConfigurationMenu_option_pushToTalkGroup_key" t-att-class="{ 'o-registering': rtcConfigurationMenu.isRegisteringKey }" t-esc="userSetting.pushToTalkKeyToString()"/>
<span class="o_RtcConfigurationMenu_optionPushToTalkGroupKey" t-att-class="{ 'o-isRegistering': rtcConfigurationMenu.isRegisteringKey }" t-esc="userSetting.pushToTalkKeyToString()"/>
</t>
<button class="o_RtcConfigurationMenu_button" t-on-click="_onClickRegisterKeyButton">
<t t-if="rtcConfigurationMenu.isRegisteringKey">
@@ -46,22 +46,22 @@
</div>
<div t-if="rtcConfigurationMenu.isRegisteringKey">Press a key to register it as the push-to-talk shortcut</div>
<div class="o_RtcConfigurationMenu_option">
<label class="o_RtcConfigurationMenu_option_label" title="Delay after releasing push-to-talk" aria-label="Delay after releasing push-to-talk">
<span class="o_RtcConfigurationMenu_option_name">Delay after releasing push-to-talk</span>
<div class="o_RtcConfigurationMenu_option_inputGroup">
<input class="o_RtcConfigurationMenu_option_inputGroup_input" type="range" min="1" max="2000" step="1" t-att-value="userSetting.voiceActiveDuration" t-on-change="_onChangeDelay"/>
<span class="o_RtcConfigurationMenu_option_inputGroup_value"><t t-esc="userSetting.voiceActiveDuration"/>ms</span>
<label class="o_RtcConfigurationMenu_optionLabel" title="Delay after releasing push-to-talk" aria-label="Delay after releasing push-to-talk">
<span class="o_RtcConfigurationMenu_optionName">Delay after releasing push-to-talk</span>
<div class="o_RtcConfigurationMenu_optionInputGroup">
<input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="1" max="2000" step="1" t-att-value="userSetting.voiceActiveDuration" t-on-change="_onChangeDelay"/>
<span class="o_RtcConfigurationMenu_optionInputGroupValue"><t t-esc="userSetting.voiceActiveDuration"/>ms</span>
</div>
</label>
</div>
</t>
<t t-else="">
<div class="o_RtcConfigurationMenu_option">
<label class="o_RtcConfigurationMenu_option_label" title="Minimum activity for voice detection" aria-label="Minimum activity for voice detection">
<span class="o_RtcConfigurationMenu_option_name">Minimum activity for voice detection</span>
<div class="o_RtcConfigurationMenu_option_inputGroup">
<input class="o_RtcConfigurationMenu_option_inputGroup_input" type="range" min="0.001" max="1" step="0.001" t-att-value="userSetting.voiceActivationThreshold" t-on-change="_onChangeThreshold"/>
<span class="o_RtcConfigurationMenu_option_inputGroup_value"><t t-esc="userSetting.voiceActivationThreshold"/></span>
<label class="o_RtcConfigurationMenu_optionLabel" title="Minimum activity for voice detection" aria-label="Minimum activity for voice detection">
<span class="o_RtcConfigurationMenu_optionName">Minimum activity for voice detection</span>
<div class="o_RtcConfigurationMenu_optionInputGroup">
<input class="o_RtcConfigurationMenu_optionInputGroupInput" type="range" min="0.001" max="1" step="0.001" t-att-value="userSetting.voiceActivationThreshold" t-on-change="_onChangeThreshold"/>
<span class="o_RtcConfigurationMenu_optionInputGroupValue"><t t-esc="userSetting.voiceActivationThreshold"/></span>
</div>
</label>
</div>
addons/mail/static/src/components/rtc_controller/rtc_controller.scss
+13 -14
View File
@@ -11,15 +11,24 @@
margin: map-get($spacers, 1);
padding: map-get($spacers, 4);
display: flex;
&.o-isSmall {
padding: map-get($spacers, 3);
}
}
.o_RtcController_button_iconWrapper {
.o_RtcController_buttonIconWrapper {
display: flex;
width: map-get($spacers, 4);
height: map-get($spacers, 4);
justify-content: center;
flex-direction: column;
align-items: center;
&.o-isSmall {
width: map-get($spacers, 3);
height: map-get($spacers, 3);
}
}
.o_RtcController_buttons {
@@ -28,16 +37,6 @@
flex-wrap: wrap;
}
.o-small {
.o_RtcController_button_iconWrapper {
width: map-get($spacers, 3);
height: map-get($spacers, 3);
}
.o_RtcController_button {
padding: map-get($spacers, 3);
}
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
@@ -54,7 +53,7 @@
background-color: gray('700');
}
&.o-active {
&.o-isActive {
opacity: 1;
}
@@ -70,7 +69,7 @@
background-color: darken(theme-color('success'), 20%);
}
&.o-active {
&.o-isActive {
background-color: theme-color('danger');
&:hover {
@@ -79,6 +78,6 @@
}
}
.o_RtcController_videoButton.o-active {
.o_RtcController_videoButton.o-isActive {
color: theme-color('success');
}
addons/mail/static/src/components/rtc_controller/rtc_controller.xml
+22 -16
View File
@@ -2,18 +2,18 @@
<templates xml:space="preserve">
<t t-name="mail.RtcController" owl="1">
<div class="o_RtcController" t-att-class="{ 'o-small': rtcController and rtcController.isSmall }">
<div class="o_RtcController">
<t t-if="rtcController">
<div class="o_RtcController_buttons">
<t t-if="thread.mailRtc and rtcSession">
<t t-if="rtcSession.isMuted"><t t-set="microphoneTitle">Unmute</t></t>
<t t-else=""><t t-set="microphoneTitle">Mute</t></t>
<button class="o_RtcController_button"
t-att-class="{ 'o-active': !rtcSession.isMuted }"
t-att-class="{ 'o-isActive': !rtcSession.isMuted, 'o-isSmall': rtcController.isSmall }"
t-att-aria-label="microphoneTitle"
t-att-title="microphoneTitle"
t-on-click="rtcController.onClickMicrophone">
<div class="o_RtcController_button_iconWrapper">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa" t-att-class="{
'fa-lg': !rtcController.isSmall,
'fa-microphone': !rtcSession.isMuted,
@@ -25,11 +25,11 @@
<t t-if="rtcSession.isDeaf"><t t-set="headphoneTitle">Undeafen</t></t>
<t t-else=""><t t-set="headphoneTitle">Deafen</t></t>
<button class="o_RtcController_button"
t-att-class="{ 'o-active': !rtcSession.isDeaf }"
t-att-class="{ 'o-isActive': !rtcSession.isDeaf, 'o-isSmall': rtcController.isSmall }"
t-att-aria-label="headphoneTitle"
t-att-title="headphoneTitle"
t-on-click="rtcController.onClickDeafen">
<div class="o_RtcController_button_iconWrapper">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa" t-att-class="{
'fa-lg': !rtcController.isSmall,
'fa-headphones': !rtcSession.isDeaf,
@@ -42,12 +42,13 @@
<t t-else=""><t t-set="cameraTitle">Turn camera on</t></t>
<button class="o_RtcController_button o_RtcController_videoButton"
t-att-class="{
'o-active': messaging.mailRtc.sendUserVideo,
'o-isActive': messaging.mailRtc.sendUserVideo,
'o-isSmall': rtcController.isSmall,
}"
t-att-aria-label="cameraTitle"
t-att-title="cameraTitle"
t-on-click="rtcController.onClickCamera">
<div class="o_RtcController_button_iconWrapper">
<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 }"/>
</div>
</button>
@@ -55,20 +56,23 @@
<t t-else=""><t t-set="displayTitle">Share screen</t></t>
<button class="o_RtcController_button o_RtcController_videoButton"
t-att-class="{
'o-active': messaging.mailRtc.sendDisplay,
'o-isActive': messaging.mailRtc.sendDisplay,
'o-isSmall': rtcController.isSmall,
}"
t-att-aria-label="displayTitle"
t-att-title="displayTitle"
t-on-click="rtcController.onClickScreen">
<div class="o_RtcController_button_iconWrapper">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-desktop" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
</div>
</button>
<Popover position="'top'">
<button class="o_RtcController_button"
aria-label="More"
title="More">
<div class="o_RtcController_button_iconWrapper">
title="More"
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 }"/>
</div>
</button>
@@ -79,23 +83,25 @@
</t>
<t t-if="!thread.mailRtc">
<button class="o_RtcController_button o_RtcController_callToggle"
t-att-class="{ 'o-isSmall': rtcController.isSmall }"
aria-label="Join Video Call"
title="Join Video Call"
t-att-disabled="thread.hasPendingRtcRequest"
t-on-click="rtcController.onClickToggleVideoCall">
<div class="o_RtcController_button_iconWrapper">
<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 }"/>
</div>
</button>
</t>
<t t-if="thread">
<t t-if="thread.rtcInvitingSession and !thread.mailRtc">
<button class="o_RtcController_button o_RtcController_callToggle o-active"
<button class="o_RtcController_button o_RtcController_callToggle o-isActive"
t-att-class="{ 'o-isSmall': rtcController.isSmall }"
aria-label="Reject"
title="Reject"
t-att-disabled="thread.hasPendingRtcRequest"
t-on-click="rtcController.onClickRejectCall">
<div class="o_RtcController_button_iconWrapper">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-phone" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
</div>
</button>
@@ -104,11 +110,11 @@
<t t-else=""><t t-set="phoneTitle">Join Call</t></t>
<button class="o_RtcController_button o_RtcController_callToggle"
t-att-aria-label="phoneTitle"
t-att-class="{ 'o-active': !!thread.mailRtc }"
t-att-class="{ 'o-isActive': !!thread.mailRtc, 'o-isSmall': rtcController.isSmall }"
t-att-disabled="thread.hasPendingRtcRequest"
t-att-title="phoneTitle"
t-on-click="rtcController.onClickToggleAudioCall">
<div class="o_RtcController_button_iconWrapper">
<div class="o_RtcController_buttonIconWrapper" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
<i class="fa fa-phone" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
</div>
</button>
addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.scss
+11 -11
View File
@@ -17,15 +17,15 @@
align-items: center;
}
.o_RtcInvitationCard_buttonList_button {
.o_RtcInvitationCard_buttonListButton {
padding: map-get($spacers, 2);
}
.o_RtcInvitationCard_buttonList_button_icon {
.o_RtcInvitationCard_buttonListButtonIcon {
margin: map-get($spacers, 3);
}
.o_RtcInvitationCard_partner_info {
.o_RtcInvitationCard_partnerInfo {
display: flex;
width: 130px;
flex-direction: column;
@@ -34,13 +34,13 @@
white-space: nowrap;
}
.o_RtcInvitationCard_partner_info_image {
.o_RtcInvitationCard_partnerInfoImage {
margin-bottom: map-get($spacers, 2);
width: 70%;
height: 70%;
}
.o_RtcInvitationCard_partner_info_name {
.o_RtcInvitationCard_partnerInfoName {
overflow: hidden;
width: 100%;
}
@@ -55,14 +55,14 @@
border: 1px solid black;
}
.o_RtcInvitationCard_buttonList_button {
.o_RtcInvitationCard_buttonListButton {
border-radius: 100%;
cursor: pointer;
user-select: none;
border: none;
}
.o_RtcInvitationCard_buttonList_accept {
.o_RtcInvitationCard_buttonListAccept {
background-color: theme-color('success');
&:hover {
@@ -70,7 +70,7 @@
}
}
.o_RtcInvitationCard_buttonList_refuse {
.o_RtcInvitationCard_buttonListRefuse {
background-color: theme-color('danger');
&:hover {
@@ -78,18 +78,18 @@
}
}
.o_RtcInvitationCard_partner_info_image {
.o_RtcInvitationCard_partnerInfoImage {
border: 3px solid gray;
cursor: pointer;
}
.o_RtcInvitationCard_partner_info_name {
.o_RtcInvitationCard_partnerInfoName {
font-weight: bold;
@include text-truncate();
text-align: center;
}
.o_RtcInvitationCard_partner_info_text {
.o_RtcInvitationCard_partnerInfoText {
font-style: italic;
opacity: 0.9;
}
addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.xml
+8 -8
View File
@@ -4,27 +4,27 @@
<t t-name="mail.RtcInvitationCard" owl="1">
<div class="o_RtcInvitationCard">
<t t-if="thread and thread.rtcInvitingSession">
<div class="o_RtcInvitationCard_partner_info">
<img class="o_RtcInvitationCard_partner_info_image rounded-circle"
<div class="o_RtcInvitationCard_partnerInfo">
<img class="o_RtcInvitationCard_partnerInfoImage rounded-circle"
t-att-src="thread.rtcInvitingSession.avatarUrl"
t-on-click="_onClickAvatar"
alt="Avatar"/>
<span class="o_RtcInvitationCard_partner_info_name" t-esc="thread.rtcInvitingSession.name"/>
<span class="o_RtcInvitationCard_partner_info_text">Incoming Call...</span>
<span class="o_RtcInvitationCard_partnerInfoName" t-esc="thread.rtcInvitingSession.name"/>
<span class="o_RtcInvitationCard_partnerInfoText">Incoming Call...</span>
</div>
</t>
<div class="o_RtcInvitationCard_buttonList">
<div class="o_RtcInvitationCard_buttonList_button o_RtcInvitationCard_buttonList_refuse"
<div class="o_RtcInvitationCard_buttonListButton o_RtcInvitationCard_buttonListRefuse"
aria-label="Refuse"
title="Refuse"
t-on-click="_onClickRefuse">
<i class="o_RtcInvitationCard_buttonList_button_icon fa fa-lg fa-times"/>
<i class="o_RtcInvitationCard_buttonListButtonIcon fa fa-lg fa-times"/>
</div>
<div class="o_RtcInvitationCard_buttonList_button o_RtcInvitationCard_buttonList_accept"
<div class="o_RtcInvitationCard_buttonListButton o_RtcInvitationCard_buttonListAccept"
aria-label="Accept"
title="Accept"
t-on-click="_onClickAccept">
<i class="o_RtcInvitationCard_buttonList_button_icon fa fa-lg fa-phone"/>
<i class="o_RtcInvitationCard_buttonListButtonIcon fa fa-lg fa-phone"/>
</div>
</div>
</div>
addons/mail/static/src/components/rtc_layout_menu/rtc_layout_menu.scss
+3 -3
View File
@@ -8,7 +8,7 @@
padding: map-get($spacers, 1);
}
.o_RtcLayoutMenu_input_text {
.o_RtcLayoutMenu_inputText {
@include text-truncate();
}
@@ -23,11 +23,11 @@
font-size: 1.3em;
}
.o_RtcLayoutMenu_radio_icon {
.o_RtcLayoutMenu_radioIcon {
margin-inline-end: map-get($spacers, 1);
}
.o_RtcLayoutMenu_radio_input {
.o_RtcLayoutMenu_radioInput {
margin: map-get($spacers, 3);
}
addons/mail/static/src/components/rtc_layout_menu/rtc_layout_menu.xml
+24 -24
View File
@@ -6,44 +6,44 @@
<t t-if="layoutMenu">
<t t-if="layoutMenu and layoutMenu.callViewer.threadView.thread.videoCount > 0">
<label class="o_RtcLayoutMenu_radio">
<div class="o_RtcLayoutMenu_radio_inputContainer">
<input class="o_RtcLayoutMenu_radio_input" type="radio" name="filter" value="all" t-on-click="layoutMenu.onClickFilter" t-att-checked="!layoutMenu.callViewer.filterVideoGrid"/>
<span class="o_RtcLayoutMenu_input_text">Show All</span>
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput" type="radio" name="filter" value="all" t-on-click="layoutMenu.onClickFilter" t-att-checked="!layoutMenu.callViewer.filterVideoGrid"/>
<span class="o_RtcLayoutMenu_inputText">Show All</span>
</div>
</label>
<label class="o_RtcLayoutMenu_radio">
<div class="o_RtcLayoutMenu_radio_inputContainer">
<input class="o_RtcLayoutMenu_radio_input" type="radio" name="filter" value="video" t-on-click="layoutMenu.onClickFilter" t-att-checked="layoutMenu.callViewer.filterVideoGrid"/>
<span class="o_RtcLayoutMenu_input_text">Show only video</span>
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput" type="radio" name="filter" value="video" t-on-click="layoutMenu.onClickFilter" t-att-checked="layoutMenu.callViewer.filterVideoGrid"/>
<span class="o_RtcLayoutMenu_inputText">Show only video</span>
</div>
</label>
<hr class="o_RtcLayoutMenu_separator"/>
</t>
<label class="o_RtcLayoutMenu_radio">
<div class="o_RtcLayoutMenu_radio_inputContainer">
<input class="o_RtcLayoutMenu_radio_input" type="radio" name="layout" value="tiled" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'tiled'"/>
<span class="o_RtcLayoutMenu_input_text">Tiled</span>
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput" type="radio" name="layout" value="tiled" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'tiled'"/>
<span class="o_RtcLayoutMenu_inputText">Tiled</span>
</div>
<span class="o_RtcLayoutMenu_radio_icon">
<t t-call="mail.RtcLayoutMenu_grid_svg"/>
<span class="o_RtcLayoutMenu_radioIcon">
<t t-call="mail.RtcLayoutMenu_gridSvg"/>
</span>
</label>
<label class="o_RtcLayoutMenu_radio">
<div class="o_RtcLayoutMenu_radio_inputContainer">
<input class="o_RtcLayoutMenu_radio_input" type="radio" name="layout" value="spotlight" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'spotlight'"/>
<span class="o_RtcLayoutMenu_input_text">Spotlight</span>
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput" type="radio" name="layout" value="spotlight" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'spotlight'"/>
<span class="o_RtcLayoutMenu_inputText">Spotlight</span>
</div>
<span class="o_RtcLayoutMenu_radio_icon">
<t t-call="mail.RtcLayoutMenu_spotlight_svg"/>
<span class="o_RtcLayoutMenu_radioIcon">
<t t-call="mail.RtcLayoutMenu_spotlightSvg"/>
</span>
</label>
<label class="o_RtcLayoutMenu_radio">
<div class="o_RtcLayoutMenu_radio_inputContainer">
<input class="o_RtcLayoutMenu_radio_input" type="radio" name="layout" value="sidebar" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'sidebar'"/>
<span class="o_RtcLayoutMenu_input_text">Sidebar</span>
<div class="o_RtcLayoutMenu_radioInputContainer">
<input class="o_RtcLayoutMenu_radioInput" type="radio" name="layout" value="sidebar" t-on-click="layoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'sidebar'"/>
<span class="o_RtcLayoutMenu_inputText">Sidebar</span>
</div>
<span class="o_RtcLayoutMenu_radio_icon">
<t t-call="mail.RtcLayoutMenu_sidebar_svg"/>
<span class="o_RtcLayoutMenu_radioIcon">
<t t-call="mail.RtcLayoutMenu_sidebarSvg"/>
</span>
</label>
</t>
@@ -52,7 +52,7 @@
<!-- TODO TEMPORARY ICONS -->
<t t-name="mail.RtcLayoutMenu_grid_svg" owl="1">
<t t-name="mail.RtcLayoutMenu_gridSvg" owl="1">
<svg width="5rem" height="5rem" viewBox="0 0 300 300">
<g transform="matrix(1.08 0 0 1.29 63.85 96.61)">
<rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
@@ -84,7 +84,7 @@
</svg>
</t>
<t t-name="mail.RtcLayoutMenu_spotlight_svg" owl="1">
<t t-name="mail.RtcLayoutMenu_spotlightSvg" owl="1">
<svg width="5rem" height="5rem" viewBox="0 0 300 300">
<g transform="matrix(3.38 0 0 4.04 150 150)">
<rect style="fill: currentColor" x="-38" y="-20" rx="0" ry="0" width="75" height="39"/>
@@ -92,7 +92,7 @@
</svg>
</t>
<t t-name="mail.RtcLayoutMenu_sidebar_svg" owl="1">
<t t-name="mail.RtcLayoutMenu_sidebarSvg" owl="1">
<svg width="5rem" height="5rem" viewBox="0 0 300 300">
<g transform="matrix(2.66 0 0 4.04 122.89 150.02)">
<rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
addons/mail/static/src/components/rtc_option_list/rtc_option_list.scss
+2 -2
View File
@@ -14,12 +14,12 @@
color: gray('800');
}
.o_RtcOptionList_button_icon {
.o_RtcOptionList_buttonIcon {
margin: map-get($spacers, 1);
padding: map-get($spacers, 1);
}
.o_RtcOptionList_button_text {
.o_RtcOptionList_buttonText {
@include text-truncate();
}
addons/mail/static/src/components/rtc_option_list/rtc_option_list.xml
+10 -10
View File
@@ -5,29 +5,29 @@
<div class="o_RtcOptionList">
<t t-if="rtcOptionList">
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickLayout">
<i class="o_RtcOptionList_button_icon fa fa-lg fa-th-large"/>
<span class="o_RtcOptionList_button_text">Change layout</span>
<i class="o_RtcOptionList_buttonIcon fa fa-lg fa-th-large"/>
<span class="o_RtcOptionList_buttonText">Change layout</span>
</button>
<t t-if="rtcOptionList.rtcController.callViewer.isFullScreen">
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickDeactivateFullScreen">
<i class="o_RtcOptionList_button_icon fa fa-lg fa-compress"/>
<span class="o_RtcOptionList_button_text">Exit full screen</span>
<i class="o_RtcOptionList_buttonIcon fa fa-lg fa-compress"/>
<span class="o_RtcOptionList_buttonText">Exit full screen</span>
</button>
</t>
<t t-else="">
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickActivateFullScreen">
<i class="o_RtcOptionList_button_icon fa fa-lg fa-arrows-alt"/>
<span class="o_RtcOptionList_button_text">Full screen</span>
<i class="o_RtcOptionList_buttonIcon fa fa-lg fa-arrows-alt"/>
<span class="o_RtcOptionList_buttonText">Full screen</span>
</button>
</t>
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickOptions">
<i class="o_RtcOptionList_button_icon fa fa-lg fa-cog"/>
<span class="o_RtcOptionList_button_text">Settings</span>
<i class="o_RtcOptionList_buttonIcon fa fa-lg fa-cog"/>
<span class="o_RtcOptionList_buttonText">Settings</span>
</button>
<t t-if="env.isDebug()">
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickDownloadLogs">
<i class="o_RtcOptionList_button_icon fa fa-lg fa-file-text-o"/>
<span class="o_RtcOptionList_button_text">Download logs</span>
<i class="o_RtcOptionList_buttonIcon fa fa-lg fa-file-text-o"/>
<span class="o_RtcOptionList_buttonText">Download logs</span>
</button>
</t>
</t>
addons/mail/static/src/components/rtc_video/rtc_video.scss
+2 -2
View File
@@ -2,7 +2,7 @@
// Layout
// ------------------------------------------------------------------
.o_RtcVideo_video {
.o_RtcVideo {
width: 100%;
height: 100%;
}
@@ -11,7 +11,7 @@
// Style
// ------------------------------------------------------------------
.o_RtcVideo_video {
.o_RtcVideo {
background-color: black;
border-radius: $o-mail-rounded-rectangle-border-radius-sm;
cursor: pointer;
addons/mail/static/src/components/rtc_video/rtc_video.xml
+1 -1
View File
@@ -2,7 +2,7 @@
<templates xml:space="preserve">
<t t-name="mail.RtcVideo" owl="1">
<video class="o_RtcVideo_video"
<video class="o_RtcVideo"
t-ref="video"
playsinline="true"
autoplay="true"
addons/mail/static/src/components/thread_view/thread_view.scss
-4
View File
@@ -49,10 +49,6 @@
flex: 1 1 auto;
}
.o_ThreadView_videoRoom {
min-height: 60%;
}
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------