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

When iOS device has been linked, use iOS color scheme

Browse source
This commit is contained in:
Scott Nonnenberg 2018-08-13 17:06:50 -07:00
parent 0eb2c958a5
commit a247ffe5cf
12 changed files with 556 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/auto_update.js
View file

@ -24,7 +24,7 @@ function checkForUpdates() {
let showingDialog = false; let showingDialog = false;
function showUpdateDialog(mainWindow, messages) { function showUpdateDialog(mainWindow, messages) {
if (showingDialog) { if (showingDialog || !mainWindow) {
return; return;
} }
showingDialog = true; showingDialog = true;

7
js/views/app_view.js
View file

@ -21,11 +21,18 @@
openInbox: 'openInbox', openInbox: 'openInbox',
}, },
applyTheme() { applyTheme() {
const iOS = storage.get('userAgent') === 'OWI';
const theme = storage.get('theme-setting') || 'light'; const theme = storage.get('theme-setting') || 'light';
this.$el this.$el
.removeClass('light-theme') .removeClass('light-theme')
.removeClass('dark-theme') .removeClass('dark-theme')
.addClass(`${theme}-theme`); .addClass(`${theme}-theme`);
if (iOS) {
this.$el.addClass('ios-theme');
} else {
this.$el.removeClass('ios-theme');
}
}, },
applyHideMenu() { applyHideMenu() {
const hideMenuBar = storage.get('hide-menu-bar', false); const hideMenuBar = storage.get('hide-menu-bar', false);

380
stylesheets/_ios.scss Normal file
View file

@ -0,0 +1,380 @@
// When paired with an iOS device, this stylesheet will apply
.ios-theme {
// _modules
.module-message__container--outgoing {
background-color: $color-signal-blue;
color: $color-white;
}
.module-message__container--incoming {
background-color: $color-light-10;
color: $color-light-90;
}
.module-message__container--incoming-grey {
background-color: $color-light-10;
}
.module-message__container--incoming-blue {
background-color: $color-light-10;
}
.module-message__container--incoming-cyan {
background-color: $color-light-10;
}
.module-message__container--incoming-deep_orange {
background-color: $color-light-10;
}
.module-message__container--incoming-green {
background-color: $color-light-10;
}
.module-message__container--incoming-indigo {
background-color: $color-light-10;
}
.module-message__container--incoming-pink {
background-color: $color-light-10;
}
.module-message__container--incoming-purple {
background-color: $color-light-10;
}
.module-message__container--incoming-red {
background-color: $color-light-10;
}
.module-message__container--incoming-teal {
background-color: $color-light-10;
}
.module-message__author {
color: $color-light-90;
}
.module-message__text {
color: $color-white;
font-size: 14px;
a {
text-decoration: underline;
color: $color-white;
}
}
.module-message__text--incoming {
color: $color-light-90;
a {
text-decoration: underline;
color: $color-light-90;
}
}
.module-message__metadata__date {
color: $color-white-07;
}
.module-message__metadata__date--incoming {
color: $color-light-45;
}
.module-message__metadata__date--with-image-no-caption {
color: $color-white;
}
.module-message__metadata__status-icon--sending {
@include color-svg('../images/sending.svg', $color-white);
}
.module-message__metadata__status-icon--sent {
@include color-svg('../images/check-circle-outline.svg', $color-white-07);
}
.module-message__metadata__status-icon--delivered {
@include color-svg('../images/double-check.svg', $color-white-07);
}
.module-message__metadata__status-icon--read {
@include color-svg('../images/read.svg', $color-white-07);
}
.module-message__metadata__status-icon--with-image-no-caption {
background-color: $color-white;
}
.module-message__broken-image {
color: $color-white;
}
.module-message__broken-image--incoming {
color: $color-light-90;
}
.module-message__broken-video-screenshot {
color: $color-white;
}
.module-message__broken-video-screenshot--incoming {
color: $color-light-90;
}
.module-message__generic-attachment__file-name {
color: $color-white;
}
.module-message__generic-attachment__file-name--incoming {
color: $color-light-90;
}
.module-message__generic-attachment__file-size {
color: $color-white;
}
.module-message__generic-attachment__file-size--incoming {
color: $color-light-90;
}
.module-quote--incoming {
background-color: $color-signal-blue-025;
border-left-color: $color-signal-blue;
}
.module-quote--outgoing-you {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-grey {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-blue {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-cyan {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-deep_orange {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-green {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-indigo {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-pink {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-purple {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-red {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote--outgoing-teal {
border-left-color: $color-white;
background-color: $color-white-06;
}
.module-quote__primary__author--grey {
color: $color-light-90;
}
.module-quote__primary__author--blue {
color: $color-light-90;
}
.module-quote__primary__author--cyan {
color: $color-light-90;
}
.module-quote__primary__author--deep_orange {
color: $color-light-90;
}
.module-quote__primary__author--green {
color: $color-light-90;
}
.module-quote__primary__author--indigo {
color: $color-light-90;
}
.module-quote__primary__author--pink {
color: $color-light-90;
}
.module-quote__primary__author--purple {
color: $color-light-90;
}
.module-quote__primary__author--red {
color: $color-light-90;
}
.module-quote__primary__author--teal {
color: $color-light-90;
}
// When you're composing a new quote
.bottom-bar {
.module-quote {
background-color: $color-signal-blue-025;
border-left-color: $color-signal-blue;
}
}
&.dark-theme {
// _modules
.module-message__container--incoming {
background-color: $color-dark-70;
color: $color-white;
}
.module-message__container--incoming-grey {
background-color: $color-dark-70;
}
.module-message__container--incoming-blue {
background-color: $color-dark-70;
}
.module-message__container--incoming-cyan {
background-color: $color-dark-70;
}
.module-message__container--incoming-deep_orange {
background-color: $color-dark-70;
}
.module-message__container--incoming-green {
background-color: $color-dark-70;
}
.module-message__container--incoming-indigo {
background-color: $color-dark-70;
}
.module-message__container--incoming-pink {
background-color: $color-dark-70;
}
.module-message__container--incoming-purple {
background-color: $color-dark-70;
}
.module-message__container--incoming-red {
background-color: $color-dark-70;
}
.module-message__container--incoming-teal {
background-color: $color-dark-70;
}
.module-message__author {
color: $color-white;
}
.module-message__text--incoming {
color: $color-white;
a {
text-decoration: underline;
color: $color-white;
}
}
.module-message__metadata__date--incoming {
color: $color-white;
}
.module-message__broken-image--incoming {
color: $color-white;
}
.module-message__broken-video-screenshot--incoming {
color: $color-white;
}
.module-message__generic-attachment__file-name--incoming {
color: $color-white;
}
.module-message__generic-attachment__file-size--incoming {
color: $color-white;
}
.module-quote__primary__author {
color: $color-light-90;
}
.module-quote__primary__author--grey {
color: $color-light-90;
}
.module-quote__primary__author--blue {
color: $color-light-90;
}
.module-quote__primary__author--cyan {
color: $color-light-90;
}
.module-quote__primary__author--deep_orange {
color: $color-light-90;
}
.module-quote__primary__author--green {
color: $color-light-90;
}
.module-quote__primary__author--indigo {
color: $color-light-90;
}
.module-quote__primary__author--pink {
color: $color-light-90;
}
.module-quote__primary__author--purple {
color: $color-light-90;
}
.module-quote__primary__author--red {
color: $color-light-90;
}
.module-quote__primary__author--teal {
color: $color-light-90;
}
.module-quote__primary__text {
color: $color-light-90;
a {
color: $color-light-90;
}
}
.module-quote__primary__type-label {
color: $color-light-90;
}
.module-quote__primary__type-label--incoming {
color: $color-white;
}
.module-quote__primary__author--incoming {
color: $color-white;
}
.module-quote__primary__text--incoming {
color: $color-white;
a {
color: $color-white;
}
}
.module-quote__generic-file__text {
color: $color-light-90;
}
.module-quote__generic-file__text--incoming {
color: $color-white;
}
// When you're composing a new quote
.bottom-bar {
.module-quote__primary__author {
color: $color-white;
}
.module-quote__primary__type-label {
color: $color-white;
}
.module-quote__generic-file__text {
color: $color-white;
}
.module-quote__primary__text {
color: $color-white;
a {
color: $color-white;
}
}
}
.module-embedded-contact__contact-method {
color: $color-white-07;
}
}
}

2
stylesheets/_modules.scss
View file

@ -388,6 +388,8 @@
overflow-x: hidden; overflow-x: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: clip; text-overflow: clip;
color: $color-light-90;
} }
.module-message__generic-attachment__text { .module-message__generic-attachment__text {

3
stylesheets/_variables.scss
View file

@ -31,8 +31,11 @@ $color-signal-blue: #2090ea;
$color-core-green: #4caf50; $color-core-green: #4caf50;
$color-core-red: #f44336; $color-core-red: #f44336;
$color-signal-blue-025: rgba($color-signal-blue, 0.25);
$color-white: #ffffff; $color-white: #ffffff;
$color-white-02: rgba($color-white, 0.2); $color-white-02: rgba($color-white, 0.2);
$color-white-06: rgba($color-white, 0.6);
$color-white-07: rgba($color-white, 0.7); $color-white-07: rgba($color-white, 0.7);
$color-white-075: rgba($color-white, 0.75); $color-white-075: rgba($color-white, 0.75);
$color-light-02: #f9fafa; $color-light-02: #f9fafa;

3
stylesheets/manifest.scss
View file

@ -15,7 +15,10 @@
// Build the main view // Build the main view
@import 'index'; @import 'index';
@import 'conversation'; @import 'conversation';
// Themes
@import 'theme_dark'; @import 'theme_dark';
@import 'ios';
// New CSS // New CSS
@import 'modules'; @import 'modules';

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

@ -22,7 +22,7 @@ const contact = {
onSendMessage: () => console.log('onSendMessage'), onSendMessage: () => console.log('onSendMessage'),
hasSignalAccount: true, hasSignalAccount: true,
}; };
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -80,7 +80,7 @@ const contact = {
}, },
hasSignalAccount: true, hasSignalAccount: true,
}; };
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li><Message <li><Message
authorColor="green" authorColor="green"
direction="incoming" direction="incoming"
@ -114,7 +114,7 @@ const contact = {
}, },
hasSignalAccount: true, hasSignalAccount: true,
}; };
<util.ConversationContext theme={util.theme} type="group"> <util.ConversationContext theme={util.theme} ios={util.ios} type="group">
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -170,7 +170,7 @@ const contact = {
}, },
hasSignalAccount: false, hasSignalAccount: false,
}; };
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -226,7 +226,7 @@ const contact = {
}, },
hasSignalAccount: false, hasSignalAccount: false,
}; };
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -284,7 +284,7 @@ const contact = {
}, },
hasSignalAccount: false, hasSignalAccount: false,
}; };
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -337,7 +337,7 @@ const contact = {
], ],
hasSignalAccount: true, hasSignalAccount: true,
}; };
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -379,7 +379,7 @@ const contact = {
```jsx ```jsx
const contact = {}; const contact = {};
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -454,7 +454,7 @@ const contactWithoutAccount = {
}, },
hasSignalAccount: false, hasSignalAccount: false,
}; };
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
text="I want to introduce you to Someone..." text="I want to introduce you to Someone..."

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

