Android theme: Incoming quotes take color from containing message

pull/27/head^2
Scott Nonnenberg 7 years ago
parent f21f83a163
commit fbaef50c4a

@ -557,7 +557,13 @@ export class Message extends React.Component<Props, State> {
} }
public renderQuote() { public renderQuote() {
const { conversationType, direction, i18n, quote } = this.props; const {
conversationType,
authorColor,
direction,
i18n,
quote,
} = this.props;
if (!quote) { if (!quote) {
return null; return null;
@ -565,6 +571,8 @@ export class Message extends React.Component<Props, State> {
const withContentAbove = const withContentAbove =
conversationType === 'group' && direction === 'incoming'; conversationType === 'group' && direction === 'incoming';
const quoteColor =
direction === 'incoming' ? authorColor : quote.authorColor;
return ( return (
<Quote <Quote
@ -576,7 +584,7 @@ export class Message extends React.Component<Props, State> {
authorPhoneNumber={quote.authorPhoneNumber} authorPhoneNumber={quote.authorPhoneNumber}
authorProfileName={quote.authorProfileName} authorProfileName={quote.authorProfileName}
authorName={quote.authorName} authorName={quote.authorName}
authorColor={quote.authorColor} authorColor={quoteColor}
referencedMessageNotFound={quote.referencedMessageNotFound} referencedMessageNotFound={quote.referencedMessageNotFound}
isFromMe={quote.isFromMe} isFromMe={quote.isFromMe}
withContentAbove={withContentAbove} withContentAbove={withContentAbove}

@ -227,17 +227,20 @@
#### All colors #### All colors
Note: for incoming messages, quote color is taken from the parent message. For outgoing
messages the color is taken from the contact who wrote the quoted message.
```jsx ```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="red"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'red', authorColor: 'pink',
text: 'red', text: 'red',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),
@ -249,7 +252,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="red"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -264,11 +267,11 @@
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="red"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'deep_orange', authorColor: 'pink',
text: 'deep_orange', text: 'deep_orange',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),
@ -280,7 +283,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="deep_orange"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -295,11 +298,11 @@
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="brown"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'brown', authorColor: 'pink',
text: 'brown', text: 'brown',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),
@ -311,7 +314,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="brown"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -326,7 +329,7 @@
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="pink"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -342,7 +345,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="pink"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -357,11 +360,11 @@
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="purple"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'purple', authorColor: 'pink',
text: 'purple', text: 'purple',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),
@ -373,7 +376,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="purple"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -388,11 +391,11 @@
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="indigo"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'indigo', authorColor: 'pink',
text: 'indigo', text: 'indigo',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),
@ -404,7 +407,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="indigo"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -419,11 +422,11 @@
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="blue"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'blue', authorColor: 'pink',
text: 'blue', text: 'blue',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),
@ -435,7 +438,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="blue"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -450,11 +453,11 @@
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="teal"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'teal', authorColor: 'pink',
text: 'teal', text: 'teal',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),
@ -466,7 +469,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="teal"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -481,11 +484,11 @@
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="green"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'green', authorColor: 'pink',
text: 'green', text: 'green',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),
@ -497,7 +500,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="green"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -512,11 +515,11 @@
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="light_green"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'light_green', authorColor: 'pink',
text: 'light_green', text: 'light_green',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),
@ -528,7 +531,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="light_green"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -543,11 +546,11 @@
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="grey" authorColor="blue_grey"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'blue_grey', authorColor: 'pink',
text: 'blue_grey', text: 'blue_grey',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),
@ -559,7 +562,7 @@
direction="outgoing" direction="outgoing"
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
authorColor="grey" authorColor="blue_grey"
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
@ -578,7 +581,7 @@
text="Nice!" text="Nice!"
i18n={util.i18n} i18n={util.i18n}
quote={{ quote={{
authorColor: 'grey', authorColor: 'pink',
text: 'grey', text: 'grey',
authorPhoneNumber: '(202) 555-0011', authorPhoneNumber: '(202) 555-0011',
onClick: () => console.log('onClick'), onClick: () => console.log('onClick'),

Loading…
Cancel
Save