Improve group call participants background, padding, margin

This commit is contained in:
ayumi-signal 2024-01-17 12:37:04 -08:00 committed by GitHub
parent 670da5722a
commit a9df5923a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 39 additions and 16 deletions

View file

@ -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 {

View file

@ -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
)}
>

View file

@ -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}

View file

@ -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}
/>
)}

View file

@ -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}

View file

@ -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}

View file

@ -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" />