Update colors, icons, and fonts
This commit is contained in:
Scott Nonnenberg
parent
28aed8247f
commit
c81c25bb85
225 changed files with 3080 additions and 4594 deletions
|
|
@ -76,15 +76,7 @@
|
|||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar
|
||||
size={48}
|
||||
color="pink"
|
||||
noteToSelf={true}
|
||||
phoneNumber="(555) 353-3433"
|
||||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar
|
||||
size={36}
|
||||
size={52}
|
||||
color="pink"
|
||||
noteToSelf={true}
|
||||
phoneNumber="(555) 353-3433"
|
||||
|
|
@ -193,12 +185,12 @@
|
|||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### 36px
|
||||
### 52px
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={36}
|
||||
size={52}
|
||||
color="teal"
|
||||
name="John Smith"
|
||||
avatarPath={util.gifObjectUrl}
|
||||
|
|
@ -206,59 +198,22 @@
|
|||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar
|
||||
size={36}
|
||||
size={52}
|
||||
color="teal"
|
||||
name="John"
|
||||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar
|
||||
size={36}
|
||||
size={52}
|
||||
color="teal"
|
||||
name="John Smith"
|
||||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar size={36} color="teal" conversationType="direct" i18n={util.i18n} />
|
||||
<Avatar size={52} color="teal" conversationType="direct" i18n={util.i18n} />
|
||||
<Avatar
|
||||
size={36}
|
||||
color="teal"
|
||||
name="Pupplies"
|
||||
conversationType="group"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
### 48px
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<Avatar
|
||||
size={48}
|
||||
color="teal"
|
||||
name="John Smith"
|
||||
avatarPath={util.gifObjectUrl}
|
||||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar
|
||||
size={48}
|
||||
color="teal"
|
||||
name="John"
|
||||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar
|
||||
size={48}
|
||||
color="teal"
|
||||
name="John Smith"
|
||||
conversationType="direct"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<Avatar size={48} color="teal" conversationType="direct" i18n={util.i18n} />
|
||||
<Avatar
|
||||
size={48}
|
||||
size={52}
|
||||
color="teal"
|
||||
name="Pupplies"
|
||||
conversationType="group"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ interface Props {
|
|||
name?: string;
|
||||
phoneNumber?: string;
|
||||
profileName?: string;
|
||||
size: number;
|
||||
size: 28 | 52 | 80;
|
||||
}
|
||||
|
||||
interface State {
|
||||
|
|
@ -110,7 +110,7 @@ export class Avatar extends React.Component<Props, State> {
|
|||
|
||||
const hasImage = !noteToSelf && avatarPath && !imageBroken;
|
||||
|
||||
if (size !== 28 && size !== 36 && size !== 48 && size !== 80) {
|
||||
if (size !== 28 && size !== 52 && size !== 80) {
|
||||
throw new Error(`Size ${size} is not supported!`);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ export class ContactListItem extends React.Component<Props> {
|
|||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
size={48}
|
||||
size={52}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
name="Someone 🔥 Somewhere"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
phoneNumber="(202) 555-0011"
|
||||
avatarPath={util.gifObjectUrl}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
id="conversationId1"
|
||||
isMe={true}
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId4"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId5"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
name="Mr. Fire🔥"
|
||||
color="green"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
unreadCount={4}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
typingContact={{
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
unreadCount={4}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
typingContact={{
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
unreadCount={4}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -201,7 +201,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
unreadCount={10}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -213,7 +213,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
unreadCount={250}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -233,7 +233,7 @@
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
isSelected={true}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -255,7 +255,7 @@ We don't want Jumbomoji or links.
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: 'Download at http://signal.org',
|
||||
|
|
@ -266,7 +266,7 @@ We don't want Jumbomoji or links.
|
|||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: '🔥',
|
||||
|
|
@ -288,7 +288,7 @@ We only show one line.
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
name="Long contact name. Esquire. The third. And stuff. And more! And more!"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -300,7 +300,7 @@ We only show one line.
|
|||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text:
|
||||
|
|
@ -312,7 +312,7 @@ We only show one line.
|
|||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text:
|
||||
|
|
@ -326,7 +326,7 @@ We only show one line.
|
|||
<ConversationListItem
|
||||
id="conversationId4"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
unreadCount={8}
|
||||
lastMessage={{
|
||||
|
|
@ -339,7 +339,7 @@ We only show one line.
|
|||
<ConversationListItem
|
||||
id="conversationId5"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text:
|
||||
|
|
@ -351,7 +351,7 @@ We only show one line.
|
|||
<ConversationListItem
|
||||
id="conversationId6"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text:
|
||||
|
|
@ -375,7 +375,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
name="Long contact name. Esquire. The third. And stuff. And more! And more!"
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
|
|
@ -387,7 +387,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text:
|
||||
|
|
@ -408,7 +408,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: 'Five hours ago',
|
||||
|
|
@ -419,7 +419,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 24 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: 'One day ago',
|
||||
|
|
@ -430,7 +430,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 7 * 24 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: 'One week ago',
|
||||
|
|
@ -441,7 +441,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<ConversationListItem
|
||||
id="conversationId4"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 365 * 24 * 60 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: 'One year ago',
|
||||
|
|
@ -461,7 +461,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<ConversationListItem
|
||||
id="conversationId1"
|
||||
name="John"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={null}
|
||||
lastMessage={{
|
||||
text: 'Missing last updated',
|
||||
|
|
@ -472,7 +472,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<ConversationListItem
|
||||
id="conversationId2"
|
||||
name="Missing message"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: null,
|
||||
|
|
@ -483,7 +483,7 @@ On platforms that show scrollbars all the time, this is true all the time.
|
|||
<ConversationListItem
|
||||
id="conversationId3"
|
||||
phoneNumber="(202) 555-0011"
|
||||
conversationType={'direct'}
|
||||
type={'direct'}
|
||||
lastUpdated={Date.now() - 5 * 60 * 1000}
|
||||
lastMessage={{
|
||||
text: null,
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
size={48}
|
||||
size={52}
|
||||
/>
|
||||
{this.renderUnread()}
|
||||
</div>
|
||||
|
|
@ -129,6 +129,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
timestamp={lastUpdated}
|
||||
extended={false}
|
||||
module="module-conversation-list-item__header__timestamp"
|
||||
withUnread={unreadCount > 0}
|
||||
i18n={i18n}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ export class LeftPane extends React.Component<PropsType> {
|
|||
conversations={conversations}
|
||||
height={height}
|
||||
rowCount={length}
|
||||
rowHeight={64}
|
||||
rowHeight={68}
|
||||
rowRenderer={this.renderRow}
|
||||
width={width}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -12,8 +12,7 @@ import { formatDuration } from '../util/formatDuration';
|
|||
import { LocalizerType } from '../types/Util';
|
||||
|
||||
const Colors = {
|
||||
TEXT_SECONDARY: '#bbb',
|
||||
ICON_SECONDARY: '#ccc',
|
||||
ICON_SECONDARY: '#b9b9b9',
|
||||
};
|
||||
|
||||
const colorSVG = (url: string, color: string) => {
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export class MessageSearchResult extends React.PureComponent<PropsType> {
|
|||
if (!to.isMe && !isSearchingInConversation) {
|
||||
return (
|
||||
<div className="module-message-search-result__header__from">
|
||||
{fromName} {i18n('to')}{' '}
|
||||
{fromName} {i18n('toJoiner')}{' '}
|
||||
<span className="module-mesages-search-result__header__group">
|
||||
<ContactName
|
||||
phoneNumber={to.phoneNumber}
|
||||
|
|
@ -115,7 +115,7 @@ export class MessageSearchResult extends React.PureComponent<PropsType> {
|
|||
noteToSelf={isNoteToSelf}
|
||||
phoneNumber={from.phoneNumber}
|
||||
profileName={from.profileName}
|
||||
size={48}
|
||||
size={52}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export class StartNewConversation extends React.PureComponent<Props> {
|
|||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
phoneNumber={phoneNumber}
|
||||
size={48}
|
||||
size={52}
|
||||
/>
|
||||
<div className="module-start-new-conversation__content">
|
||||
<div className="module-start-new-conversation__number">
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export class EmbeddedContact extends React.Component<Props> {
|
|||
role="button"
|
||||
onClick={onClick}
|
||||
>
|
||||
{renderAvatar({ contact, i18n, size: 48, direction })}
|
||||
{renderAvatar({ contact, i18n, size: 52, direction })}
|
||||
<div className="module-embedded-contact__text-container">
|
||||
{renderName({ contact, isIncoming, module })}
|
||||
{renderContactShorthand({ contact, isIncoming, module })}
|
||||
|
|
|
|||
|
|
@ -306,6 +306,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
: null
|
||||
)}
|
||||
>
|
||||
<span className="module-message__metadata__spacer" />
|
||||
{showError ? (
|
||||
<span
|
||||
className={classNames(
|
||||
|
|
@ -343,7 +344,6 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
withTapToViewExpired={isTapToViewExpired}
|
||||
/>
|
||||
) : null}
|
||||
<span className="module-message__metadata__spacer" />
|
||||
{textPending ? (
|
||||
<div className="module-message__metadata__spinner-container">
|
||||
<Spinner svgSize="small" size="14px" direction={direction} />
|
||||
|
|
@ -796,7 +796,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
name={authorName}
|
||||
phoneNumber={authorPhoneNumber}
|
||||
profileName={authorProfileName}
|
||||
size={36}
|
||||
size={28}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export class MessageDetail extends React.Component<Props> {
|
|||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
size={48}
|
||||
size={52}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
### All major transitions
|
||||
### All major transitions: Extended
|
||||
|
||||
```jsx
|
||||
function get1201() {
|
||||
|
|
@ -18,166 +18,218 @@ function getDecember1159() {
|
|||
return getJanuary1201() - 2 * 60 * 1000;
|
||||
}
|
||||
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={Date.now() - 500}
|
||||
text="500ms ago - all below 1 minute are 'now'"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<div>
|
||||
<div>
|
||||
{"500ms ago - all below 1 minute are 'now' -- "}
|
||||
<Timestamp extended={true} timestamp={Date.now() - 500} i18n={util.i18n} />
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="teal"
|
||||
<div>
|
||||
{'Five seconds ago -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 5 * 1000}
|
||||
text="Five seconds ago"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="teal"
|
||||
<div>
|
||||
{'30 seconds ago -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 30 * 1000}
|
||||
text="30 seconds ago"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
<div>
|
||||
{'One minute ago - in minutes -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 60 * 1000}
|
||||
text="One minute ago - in minutes"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="teal"
|
||||
<div>
|
||||
{'30 minutes ago -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 30 * 60 * 1000}
|
||||
text="30 minutes ago"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="teal"
|
||||
<div>
|
||||
{'45 minutes ago (used to round up to 1 hour with moment) -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 45 * 60 * 1000}
|
||||
text="45 minutes ago (used to round up to 1 hour with moment)"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
<div>
|
||||
{'One hour ago - in hours -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 60 * 60 * 1000}
|
||||
text="One hour ago - in hours"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="teal"
|
||||
timestamp={get1201()}
|
||||
text="12:01am today"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<div>
|
||||
{'12:01am today -- '}
|
||||
<Timestamp extended={true} timestamp={get1201()} i18n={util.i18n} />
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
<div>
|
||||
{'11:59pm yesterday - adds day name -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={getYesterday1159()}
|
||||
text="11:59pm yesterday - adds day name"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="teal"
|
||||
<div>
|
||||
{'24 hours ago -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 24 * 60 * 60 * 1000}
|
||||
text="24 hours ago"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="teal"
|
||||
<div>
|
||||
{'Two days ago -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
|
||||
text="Two days ago"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
<div>
|
||||
{'Seven days ago - adds month -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
|
||||
text="Seven days ago - adds month"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="teal"
|
||||
<div>
|
||||
{'Thirty days ago -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
|
||||
text="Thirty days ago"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="teal"
|
||||
timestamp={getJanuary1201()}
|
||||
text="January 1st at 12:01am"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<div>
|
||||
{'January 1st at 12:01am -- '}
|
||||
<Timestamp extended={true} timestamp={getJanuary1201()} i18n={util.i18n} />
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="red"
|
||||
timestamp={getDecember1159()}
|
||||
text="December 31st at 11:59pm - adds year"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
<div>
|
||||
{'December 31st at 11:59pm - adds year -- '}
|
||||
<Timestamp extended={true} timestamp={getDecember1159()} i18n={util.i18n} />
|
||||
</div>
|
||||
<div className="module-message-container">
|
||||
<Message
|
||||
direction="incoming"
|
||||
status="delivered"
|
||||
authorColor="teal"
|
||||
<div>
|
||||
{'One year ago -- '}
|
||||
<Timestamp
|
||||
extended={true}
|
||||
timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
|
||||
text="One year ago"
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
</util.ConversationContext>;
|
||||
</div>;
|
||||
```
|
||||
|
||||
### All major transitions: Normal
|
||||
|
||||
```jsx
|
||||
function get1201() {
|
||||
const d = new Date();
|
||||
d.setHours(0, 0, 1, 0);
|
||||
return d.getTime();
|
||||
}
|
||||
function getYesterday1159() {
|
||||
return get1201() - 2 * 60 * 1000;
|
||||
}
|
||||
function getJanuary1201() {
|
||||
const now = new Date();
|
||||
const d = new Date(now.getFullYear(), 0, 1, 0, 1);
|
||||
return d.getTime();
|
||||
}
|
||||
function getDecember1159() {
|
||||
return getJanuary1201() - 2 * 60 * 1000;
|
||||
}
|
||||
|
||||
<div>
|
||||
<div>
|
||||
{"500ms ago - all below 1 minute are 'now' -- "}
|
||||
<Timestamp timestamp={Date.now() - 500} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'Five seconds ago -- '}
|
||||
<Timestamp timestamp={Date.now() - 5 * 1000} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'30 seconds ago -- '}
|
||||
<Timestamp timestamp={Date.now() - 30 * 1000} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'One minute ago - in minutes -- '}
|
||||
<Timestamp timestamp={Date.now() - 60 * 1000} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'30 minutes ago -- '}
|
||||
<Timestamp timestamp={Date.now() - 30 * 60 * 1000} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'45 minutes ago (used to round up to 1 hour with moment) -- '}
|
||||
<Timestamp timestamp={Date.now() - 45 * 60 * 1000} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'One hour ago - in hours -- '}
|
||||
<Timestamp timestamp={Date.now() - 60 * 60 * 1000} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'12:01am today -- '}
|
||||
<Timestamp timestamp={get1201()} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'11:59pm yesterday - adds day name -- '}
|
||||
<Timestamp timestamp={getYesterday1159()} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'24 hours ago -- '}
|
||||
<Timestamp timestamp={Date.now() - 24 * 60 * 60 * 1000} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'Two days ago -- '}
|
||||
<Timestamp
|
||||
timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{'Seven days ago - adds month -- '}
|
||||
<Timestamp
|
||||
timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{'Thirty days ago -- '}
|
||||
<Timestamp
|
||||
timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
{'January 1st at 12:01am -- '}
|
||||
<Timestamp timestamp={getJanuary1201()} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'December 31st at 11:59pm - adds year -- '}
|
||||
<Timestamp timestamp={getDecember1159()} i18n={util.i18n} />
|
||||
</div>
|
||||
<div>
|
||||
{'One year ago -- '}
|
||||
<Timestamp
|
||||
timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
</div>;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ interface Props {
|
|||
withImageNoCaption?: boolean;
|
||||
withSticker?: boolean;
|
||||
withTapToViewExpired?: boolean;
|
||||
withUnread?: boolean;
|
||||
direction?: 'incoming' | 'outgoing';
|
||||
i18n: LocalizerType;
|
||||
}
|
||||
|
|
@ -52,6 +53,7 @@ export class Timestamp extends React.Component<Props> {
|
|||
withImageNoCaption,
|
||||
withSticker,
|
||||
withTapToViewExpired,
|
||||
withUnread,
|
||||
extended,
|
||||
} = this.props;
|
||||
const moduleName = module || 'module-timestamp';
|
||||
|
|
@ -69,7 +71,8 @@ export class Timestamp extends React.Component<Props> {
|
|||
? `${moduleName}--${direction}-with-tap-to-view-expired`
|
||||
: null,
|
||||
withImageNoCaption ? `${moduleName}--with-image-no-caption` : null,
|
||||
withSticker ? `${moduleName}--with-sticker` : null
|
||||
withSticker ? `${moduleName}--with-sticker` : null,
|
||||
withUnread ? `${moduleName}--with-unread` : null
|
||||
)}
|
||||
title={moment(timestamp).format('llll')}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export class TypingBubble extends React.PureComponent<Props> {
|
|||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
size={36}
|
||||
size={28}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export function renderAvatar({
|
|||
}: {
|
||||
contact: ContactType;
|
||||
i18n: LocalizerType;
|
||||
size: number;
|
||||
size: 28 | 52 | 80;
|
||||
direction?: 'outgoing' | 'incoming';
|
||||
}) {
|
||||
const { avatar } = contact;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue