From 37855ec266200c7a64545197e87c0bbb910c0f25 Mon Sep 17 00:00:00 2001
From: xlu-odoo <xlu@odoo.com>
Date: Tue, 17 May 2022 09:23:23 +0000
Subject: [PATCH] [REF] mail: `rtcCallParticipantCard`, review and simplify
 scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Part of the overall v16 SCSS optimization/restyle, task-2704984

task-2842691

closes odoo/odoo#91298

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../rtc_call_participant_card.scss            | 110 ++----------------
 .../rtc_call_participant_card.xml             |  36 +++---
 2 files changed, 27 insertions(+), 119 deletions(-)

diff --git a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.scss b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.scss
index 8ae2393551c..86c4fd42ac6 100644
--- a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.scss
+++ b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.scss
@@ -3,25 +3,17 @@
 // ------------------------------------------------------------------
 
 .o_RtcCallParticipantCard {
-    padding: map-get($spacers, 1);
-    display: flex;
-    position: relative;
     aspect-ratio: 16/9;
-    display: flex;
-    position: relative;
-    justify-content: center;
-    flex-direction: column;
 }
 
 .o_RtcCallParticipantCard_avatarImage {
     max-height: #{"min(100%, 100px)"}; // interpolated as not supported by Sass
     max-width: #{"min(100%, 100px)"};
     aspect-ratio: 1;
-    object-fit: cover;
-    border: 5px solid gray('700');
+    border: solid $gray-700;
 
     &.o-isTalking {
-        border: 5px solid darken($o-enterprise-primary-color, 5%);
+        border: solid darken($o-enterprise-primary-color, 5%);
     }
 
     &.o-isInvitation:not(:hover) {
@@ -29,69 +21,26 @@
     }
 
     &.o-isInvitation:hover {
-        border: 5px solid theme-color('danger');
+        border: solid theme-color('danger');
     }
 }
 
 @keyframes o_RtcCallParticipantCard_avatarImag_borderPulse {
-    0% { border: 5px solid white }
-    20% { border: 5px solid gray('600') }
-    35% { border: 5px solid gray('100') }
-    50% { border: 5px solid gray('600') }
-    70% { border: 5px solid gray('100') }
-    85% { border: 5px solid gray('700') }
-}
-
-.o_RtcCallParticipantCard_liveIndicator {
-    display: flex;
-    margin-inline-end: 5%;
-    align-items: center;
-
-    &.o-isMinimized {
-        font-size: 0.7rem;
-    }
-}
-
-.o_RtcCallParticipantCard_name {
-    padding: map-get($spacers, 1);
+    0% { border: solid white }
+    20% { border: solid $gray-600 }
+    35% { border: solid $gray-100 }
+    50% { border: solid $gray-600 }
+    70% { border: solid $gray-100 }
+    85% { border: solid $gray-700 }
 }
 
 .o_RtcCallParticipantCard_overlay {
-    position: absolute;
-    display: flex;
     pointer-events: none;
     margin: Min(5%, map-get($spacers, 2));
 }
 
 .o_RtcCallParticipantCard_overlayBottom {
     max-width: 50%;
-    overflow: hidden;
-    bottom: 0;
-    left: 0;
-}
-
-.o_RtcCallParticipantCard_overlayTop {
-    flex-direction: row-reverse;
-    right: 0%;
-    top: 0%;
-}
-
-.o_RtcCallParticipantCard_overlayTopElement {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    margin-inline-end: 5%;
-    padding: map-get($spacers, 2);
-
-    &.o-isMinimized {
-        padding: map-get($spacers, 1);
-    }
-}
-
-.o_RtcCallParticipantCard_volumeMenuAnchor {
-    position: absolute;
-    bottom: 0;
-    left: 50%;
 }
 
 // ------------------------------------------------------------------
