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

Fix spacing of your own icons in call link participant list

Browse source 
Co-authored-by: ayumi-signal <143036029+ayumi-signal@users.noreply.github.com>
This commit is contained in:
automated-signal 2024-10-18 11:24:53 -05:00 committed by GitHub
parent 3fbc2455da
commit 3aa54a3070
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 42 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ts/components/CallingAdhocCallInfo.stories.tsx
View file

@ -11,7 +11,7 @@ import { CallingAdhocCallInfo } from './CallingAdhocCallInfo';
import { AvatarColors } from '../types/Colors';
import type { GroupCallRemoteParticipantType } from '../types/Calling';
import { generateAci } from '../types/ServiceId';
import { getDefaultConversationWithServiceId } from '../test-both/helpers/getDefaultConversation';
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
import { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json';
import type { CallLinkType } from '../types/CallLink';
@ -19,11 +19,15 @@ import { CallLinkRestrictions } from '../types/CallLink';
const i18n = setupI18n('en', enMessages);
const OUR_ACI = generateAci();
function createParticipant(
participantProps: Partial<GroupCallRemoteParticipantType>
): GroupCallRemoteParticipantType {
const aci = participantProps.aci ?? generateAci();
return {
aci: generateAci(),
aci,
demuxId: 2,
hasRemoteAudio: Boolean(participantProps.hasRemoteAudio),
hasRemoteVideo: Boolean(participantProps.hasRemoteVideo),
@ -32,13 +36,14 @@ function createParticipant(
presenting: Boolean(participantProps.presenting),
sharingScreen: Boolean(participantProps.sharingScreen),
videoAspectRatio: 1.3,
...getDefaultConversationWithServiceId({
...getDefaultConversation({
avatarUrl: participantProps.avatarUrl,
color: sample(AvatarColors),
isBlocked: Boolean(participantProps.isBlocked),
name: participantProps.name,
profileName: participantProps.title,
title: String(participantProps.title),
serviceId: aci,
}),
};
}
@ -64,7 +69,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
i18n,
isCallLinkAdmin: overrideProps.isCallLinkAdmin || false,
isUnknownContactDiscrete: overrideProps.isUnknownContactDiscrete || false,
ourServiceId: generateAci(),
ourServiceId: OUR_ACI,
participants: overrideProps.participants || [],
onClose: action('on-close'),
onCopyCallLink: action('on-copy-call-link'),
@ -130,6 +135,10 @@ export function ManyParticipants(): JSX.Element {
createParticipant({
title: 'Someone With A Really Long Name',
}),
createParticipant({
title: 'My Name',
aci: OUR_ACI,
}),
],
});
return <CallingAdhocCallInfo {...props} />;
@ -170,6 +179,10 @@ export function AsAdmin(): JSX.Element {
createParticipant({
title: 'Someone With A Really Long Name',
}),
createParticipant({
title: 'My Name',
aci: OUR_ACI,
}),
],
isCallLinkAdmin: true,
});

48
ts/components/CallingAdhocCallInfo.tsx
View file

@ -268,30 +268,32 @@ export function CallingAdhocCallInfo({
)}
/>
{isCallLinkAdmin &&
participant.demuxId &&
!(ourServiceId && participant.serviceId === ourServiceId) ? (
<button
aria-label={i18n('icu:CallingAdhocCallInfo__RemoveClient')}
className={classNames(
'CallingAdhocCallInfo__RemoveClient',
'module-calling-participants-list__status-icon',
'module-calling-participants-list__remove'
)}
onClick={event => {
if (!participant.demuxId) {
return;
}
(participant.demuxId &&
!(ourServiceId && participant.serviceId === ourServiceId) ? (
<button
aria-label={i18n('icu:CallingAdhocCallInfo__RemoveClient')}
className={classNames(
'CallingAdhocCallInfo__RemoveClient',
'module-calling-participants-list__status-icon',
'module-calling-participants-list__remove'
)}
onClick={event => {
if (!participant.demuxId) {
return;
}
event.stopPropagation();
event.preventDefault();
setRemoveClientDialogState({
demuxId: participant.demuxId,
name: participant.title,
});
}}
type="button"
/>
) : null}
event.stopPropagation();
event.preventDefault();
setRemoveClientDialogState({
demuxId: participant.demuxId,
name: participant.title,
});
}}
type="button"
/>
) : (
<span className="module-calling-participants-list__status-icon" />
))}
</button>
),
[