@ -3,7 +3,7 @@
Note that timestamp and status can be hidden with the `collapseMetadata` boolean property. Note that timestamp and status can be hidden with the `collapseMetadata` boolean property.
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -148,7 +148,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
### Status ### Status
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="outgoing" direction="outgoing"
@ -277,7 +277,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
### Long data ### Long data
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="cyan" authorColor="cyan"
@ -330,7 +330,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
#### Image with caption #### Image with caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="cyan" authorColor="cyan"
@ -388,7 +388,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
First, showing the metadata overlay on dark and light images, then a message with `collapseMetadata` set. First, showing the metadata overlay on dark and light images, then a message with `collapseMetadata` set.
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -457,7 +457,7 @@ First, showing the metadata overlay on dark and light images, then a message wit
Note that the delivered indicator is always Signal Blue, not the conversation color. Note that the delivered indicator is always Signal Blue, not the conversation color.
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="outgoing" direction="outgoing"
@ -508,7 +508,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
#### Image with portrait aspect ratio #### Image with portrait aspect ratio
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -564,7 +564,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
#### Image with portrait aspect ratio and caption #### Image with portrait aspect ratio and caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -624,7 +624,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
#### Image with landscape aspect ratio #### Image with landscape aspect ratio
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -680,7 +680,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
#### Image with landscape aspect ratio and caption #### Image with landscape aspect ratio and caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -740,7 +740,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
#### Video with caption #### Video with caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -808,7 +808,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
#### Video #### Video
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -873,7 +873,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
#### Missing images and videos #### Missing images and videos
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -992,7 +992,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
#### Broken source URL images and videos #### Broken source URL images and videos
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -1111,7 +1111,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
#### Audio with caption #### Audio with caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -1171,7 +1171,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
#### Audio #### Audio
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -1231,7 +1231,7 @@ Voice notes are not shown any differently from audio attachments.
#### Other file type with caption #### Other file type with caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -1345,7 +1345,7 @@ Voice notes are not shown any differently from audio attachments.
#### Other file type #### Other file type
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
authorColor="green" authorColor="green"
@ -1411,7 +1411,7 @@ Voice notes are not shown any differently from audio attachments.
Note that the author avatar goes away if `collapseMetadata` is set. Note that the author avatar goes away if `collapseMetadata` is set.
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"

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