@@ -99,52 +48,11 @@
 // ------------------------------------------------------------------
 
 .o_RtcCallParticipantCard {
-    border-radius: $o-mail-rounded-rectangle-border-radius-sm;
-
-    &.o-isClickable {
-        cursor: pointer;
-    }
-
     &.o-isTalking {
         box-shadow: inset 0 0 0 map-get($spacers, 1) darken($o-enterprise-primary-color, 5%);
     }
-
-    &.o-isInvitation {
-        opacity: 0.6;
-    }
-}
-
-.o_RtcCallParticipantCard_avatarFrame {
-    border-radius: $o-mail-rounded-rectangle-border-radius-sm;
-    &:not(.o-isMinimized) {
-        background-color: $o-brand-secondary;
-    }
-}
-
-.o_RtcCallParticipantCard_connectionState {
-    color: theme-color('warning');
 }
 
 .o_RtcCallParticipantCard_liveIndicator {
-    background-color: theme-color('danger');
-    color: white;
     user-select: none;
-    font-weight: bold;
-}
-
-.o_RtcCallParticipantCard_name {
-    @include text-truncate();
-    color: white;
-    background-color: rgba(black, 0.8);
-    border-radius: $o-mail-rounded-rectangle-border-radius-sm;
-}
-
-.o_RtcCallParticipantCard_overlayTopElement {
-    color: white;
-    border-radius: 50%;
-    background-color: gray('900');
-}
-
-.o_RtcCallParticipantCard_volumeMenuAnchor_separator {
-    background-color: $border-color;
 }
diff --git a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
index 8c7073ff21a..626f10bfa35 100644
--- a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
+++ b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
@@ -3,11 +3,11 @@
 
     <t t-name="mail.RtcCallParticipantCard" owl="1">
         <t t-if="callParticipantCard">
-            <div class="o_RtcCallParticipantCard mh-100 mw-100 align-items-center"
+            <div class="o_RtcCallParticipantCard position-relative d-flex flex-column align-items-center justify-content-center mh-100 mw-100 p-1 rounded-sm"
                 t-att-class="{
-                    'o-isClickable': callParticipantCard.invitedGuest or callParticipantCard.invitedPartner or !callParticipantCard.isMinimized,
+                    'o-isClickable o_cursor_pointer': callParticipantCard.invitedGuest or callParticipantCard.invitedPartner or !callParticipantCard.isMinimized,
                     'o-isTalking': !callParticipantCard.isMinimized and callParticipantCard.isTalking,
-                    'o-isInvitation': callParticipantCard.isInvitation,
+                    'o-isInvitation opacity-50': callParticipantCard.isInvitation,
                 }"
                 t-att-title="callParticipantCard.name"
                 t-att-aria-label="callParticipantCard.name"
@@ -21,13 +21,13 @@
                     <RtcVideo record="callParticipantCard.rtcVideoView"/>
                 </t>
                 <t t-else="">
-                    <div class="o_RtcCallParticipantCard_avatarFrame d-flex align-items-center justify-content-center h-100 w-100" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized }" draggable="false">
+                    <div class="o_RtcCallParticipantCard_avatarFrame d-flex align-items-center justify-content-center h-100 w-100 rounded-sm" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized, 'bg-secondary': !callParticipantCard.isMinimized}" draggable="false">
                         <img alt="Avatar"
                              t-att-class="{
                                 'o-isTalking': callParticipantCard.isTalking,
                                 'o-isInvitation': callParticipantCard.isInvitation,
                              }"
-                             class="o_RtcCallParticipantCard_avatarImage h-100 rounded-circle"
+                             class="o_RtcCallParticipantCard_avatarImage h-100 rounded-circle border-5 o_object_fit_cover"
                              t-att-src="callParticipantCard.avatarUrl"
                              draggable="false"
                         />
@@ -36,39 +36,39 @@
 
                 <t t-if="callParticipantCard.rtcSession">
                     <!-- overlay -->
-                    <span class="o_RtcCallParticipantCard_overlay o_RtcCallParticipantCard_overlayBottom">
+                    <span class="o_RtcCallParticipantCard_overlay o_RtcCallParticipantCard_overlayBottom position-absolute bottom-0 start-0 d-flex overflow-hidden">
                         <t t-if="!callParticipantCard.isMinimized">
-                            <span class="o_RtcCallParticipantCard_name" t-esc="callParticipantCard.name"/>
+                            <span class="o_RtcCallParticipantCard_name p-1 rounded-sm bg-black-75 text-white text-truncate" t-esc="callParticipantCard.name"/>
                         </t>
                         <t t-if="callParticipantCard.rtcSession.isScreenSharingOn and callParticipantCard.isMinimized and !callParticipantCard.rtcSession.channel.rtc">
