[FIX] mail: fixes button overflow of the chat window call buttons
Before this commit, the fixed margin between buttons wouldn't leave enough room for all the buttons to fit in one row in the chat window. This commit fixes this issue by using the flex space-between instead of fixed margins. closes odoo/odoo#127424 X-original-commit: c5a121729d5348ff81ef9bb8f58611c9234ef9f9 Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Thanh Dodeur
committed by
Alexandre Kühn
Alexandre Kühn
parent
73db32a17f
commit
fcfe6f5906
@@ -25,7 +25,7 @@
|
||||
<i t-else="" class="o-discuss-Call-sidebarToggler p-2 fs-5 cursor-pointer position-absolute oi oi-arrow-left" title="Show sidebar" t-on-click="() => this.state.sidebar = true"/>
|
||||
</t>
|
||||
<div t-if="state.overlay or !isControllerFloating" class="o-discuss-Call-overlay d-flex justify-content-center w-100 pb-1" t-att-class="{ 'o-isFloating position-absolute bottom-0 pb-3': isControllerFloating }">
|
||||
<div t-on-mousemove="onMousemoveOverlay">
|
||||
<div t-att-class="{ 'w-100': props.compact }" t-on-mousemove="onMousemoveOverlay">
|
||||
<CallActionList thread="props.thread" compact="props.compact" fullscreen="{ isActive: state.isFullscreen, enter: () => this.enterFullScreen(), exit: () => this.exitFullScreen() }"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="discuss.CallActionList" owl="1">
|
||||
<div class="o-discuss-CallActionList d-flex justify-content-between" t-attf-class="{{ className }}" t-ref="root">
|
||||
<div class="d-flex align-items-center flex-wrap">
|
||||
<div class="o-discuss-CallActionList d-flex justify-content-center" t-attf-class="{{ className }}" t-ref="root">
|
||||
<div class="d-flex align-items-center flex-wrap justify-content-between" t-att-class="{ 'w-100 ps-2 pe-2': isSmall }">
|
||||
<t t-if="isOfActiveCall and rtc.state.selfSession">
|
||||
<t t-if="rtc.state?.selfSession.isMute" t-set="micText">Unmute</t>
|
||||
<t t-else="" t-set="micText">Mute</t>
|
||||
<button class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall }"
|
||||
<button class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
|
||||
t-att-aria-label="micText"
|
||||
t-att-title="micText"
|
||||
t-on-click="onClickMicrophone">
|
||||
@@ -23,8 +23,8 @@
|
||||
</button>
|
||||
<t t-if="rtc.state?.selfSession.isDeaf" t-set="headphoneText">Undeafen</t>
|
||||
<t t-else="" t-set="headphoneText">Deafen</t>
|
||||
<button class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall }"
|
||||
<button class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
|
||||
t-att-aria-label="headphoneText"
|
||||
t-att-title="headphoneText"
|
||||
t-on-click="onClickDeafen">
|
||||
@@ -39,8 +39,8 @@
|
||||
</button>
|
||||
<t t-if="rtc.state?.selfSession.raisingHand" t-set="handText">Lower hand</t>
|
||||
<t t-else="" t-set="handText">Raise hand</t>
|
||||
<button class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall, 'bg-500' : rtc.state?.selfSession.raisingHand }"
|
||||
<button class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall, 'bg-500' : rtc.state?.selfSession.raisingHand }"
|
||||
t-att-aria-label="handText"
|
||||
t-att-title="handText"
|
||||
t-on-click="onClickRaiseHand">
|
||||
@@ -50,10 +50,10 @@
|
||||
</button>
|
||||
<t t-if="rtc.state.sendCamera" t-set="cameraText">Stop camera</t>
|
||||
<t t-else="" t-set="cameraText">Turn camera on</t>
|
||||
<button class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
<button class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
t-att-class="{
|
||||
'p-2': isSmall,
|
||||
'p-3': !isSmall,
|
||||
'p-3 m-1': !isSmall,
|
||||
}"
|
||||
t-att-aria-label="cameraText"
|
||||
t-att-title="cameraText"
|
||||
@@ -64,10 +64,10 @@
|
||||
</button>
|
||||
<t t-if="rtc.state.sendScreen" t-set="screenSharingText">Stop screen sharing</t>
|
||||
<t t-else="" t-set="screenSharingText">Share screen</t>
|
||||
<button t-if="!isMobileOS" class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
<button t-if="!isMobileOS" class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
t-att-class="{
|
||||
'p-2': isSmall,
|
||||
'p-3': !isSmall,
|
||||
'p-3 m-1': !isSmall,
|
||||
}"
|
||||
t-att-aria-label="screenSharingText"
|
||||
t-att-title="screenSharingText"
|
||||
@@ -76,20 +76,20 @@
|
||||
<i class="fa fa-desktop fa-stack-1x" t-att-class="{ 'fa-lg': !isSmall, 'text-success': rtc.state.sendScreen }"/>
|
||||
</div>
|
||||
</button>
|
||||
<button t-if="!props.fullscreen.isActive" class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
<button t-if="!props.fullscreen.isActive" class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
aria-label="Enter Full Screen"
|
||||
title="Enter Full Screen"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall }"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
|
||||
t-on-click="props.fullscreen.enter"
|
||||
>
|
||||
<div class="fa-stack">
|
||||
<i class="fa fa-arrows-alt fa-stack-1x" t-att-class="{ 'fa-lg': !isSmall }"/>
|
||||
</div>
|
||||
</button>
|
||||
<button t-if="props.fullscreen.isActive" class="btn d-flex m-1 border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
<button t-if="props.fullscreen.isActive" class="btn d-flex border-0 rounded-circle shadow-none opacity-100 opacity-75-hover"
|
||||
aria-label="Exit Full Screen"
|
||||
title="Exit Full Screen"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall }"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
|
||||
t-on-click="props.fullscreen.exit"
|
||||
>
|
||||
<div class="fa-stack">
|
||||
@@ -97,8 +97,8 @@
|
||||
</div>
|
||||
</button>
|
||||
</t>
|
||||
<button t-if="props.thread.rtcInvitingSession and !isOfActiveCall" class="btn btn-danger d-flex m-1 border-0 rounded-circle shadow-none"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3': !isSmall }"
|
||||
<button t-if="props.thread.rtcInvitingSession and !isOfActiveCall" class="btn btn-danger d-flex border-0 rounded-circle shadow-none"
|
||||
t-att-class="{ 'p-2': isSmall, 'p-3 m-1': !isSmall }"
|
||||
aria-label="Reject"
|
||||
title="Reject"
|
||||
t-att-disabled="rtc.state.hasPendingRequest"
|
||||
@@ -109,9 +109,9 @@
|
||||
</button>
|
||||
<t t-if="props.thread === rtc.state.channel" t-set="callText">Disconnect</t>
|
||||
<t t-else="" t-set="callText">Join Call</t>
|
||||
<button class="btn d-flex m-1 border-0 rounded-circle shadow-none"
|
||||
<button class="btn d-flex border-0 rounded-circle shadow-none"
|
||||
t-att-aria-label="callText"
|
||||
t-att-class="{ 'btn-danger': isOfActiveCall, 'p-2': isSmall, 'p-3': !isSmall, 'btn-success': !isOfActiveCall }"
|
||||
t-att-class="{ 'btn-danger': isOfActiveCall, 'p-2': isSmall, 'p-3 m-1': !isSmall, 'btn-success': !isOfActiveCall }"
|
||||
t-att-disabled="rtc.state.hasPendingRequest"
|
||||
t-att-title="callText"
|
||||
t-on-click="onClickToggleAudioCall">
|
||||
|
||||
Reference in New Issue
Block a user