@ -3,7 +3,7 @@
#### Plain text #### Plain text
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -41,7 +41,7 @@
#### Name variations #### Name variations
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -112,7 +112,7 @@
#### With emoji #### With emoji
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -148,7 +148,7 @@
#### Replies to you or yourself #### Replies to you or yourself
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -186,7 +186,7 @@
#### In a group conversation #### In a group conversation
```jsx ```jsx
<util.ConversationContext theme={util.theme} type="group"> <util.ConversationContext theme={util.theme} ios={util.ios} type="group">
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -228,7 +228,7 @@
#### Long names and context #### Long names and context
```jsx ```jsx
<util.ConversationContext theme={util.theme} type="group"> <util.ConversationContext theme={util.theme} ios={util.ios} type="group">
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -270,7 +270,7 @@
#### A lot of text in quotation #### A lot of text in quotation
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -314,7 +314,7 @@
#### A lot of text in quotation, with icon #### A lot of text in quotation, with icon
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -366,7 +366,7 @@
#### A lot of text in quotation, with image #### A lot of text in quotation, with image
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -426,7 +426,7 @@
#### Image with caption #### Image with caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -478,7 +478,7 @@
#### Image #### Image
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -528,7 +528,7 @@
#### Image with no thumbnail #### Image with no thumbnail
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -570,7 +570,7 @@
#### Video with caption #### Video with caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -622,7 +622,7 @@
#### Video #### Video
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -672,7 +672,7 @@
#### Video with no thumbnail #### Video with no thumbnail
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -720,7 +720,7 @@
#### Audio with caption #### Audio with caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -764,7 +764,7 @@
#### Audio #### Audio
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -806,7 +806,7 @@
#### Voice message #### Voice message
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -852,7 +852,7 @@
#### Other file type with caption #### Other file type with caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -935,7 +935,7 @@
#### Other file type #### Other file type
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -979,7 +979,7 @@
#### Quote, image attachment, and caption #### Quote, image attachment, and caption
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -1025,7 +1025,7 @@
#### Quote, image attachment #### Quote, image attachment
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -1069,7 +1069,7 @@
#### Quote, portrait image attachment #### Quote, portrait image attachment
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -1113,14 +1113,17 @@
#### Quote, video attachment #### Quote, video attachment
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
timestamp={Date.now()} timestamp={Date.now()}
authorColor="green" authorColor="green"
attachment={{ attachment={{
url: util.mp4ObjectUrl, screenshot: {
url: util.pngObjectUrl,
contentType: 'image/png',
},
fileName: 'freezing_bubble.mp4', fileName: 'freezing_bubble.mp4',
contentType: 'video/mp4', contentType: 'video/mp4',
}} }}
@ -1138,7 +1141,10 @@
timestamp={Date.now()} timestamp={Date.now()}
status="sending" status="sending"
attachment={{ attachment={{
url: util.mp4ObjectUrl, screenshot: {
url: util.pngObjectUrl,
contentType: 'image/png',
},
fileName: 'freezing_bubble.mp4', fileName: 'freezing_bubble.mp4',
contentType: 'video/mp4', contentType: 'video/mp4',
}} }}
@ -1157,7 +1163,7 @@
#### Quote, audio attachment #### Quote, audio attachment
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -1201,7 +1207,7 @@
#### Quote, file attachment #### Quote, file attachment
```jsx ```jsx
<util.ConversationContext theme={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<li> <li>
<Message <Message
direction="incoming" direction="incoming"
@ -1249,7 +1255,7 @@
#### Plain text #### Plain text
```jsx ```jsx
<div className={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<div className="bottom-bar"> <div className="bottom-bar">
<Quote <Quote
text="How many ferrets do you have?" text="How many ferrets do you have?"
@ -1257,17 +1263,17 @@
authorPhoneNumber="(202) 555-1000" authorPhoneNumber="(202) 555-1000"
authorProfileName="Mr. Blue" authorProfileName="Mr. Blue"
id={Date.now() - 1000} id={Date.now() - 1000}
i18n={window.i18n} i18n={util.i18n}
onClick={() => console.log('onClick')} onClick={() => console.log('onClick')}
/> />
</div> </div>
</div> </util.ConversationContext>
``` ```
#### With an icon #### With an icon
```jsx ```jsx
<div className={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<div className="bottom-bar"> <div className="bottom-bar">
<Quote <Quote
text="How many ferrets do you have?" text="How many ferrets do you have?"
@ -1283,13 +1289,13 @@
onClick={() => console.log('onClick')} onClick={() => console.log('onClick')}
/> />
</div> </div>
</div> </util.ConversationContext>
``` ```
#### With an image #### With an image
```jsx ```jsx
<div className={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<div className="bottom-bar"> <div className="bottom-bar">
<Quote <Quote
text="How many ferrets do you have?" text="How many ferrets do you have?"
@ -1308,13 +1314,59 @@
onClick={() => console.log('onClick')} onClick={() => console.log('onClick')}
/> />
</div> </div>
</div> </util.ConversationContext>
```
#### With attachment and no text
```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<div className="bottom-bar">
<Quote
authorColor="blue"
authorPhoneNumber="(202) 555-1000"
authorProfileName="Mr. Blue"
id={Date.now() - 1000}
i18n={util.i18n}
attachment={{
contentType: 'image/gif',
fileName: 'llama.gif',
thumbnail: {
objectUrl: util.gifObjectUrl,
},
}}
onClick={() => console.log('onClick')}
/>
</div>
</util.ConversationContext>
```
#### With generic attachment
```jsx
<util.ConversationContext theme={util.theme} ios={util.ios}>
<div className="bottom-bar">
<Quote
text="How many ferrets do you have?"
authorColor="blue"
authorPhoneNumber="(202) 555-1000"
authorProfileName="Mr. Blue"
id={Date.now() - 1000}
i18n={util.i18n}
attachment={{
contentType: 'text/plain',
fileName: 'manifesto.text',
}}
onClick={() => console.log('onClick')}
/>
</div>
</util.ConversationContext>
``` ```
#### With a close button #### With a close button
```jsx ```jsx
<div className={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<div className="bottom-bar"> <div className="bottom-bar">
<Quote <Quote
text="How many ferrets do you have?" text="How many ferrets do you have?"
@ -1324,16 +1376,16 @@
id={Date.now() - 1000} id={Date.now() - 1000}
onClose={() => console.log('onClose')} onClose={() => console.log('onClose')}
onClick={() => console.log('onClick')} onClick={() => console.log('onClick')}
i18n={window.i18n} i18n={util.i18n}
/> />
</div> </div>
</div> </util.ConversationContext>
``` ```
#### With a close button and icon #### With a close button and icon
```jsx ```jsx
<div className={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<div className="bottom-bar"> <div className="bottom-bar">
<Quote <Quote
text="How many ferrets do you have?" text="How many ferrets do you have?"
@ -1343,20 +1395,20 @@
id={Date.now() - 1000} id={Date.now() - 1000}
onClose={() => console.log('onClose')} onClose={() => console.log('onClose')}
onClick={() => console.log('onClick')} onClick={() => console.log('onClick')}
i18n={window.i18n} i18n={util.i18n}
attachment={{ attachment={{
contentType: 'image/jpeg', contentType: 'image/jpeg',
fileName: 'llama.jpg', fileName: 'llama.jpg',
}} }}
/> />
</div> </div>
</div> </util.ConversationContext>
``` ```
#### With a close button and image #### With a close button and image
```jsx ```jsx
<div className={util.theme}> <util.ConversationContext theme={util.theme} ios={util.ios}>
<div className="bottom-bar"> <div className="bottom-bar">
<Quote <Quote
text="How many ferrets do you have?" text="How many ferrets do you have?"
@ -1376,5 +1428,5 @@
}} }}
/> />
</div> </div>
</div> </util.ConversationContext>
``` ```

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

@ -125,7 +125,7 @@ export class Quote extends React.Component<Props> {
} }
public renderGenericFile() { public renderGenericFile() {
const { attachment } = this.props; const { attachment, isIncoming } = this.props;
if (!attachment) { if (!attachment) {
return; return;
@ -144,7 +144,14 @@ export class Quote extends React.Component<Props> {
return ( return (
<div className="module-quote__generic-file"> <div className="module-quote__generic-file">
<div className="module-quote__generic-file__icon" /> <div className="module-quote__generic-file__icon" />
<div className="module-quote__generic-file__text">{fileName}</div> <div
className={classNames(
'module-quote__generic-file__text',
isIncoming ? 'module-quote__generic-file__text--incoming' : null
)}
>
{fileName}
</div>
</div> </div>
); );
} }
@ -176,11 +183,17 @@ export class Quote extends React.Component<Props> {
} }
public renderText() { public renderText() {
const { i18n, text, attachment } = this.props; const { i18n, text, attachment, isIncoming } = this.props;
if (text) { if (text) {
return ( return (
<div dir="auto" className="module-quote__primary__text"> <div
dir="auto"
className={classNames(
'module-quote__primary__text',
isIncoming ? 'module-quote__primary__text--incoming' : null
)}
>
<MessageBody text={text} i18n={i18n} /> <MessageBody text={text} i18n={i18n} />
</div> </div>
); );
@ -195,7 +208,14 @@ export class Quote extends React.Component<Props> {
const typeLabel = getTypeLabel({ i18n, contentType, isVoiceMessage }); const typeLabel = getTypeLabel({ i18n, contentType, isVoiceMessage });
if (typeLabel) { if (typeLabel) {
return ( return (
<div className="module-quote__primary__type-label">{typeLabel}</div> <div
className={classNames(
'module-quote__primary__type-label',
isIncoming ? 'module-quote__primary__type-label--incoming' : null
)}
>
{typeLabel}
</div>
); );
} }
@ -236,13 +256,15 @@ export class Quote extends React.Component<Props> {
authorColor, authorColor,
i18n, i18n,
isFromMe, isFromMe,
isIncoming,
} = this.props; } = this.props;
return ( return (
<div <div
className={classNames( className={classNames(
'module-quote__primary__author', 'module-quote__primary__author',
!isFromMe ? `module-quote__primary__author--${authorColor}` : null !isFromMe ? `module-quote__primary__author--${authorColor}` : null,
isIncoming ? 'module-quote__primary__author--incoming' : null
)} )}
> >
{isFromMe ? ( {isFromMe ? (

7
ts/styleguide/ConversationContext.tsx
View file

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

6
ts/styleguide/StyleGuideUtil.ts
View file

@ -1,4 +1,5 @@
import QueryString from 'qs'; import QueryString from 'qs';
import classNames from 'classnames';
// This file provides helpers for the Style Guide, exposed at 'util' in the global scope // This file provides helpers for the Style Guide, exposed at 'util' in the global scope
// via the 'context' option in react-styleguidist. // via the 'context' option in react-styleguidist.
@ -6,7 +7,7 @@ import QueryString from 'qs';
import { default as _ } from 'lodash'; import { default as _ } from 'lodash';
export { ConversationContext } from './ConversationContext'; export { ConversationContext } from './ConversationContext';
export { _ }; export { _, classNames };
// TypeScript wants two things when you import: // TypeScript wants two things when you import:
// 1) a normal typescript file // 1) a normal typescript file
@ -81,6 +82,7 @@ export {
const query = window.location.search.replace(/^\?/, ''); const query = window.location.search.replace(/^\?/, '');
const urlOptions = QueryString.parse(query); const urlOptions = QueryString.parse(query);
const theme = urlOptions.theme || 'light-theme'; const theme = urlOptions.theme || 'light-theme';
const ios = urlOptions.ios || false;
const locale = urlOptions.locale || 'en'; const locale = urlOptions.locale || 'en';
// @ts-ignore // @ts-ignore
@ -90,7 +92,7 @@ import localeMessages from '../../_locales/en/messages.json';
import { setup } from '../../js/modules/i18n'; import { setup } from '../../js/modules/i18n';
const i18n = setup(locale, localeMessages); const i18n = setup(locale, localeMessages);
export { theme, locale, i18n }; export { theme, ios, locale, i18n };
// Telling Lodash to relinquish _ for use by underscore // Telling Lodash to relinquish _ for use by underscore
// @ts-ignore // @ts-ignore