-                            <span class="o_RtcCallParticipantCard_liveIndicator badge-pill o-isMinimized" title="live" aria-label="live">
+                            <small class="o_RtcCallParticipantCard_liveIndicator o-isMinimized badge-pill badge-danger d-flex align-items-center font-weight-bolder" title="live" aria-label="live">
                                 LIVE
-                            </span>
+                            </small>
                         </t>
                     </span>
-                    <div class="o_RtcCallParticipantCard_overlay o_RtcCallParticipantCard_overlayTop">
+                    <div class="o_RtcCallParticipantCard_overlay o_RtcCallParticipantCard_overlayTop position-absolute top-0 end-0 d-flex flex-row-reverse">
                         <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">
+                            <span class="o_RtcCallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-isMinimized p-1': callParticipantCard.isMinimized, 'p-2': !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_overlayTopElement" t-att-class="{'o-isMinimized': callParticipantCard.isMinimized }" title="deaf" aria-label="deaf">
+                            <span class="o_RtcCallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-isMinimized p-1': callParticipantCard.isMinimized, 'p-2': !callParticipantCard.isMinimized }" title="deaf" aria-label="deaf">
                                 <i class="fa fa-deaf"/>
                             </span>
                         </t>
                         <t t-if="callParticipantCard.rtcSession.channel.rtc and callParticipantCard.rtcSession.isAudioInError">
-                            <span class="o_RtcCallParticipantCard_overlayTopElement text-danger" title="Issue with audio">
+                            <span class="o_RtcCallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 p-2 rounded-circle bg-900 text-danger" title="Issue with audio">
                                 <i class="fa fa-exclamation-triangle"/>
                             </span>
                         </t>
                         <t t-if="callParticipantCard.rtcSession.channel.rtc and !callParticipantCard.rtcSession.rtcAsCurrentSession and !['connected', 'completed'].includes(callParticipantCard.rtcSession.connectionState)">
-                            <span class="o_RtcCallParticipantCard_overlayTopElement" t-att-title="callParticipantCard.rtcSession.connectionState">
-                                <i class="fa fa-exclamation-triangle o_RtcCallParticipantCard_connectionState"/>
+                            <span class="o_RtcCallParticipantCard_overlayTopElement d-flex flex-column justify-content-center me-1 p-2 rounded-circle bg-900" t-att-title="callParticipantCard.rtcSession.connectionState">
+                                <i class="fa fa-exclamation-triangle o_RtcCallParticipantCard_connectionState text-warning"/>
                             </span>
                         </t>
                         <t t-if="callParticipantCard.rtcSession.isScreenSharingOn and !callParticipantCard.isMinimized and !callParticipantCard.rtcSession.channel.rtc">
-                            <span class="o_RtcCallParticipantCard_liveIndicator badge-pill" title="live" aria-label="live">
+                            <span class="o_RtcCallParticipantCard_liveIndicator badge-pill badge-danger d-flex align-items-center me-1 font-weight-bolder" title="live" aria-label="live">
                                 LIVE
                             </span>
                         </t>
@@ -77,12 +77,12 @@
                     <!-- volume popover -->
                     <t t-if="!callParticipantCard.rtcSession.isOwnSession">
                         <Popover>
-                            <i class="o_RtcCallParticipantCard_volumeMenuAnchor" t-on-click="callParticipantCard.onClickVolumeAnchor" t-ref="volumeMenuAnchor"/>
+                            <i class="o_RtcCallParticipantCard_volumeMenuAnchor position-absolute bottom-0 start-50" t-on-click="callParticipantCard.onClickVolumeAnchor" t-ref="volumeMenuAnchor"/>
                             <t t-set-slot="opened">
                                 <div class="d-flex flex-column">
                                     <input type="range" min="0.0" max="1" step="0.01" t-att-value="callParticipantCard.rtcSession.volume" t-on-change="callParticipantCard.onChangeVolume"/>
                                     <t t-if="callParticipantCard.hasConnectionInfo">
-                                        <hr class="o_RtcCallParticipantCard_volumeMenuAnchor_separator w-100"/>
+                                        <hr class="o_RtcCallParticipantCard_volumeMenuAnchor_separator w-100 border-top"/>
                                         <div t-esc="callParticipantCard.inboundConnectionTypeText"/>
                                         <div t-esc="callParticipantCard.outboundConnectionTypeText"/>
                                     </t>