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

Add style guide examples for ContactName and ConversationTitle

Browse source
This commit is contained in:
Scott Nonnenberg 2018-05-22 15:18:51 -07:00
parent 2988da0981
commit 9dedda84e2
3 changed files with 78 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

32
ts/components/conversation/ContactName.md Normal file
View file

@ -0,0 +1,32 @@
#### With name and profile
```jsx
<div style={{ backgroundColor: 'gray', color: 'white' }}>
<ContactName
i18n={util.i18n}
name="Someone 🔥 Somewhere"
phoneNumber="+12025550011"
profileName="🔥Flames🔥"
/>
</div>
```
#### Profile, no name
```jsx
<div style={{ backgroundColor: 'gray', color: 'white' }}>
<ContactName
i18n={util.i18n}
phoneNumber="+12025550011"
profileName="🔥Flames🔥"
/>
</div>
```
#### No name, no profile
```jsx
<div style={{ backgroundColor: 'gray', color: 'white' }}>
<ContactName i18n={util.i18n} phoneNumber="+12025550011" />
</div>
```

45
ts/components/conversation/ConversationTitle.md Normal file
View file

@ -0,0 +1,45 @@
#### With name and profile, verified
```jsx
<div style={{ backgroundColor: 'gray', color: 'white' }}>
<ConversationTitle
i18n={util.i18n}
isVerified
name="Someone 🔥 Somewhere"
phoneNumber="+12025550011"
profileName="🔥Flames🔥"
/>
</div>
```
#### With name, not verified
```jsx
<div style={{ backgroundColor: 'gray', color: 'white' }}>
<ConversationTitle
i18n={util.i18n}
name="Someone 🔥 Somewhere"
phoneNumber="+12025550011"
/>
</div>
```
#### Profile, no name
```jsx
<div style={{ backgroundColor: 'gray', color: 'white' }}>
<ConversationTitle
i18n={util.i18n}
phoneNumber="+12025550011"
profileName="🔥Flames🔥"
/>
</div>
```
#### No name, no profile
```jsx
<div style={{ backgroundColor: 'gray', color: 'white' }}>
<ConversationTitle i18n={util.i18n} phoneNumber="+12025550011" />
</div>
```

2
ts/components/conversation/ConversationTitle.tsx
View file

@ -25,7 +25,7 @@ export class ConversationTitle extends React.Component<Props> {
{phoneNumber ? ( {phoneNumber ? (
<span className="conversation-number">{phoneNumber}</span> <span className="conversation-number">{phoneNumber}</span>
) : null}{' '} ) : null}{' '}
{profileName ? ( {profileName && !name ? (
<span className="profileName"> <span className="profileName">
<Emojify text={profileName} i18n={i18n} /> <Emojify text={profileName} i18n={i18n} />
</span> </span>