When iOS device has been linked, use iOS color scheme
This commit is contained in:
Scott Nonnenberg
parent
0eb2c958a5
commit
a247ffe5cf
|
|
@ -24,7 +24,7 @@ function checkForUpdates() {
|
|||
|
||||
let showingDialog = false;
|
||||
function showUpdateDialog(mainWindow, messages) {
|
||||
if (showingDialog) {
|
||||
if (showingDialog || !mainWindow) {
|
||||
return;
|
||||
}
|
||||
showingDialog = true;
|
||||
|
|
|
|||
|
|
@ -21,11 +21,18 @@
|
|||
openInbox: 'openInbox',
|
||||
},
|
||||
applyTheme() {
|
||||
const iOS = storage.get('userAgent') === 'OWI';
|
||||
const theme = storage.get('theme-setting') || 'light';
|
||||
this.$el
|
||||
.removeClass('light-theme')
|
||||
.removeClass('dark-theme')
|
||||
.addClass(`${theme}-theme`);
|
||||
|
||||
if (iOS) {
|
||||
this.$el.addClass('ios-theme');
|
||||
} else {
|
||||
this.$el.removeClass('ios-theme');
|
||||
}
|
||||
},
|
||||
applyHideMenu() {
|
||||
const hideMenuBar = storage.get('hide-menu-bar', false);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -388,6 +388,8 @@
|
|||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: clip;
|
||||
|
||||
color: $color-light-90;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__text {
|
||||
|
|
|
|||
|
|
@ -31,8 +31,11 @@ $color-signal-blue: #2090ea;
|
|||
$color-core-green: #4caf50;
|
||||
$color-core-red: #f44336;
|
||||
|
||||
$color-signal-blue-025: rgba($color-signal-blue, 0.25);
|
||||
|
||||
$color-white: #ffffff;
|
||||
$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-075: rgba($color-white, 0.75);
|
||||
$color-light-02: #f9fafa;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,10 @@
|
|||
// Build the main view
|
||||
@import 'index';
|
||||
@import 'conversation';
|
||||
|
||||
// Themes
|
||||
@import 'theme_dark';
|
||||
@import 'ios';
|
||||
|
||||
// New CSS
|
||||
@import 'modules';
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const contact = {
|
|||
onSendMessage: () => console.log('onSendMessage'),
|
||||
hasSignalAccount: true,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -80,7 +80,7 @@ const contact = {
|
|||
},
|
||||
hasSignalAccount: true,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li><Message
|
||||
authorColor="green"
|
||||
direction="incoming"
|
||||
|
|
@ -114,7 +114,7 @@ const contact = {
|
|||
},
|
||||
hasSignalAccount: true,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme} type="group">
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} type="group">
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -170,7 +170,7 @@ const contact = {
|
|||
},
|
||||
hasSignalAccount: false,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -226,7 +226,7 @@ const contact = {
|
|||
},
|
||||
hasSignalAccount: false,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -284,7 +284,7 @@ const contact = {
|
|||
},
|
||||
hasSignalAccount: false,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -337,7 +337,7 @@ const contact = {
|
|||
],
|
||||
hasSignalAccount: true,
|
||||
};
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -379,7 +379,7 @@ const contact = {
|
|||
|
||||
```jsx
|
||||
const contact = {};
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -454,7 +454,7 @@ 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..."
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
Note that timestamp and status can be hidden with the `collapseMetadata` boolean property.
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -148,7 +148,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
|
|||
### Status
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="outgoing"
|
||||
|
|
@ -277,7 +277,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
|
|||
### Long data
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="cyan"
|
||||
|
|
@ -330,7 +330,7 @@ Note that timestamp and status can be hidden with the `collapseMetadata` boolean
|
|||
#### Image with caption
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
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.
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
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.
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="outgoing"
|
||||
|
|
@ -508,7 +508,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
|
|||
#### Image with portrait aspect ratio
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
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
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -624,7 +624,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
|
|||
#### Image with landscape aspect ratio
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
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
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -740,7 +740,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
|
|||
#### Video with caption
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -808,7 +808,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
|
|||
#### Video
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -873,7 +873,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
|
|||
#### Missing images and videos
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
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
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -1111,7 +1111,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
|
|||
#### Audio with caption
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -1171,7 +1171,7 @@ Note that the delivered indicator is always Signal Blue, not the conversation co
|
|||
#### Audio
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -1231,7 +1231,7 @@ Voice notes are not shown any differently from audio attachments.
|
|||
#### Other file type with caption
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
authorColor="green"
|
||||
|
|
@ -1345,7 +1345,7 @@ Voice notes are not shown any differently from audio attachments.
|
|||
#### Other file type
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
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.
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
#### Plain text
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
#### Name variations
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
#### With emoji
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
#### Replies to you or yourself
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -186,7 +186,7 @@
|
|||
#### In a group conversation
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} type="group">
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} type="group">
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -228,7 +228,7 @@
|
|||
#### Long names and context
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme} type="group">
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios} type="group">
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -270,7 +270,7 @@
|
|||
#### A lot of text in quotation
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -314,7 +314,7 @@
|
|||
#### A lot of text in quotation, with icon
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -366,7 +366,7 @@
|
|||
#### A lot of text in quotation, with image
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -426,7 +426,7 @@
|
|||
#### Image with caption
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -478,7 +478,7 @@
|
|||
#### Image
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -528,7 +528,7 @@
|
|||
#### Image with no thumbnail
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -570,7 +570,7 @@
|
|||
#### Video with caption
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -622,7 +622,7 @@
|
|||
#### Video
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -672,7 +672,7 @@
|
|||
#### Video with no thumbnail
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -720,7 +720,7 @@
|
|||
#### Audio with caption
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -764,7 +764,7 @@
|
|||
#### Audio
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -806,7 +806,7 @@
|
|||
#### Voice message
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -852,7 +852,7 @@
|
|||
#### Other file type with caption
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -935,7 +935,7 @@
|
|||
#### Other file type
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -979,7 +979,7 @@
|
|||
#### Quote, image attachment, and caption
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -1025,7 +1025,7 @@
|
|||
#### Quote, image attachment
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -1069,7 +1069,7 @@
|
|||
#### Quote, portrait image attachment
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -1113,14 +1113,17 @@
|
|||
#### Quote, video attachment
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
timestamp={Date.now()}
|
||||
authorColor="green"
|
||||
attachment={{
|
||||
url: util.mp4ObjectUrl,
|
||||
screenshot: {
|
||||
url: util.pngObjectUrl,
|
||||
contentType: 'image/png',
|
||||
},
|
||||
fileName: 'freezing_bubble.mp4',
|
||||
contentType: 'video/mp4',
|
||||
}}
|
||||
|
|
@ -1138,7 +1141,10 @@
|
|||
timestamp={Date.now()}
|
||||
status="sending"
|
||||
attachment={{
|
||||
url: util.mp4ObjectUrl,
|
||||
screenshot: {
|
||||
url: util.pngObjectUrl,
|
||||
contentType: 'image/png',
|
||||
},
|
||||
fileName: 'freezing_bubble.mp4',
|
||||
contentType: 'video/mp4',
|
||||
}}
|
||||
|
|
@ -1157,7 +1163,7 @@
|
|||
#### Quote, audio attachment
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -1201,7 +1207,7 @@
|
|||
#### Quote, file attachment
|
||||
|
||||
```jsx
|
||||
<util.ConversationContext theme={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<li>
|
||||
<Message
|
||||
direction="incoming"
|
||||
|
|
@ -1249,7 +1255,7 @@
|
|||
#### Plain text
|
||||
|
||||
```jsx
|
||||
<div className={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<div className="bottom-bar">
|
||||
<Quote
|
||||
text="How many ferrets do you have?"
|
||||
|
|
@ -1257,17 +1263,17 @@
|
|||
authorPhoneNumber="(202) 555-1000"
|
||||
authorProfileName="Mr. Blue"
|
||||
id={Date.now() - 1000}
|
||||
i18n={window.i18n}
|
||||
i18n={util.i18n}
|
||||
onClick={() => console.log('onClick')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### With an icon
|
||||
|
||||
```jsx
|
||||
<div className={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<div className="bottom-bar">
|
||||
<Quote
|
||||
text="How many ferrets do you have?"
|
||||
|
|
@ -1283,13 +1289,13 @@
|
|||
onClick={() => console.log('onClick')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### With an image
|
||||
|
||||
```jsx
|
||||
<div className={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<div className="bottom-bar">
|
||||
<Quote
|
||||
text="How many ferrets do you have?"
|
||||
|
|
@ -1308,13 +1314,59 @@
|
|||
onClick={() => console.log('onClick')}
|
||||
/>
|
||||
</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
|
||||
|
||||
```jsx
|
||||
<div className={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<div className="bottom-bar">
|
||||
<Quote
|
||||
text="How many ferrets do you have?"
|
||||
|
|
@ -1324,16 +1376,16 @@
|
|||
id={Date.now() - 1000}
|
||||
onClose={() => console.log('onClose')}
|
||||
onClick={() => console.log('onClick')}
|
||||
i18n={window.i18n}
|
||||
i18n={util.i18n}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### With a close button and icon
|
||||
|
||||
```jsx
|
||||
<div className={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<div className="bottom-bar">
|
||||
<Quote
|
||||
text="How many ferrets do you have?"
|
||||
|
|
@ -1343,20 +1395,20 @@
|
|||
id={Date.now() - 1000}
|
||||
onClose={() => console.log('onClose')}
|
||||
onClick={() => console.log('onClick')}
|
||||
i18n={window.i18n}
|
||||
i18n={util.i18n}
|
||||
attachment={{
|
||||
contentType: 'image/jpeg',
|
||||
fileName: 'llama.jpg',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
||||
#### With a close button and image
|
||||
|
||||
```jsx
|
||||
<div className={util.theme}>
|
||||
<util.ConversationContext theme={util.theme} ios={util.ios}>
|
||||
<div className="bottom-bar">
|
||||
<Quote
|
||||
text="How many ferrets do you have?"
|
||||
|
|
@ -1376,5 +1428,5 @@
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</util.ConversationContext>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export class Quote extends React.Component<Props> {
|
|||
}
|
||||
|
||||
public renderGenericFile() {
|
||||
const { attachment } = this.props;
|
||||
const { attachment, isIncoming } = this.props;
|
||||
|
||||
if (!attachment) {
|
||||
return;
|
||||
|
|
@ -144,7 +144,14 @@ export class Quote extends React.Component<Props> {
|
|||
return (
|
||||
<div className="module-quote__generic-file">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
@ -176,11 +183,17 @@ export class Quote extends React.Component<Props> {
|
|||
}
|
||||
|
||||
public renderText() {
|
||||
const { i18n, text, attachment } = this.props;
|
||||
const { i18n, text, attachment, isIncoming } = this.props;
|
||||
|
||||
if (text) {
|
||||
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} />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -195,7 +208,14 @@ export class Quote extends React.Component<Props> {
|
|||
const typeLabel = getTypeLabel({ i18n, contentType, isVoiceMessage });
|
||||
if (typeLabel) {
|
||||
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,
|
||||
i18n,
|
||||
isFromMe,
|
||||
isIncoming,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'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 ? (
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ interface Props {
|
|||
*/
|
||||
theme: 'light-theme' | 'dark-theme';
|
||||
type: 'private' | 'group';
|
||||
ios: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -15,10 +16,12 @@ interface Props {
|
|||
*/
|
||||
export class ConversationContext extends React.Component<Props> {
|
||||
public render() {
|
||||
const { theme, type } = this.props;
|
||||
const { theme, type, ios } = this.props;
|
||||
|
||||
return (
|
||||
<div className={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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import QueryString from 'qs';
|
||||
import classNames from 'classnames';
|
||||
|
||||
// This file provides helpers for the Style Guide, exposed at 'util' in the global scope
|
||||
// via the 'context' option in react-styleguidist.
|
||||
|
|
@ -6,7 +7,7 @@ import QueryString from 'qs';
|
|||
import { default as _ } from 'lodash';
|
||||
export { ConversationContext } from './ConversationContext';
|
||||
|
||||
export { _ };
|
||||
export { _, classNames };
|
||||
|
||||
// TypeScript wants two things when you import:
|
||||
// 1) a normal typescript file
|
||||
|
|
@ -81,6 +82,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
|
||||
|
|
@ -90,7 +92,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
|
||||
|
|
|
|||
Loading…
Reference in New Issue