+ {initials}
+
+ );
+ }
+
+ return (
+
+ );
+ }
+
+ public render() {
+ const { avatarPath, color, size } = this.props;
+ const { imageBroken } = this.state;
+
+ const hasImage = avatarPath && !imageBroken;
+
+ if (size !== 28 && size !== 36 && size !== 48 && size !== 80) {
+ throw new Error(`Size ${size} is not supported!`);
+ }
+
+ return (
+
+ {hasImage ? this.renderImage() : this.renderNoImage()}
+
+ );
+ }
+}
diff --git a/ts/components/ContactListItem.tsx b/ts/components/ContactListItem.tsx
index 4ef71c75e..936ba4b4c 100644
--- a/ts/components/ContactListItem.tsx
+++ b/ts/components/ContactListItem.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import classNames from 'classnames';
+import { Avatar } from './Avatar';
import { Emojify } from './conversation/Emojify';
import { Localizer } from '../types/Util';
@@ -17,35 +18,28 @@ interface Props {
onClick?: () => void;
}
-function getInitial(name: string): string {
- return name.trim()[0] || '#';
-}
-
export class ContactListItem extends React.Component
- 
-
- );
- }
-
- const title = name ? getInitial(name) : '#';
+ public renderAvatar() {
+ const {
+ avatarPath,
+ i18n,
+ color,
+ name,
+ phoneNumber,
+ profileName,
+ } = this.props;
return (
-
-
+
- {title}
-
-
+
console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
i18n={util.i18n}
/>
+
+```
+
+#### Profile, with name, no avatar
+
+```jsx
+
console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
i18n={util.i18n}
/>
- console.log('onClick')}
- i18n={util.i18n}
- />
-
+
+```
+
+#### All types of status
+
+```jsx
+
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+
+
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
+
+
+```
+
+#### Selected
+
+```jsx
+
console.log('onClick')}
i18n={util.i18n}
/>
-
-```
-
-#### Selected
-
-```jsx
-
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+
+
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
-
+
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+
+
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
+
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+
+
```
#### More narrow
@@ -256,104 +289,119 @@ We only show one line.
On platforms that show scrollbars all the time, this is true all the time.
```jsx
-
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
-
+
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
-
+
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+
+
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
-
+
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+
+
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
- console.log('onClick')}
- i18n={util.i18n}
- />
-
+
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+ console.log('onClick')}
+ i18n={util.i18n}
+ />
+
+
-
- );
- }
-
- const title = `${name || phoneNumber}${
- !name && profileName ? ` ~${profileName}` : ''
- }`;
-
return (
- {initial}
-
- {this.renderUnread()}
-
-
{this.renderUnread()}
diff --git a/ts/components/conversation/ContactDetail.tsx b/ts/components/conversation/ContactDetail.tsx
index 5a3b4fd5b..cbf33c7a7 100644
--- a/ts/components/conversation/ContactDetail.tsx
+++ b/ts/components/conversation/ContactDetail.tsx
@@ -207,7 +207,9 @@ export class ContactDetail extends React.Component
- {renderAvatar({ contact, i18n, module })}
+ {
public captureMenuTriggerBound: (trigger: any) => void;
public showMenuBound: (event: React.MouseEvent) => void;
@@ -116,37 +112,25 @@ export class ConversationHeader extends React.Component {
avatarPath,
color,
i18n,
+ isGroup,
name,
phoneNumber,
profileName,
} = this.props;
- if (!avatarPath) {
- const initial = getInitial(name || '');
-
- return (
-
+
+ {
role="button"
onClick={onClick}
>
- {renderAvatar({ contact, i18n, module })}
+ {renderAvatar({ contact, i18n, size: 48 })}
+ {renderAvatar({ contact, i18n, size: 80 })}
+
{renderName({ contact, isIncoming, module })}
{renderContactShorthand({ contact, isIncoming, module })}
{this.renderSendMessage({ hasSignalAccount, i18n, onSendMessage })}
diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx
index 0229db359..a81ded580 100644
--- a/ts/components/conversation/ConversationHeader.tsx
+++ b/ts/components/conversation/ConversationHeader.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import classNames from 'classnames';
import { Emojify } from './Emojify';
+import { Avatar } from '../Avatar';
import { Localizer } from '../../types/Util';
import {
ContextMenu,
@@ -45,10 +45,6 @@ interface Props {
onGoBack: () => void;
}
-function getInitial(name: string): string {
- return name.trim()[0] || '#';
-}
-
export class ConversationHeader extends React.Component
- {initial}
-
- );
- }
-
- const title = `${name || phoneNumber}${
- !name && profileName ? ` ~${profileName}` : ''
- }`;
-
return (
-
{renderName({ contact, isIncoming, module })}
{renderContactShorthand({ contact, isIncoming, module })}
@@ -53,40 +54,29 @@ export class EmbeddedContact extends React.Component {
// Note: putting these below the main component so style guide picks up EmbeddedContact
-function getInitial(name: string): string {
- return name.trim()[0] || '#';
-}
-
export function renderAvatar({
contact,
i18n,
- module,
+ size,
}: {
contact: Contact;
i18n: Localizer;
- module: string;
+ size: number;
}) {
const { avatar } = contact;
- const path = avatar && avatar.avatar && avatar.avatar.path;
+ const avatarPath = avatar && avatar.avatar && avatar.avatar.path;
const name = getName(contact) || '';
- if (!path) {
- const initials = getInitial(name);
-
- return (
- {
public renderAvatar() {
const {
+ authorAvatarPath,
authorName,
authorPhoneNumber,
authorProfileName,
- authorAvatarPath,
- conversationColor,
collapseMetadata,
+ conversationColor,
conversationType,
direction,
i18n,
} = this.props;
- const title = `${authorName || authorPhoneNumber}${
- !authorName && authorProfileName ? ` ~${authorProfileName}` : ''
- }`;
-
if (
collapseMetadata ||
conversationType !== 'group' ||
@@ -656,26 +649,18 @@ export class Message extends React.Component {
return;
}
- if (!authorAvatarPath) {
- const label = authorName ? getInitial(authorName) : '#';
-
- return (
- {
public renderAvatar(contact: Contact) {
const { i18n } = this.props;
const { avatarPath, color, phoneNumber, name, profileName } = contact;
- if (!avatarPath) {
- const initial = getInitial(name || '');
-
- return (
-
);
}
diff --git a/ts/styleguide/LeftPaneContext.tsx b/ts/styleguide/LeftPaneContext.tsx
new file mode 100644
index 000000000..98a67ea17
--- /dev/null
+++ b/ts/styleguide/LeftPaneContext.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+ /**
+ * Corresponds to the theme setting in the app, and the class added to the root element.
+ */
+ theme: 'light-theme' | 'dark-theme';
+}
+
+/**
+ * Provides the parent elements necessary to allow the main Signal Desktop stylesheet to
+ * apply (with no changes) to messages in the Style Guide.
+ */
+export class LeftPaneContext extends React.Component {
+ public render() {
+ const { theme } = this.props;
+
+ return (
+
-
- );
- }
-
return (
-
- {initials}
-
-
- 
-
+
-
- );
- }
-
return (
- {label}
-
-
- 
+
);
}
diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx
index fc20817f7..cb830fdea 100644
--- a/ts/components/conversation/MessageDetail.tsx
+++ b/ts/components/conversation/MessageDetail.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import classNames from 'classnames';
import moment from 'moment';
+import { Avatar } from '../Avatar';
import { ContactName } from './ContactName';
import { Message, Props as MessageProps } from './Message';
import { Localizer } from '../../types/Util';
@@ -31,40 +32,21 @@ interface Props {
i18n: Localizer;
}
-function getInitial(name: string): string {
- return name.trim()[0] || '#';
-}
-
export class MessageDetail extends React.Component
- {initial}
-
- );
- }
-
- const title = `${name || phoneNumber}${
- !name && profileName ? ` ~${profileName}` : ''
- }`;
-
return (
-
+
+ );
+ }
+}
diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts
index 0c4788881..a7679c0aa 100644
--- a/ts/styleguide/StyleGuideUtil.ts
+++ b/ts/styleguide/StyleGuideUtil.ts
@@ -6,6 +6,7 @@ import classNames from 'classnames';
import { default as _ } from 'lodash';
export { ConversationContext } from './ConversationContext';
+export { LeftPaneContext } from './LeftPaneContext';
export { _, classNames };
diff --git a/ts/util/getInitials.ts b/ts/util/getInitials.ts
new file mode 100644
index 000000000..b2c89ffc5
--- /dev/null
+++ b/ts/util/getInitials.ts
@@ -0,0 +1,21 @@
+const BAD_CHARACTERS = /[^A-Za-z\s]+/g;
+const WHITESPACE = /\s+/g;
+
+function removeNonInitials(name: string) {
+ return name.replace(BAD_CHARACTERS, '').replace(WHITESPACE, ' ');
+}
+
+export function getInitials(name?: string): string | null {
+ if (!name) {
+ return null;
+ }
+
+ const cleaned = removeNonInitials(name);
+ const parts = cleaned.split(' ');
+ const initials = parts.map(part => part.trim()[0]);
+ if (!initials.length) {
+ return null;
+ }
+
+ return initials.slice(0, 2).join('');
+}
{this.props.children}
+