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

First-class profile name rendering

Browse source
This commit is contained in:
Scott Nonnenberg 2020-07-23 18:35:32 -07:00
parent 632cd0e87e
commit d07b8e82b2
63 changed files with 1044 additions and 454 deletions
Download patch file Download diff file Expand all files Collapse all files

77
ts/components/conversation/ConversationHero.stories.tsx
View file

@ -10,8 +10,9 @@ import enMessages from '../../../_locales/en/messages.json';
const i18n = setupI18n('en', enMessages);
const getTitle = () => text('name', 'Cayce Bollard');
const getName = () => text('name', 'Cayce Bollard');
const getProfileName = () => text('profileName', 'Cayce Bollard');
const getProfileName = () => text('profileName', 'Cayce Bollard (profile)');
const getAvatarPath = () =>
text('avatarPath', '/fixtures/kitten-4-112-112.jpg');
const getPhoneNumber = () => text('phoneNumber', '+1 (646) 327-2700');
@ -22,6 +23,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={getTitle()}
avatarPath={getAvatarPath()}
name={getName()}
profileName={getProfileName()}
@ -37,6 +39,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={getTitle()}
avatarPath={getAvatarPath()}
name={getName()}
profileName={getProfileName()}
@ -52,6 +55,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={getTitle()}
avatarPath={getAvatarPath()}
name={getName()}
profileName={getProfileName()}
@ -62,13 +66,30 @@ storiesOf('Components/Conversation/ConversationHero', module)
</div>
);
})
.add('Direct (No Other Groups)', () => {
.add('Direct (No Groups, Name)', () => {
return (
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={getTitle()}
avatarPath={getAvatarPath()}
name={getName()}
profileName={text('profileName', '')}
phoneNumber={getPhoneNumber()}
conversationType="direct"
groups={[]}
/>
</div>
);
})
.add('Direct (No Groups, Just Profile)', () => {
return (
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={text('title', 'Cayce Bollard (profile)')}
avatarPath={getAvatarPath()}
name={text('name', '')}
profileName={getProfileName()}
phoneNumber={getPhoneNumber()}
conversationType="direct"
@ -77,13 +98,45 @@ storiesOf('Components/Conversation/ConversationHero', module)
</div>
);
})
.add('Direct (No Groups, Just Phone Number)', () => {
return (
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={text('title', '+1 (646) 327-2700')}
avatarPath={getAvatarPath()}
name={text('name', '')}
profileName={text('profileName', '')}
phoneNumber={getPhoneNumber()}
conversationType="direct"
groups={[]}
/>
</div>
);
})
.add('Direct (No Groups, No Data)', () => {
return (
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={text('title', 'Unknown contact')}
avatarPath={getAvatarPath()}
name={text('name', '')}
profileName={text('profileName', '')}
phoneNumber={text('phoneNumber', '')}
conversationType="direct"
groups={[]}
/>
</div>
);
})
.add('Group (many members)', () => {
return (
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={text('title', 'NYC Rock Climbers')}
name={text('groupName', 'NYC Rock Climbers')}
phoneNumber={text('phoneNumber', '+1 (646) 327-2700')}
conversationType="group"
membersCount={numberKnob('membersCount', 22)}
/>
@ -95,8 +148,8 @@ storiesOf('Components/Conversation/ConversationHero', module)
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={text('title', 'NYC Rock Climbers')}
name={text('groupName', 'NYC Rock Climbers')}
phoneNumber={text('phoneNumber', '+1 (646) 327-2700')}
conversationType="group"
membersCount={1}
/>
@ -108,8 +161,21 @@ storiesOf('Components/Conversation/ConversationHero', module)
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={text('title', 'NYC Rock Climbers')}
name={text('groupName', 'NYC Rock Climbers')}
phoneNumber={text('phoneNumber', '+1 (646) 327-2700')}
conversationType="group"
membersCount={0}
/>
</div>
);
})
.add('Group (No name)', () => {
return (
<div style={{ width: '480px' }}>
<ConversationHero
i18n={i18n}
title={text('title', 'Unknown group')}
name={text('groupName', '')}
conversationType="group"
membersCount={0}
/>
@ -122,6 +188,7 @@ storiesOf('Components/Conversation/ConversationHero', module)
<ConversationHero
i18n={i18n}
isMe={true}
title={getTitle()}
conversationType="direct"
phoneNumber={getPhoneNumber()}
/>