Improve group call participants background, padding, margin
This commit is contained in:
parent
670da5722a
commit
a9df5923a3
7 changed files with 39 additions and 16 deletions
|
@ -3818,6 +3818,7 @@ button.module-image__border-overlay:focus {
|
|||
&__overflow {
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
margin-block-start: calc(60px + var(--title-bar-drag-area-height));
|
||||
margin-inline-end: 16px;
|
||||
|
||||
&__inner {
|
||||
|
@ -3838,6 +3839,11 @@ button.module-image__border-overlay:focus {
|
|||
& .module-ongoing-call__group-call-remote-participant {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&__footer {
|
||||
padding-block: 0 10px;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__scroll-marker {
|
||||
|
@ -3892,7 +3898,7 @@ button.module-image__border-overlay:focus {
|
|||
);
|
||||
|
||||
#{$scroll-marker-selector}__button {
|
||||
margin-block-start: 60px;
|
||||
margin-block-start: 16px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
@ -3947,6 +3953,8 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
|
||||
&__group-call-remote-participant {
|
||||
container-type: size;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
@ -3961,6 +3969,16 @@ button.module-image__border-overlay:focus {
|
|||
transition: none;
|
||||
}
|
||||
|
||||
$group-call-remote-participant-footer-padding-medium: 12px;
|
||||
$group-call-remote-participant-footer-padding-large: 16px;
|
||||
|
||||
@container (min-width: 180px) or (min-height: 180px) {
|
||||
.module-ongoing-call__group-call-remote-participant__footer {
|
||||
padding-block: 0 $group-call-remote-participant-footer-padding-large;
|
||||
padding-inline: $group-call-remote-participant-footer-padding-large;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
@ -3992,6 +4010,10 @@ button.module-image__border-overlay:focus {
|
|||
}
|
||||
}
|
||||
|
||||
&-background.module-calling__background--no-avatar {
|
||||
background-color: $color-gray-78;
|
||||
}
|
||||
|
||||
&__blocked {
|
||||
@include color-svg('../images/icons/v3/block/block.svg', $color-white);
|
||||
height: 24px;
|
||||
|
@ -4022,8 +4044,8 @@ button.module-image__border-overlay:focus {
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 60px;
|
||||
padding-block: 0 16px;
|
||||
padding-inline: 16px;
|
||||
padding-block: 0 $group-call-remote-participant-footer-padding-medium;
|
||||
padding-inline: $group-call-remote-participant-footer-padding-medium;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
z-index: $z-index-above-base;
|
||||
|
@ -4216,6 +4238,10 @@ button.module-image__border-overlay:focus {
|
|||
-webkit-user-drag: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.module-calling__background--no-avatar {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&--local {
|
||||
|
|
|
@ -3,28 +3,23 @@
|
|||
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import type { AvatarColorType } from '../types/Colors';
|
||||
|
||||
export type PropsType = {
|
||||
avatarPath?: string;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
color?: AvatarColorType;
|
||||
};
|
||||
|
||||
export function CallBackgroundBlur({
|
||||
avatarPath,
|
||||
children,
|
||||
className,
|
||||
color,
|
||||
}: PropsType): JSX.Element {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-calling__background',
|
||||
{
|
||||
[`module-background-color__${color || 'default'}`]: !avatarPath,
|
||||
},
|
||||
!avatarPath && 'module-calling__background--no-avatar',
|
||||
className
|
||||
)}
|
||||
>
|
||||
|
|
|
@ -391,7 +391,7 @@ export function CallScreen({
|
|||
{isSendingVideo ? (
|
||||
<video ref={localVideoRef} autoPlay />
|
||||
) : (
|
||||
<CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
|
||||
<CallBackgroundBlur avatarPath={me.avatarPath}>
|
||||
<div className="module-calling__spacer module-calling__camera-is-off-spacer" />
|
||||
<div className="module-calling__camera-is-off">
|
||||
{i18n('icu:calling__your-video-is-off')}
|
||||
|
@ -412,7 +412,7 @@ export function CallScreen({
|
|||
autoPlay
|
||||
/>
|
||||
) : (
|
||||
<CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
|
||||
<CallBackgroundBlur avatarPath={me.avatarPath}>
|
||||
<Avatar
|
||||
acceptedMessageRequest
|
||||
avatarPath={me.avatarPath}
|
||||
|
|
|
@ -240,7 +240,6 @@ export function CallingLobby({
|
|||
<CallBackgroundBlur
|
||||
className="module-CallingLobby__local-preview module-CallingLobby__local-preview--camera-is-off"
|
||||
avatarPath={me.avatarPath}
|
||||
color={me.color}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
@ -48,7 +48,7 @@ function NoVideo({
|
|||
|
||||
return (
|
||||
<div className="module-calling-pip__video--remote">
|
||||
<CallBackgroundBlur avatarPath={avatarPath} color={color}>
|
||||
<CallBackgroundBlur avatarPath={avatarPath}>
|
||||
<div className="module-calling-pip__video--avatar">
|
||||
<Avatar
|
||||
acceptedMessageRequest={acceptedMessageRequest}
|
||||
|
|
|
@ -73,7 +73,7 @@ function renderAvatar(
|
|||
): JSX.Element {
|
||||
return (
|
||||
<div className="module-ongoing-call__remote-video-disabled">
|
||||
<CallBackgroundBlur avatarPath={avatarPath} color={color}>
|
||||
<CallBackgroundBlur avatarPath={avatarPath}>
|
||||
<Avatar
|
||||
acceptedMessageRequest={acceptedMessageRequest}
|
||||
avatarPath={avatarPath}
|
||||
|
|
|
@ -250,7 +250,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
|
|||
const shorterDimension = Math.min(width, height);
|
||||
|
||||
if (shorterDimension >= 180) {
|
||||
avatarSize = AvatarSize.EIGHTY;
|
||||
avatarSize = AvatarSize.NINETY_SIX;
|
||||
} else {
|
||||
avatarSize = AvatarSize.FORTY_EIGHT;
|
||||
}
|
||||
|
@ -373,7 +373,10 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
|
|||
/>
|
||||
)}
|
||||
{!hasVideoToShow && (
|
||||
<CallBackgroundBlur avatarPath={avatarPath} color={color}>
|
||||
<CallBackgroundBlur
|
||||
avatarPath={avatarPath}
|
||||
className="module-ongoing-call__group-call-remote-participant-background"
|
||||
>
|
||||
{isBlocked ? (
|
||||
<>
|
||||
<i className="module-ongoing-call__group-call-remote-participant__blocked" />
|
||||
|
|
Loading…
Reference in a new issue