Move to new colors, switch incoming/outgoing colors
This commit is contained in:
Scott Nonnenberg
parent
cd60bdd08a
commit
10c53bddb0
22 changed files with 1116 additions and 1233 deletions
|
|
@ -22,10 +22,10 @@ const contact = {
|
|||
onSendMessage: () => console.log('onSendMessage'),
|
||||
hasSignalAccount: true,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
|
|
@ -34,6 +34,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -43,7 +44,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
|
|
@ -53,6 +54,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
|
|
@ -84,19 +86,24 @@ const contact = {
|
|||
},
|
||||
hasSignalAccount: true,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li><Message
|
||||
authorColor="green"
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}/></li>
|
||||
<li><Message
|
||||
contact={contact}/>
|
||||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
contact={contact}/></li>
|
||||
contact={contact}/>
|
||||
</li>
|
||||
</util.ConversationContext>;
|
||||
```
|
||||
|
||||
|
|
@ -120,10 +127,10 @@ const contact = {
|
|||
},
|
||||
hasSignalAccount: true,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} type="group">
|
||||
<util.ConversationContext theme={util.theme} type="group">
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
conversationType="group"
|
||||
authorName="Mr. Fire"
|
||||
authorAvatarPath={util.gifObjectUrl}
|
||||
|
|
@ -135,7 +142,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
authorName="Mr. Fire"
|
||||
conversationType="group"
|
||||
|
|
@ -147,6 +154,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
conversationType="group"
|
||||
authorName="Mr. Fire"
|
||||
|
|
@ -179,10 +187,10 @@ const contact = {
|
|||
},
|
||||
hasSignalAccount: false,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
|
|
@ -191,6 +199,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -200,7 +209,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
|
|
@ -210,6 +219,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
|
|
@ -239,10 +249,10 @@ const contact = {
|
|||
},
|
||||
hasSignalAccount: false,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
|
|
@ -251,6 +261,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -260,7 +271,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
|
|
@ -270,6 +281,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
|
|
@ -301,10 +313,10 @@ const contact = {
|
|||
},
|
||||
hasSignalAccount: false,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
|
|
@ -313,6 +325,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -322,7 +335,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
|
|
@ -332,6 +345,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
|
|
@ -358,10 +372,10 @@ const contact = {
|
|||
],
|
||||
hasSignalAccount: true,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
|
|
@ -370,6 +384,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -379,7 +394,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
|
|
@ -389,6 +404,7 @@ const contact = {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
|
|
@ -404,10 +420,10 @@ const contact = {
|
|||
|
||||
```jsx
|
||||
const contact = {};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
|
|
@ -416,6 +432,7 @@ const contact = {};
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -425,7 +442,7 @@ const contact = {};
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
|
|
@ -435,6 +452,7 @@ const contact = {};
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
|
|
@ -483,11 +501,11 @@ const contactWithoutAccount = {
|
|||
},
|
||||
hasSignalAccount: false,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
|
|
@ -497,6 +515,7 @@ const contactWithoutAccount = {
|
|||
<li>
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -507,7 +526,7 @@ const contactWithoutAccount = {
|
|||
<li>
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now()}
|
||||
|
|
@ -517,6 +536,7 @@ const contactWithoutAccount = {
|
|||
<li>
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -527,7 +547,7 @@ const contactWithoutAccount = {
|
|||
<li>
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
|
|
@ -538,6 +558,7 @@ const contactWithoutAccount = {
|
|||
<li>
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
|
|
@ -549,7 +570,7 @@ const contactWithoutAccount = {
|
|||
<li>
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
authorColor="green"
|
||||
conversationColor="green"
|
||||
direction="incoming"
|
||||
collapseMetadata
|
||||
i18n={util.i18n}
|
||||
|
|
@ -560,6 +581,7 @@ const contactWithoutAccount = {
|
|||
<li>
|
||||
<Message
|
||||
text="I want to introduce you to Someone..."
|
||||
conversationColor="green"
|
||||
direction="outgoing"
|
||||
collapseMetadata
|
||||
status="delivered"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
### Countdown at different rates
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
direction="incoming"
|
||||
conversationColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="10 second timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 10 * 1000}
|
||||
|
|
@ -15,8 +16,9 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="cyan"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="blue"
|
||||
text="30 second timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 30 * 1000}
|
||||
|
|
@ -26,8 +28,9 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
direction="incoming"
|
||||
conversationColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="1 minute timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 55 * 1000}
|
||||
|
|
@ -37,8 +40,9 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
direction="incoming"
|
||||
conversationColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="5 minute timer"
|
||||
i18n={util.i18n}
|
||||
timestamp={Date.now() + 5 * 60 * 1000}
|
||||
|
|
@ -52,10 +56,10 @@
|
|||
### Timer calculations
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
conversationColor="blue"
|
||||
direction="incoming"
|
||||
text="Full timer"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -66,6 +70,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="Full timer"
|
||||
|
|
@ -77,7 +82,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
conversationColor="blue"
|
||||
direction="incoming"
|
||||
text="55 timer"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -88,6 +93,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="55 timer"
|
||||
|
|
@ -99,7 +105,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
conversationColor="blue"
|
||||
direction="incoming"
|
||||
text="30 timer"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -110,6 +116,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="30 timer"
|
||||
|
|
@ -121,7 +128,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
conversationColor="blue"
|
||||
direction="incoming"
|
||||
text="5 timer"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -132,6 +139,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="5 timer"
|
||||
|
|
@ -143,7 +151,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
conversationColor="blue"
|
||||
direction="incoming"
|
||||
text="Expired timer"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -154,6 +162,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="Expired timer"
|
||||
|
|
@ -165,7 +174,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
conversationColor="blue"
|
||||
direction="incoming"
|
||||
text="Expiration is too far away"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -176,6 +185,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="Expiration is too far away"
|
||||
|
|
@ -187,7 +197,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
conversationColor="blue"
|
||||
direction="incoming"
|
||||
text="Already expired"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -198,6 +208,7 @@
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
conversationColor="blue"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
text="Already expired"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -66,7 +66,7 @@ export interface Props {
|
|||
authorProfileName?: string;
|
||||
/** Note: this should be formatted for display */
|
||||
authorPhoneNumber: string;
|
||||
authorColor: Color;
|
||||
conversationColor: Color;
|
||||
conversationType: 'group' | 'direct';
|
||||
attachment?: Attachment;
|
||||
quote?: {
|
||||
|
|
@ -76,7 +76,6 @@ export interface Props {
|
|||
authorPhoneNumber: string;
|
||||
authorProfileName?: string;
|
||||
authorName?: string;
|
||||
authorColor: Color;
|
||||
onClick?: () => void;
|
||||
referencedMessageNotFound: boolean;
|
||||
};
|
||||
|
|
@ -551,7 +550,13 @@ export class Message extends React.Component<Props, State> {
|
|||
}
|
||||
|
||||
public renderQuote() {
|
||||
const { conversationType, direction, i18n, quote } = this.props;
|
||||
const {
|
||||
conversationType,
|
||||
conversationColor,
|
||||
direction,
|
||||
i18n,
|
||||
quote,
|
||||
} = this.props;
|
||||
|
||||
if (!quote) {
|
||||
return null;
|
||||
|
|
@ -570,7 +575,7 @@ export class Message extends React.Component<Props, State> {
|
|||
authorPhoneNumber={quote.authorPhoneNumber}
|
||||
authorProfileName={quote.authorProfileName}
|
||||
authorName={quote.authorName}
|
||||
authorColor={quote.authorColor}
|
||||
conversationColor={conversationColor}
|
||||
referencedMessageNotFound={quote.referencedMessageNotFound}
|
||||
isFromMe={quote.isFromMe}
|
||||
withContentAbove={withContentAbove}
|
||||
|
|
@ -632,7 +637,7 @@ export class Message extends React.Component<Props, State> {
|
|||
authorPhoneNumber,
|
||||
authorProfileName,
|
||||
authorAvatarPath,
|
||||
authorColor,
|
||||
conversationColor,
|
||||
collapseMetadata,
|
||||
conversationType,
|
||||
direction,
|
||||
|
|
@ -658,7 +663,7 @@ export class Message extends React.Component<Props, State> {
|
|||
<div
|
||||
className={classNames(
|
||||
'module-message__author-default-avatar',
|
||||
`module-message__author-default-avatar--${authorColor}`
|
||||
`module-message__author-default-avatar--${conversationColor}`
|
||||
)}
|
||||
>
|
||||
<div className="module-message__author-default-avatar__label">
|
||||
|
|
@ -864,7 +869,7 @@ export class Message extends React.Component<Props, State> {
|
|||
public render() {
|
||||
const {
|
||||
authorPhoneNumber,
|
||||
authorColor,
|
||||
conversationColor,
|
||||
direction,
|
||||
id,
|
||||
timestamp,
|
||||
|
|
@ -893,8 +898,8 @@ export class Message extends React.Component<Props, State> {
|
|||
className={classNames(
|
||||
'module-message__container',
|
||||
`module-message__container--${direction}`,
|
||||
direction === 'incoming'
|
||||
? `module-message__container--incoming-${authorColor}`
|
||||
direction === 'outgoing'
|
||||
? `module-message__container--outgoing-${conversationColor}`
|
||||
: null
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
disableMenu: true,
|
||||
direction: 'incoming',
|
||||
timestamp: Date.now(),
|
||||
authorColor: 'grey',
|
||||
conversationColor: 'pink',
|
||||
text:
|
||||
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
|
||||
onDelete: () => console.log('onDelete'),
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
disableMenu: true,
|
||||
direction: 'outgoing',
|
||||
timestamp: Date.now(),
|
||||
authorColor: 'grey',
|
||||
conversationColor: 'pink',
|
||||
text:
|
||||
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
|
||||
status: 'read',
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
disableMenu: true,
|
||||
direction: 'outgoing',
|
||||
timestamp: Date.now(),
|
||||
authorColor: 'grey',
|
||||
conversationColor: 'pink',
|
||||
text:
|
||||
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
|
||||
status: 'sending',
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
disableMenu: true,
|
||||
direction: 'outgoing',
|
||||
timestamp: Date.now(),
|
||||
authorColor: 'grey',
|
||||
conversationColor: 'pink',
|
||||
text:
|
||||
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
|
||||
status: 'error',
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -15,7 +15,7 @@ interface Props {
|
|||
authorPhoneNumber: string;
|
||||
authorProfileName?: string;
|
||||
authorName?: string;
|
||||
authorColor: Color;
|
||||
conversationColor: Color;
|
||||
i18n: Localizer;
|
||||
isFromMe: boolean;
|
||||
isIncoming: boolean;
|
||||
|
|
@ -254,7 +254,6 @@ export class Quote extends React.Component<Props> {
|
|||
authorProfileName,
|
||||
authorPhoneNumber,
|
||||
authorName,
|
||||
authorColor,
|
||||
i18n,
|
||||
isFromMe,
|
||||
isIncoming,
|
||||
|
|
@ -264,7 +263,6 @@ export class Quote extends React.Component<Props> {
|
|||
<div
|
||||
className={classNames(
|
||||
'module-quote__primary__author',
|
||||
!isFromMe ? `module-quote__primary__author--${authorColor}` : null,
|
||||
isIncoming ? 'module-quote__primary__author--incoming' : null
|
||||
)}
|
||||
>
|
||||
|
|
@ -320,8 +318,7 @@ export class Quote extends React.Component<Props> {
|
|||
|
||||
public render() {
|
||||
const {
|
||||
authorColor,
|
||||
isFromMe,
|
||||
conversationColor,
|
||||
isIncoming,
|
||||
onClick,
|
||||
referencedMessageNotFound,
|
||||
|
|
@ -345,10 +342,9 @@ export class Quote extends React.Component<Props> {
|
|||
className={classNames(
|
||||
'module-quote',
|
||||
isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
|
||||
!isIncoming && !isFromMe
|
||||
? `module-quote--outgoing-${authorColor}`
|
||||
: null,
|
||||
!isIncoming && isFromMe ? 'module-quote--outgoing-you' : null,
|
||||
isIncoming
|
||||
? `module-quote--incoming-${conversationColor}`
|
||||
: `module-quote--outgoing-${conversationColor}`,
|
||||
!onClick ? 'module-quote--no-click' : null,
|
||||
withContentAbove ? 'module-quote--with-content-above' : null,
|
||||
referencedMessageNotFound
|
||||
|
|
|
|||
|
|
@ -21,8 +21,9 @@ function getDecember1159() {
|
|||
<util.ConversationContext theme={util.theme}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="red"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="red"
|
||||
timestamp={Date.now() - 500}
|
||||
text="500ms ago - all below 1 minute are 'now'"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -30,8 +31,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="teal"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="teal"
|
||||
timestamp={Date.now() - 5 * 1000}
|
||||
text="Five seconds ago"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -39,8 +41,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="teal"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="teal"
|
||||
timestamp={Date.now() - 30 * 1000}
|
||||
text="30 seconds ago"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -48,8 +51,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="red"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="red"
|
||||
timestamp={Date.now() - 60 * 1000}
|
||||
text="One minute ago - in minutes"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -57,8 +61,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="teal"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="teal"
|
||||
timestamp={Date.now() - 30 * 60 * 1000}
|
||||
text="30 minutes ago"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -66,8 +71,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="teal"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="teal"
|
||||
timestamp={Date.now() - 45 * 60 * 1000}
|
||||
text="45 minutes ago (used to round up to 1 hour with moment)"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -75,8 +81,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="red"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="red"
|
||||
timestamp={Date.now() - 60 * 60 * 1000}
|
||||
text="One hour ago - in hours"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -84,8 +91,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="teal"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="teal"
|
||||
timestamp={get1201()}
|
||||
text="12:01am today"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -93,8 +101,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="red"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="red"
|
||||
timestamp={getYesterday1159()}
|
||||
text="11:59pm yesterday - adds day name"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -102,8 +111,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="teal"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="teal"
|
||||
timestamp={Date.now() - 24 * 60 * 60 * 1000}
|
||||
text="24 hours ago"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -111,8 +121,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="teal"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="teal"
|
||||
timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
|
||||
text="Two days ago"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -120,8 +131,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="red"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="red"
|
||||
timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
|
||||
text="Seven days ago - adds month"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -129,8 +141,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="teal"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="teal"
|
||||
timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
|
||||
text="Thirty days ago"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -138,8 +151,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="teal"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="teal"
|
||||
timestamp={getJanuary1201()}
|
||||
text="January 1st at 12:01am"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -147,8 +161,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="red"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="red"
|
||||
timestamp={getDecember1159()}
|
||||
text="December 31st at 11:59pm - adds year"
|
||||
i18n={util.i18n}
|
||||
|
|
@ -156,8 +171,9 @@ function getDecember1159() {
|
|||
</li>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
authorColor="teal"
|
||||
direction="outgoing"
|
||||
status="delivered"
|
||||
conversationColor="teal"
|
||||
timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
|
||||
text="One year ago"
|
||||
i18n={util.i18n}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ interface Props {
|
|||
*/
|
||||
theme: 'light-theme' | 'dark-theme';
|
||||
type: 'private' | 'group';
|
||||
ios: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -16,12 +15,10 @@ interface Props {
|
|||
*/
|
||||
export class ConversationContext extends React.Component<Props> {
|
||||
public render() {
|
||||
const { theme, type, ios } = this.props;
|
||||
const { theme, type } = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(theme || 'light-theme', ios ? 'ios-theme' : null)}
|
||||
>
|
||||
<div className={classNames(theme || 'light-theme')}>
|
||||
<div className={classNames('conversation', type || 'private')}>
|
||||
<div className="discussion-container" style={{ padding: '0.5em' }}>
|
||||
<ul className="message-list">{this.props.children}</ul>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,6 @@ export {
|
|||
const query = window.location.search.replace(/^\?/, '');
|
||||
const urlOptions = QueryString.parse(query);
|
||||
const theme = urlOptions.theme || 'light-theme';
|
||||
const ios = urlOptions.ios || false;
|
||||
const locale = urlOptions.locale || 'en';
|
||||
|
||||
// @ts-ignore
|
||||
|
|
@ -92,7 +91,7 @@ import localeMessages from '../../_locales/en/messages.json';
|
|||
import { setup } from '../../js/modules/i18n';
|
||||
const i18n = setup(locale, localeMessages);
|
||||
|
||||
export { theme, ios, locale, i18n };
|
||||
export { theme, locale, i18n };
|
||||
|
||||
// Telling Lodash to relinquish _ for use by underscore
|
||||
// @ts-ignore
|
||||
|
|
|
|||
|
|
@ -22,22 +22,28 @@ type OldColor =
|
|||
| 'yellow';
|
||||
|
||||
type NewColor =
|
||||
| 'blue'
|
||||
| 'cyan'
|
||||
| 'red'
|
||||
| 'deep_orange'
|
||||
| 'grey'
|
||||
| 'green'
|
||||
| 'indigo'
|
||||
| 'brown'
|
||||
| 'pink'
|
||||
| 'purple'
|
||||
| 'red'
|
||||
| 'teal';
|
||||
| 'indigo'
|
||||
| 'blue'
|
||||
| 'teal'
|
||||
| 'green'
|
||||
| 'light_green'
|
||||
| 'blue_grey'
|
||||
| 'grey';
|
||||
|
||||
export function migrateColor(color: OldColor): NewColor {
|
||||
switch (color) {
|
||||
// These colors no longer exist
|
||||
case 'brown':
|
||||
return 'red';
|
||||
case 'orange':
|
||||
case 'amber':
|
||||
return 'deep_orange';
|
||||
|
||||
case 'yellow':
|
||||
return 'brown';
|
||||
|
||||
case 'deep_purple':
|
||||
return 'purple';
|
||||
|
|
@ -45,29 +51,25 @@ export function migrateColor(color: OldColor): NewColor {
|
|||
case 'light_blue':
|
||||
return 'blue';
|
||||
|
||||
case 'blue_grey':
|
||||
return 'cyan';
|
||||
case 'cyan':
|
||||
return 'teal';
|
||||
|
||||
case 'light_green':
|
||||
case 'lime':
|
||||
return 'green';
|
||||
|
||||
case 'orange':
|
||||
case 'amber':
|
||||
case 'yellow':
|
||||
return 'deep_orange';
|
||||
return 'light_green';
|
||||
|
||||
// These can stay as they are
|
||||
case 'blue':
|
||||
case 'cyan':
|
||||
case 'red':
|
||||
case 'deep_orange':
|
||||
case 'green':
|
||||
case 'grey':
|
||||
case 'indigo':
|
||||
case 'brown':
|
||||
case 'pink':
|
||||
case 'purple':
|
||||
case 'red':
|
||||
case 'indigo':
|
||||
case 'blue':
|
||||
case 'teal':
|
||||
case 'green':
|
||||
case 'light_green':
|
||||
case 'blue_grey':
|
||||
case 'grey':
|
||||
return color;
|
||||
|
||||
// Can uncomment this to ensure that we've covered all potential cases
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue