Signal/Desktop
1
0
Fork 0
mirror of https://github.com/signalapp/Signal-Desktop.git synced 2026-05-08 08:58:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Show about info from contact profiles

Browse Source
This commit is contained in:
Josh Perez
2021-01-25 20:01:19 -05:00
committed by Scott Nonnenberg
parent c8b551edab
commit 258bd55dd2
13 changed files with 140 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts/components/ContactListItem.stories.tsx
+9 -31
View File
@@ -23,7 +23,6 @@ storiesOf('Components/ContactListItem', module)
title="Someone 🔥 Somewhere"
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0011"
isVerified
profileName="🔥Flames🔥"
avatarPath={gifUrl}
onClick={onClick}
@@ -39,6 +38,7 @@ storiesOf('Components/ContactListItem', module)
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
about="👍 Free to chat"
avatarPath={gifUrl}
onClick={onClick}
/>
@@ -48,26 +48,13 @@ storiesOf('Components/ContactListItem', module)
name="Another ❄️ Yes"
phoneNumber="(202) 555-0011"
profileName="❄️Ice❄️"
about="🙏 Be kind"
avatarPath={gifUrl}
onClick={onClick}
/>
</div>
);
})
.add('With name and profile, verified', () => {
return (
<ContactListItem
i18n={i18n}
title="Someone 🔥 Somewhere"
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
isVerified
avatarPath={gifUrl}
onClick={onClick}
/>
);
})
.add('With name and profile, admin', () => {
return (
<ContactListItem
@@ -77,7 +64,7 @@ storiesOf('Components/ContactListItem', module)
name="Someone 🔥 Somewhere"
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
isVerified
about="👍 Free to chat"
avatarPath={gifUrl}
onClick={onClick}
/>
@@ -90,6 +77,7 @@ storiesOf('Components/ContactListItem', module)
isAdmin
title="(202) 555-0011"
phoneNumber="(202) 555-0011"
about="👍 Free to chat"
avatarPath={gifUrl}
onClick={onClick}
/>
@@ -104,6 +92,7 @@ storiesOf('Components/ContactListItem', module)
color="teal"
phoneNumber="(202) 555-0011"
profileName="🔥Flames🔥"
about="👍 Free to chat"
onClick={onClick}
/>
);
@@ -115,39 +104,28 @@ storiesOf('Components/ContactListItem', module)
phoneNumber="(202) 555-0011"
title="🔥Flames🔥"
profileName="🔥Flames🔥"
about="👍 Free to chat"
onClick={onClick}
/>
);
})
.add('Verified, profile, no name, no avatar', () => {
.add('No name, no profile, no avatar, no about', () => {
return (
<ContactListItem
i18n={i18n}
phoneNumber="(202) 555-0011"
title="🔥Flames🔥"
profileName="🔥Flames🔥"
isVerified
title="(202) 555-0011"
onClick={onClick}
/>
);
})
.add('No name, no profile, no avatar', () => {
return (
<ContactListItem
i18n={i18n}
phoneNumber="(202) 555-0011"
title="(202) 555-0011"
onClick={onClick}
/>
);
})
.add('Verified, no name, no profile, no avatar', () => {
return (
<ContactListItem
i18n={i18n}
title="(202) 555-0011"
about="👍 Free to chat"
phoneNumber="(202) 555-0011"
isVerified
onClick={onClick}
/>
);
ts/components/ContactListItem.tsx
+4 -21
View File
@@ -4,6 +4,7 @@
import React from 'react';
import classNames from 'classnames';
import { About } from './conversation/About';
import { Avatar } from './Avatar';
import { Emojify } from './conversation/Emojify';
import { InContactsIcon } from './InContactsIcon';
@@ -12,12 +13,12 @@ import { LocalizerType } from '../types/Util';
import { ColorType } from '../types/Colors';
type Props = {
about?: string;
avatarPath?: string;
color?: ColorType;
i18n: LocalizerType;
isAdmin?: boolean;
isMe?: boolean;
isVerified?: boolean;
name?: string;
onClick?: () => void;
phoneNumber?: string;
@@ -53,24 +54,11 @@ export class ContactListItem extends React.Component<Props> {
}
public render(): JSX.Element {
const {
i18n,
isAdmin,
isMe,
isVerified,
name,
onClick,
phoneNumber,
profileName,
title,
} = this.props;
const { about, i18n, isAdmin, isMe, name, onClick, title } = this.props;
const displayName = isMe ? i18n('you') : title;
const shouldShowIcon = Boolean(name);
const showNumber = Boolean(isMe || name || profileName);
const showVerified = !isMe && isVerified;
return (
<button
onClick={onClick}
@@ -93,12 +81,7 @@ export class ContactListItem extends React.Component<Props> {
) : null}
</div>
<div className="module-contact-list-item__text__additional-data">
{showVerified ? (
<div className="module-contact-list-item__text__verified-icon" />
) : null}
{showVerified ? ` ${i18n('verified')}` : null}
{showVerified && showNumber ? ' ∙ ' : null}
{showNumber ? phoneNumber : null}
<About text={about} />
</div>
</div>
{isAdmin ? (
ts/components/conversation/About.tsx
+22
View File
@@ -0,0 +1,22 @@
// Copyright 2018-2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import { Emojify } from './Emojify';
export type PropsType = {
text?: string;
};
export const About = ({ text }: PropsType): JSX.Element | null => {
if (!text) {
return null;
}
return (
<span className="module-about__text" dir="auto">
<Emojify text={text || ''} />
</span>
);
};
ts/components/conversation/ContactModal.stories.tsx
+1
View File
@@ -24,6 +24,7 @@ const defaultContact: ConversationType = {
title: 'Pauline Oliveros',
type: 'direct',
phoneNumber: '(333) 444-5515',
about: '👍 Free to chat',
};
const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
ts/components/conversation/ContactModal.tsx
+4
View File
@@ -5,6 +5,7 @@ import React, { ReactPortal } from 'react';
import { createPortal } from 'react-dom';
import { ConversationType } from '../../state/ducks/conversations';
import { About } from './About';
import { Avatar } from '../Avatar';
import { LocalizerType } from '../../types/Util';
@@ -110,6 +111,9 @@ export const ContactModal = ({
title={contact.title}
/>
<div className="module-contact-modal__name">{contact.title}</div>
<div className="module-about__container">
<About text={contact.about} />
</div>
{contact.phoneNumber && (
<div className="module-contact-modal__profile-and-number">
{contact.phoneNumber}
ts/components/conversation/ConversationHero.stories.tsx
+7
View File
@@ -11,6 +11,7 @@ import enMessages from '../../../_locales/en/messages.json';
const i18n = setupI18n('en', enMessages);
const getAbout = () => text('about', '👍 Free to chat');
const getTitle = () => text('name', 'Cayce Bollard');
const getName = () => text('name', 'Cayce Bollard');
const getProfileName = () => text('profileName', 'Cayce Bollard (profile)');
@@ -23,6 +24,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
return (
<div style={{ width: '480px' }}>
<ConversationHero
about={getAbout()}
i18n={i18n}
title={getTitle()}
avatarPath={getAvatarPath()}
@@ -39,6 +41,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
return (
<div style={{ width: '480px' }}>
<ConversationHero
about={getAbout()}
i18n={i18n}
title={getTitle()}
avatarPath={getAvatarPath()}
@@ -55,6 +58,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
return (
<div style={{ width: '480px' }}>
<ConversationHero
about={getAbout()}
i18n={i18n}
title={getTitle()}
avatarPath={getAvatarPath()}
@@ -71,6 +75,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
return (
<div style={{ width: '480px' }}>
<ConversationHero
about={getAbout()}
i18n={i18n}
title={getTitle()}
avatarPath={getAvatarPath()}
@@ -87,6 +92,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
return (
<div style={{ width: '480px' }}>
<ConversationHero
about={getAbout()}
i18n={i18n}
title={text('title', 'Cayce Bollard (profile)')}
avatarPath={getAvatarPath()}
@@ -103,6 +109,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
return (
<div style={{ width: '480px' }}>
<ConversationHero
about={getAbout()}
i18n={i18n}
title={text('title', '+1 (646) 327-2700')}
avatarPath={getAvatarPath()}
ts/components/conversation/ConversationHero.tsx
+8
View File
@@ -5,11 +5,13 @@ import * as React from 'react';
import { take } from 'lodash';
import { Avatar, Props as AvatarProps } from '../Avatar';
import { ContactName } from './ContactName';
import { About } from './About';
import { Emojify } from './Emojify';
import { Intl } from '../Intl';
import { LocalizerType } from '../../types/Util';
export type Props = {
about?: string;
i18n: LocalizerType;
isMe?: boolean;
sharedGroupNames?: Array<string>;
@@ -111,6 +113,7 @@ const renderMembershipRow = ({
export const ConversationHero = ({
i18n,
about,
avatarPath,
color,
conversationType,
@@ -188,6 +191,11 @@ export const ConversationHero = ({
/>
)}
</h1>
{about && (
<div className="module-about__container">
<About text={about} />
</div>
)}
{!isMe ? (
<div className="module-conversation-hero__with">
{membersCount === 1