Fix call link notice on group call; fix call participants horizontal alignment
This commit is contained in:
parent
480c1f4882
commit
214fae0c6e
4 changed files with 52 additions and 37 deletions
|
@ -3671,7 +3671,7 @@
|
||||||
"description": "Title for the select your screen sharing sources modal"
|
"description": "Title for the select your screen sharing sources modal"
|
||||||
},
|
},
|
||||||
"icu:CallingAdhocCallInfo__CopyLink": {
|
"icu:CallingAdhocCallInfo__CopyLink": {
|
||||||
"messageformat": "Copy link",
|
"messageformat": "Copy call link",
|
||||||
"description": "Menu item in the in-call info popup for call link calls. The action is to add the call link to the clipboard."
|
"description": "Menu item in the in-call info popup for call link calls. The action is to add the call link to the clipboard."
|
||||||
},
|
},
|
||||||
"icu:CallingAdhocCallInfo__RemoveClient": {
|
"icu:CallingAdhocCallInfo__RemoveClient": {
|
||||||
|
|
|
@ -4367,29 +4367,37 @@ button.module-image__border-overlay:focus {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 320px;
|
width: 320px;
|
||||||
height: 440px;
|
height: 440px;
|
||||||
|
max-height: calc(100vh - $CallControls__height - 22px);
|
||||||
|
padding-block: 5px 0;
|
||||||
|
padding-inline: 5px;
|
||||||
|
margin-block-end: 85px;
|
||||||
|
margin-block-start: 20px;
|
||||||
|
margin-inline: auto;
|
||||||
background-color: $color-gray-80;
|
background-color: $color-gray-80;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
color: $color-white;
|
color: $color-white;
|
||||||
filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
|
filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
|
||||||
margin-inline-end: 340px;
|
|
||||||
margin-block-end: 85px;
|
|
||||||
margin-block-start: 20px;
|
|
||||||
outline: 1px solid $color-gray-62;
|
outline: 1px solid $color-gray-62;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-block: 5px 0;
|
|
||||||
padding-inline: 5px;
|
|
||||||
|
|
||||||
&__overlay {
|
&__overlay {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
align-items: center;
|
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
justify-content: flex-end;
|
padding-inline-start: 15px;
|
||||||
|
align-items: flex-end;
|
||||||
inset-inline-start: 0;
|
inset-inline-start: 0;
|
||||||
z-index: $z-index-calling;
|
z-index: $z-index-calling;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-basis: 480px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
|
|
|
@ -2,23 +2,32 @@
|
||||||
// SPDX-License-Identifier: AGPL-3.0-only
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
.CallingAdhocCallInfo {
|
.CallingAdhocCallInfo {
|
||||||
width: 100%;
|
flex-shrink: 0;
|
||||||
|
width: 360px;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-block-end: auto;
|
margin-block-end: auto;
|
||||||
padding-block-end: 16px;
|
padding-block-end: 16px;
|
||||||
overflow: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.CallingAdhocCallInfo__width-container {
|
.CallingAdhocCallInfo__width-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
width: 360px;
|
width: 100%;
|
||||||
|
max-width: none;
|
||||||
height: auto;
|
height: auto;
|
||||||
padding-block: 1px;
|
padding-block: 1px;
|
||||||
padding-inline: 1px;
|
padding-inline-start: 15px;
|
||||||
margin-block-end: 102px;
|
margin-block-end: 80px;
|
||||||
margin-inline-start: 90px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CallingAdhocCallInfo__width-container::after {
|
||||||
|
content: '';
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-basis: 480px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.CallingAdhocCallInfo__overlay {
|
.CallingAdhocCallInfo__overlay {
|
||||||
|
@ -29,11 +38,6 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CallingAdhocCallInfo__Overlay {
|
|
||||||
align-items: start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.CallingAdhocCallInfo__MenuItem {
|
.CallingAdhocCallInfo__MenuItem {
|
||||||
|
|
|
@ -311,7 +311,9 @@ export function CallingLobby({
|
||||||
{i18n('icu:calling__your-video-is-off')}
|
{i18n('icu:calling__your-video-is-off')}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{callMode === CallMode.Adhoc && isAdhocJoinRequestPending ? (
|
{/* eslint-disable-next-line no-nested-ternary */}
|
||||||
|
{callMode === CallMode.Adhoc ? (
|
||||||
|
isAdhocJoinRequestPending ? (
|
||||||
<div className="CallingLobby__CallLinkNotice CallingLobby__CallLinkNotice--join-request-pending">
|
<div className="CallingLobby__CallLinkNotice CallingLobby__CallLinkNotice--join-request-pending">
|
||||||
<SpinnerV2
|
<SpinnerV2
|
||||||
className="CallingLobby__CallLinkJoinRequestPendingSpinner"
|
className="CallingLobby__CallLinkJoinRequestPendingSpinner"
|
||||||
|
@ -326,7 +328,8 @@ export function CallingLobby({
|
||||||
? i18n('icu:CallingLobby__CallLinkNotice--phone-sharing')
|
? i18n('icu:CallingLobby__CallLinkNotice--phone-sharing')
|
||||||
: i18n('icu:CallingLobby__CallLinkNotice')}
|
: i18n('icu:CallingLobby__CallLinkNotice')}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)
|
||||||
|
) : null}
|
||||||
|
|
||||||
<CallingButtonToastsContainer
|
<CallingButtonToastsContainer
|
||||||
hasLocalAudio={hasLocalAudio}
|
hasLocalAudio={hasLocalAudio}
|
||||||
|
|
Loading…
Reference in a new issue