mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix call participant emoji name display

Browse source
This commit is contained in:
ayumi-signal 2024-01-19 12:11:55 -08:00 • committed by GitHub
parent 951e39a8f7
commit 7fe17d2073
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 40 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
stylesheets/_modules.scss
View file

@ -3813,6 +3813,26 @@ button.module-image__border-overlay:focus {
display: block;
visibility: visible;
}
.module-ongoing-call__group-call-remote-participant {
// Only apply container-type: size to grid column to prevent size collapse
// for implicitly sized participants (PiP)
container-type: size;
@container (min-width: 180px) or (min-height: 180px) {
.module-ongoing-call__group-call-remote-participant__footer {
padding-block: 0 14px;
padding-inline: 16px;
}
}
&--hand-raised {
.module-ongoing-call__group-call-remote-participant__footer {
padding-block: 0 8px;
padding-inline: 8px;
}
}
}
}
&__overflow {
@ -3841,9 +3861,16 @@ button.module-image__border-overlay:focus {
margin-bottom: 1rem;
&__footer {
padding-block: 0 10px;
padding-block: 0 8px;
padding-inline: 10px;
}
&--hand-raised {
.module-ongoing-call__group-call-remote-participant__footer {
padding-block: 0 6px;
padding-inline: 6px;
}
}
}
&__scroll-marker {
@ -3922,20 +3949,6 @@ button.module-image__border-overlay:focus {
opacity: 1;
}
}
.module-ongoing-call__group-call-remote-participant {
// Only apply container-type: size to grid/overflow column to prevent size collapse
// for implicitly sized participants (PiP)
container-type: size;
$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;
}
}
}
}
&__group-call--pagination-tile {
@ -3981,8 +3994,6 @@ button.module-image__border-overlay:focus {
transition: none;
}
$group-call-remote-participant-footer-padding-medium: 12px;
&:after {
content: '';
position: absolute;
@ -4048,8 +4059,8 @@ button.module-image__border-overlay:focus {
position: absolute;
bottom: 0;
height: 60px;
padding-block: 0 $group-call-remote-participant-footer-padding-medium;
padding-inline: $group-call-remote-participant-footer-padding-medium;
padding-block: 0 10px;
padding-inline: 12px;
user-select: none;
width: 100%;
z-index: $z-index-above-base;
@ -4065,7 +4076,7 @@ button.module-image__border-overlay:focus {
&__contact-name {
flex-grow: 1;
font-size: 13px;
line-height: 13px;
line-height: 18px;
color: $color-white;
overflow: hidden;
text-overflow: ellipsis;
@ -4081,8 +4092,6 @@ button.module-image__border-overlay:focus {
&--hand-raised &__footer {
background: transparent;
padding-block: 0 8px;
padding-inline: 8px;
}
&--hand-raised &__info {

10
ts/components/CallScreen.stories.tsx
View file

@ -369,6 +369,8 @@ export function GroupCallYourHandRaised(): JSX.Element {
);
}
const PARTICIPANT_EMOJIS = ['❤️', '🤔', '✨', '😂', '🦄'] as const;
// We generate these upfront so that the list is stable when you move the slider.
const allRemoteParticipants = times(MAX_PARTICIPANTS).map(index => ({
aci: generateAci(),
@ -381,7 +383,13 @@ const allRemoteParticipants = times(MAX_PARTICIPANTS).map(index => ({
videoAspectRatio: Math.random() < 0.7 ? 1.3 : Math.random() * 0.4 + 0.6,
...getDefaultConversationWithServiceId({
isBlocked: index === 10 || index === MAX_PARTICIPANTS - 1,
title: `Participant ${index + 1}`,
title: `Participant ${
(index - 2) % 4 === 0
? PARTICIPANT_EMOJIS[
Math.floor((index - 2) / 4) % PARTICIPANT_EMOJIS.length
]
: ''
} ${index + 1}`,
}),
}));