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

Restore iOS-specific theme; colors on left in android theme

Browse source
This commit is contained in:
Scott Nonnenberg 2018-10-09 15:56:14 -07:00
parent ca61c9cb85
commit 7d9711ba65
19 changed files with 1280 additions and 538 deletions
Download patch file Download diff file Expand all files Collapse all files

92
ts/components/conversation/EmbeddedContact.md
View file

@ -22,10 +22,10 @@ const contact = {
onSendMessage: () => console.log('onSendMessage'),
hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -34,7 +34,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -44,7 +44,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -54,7 +54,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -86,10 +86,10 @@ const contact = {
},
hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -97,7 +97,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -127,10 +127,10 @@ const contact = {
},
hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme} type="group">
<util.ConversationContext theme={util.theme} type="group" ios={util.ios}>
<li>
<Message
conversationColor="green"
authorColor="green"
conversationType="group"
authorName="Mr. Fire"
authorAvatarPath={util.gifObjectUrl}
@ -142,7 +142,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
authorName="Mr. Fire"
conversationType="group"
@ -154,7 +154,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
conversationType="group"
authorName="Mr. Fire"
@ -187,10 +187,10 @@ const contact = {
},
hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -199,7 +199,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -209,7 +209,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -219,7 +219,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -249,10 +249,10 @@ const contact = {
},
hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -261,7 +261,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -271,7 +271,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -281,7 +281,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -313,10 +313,10 @@ const contact = {
},
hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -325,7 +325,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -335,7 +335,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -345,7 +345,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -372,10 +372,10 @@ const contact = {
],
hasSignalAccount: true,
};
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -384,7 +384,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -394,7 +394,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -404,7 +404,7 @@ const contact = {
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -420,10 +420,10 @@ const contact = {
```jsx
const contact = {};
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -432,7 +432,7 @@ const contact = {};
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -442,7 +442,7 @@ const contact = {};
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -452,7 +452,7 @@ const contact = {};
</li>
<li>
<Message
conversationColor="green"
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -501,11 +501,11 @@ const contactWithoutAccount = {
},
hasSignalAccount: false,
};
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -515,7 +515,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -526,7 +526,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
authorColor="green"
direction="incoming"
i18n={util.i18n}
timestamp={Date.now()}
@ -536,7 +536,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
authorColor="green"
direction="outgoing"
status="delivered"
i18n={util.i18n}
@ -547,7 +547,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -558,7 +558,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"
@ -570,7 +570,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
authorColor="green"
direction="incoming"
collapseMetadata
i18n={util.i18n}
@ -581,7 +581,7 @@ const contactWithoutAccount = {
<li>
<Message
text="I want to introduce you to Someone..."
conversationColor="green"
authorColor="green"
direction="outgoing"
collapseMetadata
status="delivered"

40
ts/components/conversation/ExpireTimer.md
View file

@ -1,10 +1,10 @@
### Countdown at different rates
```jsx
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="outgoing"
status="delivered"
text="10 second timer"
@ -18,7 +18,7 @@
<Message
direction="outgoing"
status="delivered"
conversationColor="blue"
authorColor="blue"
text="30 second timer"
i18n={util.i18n}
timestamp={Date.now() + 30 * 1000}
@ -28,7 +28,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="outgoing"
status="delivered"
text="1 minute timer"
@ -40,7 +40,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="outgoing"
status="delivered"
text="5 minute timer"
@ -56,10 +56,10 @@
### Timer calculations
```jsx
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="incoming"
text="Full timer"
i18n={util.i18n}
@ -70,7 +70,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="outgoing"
status="delivered"
text="Full timer"
@ -82,7 +82,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="incoming"
text="55 timer"
i18n={util.i18n}
@ -93,7 +93,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="outgoing"
status="delivered"
text="55 timer"
@ -105,7 +105,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="incoming"
text="30 timer"
i18n={util.i18n}
@ -116,7 +116,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="outgoing"
status="delivered"
text="30 timer"
@ -128,7 +128,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="incoming"
text="5 timer"
i18n={util.i18n}
@ -139,7 +139,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="outgoing"
status="delivered"
text="5 timer"
@ -151,7 +151,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="incoming"
text="Expired timer"
i18n={util.i18n}
@ -162,7 +162,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="outgoing"
status="delivered"
text="Expired timer"
@ -174,7 +174,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="incoming"
text="Expiration is too far away"
i18n={util.i18n}
@ -185,7 +185,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="outgoing"
status="delivered"
text="Expiration is too far away"
@ -197,7 +197,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="incoming"
text="Already expired"
i18n={util.i18n}
@ -208,7 +208,7 @@
</li>
<li>
<Message
conversationColor="blue"
authorColor="blue"
direction="outgoing"
status="delivered"
text="Already expired"

326
ts/components/conversation/Message.md
View file

File diff suppressed because it is too large Load diff

23
ts/components/conversation/Message.tsx
View file

@ -68,7 +68,7 @@ export interface Props {
authorProfileName?: string;
/** Note: this should be formatted for display */
authorPhoneNumber: string;
conversationColor: Color;
authorColor?: Color;
conversationType: 'group' | 'direct';
attachment?: Attachment;
quote?: {
@ -78,6 +78,7 @@ export interface Props {
authorPhoneNumber: string;
authorProfileName?: string;
authorName?: string;
authorColor?: Color;
onClick?: () => void;
referencedMessageNotFound: boolean;
};
@ -556,13 +557,7 @@ export class Message extends React.Component<Props, State> {
}
public renderQuote() {
const {
conversationType,
conversationColor,
direction,
i18n,
quote,
} = this.props;
const { conversationType, direction, i18n, quote } = this.props;
if (!quote) {
return null;
@ -581,7 +576,7 @@ export class Message extends React.Component<Props, State> {
authorPhoneNumber={quote.authorPhoneNumber}
authorProfileName={quote.authorProfileName}
authorName={quote.authorName}
conversationColor={conversationColor}
authorColor={quote.authorColor}
referencedMessageNotFound={quote.referencedMessageNotFound}
isFromMe={quote.isFromMe}
withContentAbove={withContentAbove}
@ -644,7 +639,7 @@ export class Message extends React.Component<Props, State> {
authorPhoneNumber,
authorProfileName,
collapseMetadata,
conversationColor,
authorColor,
conversationType,
direction,
i18n,
@ -662,7 +657,7 @@ export class Message extends React.Component<Props, State> {
<div className="module-message__author-avatar">
<Avatar
avatarPath={authorAvatarPath}
color={conversationColor}
color={authorColor}
conversationType="direct"
i18n={i18n}
name={authorName}
@ -870,7 +865,7 @@ export class Message extends React.Component<Props, State> {
public render() {
const {
authorPhoneNumber,
conversationColor,
authorColor,
direction,
id,
timestamp,
@ -899,8 +894,8 @@ export class Message extends React.Component<Props, State> {
className={classNames(
'module-message__container',
`module-message__container--${direction}`,
direction === 'outgoing'
? `module-message__container--outgoing-${conversationColor}`
direction === 'incoming'
? `module-message__container--incoming-${authorColor}`
: null
)}
>

8
ts/components/conversation/MessageDetail.md
View file

@ -6,7 +6,7 @@
disableMenu: true,
direction: 'incoming',
timestamp: Date.now(),
conversationColor: 'pink',
authorColor: '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(),
conversationColor: 'pink',
authorColor: '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(),
conversationColor: 'pink',
authorColor: '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(),
conversationColor: 'pink',
authorColor: 'pink',
text:
'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
status: 'error',

647
ts/components/conversation/Quote.md
View file

File diff suppressed because it is too large Load diff

8
ts/components/conversation/Quote.tsx
View file

@ -15,7 +15,7 @@ interface Props {
authorPhoneNumber: string;
authorProfileName?: string;
authorName?: string;
conversationColor: Color;
authorColor?: Color;
i18n: Localizer;
isFromMe: boolean;
isIncoming: boolean;
@ -318,7 +318,7 @@ export class Quote extends React.Component<Props> {
public render() {
const {
conversationColor,
authorColor,
isIncoming,
onClick,
referencedMessageNotFound,
@ -343,8 +343,8 @@ export class Quote extends React.Component<Props> {
'module-quote',
isIncoming ? 'module-quote--incoming' : 'module-quote--outgoing',
isIncoming
? `module-quote--incoming-${conversationColor}`
: `module-quote--outgoing-${conversationColor}`,
? `module-quote--incoming-${authorColor}`
: `module-quote--outgoing-${authorColor}`,
!onClick ? 'module-quote--no-click' : null,
withContentAbove ? 'module-quote--with-content-above' : null,
referencedMessageNotFound

66
ts/components/conversation/Timestamp.md
View file

@ -18,12 +18,12 @@ function getDecember1159() {
return getJanuary1201() - 2 * 60 * 1000;
}
<util.ConversationContext theme={util.theme}>
<util.ConversationContext theme={util.theme} ios={util.ios}>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="red"
authorColor="red"
timestamp={Date.now() - 500}
text="500ms ago - all below 1 minute are 'now'"
i18n={util.i18n}
@ -31,9 +31,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="teal"
authorColor="teal"
timestamp={Date.now() - 5 * 1000}
text="Five seconds ago"
i18n={util.i18n}
@ -41,9 +41,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="teal"
authorColor="teal"
timestamp={Date.now() - 30 * 1000}
text="30 seconds ago"
i18n={util.i18n}
@ -51,9 +51,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="red"
authorColor="red"
timestamp={Date.now() - 60 * 1000}
text="One minute ago - in minutes"
i18n={util.i18n}
@ -61,9 +61,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="teal"
authorColor="teal"
timestamp={Date.now() - 30 * 60 * 1000}
text="30 minutes ago"
i18n={util.i18n}
@ -71,9 +71,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="teal"
authorColor="teal"
timestamp={Date.now() - 45 * 60 * 1000}
text="45 minutes ago (used to round up to 1 hour with moment)"
i18n={util.i18n}
@ -81,9 +81,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="red"
authorColor="red"
timestamp={Date.now() - 60 * 60 * 1000}
text="One hour ago - in hours"
i18n={util.i18n}
@ -91,9 +91,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="teal"
authorColor="teal"
timestamp={get1201()}
text="12:01am today"
i18n={util.i18n}
@ -101,9 +101,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="red"
authorColor="red"
timestamp={getYesterday1159()}
text="11:59pm yesterday - adds day name"
i18n={util.i18n}
@ -111,9 +111,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="teal"
authorColor="teal"
timestamp={Date.now() - 24 * 60 * 60 * 1000}
text="24 hours ago"
i18n={util.i18n}
@ -121,9 +121,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="teal"
authorColor="teal"
timestamp={Date.now() - 2 * 24 * 60 * 60 * 1000}
text="Two days ago"
i18n={util.i18n}
@ -131,9 +131,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="red"
authorColor="red"
timestamp={Date.now() - 7 * 24 * 60 * 60 * 1000}
text="Seven days ago - adds month"
i18n={util.i18n}
@ -141,9 +141,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="teal"
authorColor="teal"
timestamp={Date.now() - 30 * 24 * 60 * 60 * 1000}
text="Thirty days ago"
i18n={util.i18n}
@ -151,9 +151,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="teal"
authorColor="teal"
timestamp={getJanuary1201()}
text="January 1st at 12:01am"
i18n={util.i18n}
@ -161,9 +161,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="red"
authorColor="red"
timestamp={getDecember1159()}
text="December 31st at 11:59pm - adds year"
i18n={util.i18n}
@ -171,9 +171,9 @@ function getDecember1159() {
</li>
<li>
<Message
direction="outgoing"
direction="incoming"
status="delivered"
conversationColor="teal"
authorColor="teal"
timestamp={Date.now() - 366 * 24 * 60 * 60 * 1000}
text="One year ago"
i18n={util.i18n}

7
ts/styleguide/ConversationContext.tsx
View file

@ -5,6 +5,7 @@ interface Props {
/**
* Corresponds to the theme setting in the app, and the class added to the root element.
*/
ios: boolean;
theme: 'light-theme' | 'dark-theme';
type: 'private' | 'group';
}
@ -15,10 +16,12 @@ interface Props {
*/
export class ConversationContext extends React.Component<Props> {
public render() {
const { theme, type } = this.props;
const { ios, theme, type } = this.props;
return (
<div className={classNames(theme || 'light-theme')}>
<div
className={classNames(theme || 'light-theme', ios ? 'ios-theme' : null)}
>
<div className={classNames('conversation', type || 'private')}>
<div className="discussion-container" style={{ padding: '0.5em' }}>
<ul className="message-list">{this.props.children}</ul>

3
ts/styleguide/StyleGuideUtil.ts
View file

@ -83,6 +83,7 @@ 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 +93,7 @@ import localeMessages from '../../_locales/en/messages.json';
import { setup } from '../../js/modules/i18n';
const i18n = setup(locale, localeMessages);
export { theme, locale, i18n };
export { theme, ios, locale, i18n };
// Telling Lodash to relinquish _ for use by underscore
// @ts-ignore