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
This commit is contained in:
ayumi-signal 2024-10-17 17:35:10 -07:00 • committed by GitHub
parent 89ea580cae
commit a0db93c636
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 42 additions and 27 deletions
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 { AvatarColors } from '../types/Colors';
import type { GroupCallRemoteParticipantType } from '../types/Calling'; import type { GroupCallRemoteParticipantType } from '../types/Calling';
import { generateAci } from '../types/ServiceId'; 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 { setupI18n } from '../util/setupI18n';
import enMessages from '../../_locales/en/messages.json'; import enMessages from '../../_locales/en/messages.json';
import type { CallLinkType } from '../types/CallLink'; import type { CallLinkType } from '../types/CallLink';
@ -19,11 +19,15 @@ import { CallLinkRestrictions } from '../types/CallLink';
const i18n = setupI18n('en', enMessages); const i18n = setupI18n('en', enMessages);
const OUR_ACI = generateAci();
function createParticipant( function createParticipant(
participantProps: Partial<GroupCallRemoteParticipantType> participantProps: Partial<GroupCallRemoteParticipantType>
): GroupCallRemoteParticipantType { ): GroupCallRemoteParticipantType {
const aci = participantProps.aci ?? generateAci();
return { return {
aci: generateAci(), aci,
demuxId: 2, demuxId: 2,
hasRemoteAudio: Boolean(participantProps.hasRemoteAudio), hasRemoteAudio: Boolean(participantProps.hasRemoteAudio),
hasRemoteVideo: Boolean(participantProps.hasRemoteVideo), hasRemoteVideo: Boolean(participantProps.hasRemoteVideo),
@ -32,13 +36,14 @@ function createParticipant(
presenting: Boolean(participantProps.presenting), presenting: Boolean(participantProps.presenting),
sharingScreen: Boolean(participantProps.sharingScreen), sharingScreen: Boolean(participantProps.sharingScreen),
videoAspectRatio: 1.3, videoAspectRatio: 1.3,
...getDefaultConversationWithServiceId({ ...getDefaultConversation({
avatarUrl: participantProps.avatarUrl, avatarUrl: participantProps.avatarUrl,
color: sample(AvatarColors), color: sample(AvatarColors),
isBlocked: Boolean(participantProps.isBlocked), isBlocked: Boolean(participantProps.isBlocked),
name: participantProps.name, name: participantProps.name,
profileName: participantProps.title, profileName: participantProps.title,
title: String(participantProps.title), title: String(participantProps.title),
serviceId: aci,
}), }),
}; };
} }
@ -64,7 +69,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
i18n, i18n,
isCallLinkAdmin: overrideProps.isCallLinkAdmin || false, isCallLinkAdmin: overrideProps.isCallLinkAdmin || false,
isUnknownContactDiscrete: overrideProps.isUnknownContactDiscrete || false, isUnknownContactDiscrete: overrideProps.isUnknownContactDiscrete || false,
ourServiceId: generateAci(), ourServiceId: OUR_ACI,
participants: overrideProps.participants || [], participants: overrideProps.participants || [],
onClose: action('on-close'), onClose: action('on-close'),
onCopyCallLink: action('on-copy-call-link'), onCopyCallLink: action('on-copy-call-link'),
@ -130,6 +135,10 @@ export function ManyParticipants(): JSX.Element {
createParticipant({ createParticipant({
title: 'Someone With A Really Long Name', title: 'Someone With A Really Long Name',
}), }),
createParticipant({
title: 'My Name',
aci: OUR_ACI,
}),
], ],
}); });
return <CallingAdhocCallInfo {...props} />; return <CallingAdhocCallInfo {...props} />;
@ -170,6 +179,10 @@ export function AsAdmin(): JSX.Element {
createParticipant({ createParticipant({
title: 'Someone With A Really Long Name', title: 'Someone With A Really Long Name',
}), }),
createParticipant({
title: 'My Name',
aci: OUR_ACI,
}),
], ],
isCallLinkAdmin: true, isCallLinkAdmin: true,
}); });

48
ts/components/CallingAdhocCallInfo.tsx
View file

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