[FIX] mail: correct style for discuss call

closes odoo/odoo#122288

X-original-commit: 8c69f8d57b87bf4247ed5b97a24bb2d7c0221b8b
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
This commit is contained in:
Alexandre Kühn
2023-05-24 15:45:35 +02:00
parent 882d91a828
commit 54eeb14123
4 changed files with 15 additions and 5 deletions
+4
View File
@@ -13,6 +13,10 @@
}
}
.o-mail-Call-main {
background-color: rgba(0, 0, 0, 0.5);
}
.o-mail-Call-sidebar {
width: 120px;
min-width: 120px;
+1 -1
View File
@@ -3,7 +3,7 @@
<t t-name="mail.Call" owl="1">
<div class="o-mail-Call user-select-none d-flex" t-att-class="{'o-fullscreen fixed-top vw-100 vh-100': state.isFullscreen, 'o-minimized': minimized, 'position-relative': !state.isFullscreen }">
<div class="d-flex flex-grow-1 flex-column align-items-center justify-content-center position-relative overflow-auto bg-black-50" t-on-mouseleave="onMouseleaveMain">
<div class="o-mail-Call-main d-flex flex-grow-1 flex-column align-items-center justify-content-center position-relative overflow-auto" t-on-mouseleave="onMouseleaveMain">
<div
class="d-flex align-items-center overflow-hidden h-100 w-100 flex-wrap justify-content-center"
t-attf-style="--height:{{state.tileHeight}}px; --width:{{state.tileWidth}}px;"
@@ -3,6 +3,7 @@
// ------------------------------------------------------------------
.o-mail-CallParticipantCard {
color: white;
aspect-ratio: 16/9;
}
@@ -34,11 +35,16 @@
85% { border: solid $gray-700 }
}
.o-mail-CallParticipantCard-iconBlackBg {
background-color: rgba(0, 0, 0, 0.75);
}
.o-mail-CallParticipantCard-overlay {
margin: Min(5%, map-get($spacers, 2));
}
.o-mail-CallParticipantCard-overlayBottom {
background-color: rgba(0, 0, 0, 0.75);
max-width: 50%;
}
@@ -30,7 +30,7 @@
<t t-if="rtcSession">
<!-- overlay -->
<span class="o-mail-CallParticipantCard-overlay o-mail-CallParticipantCard-overlayBottom z-index-1 position-absolute bottom-0 start-0 d-flex overflow-hidden">
<span t-if="!props.minimized" class="p-1 rounded-1 bg-black-75 text-truncate" t-esc="name"/>
<span t-if="!props.minimized" class="p-1 rounded-1 text-truncate" t-esc="name"/>
<small t-if="rtcSession.isScreenSharingOn and props.minimized and !isOfActiveCall" class="user-select-none o-minimized rounded-pill text-bg-danger d-flex align-items-center fw-bolder" title="live" aria-label="live">
LIVE
</small>
@@ -39,17 +39,17 @@
<span t-if="rtcSession.raisingHand" class="d-flex flex-column justify-content-center me-1 rounded-circle bg-500" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="raising hand" aria-label="raising hand">
<i class="fa fa-hand-paper-o"/>
</span>
<span t-if="rtcSession.isSelfMuted and !rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="muted" aria-label="muted">
<span t-if="rtcSession.isSelfMuted and !rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle o-mail-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="muted" aria-label="muted">
<i class="fa fa-microphone-slash"/>
</span>
<span t-if="rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle bg-900" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="deaf" aria-label="deaf">
<span t-if="rtcSession.isDeaf" class="d-flex flex-column justify-content-center me-1 rounded-circle o-mail-CallParticipantCard-iconBlackBg" t-att-class="{'o-minimized p-1': props.minimized, 'p-2': !props.minimized }" title="deaf" aria-label="deaf">
<i class="fa fa-deaf"/>
</span>
<span t-if="hasMediaError" class="o-mail-CallParticipantCard-overlay-replayButton d-flex flex-column justify-content-center me-1 p-2 rounded-circle" title="media player Error" t-on-click.stop="onClickReplay">
<i t-if="rootHover.isHover" class="fa fa-repeat text-danger"/>
<i t-else="" class="fa fa-exclamation-triangle text-danger"/>
</span>
<span t-if="showConnectionState" class="d-flex flex-column justify-content-center me-1 p-2 rounded-circle bg-900" t-att-title="rtcSession.connectionState">
<span t-if="showConnectionState" class="d-flex flex-column justify-content-center me-1 p-2 rounded-circle o-mail-CallParticipantCard-iconBlackBg" t-att-title="rtcSession.connectionState">
<i class="fa fa-exclamation-triangle text-warning"/>
</span>
<span t-if="rtcSession.isScreenSharingOn and !props.minimized and !isOfActiveCall" class="user-select-none rounded-pill text-bg-danger d-flex align-items-center me-1 fw-bolder" title="live" aria-label="live">