[REF] mail: rtcCallParticipantCard, review and simplify scss
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>
This commit is contained in:
xlu-odoo
+9
-101
@@ -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;
|
||||
}
|
||||
|
||||
+18
-18
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user