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

AboutContactModal improvements

Browse source
This commit is contained in:
Fedor Indutny 2024-02-16 14:16:13 -08:00 • committed by GitHub
parent a569c04e2e
commit c772f2abc5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 110 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

20
ts/components/GlobalModalContainer.tsx
View file

@ -23,8 +23,6 @@ import { ConfirmationDialog } from './ConfirmationDialog';
import { FormattingWarningModal } from './FormattingWarningModal';
import { SendEditWarningModal } from './SendEditWarningModal';
import { SignalConnectionsModal } from './SignalConnectionsModal';
import { AboutContactModal } from './conversation/AboutContactModal';
import type { ExternalPropsType as AboutContactModalPropsType } from './conversation/AboutContactModal';
import { WhatsNewModal } from './WhatsNewModal';
// NOTE: All types should be required for this component so that the smart
@ -76,8 +74,8 @@ export type PropsType = {
isSignalConnectionsVisible: boolean;
toggleSignalConnectionsModal: () => unknown;
// AboutContactModal
aboutContactModalProps: AboutContactModalPropsType | undefined;
toggleAboutContactModal: () => unknown;
isAboutContactModalVisible: boolean;
renderAboutContactModal: () => JSX.Element | null;
// StickerPackPreviewModal
stickerPackPreviewId: string | undefined;
renderStickerPreviewModal: () => JSX.Element | null;
@ -145,8 +143,8 @@ export function GlobalModalContainer({
isSignalConnectionsVisible,
toggleSignalConnectionsModal,
// AboutContactModal
aboutContactModalProps,
toggleAboutContactModal,
isAboutContactModalVisible,
renderAboutContactModal,
// StickerPackPreviewModal
stickerPackPreviewId,
renderStickerPreviewModal,
@ -260,14 +258,8 @@ export function GlobalModalContainer({
return renderSafetyNumber();
}
if (aboutContactModalProps) {
return (
<AboutContactModal
i18n={i18n}
onClose={toggleAboutContactModal}
{...aboutContactModalProps}
/>
);
if (isAboutContactModalVisible) {
return renderAboutContactModal();
}
if (contactModalState) {

9
ts/components/conversation/AboutContactModal.stories.tsx
View file

@ -44,6 +44,11 @@ const systemContact = getDefaultConversation({
phoneNumber: '+1 555 123-4567',
hasMessages: true,
});
const me = getDefaultConversation({
isMe: true,
acceptedMessageRequest: true,
hasMessages: true,
});
export default {
title: 'Components/Conversation/AboutContactModal',
@ -67,6 +72,10 @@ export function Defaults(args: PropsType): JSX.Element {
return <AboutContactModal {...args} />;
}
export function Me(args: PropsType): JSX.Element {
return <AboutContactModal {...args} conversation={me} />;
}
export function Verified(args: PropsType): JSX.Element {
return <AboutContactModal {...args} conversation={verifiedConversation} />;
}

40
ts/components/conversation/AboutContactModal.tsx
View file

@ -15,10 +15,6 @@ import { About } from './About';
export type PropsType = Readonly<{
i18n: LocalizerType;
onClose: () => void;
}> &
ExternalPropsType;
export type ExternalPropsType = Readonly<{
conversation: ConversationType;
isSignalConnection: boolean;
toggleSignalConnectionsModal: () => void;
@ -37,6 +33,8 @@ export function AboutContactModal({
unblurAvatar,
onClose,
}: PropsType): JSX.Element {
const { isMe } = conversation;
useEffect(() => {
// Kick off the expensive hydration of the current sharedGroupNames
updateSharedGroups(conversation.id);
@ -70,7 +68,9 @@ export function AboutContactModal({
let statusRow: JSX.Element | undefined;
if (conversation.isBlocked) {
if (isMe) {
// No status for ourselves
} else if (conversation.isBlocked) {
statusRow = (
<div className="AboutContactModal__row">
<i className="AboutContactModal__row__icon AboutContactModal__row__icon--blocked" />
@ -127,7 +127,9 @@ export function AboutContactModal({
<div className="AboutContactModal__row">
<h3 className="AboutContactModal__title">
{i18n('icu:AboutContactModal__title')}
{isMe
? i18n('icu:AboutContactModal__title--myself')
: i18n('icu:AboutContactModal__title')}
</h3>
</div>
@ -136,7 +138,7 @@ export function AboutContactModal({
<UserText text={conversation.title} />
</div>
{conversation.isVerified ? (
{!isMe && conversation.isVerified ? (
<div className="AboutContactModal__row">
<i className="AboutContactModal__row__icon AboutContactModal__row__icon--verified" />
<button
@ -149,7 +151,7 @@ export function AboutContactModal({
</div>
) : null}
{conversation.about ? (
{!isMe && conversation.about ? (
<div className="AboutContactModal__row">
<i className="AboutContactModal__row__icon AboutContactModal__row__icon--about" />
<About
@ -159,7 +161,7 @@ export function AboutContactModal({
</div>
) : null}
{isSignalConnection ? (
{!isMe && isSignalConnection ? (
<div className="AboutContactModal__row">
<i className="AboutContactModal__row__icon AboutContactModal__row__icon--connections" />
<button
@ -172,7 +174,7 @@ export function AboutContactModal({
</div>
) : null}
{isInSystemContacts(conversation) ? (
{!isMe && isInSystemContacts(conversation) ? (
<div className="AboutContactModal__row">
<i className="AboutContactModal__row__icon AboutContactModal__row__icon--person" />
{i18n('icu:AboutContactModal__system-contact', {
@ -188,15 +190,17 @@ export function AboutContactModal({
</div>
) : null}
<div className="AboutContactModal__row">
<i className="AboutContactModal__row__icon AboutContactModal__row__icon--group" />
<div>
<SharedGroupNames
i18n={i18n}
sharedGroupNames={conversation.sharedGroupNames || []}
/>
{!isMe && (
<div className="AboutContactModal__row">
<i className="AboutContactModal__row__icon AboutContactModal__row__icon--group" />
<div>
<SharedGroupNames
i18n={i18n}
sharedGroupNames={conversation.sharedGroupNames || []}
/>
</div>
</div>
</div>
)}
{statusRow}
</Modal>