Fix calling participant appearance
This commit is contained in:
parent
f1e8ffe720
commit
953a1dd2a0
4 changed files with 26 additions and 16 deletions
|
@ -3603,6 +3603,8 @@ button.module-image__border-overlay:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
padding-bottom: 19px;
|
padding-bottom: 19px;
|
||||||
|
@ -3640,6 +3642,8 @@ button.module-image__border-overlay:focus {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
// Improve appearance of blurred edges by reducing edge gradient effect
|
||||||
|
transform: scale(1.2, 1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3743,6 +3747,7 @@ button.module-image__border-overlay:focus {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
margin-block-start: 24px;
|
||||||
z-index: $z-index-above-base;
|
z-index: $z-index-above-base;
|
||||||
|
|
||||||
&__grid {
|
&__grid {
|
||||||
|
@ -3978,7 +3983,6 @@ button.module-image__border-overlay:focus {
|
||||||
}
|
}
|
||||||
|
|
||||||
&__footer {
|
&__footer {
|
||||||
background: linear-gradient(transparent, $color-black-alpha-40);
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -4010,6 +4014,7 @@ button.module-image__border-overlay:focus {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: $local-preview-width;
|
width: $local-preview-width;
|
||||||
|
box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
|
||||||
|
|
||||||
&__video {
|
&__video {
|
||||||
// The background-color is seen while the video loads.
|
// The background-color is seen while the video loads.
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
min-width: 480px;
|
min-width: 480px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
background-color: $color-gray-78;
|
background-color: $color-gray-78;
|
||||||
|
box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
margin-block-end: 16px;
|
margin-block-end: 16px;
|
||||||
padding-block: 22px;
|
padding-block: 22px;
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
// SPDX-License-Identifier: AGPL-3.0-only
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
.module-CallingPreCallInfo {
|
.module-CallingPreCallInfo {
|
||||||
|
margin-block-start: 43px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
|
|
|
@ -8,6 +8,7 @@ import type { ConversationType } from '../state/ducks/conversations';
|
||||||
import type { LocalizerType } from '../types/Util';
|
import type { LocalizerType } from '../types/Util';
|
||||||
import { AvatarColors } from '../types/Colors';
|
import { AvatarColors } from '../types/Colors';
|
||||||
import { Avatar, AvatarSize } from './Avatar';
|
import { Avatar, AvatarSize } from './Avatar';
|
||||||
|
import { CallBackgroundBlur } from './CallBackgroundBlur';
|
||||||
|
|
||||||
type PropsType = {
|
type PropsType = {
|
||||||
conversation: ConversationType;
|
conversation: ConversationType;
|
||||||
|
@ -72,21 +73,23 @@ function renderAvatar(
|
||||||
): JSX.Element {
|
): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<div className="module-ongoing-call__remote-video-disabled">
|
<div className="module-ongoing-call__remote-video-disabled">
|
||||||
<Avatar
|
<CallBackgroundBlur avatarPath={avatarPath} color={color}>
|
||||||
acceptedMessageRequest={acceptedMessageRequest}
|
<Avatar
|
||||||
avatarPath={avatarPath}
|
acceptedMessageRequest={acceptedMessageRequest}
|
||||||
badge={undefined}
|
avatarPath={avatarPath}
|
||||||
color={color || AvatarColors[0]}
|
badge={undefined}
|
||||||
noteToSelf={false}
|
color={color || AvatarColors[0]}
|
||||||
conversationType="direct"
|
noteToSelf={false}
|
||||||
i18n={i18n}
|
conversationType="direct"
|
||||||
isMe={isMe}
|
i18n={i18n}
|
||||||
phoneNumber={phoneNumber}
|
isMe={isMe}
|
||||||
profileName={profileName}
|
phoneNumber={phoneNumber}
|
||||||
title={title}
|
profileName={profileName}
|
||||||
sharedGroupNames={sharedGroupNames}
|
title={title}
|
||||||
size={AvatarSize.EIGHTY}
|
sharedGroupNames={sharedGroupNames}
|
||||||
/>
|
size={AvatarSize.EIGHTY}
|
||||||
|
/>
|
||||||
|
</CallBackgroundBlur>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue