Restore iOS-specific theme; colors on left in android theme
This commit is contained in:
Scott Nonnenberg
parent
ca61c9cb85
commit
7d9711ba65
19 changed files with 1280 additions and 538 deletions
|
|
@ -766,6 +766,7 @@
|
|||
if (firstRun === true && deviceId !== '1') {
|
||||
const hasThemeSetting = Boolean(storage.get('theme-setting'));
|
||||
if (!hasThemeSetting && textsecure.storage.get('userAgent') === 'OWI') {
|
||||
storage.put('theme-setting', 'ios');
|
||||
onChangeTheme();
|
||||
}
|
||||
const syncRequest = new textsecure.SyncRequest(
|
||||
|
|
|
|||
|
|
@ -1374,6 +1374,10 @@
|
|||
},
|
||||
|
||||
getColor() {
|
||||
if (!this.isPrivate()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { migrateColor } = Util;
|
||||
return migrateColor(this.get('color'));
|
||||
},
|
||||
|
|
|
|||
|
|
@ -393,6 +393,7 @@
|
|||
const contact = this.findAndFormatContact(phoneNumber);
|
||||
const contactModel = this.findContact(phoneNumber);
|
||||
|
||||
const authorColor = contactModel ? contactModel.getColor() : null;
|
||||
const authorAvatarPath = contactModel
|
||||
? contactModel.getAvatarPath()
|
||||
: null;
|
||||
|
|
@ -406,7 +407,6 @@
|
|||
|
||||
const conversation = this.getConversation();
|
||||
const isGroup = conversation && !conversation.isPrivate();
|
||||
const conversationColor = conversation && conversation.getColor();
|
||||
|
||||
const attachments = this.get('attachments');
|
||||
const firstAttachment = attachments && attachments[0];
|
||||
|
|
@ -418,10 +418,10 @@
|
|||
timestamp: this.get('sent_at'),
|
||||
status: this.getMessagePropStatus(),
|
||||
contact: this.getPropsForEmbeddedContact(),
|
||||
authorColor,
|
||||
authorName: contact.name,
|
||||
authorProfileName: contact.profileName,
|
||||
authorPhoneNumber: contact.phoneNumber,
|
||||
conversationColor,
|
||||
conversationType: isGroup ? 'group' : 'direct',
|
||||
attachment: this.getPropsForAttachment(firstAttachment),
|
||||
quote: this.getPropsForQuote(),
|
||||
|
|
@ -534,9 +534,9 @@
|
|||
const { format } = PhoneNumber;
|
||||
const regionCode = storage.get('regionCode');
|
||||
|
||||
const conversation = this.getConversation();
|
||||
const { author, id, referencedMessageNotFound } = quote;
|
||||
const contact = author && ConversationController.get(author);
|
||||
const authorColor = contact ? contact.getColor() : 'grey';
|
||||
|
||||
const authorPhoneNumber = format(author, {
|
||||
ourRegionCode: regionCode,
|
||||
|
|
@ -563,7 +563,7 @@
|
|||
authorPhoneNumber,
|
||||
authorProfileName,
|
||||
authorName,
|
||||
conversationColor: conversation && conversation.getColor(),
|
||||
authorColor,
|
||||
onClick,
|
||||
referencedMessageNotFound,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
291
stylesheets/_ios.scss
Normal file
291
stylesheets/_ios.scss
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
// 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-gray-90;
|
||||
}
|
||||
|
||||
.module-message__author {
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
.module-message__text {
|
||||
color: $color-white;
|
||||
font-size: 14px;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__text--incoming {
|
||||
color: $color-gray-90;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__metadata__date {
|
||||
color: $color-white-08;
|
||||
}
|
||||
.module-message__metadata__date--incoming {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
.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-08);
|
||||
}
|
||||
.module-message__metadata__status-icon--delivered {
|
||||
@include color-svg('../images/double-check.svg', $color-white-08);
|
||||
}
|
||||
.module-message__metadata__status-icon--read {
|
||||
@include color-svg('../images/read.svg', $color-white-08);
|
||||
}
|
||||
|
||||
.module-message__metadata__status-icon--with-image-no-caption {
|
||||
background-color: $color-white;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__file-name {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__file-name--incoming {
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__file-size {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__file-size--incoming {
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
.module-expire-timer {
|
||||
background-color: $color-white-08;
|
||||
}
|
||||
|
||||
.module-expire-timer--incoming {
|
||||
background-color: $color-gray-60;
|
||||
}
|
||||
|
||||
.module-quote--outgoing {
|
||||
border-left-color: $color-white;
|
||||
background-color: $color-white-06;
|
||||
}
|
||||
|
||||
.module-quote--incoming {
|
||||
background-color: $color-signal-blue-025;
|
||||
border-left-color: $color-signal-blue;
|
||||
}
|
||||
|
||||
.module-quote__reference-warning--incoming {
|
||||
background-color: $color-signal-blue-mix;
|
||||
}
|
||||
|
||||
// When you're composing a new quote
|
||||
.bottom-bar {
|
||||
.module-quote {
|
||||
background-color: $color-signal-blue-025;
|
||||
border-left-color: $color-signal-blue;
|
||||
}
|
||||
}
|
||||
|
||||
.module-embedded-contact__contact-name {
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.module-embedded-contact__contact-method {
|
||||
color: $color-white-07;
|
||||
}
|
||||
|
||||
.module-embedded-contact__contact-name--incoming {
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
.module-embedded-contact__contact-method--incoming {
|
||||
color: $color-light-60;
|
||||
}
|
||||
|
||||
&.dark-theme {
|
||||
// _modules
|
||||
|
||||
.module-message__container--outgoing {
|
||||
background-color: $color-signal-blue;
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-message__container--incoming {
|
||||
background-color: $color-gray-75;
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-message__author {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-message__text--incoming {
|
||||
color: $color-gray-05;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
.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-08);
|
||||
}
|
||||
.module-message__metadata__status-icon--delivered {
|
||||
@include color-svg('../images/double-check.svg', $color-white-08);
|
||||
}
|
||||
.module-message__metadata__status-icon--read {
|
||||
@include color-svg('../images/read.svg', $color-white-08);
|
||||
}
|
||||
|
||||
.module-message__metadata__date {
|
||||
color: $color-white-08;
|
||||
}
|
||||
|
||||
.module-message__metadata__date--incoming {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__file-name--incoming {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
.module-message__generic-attachment__file-size--incoming {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
|
||||
.module-expire-timer {
|
||||
background-color: $color-white-08;
|
||||
}
|
||||
|
||||
.module-expire-timer--incoming {
|
||||
background-color: $color-gray-25;
|
||||
}
|
||||
|
||||
.module-quote--outgoing {
|
||||
border-left-color: $color-black;
|
||||
background-color: $color-conversation-blue-shade;
|
||||
}
|
||||
|
||||
.module-quote--incoming {
|
||||
background-color: $color-conversation-blue-shade;
|
||||
border-left-color: $color-signal-blue;
|
||||
}
|
||||
|
||||
.module-quote__primary__author {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-quote__primary__text {
|
||||
color: $color-gray-05;
|
||||
a {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
.module-quote__primary__type-label {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-quote__primary__type-label--incoming {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-quote__primary__author--incoming {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-quote__primary__text--incoming {
|
||||
color: $color-gray-05;
|
||||
a {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
|
||||
.module-quote__generic-file__text {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-quote__generic-file__text--incoming {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-quote__reference-warning {
|
||||
background-color: $color-white-04;
|
||||
}
|
||||
|
||||
.module-quote__reference-warning--incoming {
|
||||
background-color: $color-signal-blue-050;
|
||||
}
|
||||
|
||||
.module-quote__reference-warning__text {
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
.module-quote__reference-warning__text--incoming {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-quote__reference-warning__icon {
|
||||
@include color-svg('../images/broken-link.svg', $color-signal-blue);
|
||||
}
|
||||
|
||||
.module-quote__reference-warning__icon--incoming {
|
||||
@include color-svg('../images/broken-link.svg', $color-gray-75);
|
||||
}
|
||||
|
||||
// When you're composing a new quote
|
||||
.bottom-bar {
|
||||
.module-quote__primary__author {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-quote__primary__type-label {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-quote__generic-file__text {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-quote__primary__text {
|
||||
color: $color-gray-05;
|
||||
a {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-embedded-contact__contact-name--incoming {
|
||||
color: $color-gray-05;
|
||||
}
|
||||
|
||||
.module-embedded-contact__contact-method--incoming {
|
||||
color: $color-gray-25;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
cursor: pointer;
|
||||
@include color-svg('../images/download.svg', $color-light-45);
|
||||
&:hover {
|
||||
@include color-svg('../images/download.svg', $color-light-90);
|
||||
@include color-svg('../images/download.svg', $color-gray-90);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
cursor: pointer;
|
||||
@include color-svg('../images/reply.svg', $color-light-45);
|
||||
&:hover {
|
||||
@include color-svg('../images/reply.svg', $color-light-90);
|
||||
@include color-svg('../images/reply.svg', $color-gray-90);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
cursor: pointer;
|
||||
@include color-svg('../images/ellipsis.svg', $color-light-45);
|
||||
&:hover {
|
||||
@include color-svg('../images/ellipsis.svg', $color-light-90);
|
||||
@include color-svg('../images/ellipsis.svg', $color-gray-90);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -157,46 +157,46 @@
|
|||
min-width: 0px;
|
||||
}
|
||||
|
||||
.module-message__container--incoming {
|
||||
.module-message__container--outgoing {
|
||||
background-color: $color-light-10;
|
||||
}
|
||||
|
||||
// In case the color gets messed up
|
||||
.module-message__container--outgoing {
|
||||
.module-message__container--incoming {
|
||||
background-color: $color-conversation-grey;
|
||||
}
|
||||
|
||||
.module-message__container--outgoing-red {
|
||||
.module-message__container--incoming-red {
|
||||
background-color: $color-conversation-red;
|
||||
}
|
||||
.module-message__container--outgoing-deep_orange {
|
||||
.module-message__container--incoming-deep_orange {
|
||||
background-color: $color-conversation-deep_orange;
|
||||
}
|
||||
.module-message__container--outgoing-brown {
|
||||
.module-message__container--incoming-brown {
|
||||
background-color: $color-conversation-brown;
|
||||
}
|
||||
.module-message__container--outgoing-pink {
|
||||
.module-message__container--incoming-pink {
|
||||
background-color: $color-conversation-pink;
|
||||
}
|
||||
.module-message__container--outgoing-purple {
|
||||
.module-message__container--incoming-purple {
|
||||
background-color: $color-conversation-purple;
|
||||
}
|
||||
.module-message__container--outgoing-indigo {
|
||||
.module-message__container--incoming-indigo {
|
||||
background-color: $color-conversation-indigo;
|
||||
}
|
||||
.module-message__container--outgoing-blue {
|
||||
.module-message__container--incoming-blue {
|
||||
background-color: $color-conversation-blue;
|
||||
}
|
||||
.module-message__container--outgoing-teal {
|
||||
.module-message__container--incoming-teal {
|
||||
background-color: $color-conversation-teal;
|
||||
}
|
||||
.module-message__container--outgoing-green {
|
||||
.module-message__container--incoming-green {
|
||||
background-color: $color-conversation-green;
|
||||
}
|
||||
.module-message__container--outgoing-light_green {
|
||||
.module-message__container--incoming-light_green {
|
||||
background-color: $color-conversation-light_green;
|
||||
}
|
||||
.module-message__container--outgoing-blue_grey {
|
||||
.module-message__container--incoming-blue_grey {
|
||||
background-color: $color-conversation-blue_grey;
|
||||
}
|
||||
|
||||
|
|
@ -400,7 +400,7 @@
|
|||
white-space: nowrap;
|
||||
text-overflow: clip;
|
||||
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__text {
|
||||
|
|
@ -411,7 +411,7 @@
|
|||
}
|
||||
|
||||
.module-message__generic-attachment__file-name {
|
||||
color: $color-white;
|
||||
color: $color-gray-90;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
font-weight: 300;
|
||||
|
|
@ -424,11 +424,11 @@
|
|||
}
|
||||
|
||||
.module-message__generic-attachment__file-name--incoming {
|
||||
color: $color-light-90;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.module-message__generic-attachment__file-size {
|
||||
color: $color-white;
|
||||
color: $color-gray-90;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.3px;
|
||||
|
|
@ -436,11 +436,11 @@
|
|||
}
|
||||
|
||||
.module-message__generic-attachment__file-size--incoming {
|
||||
color: $color-light-90;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.module-message__author {
|
||||
color: $color-light-90;
|
||||
color: $color-white;
|
||||
font-size: 13px;
|
||||
font-weight: 300;
|
||||
line-height: 18px;
|
||||
|
|
@ -456,7 +456,7 @@
|
|||
}
|
||||
|
||||
.module-message__text {
|
||||
color: $color-white;
|
||||
color: $color-gray-90;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-align: start;
|
||||
|
|
@ -468,15 +468,15 @@
|
|||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: $color-white;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
}
|
||||
|
||||
.module-message__text--incoming {
|
||||
color: $color-light-90;
|
||||
color: $color-white;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: $color-light-90;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -508,11 +508,11 @@
|
|||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.3px;
|
||||
color: $color-white-08;
|
||||
color: $color-gray-60;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.module-message__metadata__date--incoming {
|
||||
color: $color-light-60;
|
||||
color: $color-white-08;
|
||||
}
|
||||
.module-message__metadata__date--with-image-no-caption {
|
||||
color: $color-white;
|
||||
|
|
@ -531,7 +531,7 @@
|
|||
}
|
||||
|
||||
.module-message__metadata__status-icon--sending {
|
||||
@include color-svg('../images/sending.svg', $color-white-08);
|
||||
@include color-svg('../images/sending.svg', $color-gray-60);
|
||||
animation: module-message__metdata__status-icon--spinning 4s linear infinite;
|
||||
}
|
||||
|
||||
|
|
@ -543,14 +543,14 @@
|
|||
}
|
||||
|
||||
.module-message__metadata__status-icon--sent {
|
||||
@include color-svg('../images/check-circle-outline.svg', $color-white-08);
|
||||
@include color-svg('../images/check-circle-outline.svg', $color-gray-60);
|
||||
}
|
||||
.module-message__metadata__status-icon--delivered {
|
||||
@include color-svg('../images/double-check.svg', $color-white-08);
|
||||
@include color-svg('../images/double-check.svg', $color-gray-60);
|
||||
width: 18px;
|
||||
}
|
||||
.module-message__metadata__status-icon--read {
|
||||
@include color-svg('../images/read.svg', $color-white-08);
|
||||
@include color-svg('../images/read.svg', $color-gray-60);
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
|
|
@ -595,48 +595,48 @@
|
|||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
margin-bottom: 2px;
|
||||
@include color-svg('../images/timer-60.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-60.svg', $color-gray-60);
|
||||
}
|
||||
|
||||
.module-expire-timer--55 {
|
||||
@include color-svg('../images/timer-55.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-55.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--50 {
|
||||
@include color-svg('../images/timer-50.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-50.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--45 {
|
||||
@include color-svg('../images/timer-45.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-45.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--40 {
|
||||
@include color-svg('../images/timer-40.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-40.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--35 {
|
||||
@include color-svg('../images/timer-35.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-35.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--30 {
|
||||
@include color-svg('../images/timer-30.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-30.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--25 {
|
||||
@include color-svg('../images/timer-25.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-25.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--20 {
|
||||
@include color-svg('../images/timer-20.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-20.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--15 {
|
||||
@include color-svg('../images/timer-15.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-15.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--10 {
|
||||
@include color-svg('../images/timer-10.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-10.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--05 {
|
||||
@include color-svg('../images/timer-05.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-05.svg', $color-gray-60);
|
||||
}
|
||||
.module-expire-timer--00 {
|
||||
@include color-svg('../images/timer-00.svg', $color-white-08);
|
||||
@include color-svg('../images/timer-00.svg', $color-gray-60);
|
||||
}
|
||||
|
||||
.module-expire-timer--incoming {
|
||||
background-color: $color-gray-60;
|
||||
background-color: $color-white-08;
|
||||
}
|
||||
|
||||
// When status indicators are overlaid on top of an image, they use different colors
|
||||
|
|
@ -687,90 +687,90 @@
|
|||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.module-quote--incoming {
|
||||
.module-quote--outgoing {
|
||||
border-left-color: $color-conversation-grey;
|
||||
background-color: $color-conversation-grey-tint;
|
||||
}
|
||||
.module-quote--incoming-red {
|
||||
.module-quote--outgoing-red {
|
||||
border-left-color: $color-conversation-red;
|
||||
background-color: $color-conversation-red-tint;
|
||||
}
|
||||
.module-quote--incoming-deep_orange {
|
||||
.module-quote--outgoing-deep_orange {
|
||||
border-left-color: $color-conversation-deep_orange;
|
||||
background-color: $color-conversation-deep_orange-tint;
|
||||
}
|
||||
.module-quote--incoming-brown {
|
||||
.module-quote--outgoing-brown {
|
||||
border-left-color: $color-conversation-brown;
|
||||
background-color: $color-conversation-brown-tint;
|
||||
}
|
||||
.module-quote--incoming-pink {
|
||||
.module-quote--outgoing-pink {
|
||||
border-left-color: $color-conversation-pink;
|
||||
background-color: $color-conversation-pink-tint;
|
||||
}
|
||||
.module-quote--incoming-purple {
|
||||
.module-quote--outgoing-purple {
|
||||
border-left-color: $color-conversation-purple;
|
||||
background-color: $color-conversation-purple-tint;
|
||||
}
|
||||
.module-quote--incoming-indigo {
|
||||
.module-quote--outgoing-indigo {
|
||||
border-left-color: $color-conversation-indigo;
|
||||
background-color: $color-conversation-indigo-tint;
|
||||
}
|
||||
.module-quote--incoming-blue {
|
||||
.module-quote--outgoing-blue {
|
||||
border-left-color: $color-conversation-blue;
|
||||
background-color: $color-conversation-blue-tint;
|
||||
}
|
||||
.module-quote--incoming-teal {
|
||||
.module-quote--outgoing-teal {
|
||||
border-left-color: $color-conversation-teal;
|
||||
background-color: $color-conversation-teal-tint;
|
||||
}
|
||||
.module-quote--incoming-green {
|
||||
.module-quote--outgoing-green {
|
||||
border-left-color: $color-conversation-green;
|
||||
background-color: $color-conversation-green-tint;
|
||||
}
|
||||
.module-quote--incoming-light_green {
|
||||
.module-quote--outgoing-light_green {
|
||||
border-left-color: $color-conversation-light_green;
|
||||
background-color: $color-conversation-light_green-tint;
|
||||
}
|
||||
.module-quote--incoming-blue_grey {
|
||||
.module-quote--outgoing-blue_grey {
|
||||
border-left-color: $color-conversation-blue_grey;
|
||||
background-color: $color-conversation-blue_grey-tint;
|
||||
}
|
||||
|
||||
.module-quote--outgoing {
|
||||
.module-quote--incoming {
|
||||
border-left-color: $color-white;
|
||||
background-color: $color-conversation-grey-tint;
|
||||
}
|
||||
.module-quote--outgoing-red {
|
||||
.module-quote--incoming-red {
|
||||
background-color: $color-conversation-red-tint;
|
||||
}
|
||||
.module-quote--outgoing-deep_orange {
|
||||
.module-quote--incoming-deep_orange {
|
||||
background-color: $color-conversation-deep_orange-tint;
|
||||
}
|
||||
.module-quote--outgoing-brown {
|
||||
.module-quote--incoming-brown {
|
||||
background-color: $color-conversation-brown-tint;
|
||||
}
|
||||
.module-quote--outgoing-pink {
|
||||
.module-quote--incoming-pink {
|
||||
background-color: $color-conversation-pink-tint;
|
||||
}
|
||||
.module-quote--outgoing-purple {
|
||||
.module-quote--incoming-purple {
|
||||
background-color: $color-conversation-purple-tint;
|
||||
}
|
||||
.module-quote--outgoing-indigo {
|
||||
.module-quote--incoming-indigo {
|
||||
background-color: $color-conversation-indigo-tint;
|
||||
}
|
||||
.module-quote--outgoing-blue {
|
||||
.module-quote--incoming-blue {
|
||||
background-color: $color-conversation-blue-tint;
|
||||
}
|
||||
.module-quote--outgoing-teal {
|
||||
.module-quote--incoming-teal {
|
||||
background-color: $color-conversation-teal-tint;
|
||||
}
|
||||
.module-quote--outgoing-green {
|
||||
.module-quote--incoming-green {
|
||||
background-color: $color-conversation-green-tint;
|
||||
}
|
||||
.module-quote--outgoing-light_green {
|
||||
.module-quote--incoming-light_green {
|
||||
background-color: $color-conversation-light_green-tint;
|
||||
}
|
||||
.module-quote--outgoing-blue_grey {
|
||||
.module-quote--incoming-blue_grey {
|
||||
background-color: $color-conversation-blue_grey-tint;
|
||||
}
|
||||
|
||||
|
|
@ -788,7 +788,7 @@
|
|||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-weight: 300;
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
|
||||
overflow-x: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
@ -802,10 +802,10 @@
|
|||
.module-quote__primary__text {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
|
||||
a {
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
overflow-wrap: break-word;
|
||||
|
|
@ -827,7 +827,7 @@
|
|||
|
||||
.module-quote__primary__type-label {
|
||||
font-style: italic;
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
|
@ -930,7 +930,7 @@
|
|||
.module-quote__generic-file__text {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
|
||||
max-width: calc(100% - 26px);
|
||||
overflow-x: hidden;
|
||||
|
|
@ -954,12 +954,12 @@
|
|||
.module-quote__reference-warning__icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
@include color-svg('../images/broken-link.svg', $color-light-60);
|
||||
@include color-svg('../images/broken-link.svg', $color-gray-60);
|
||||
}
|
||||
|
||||
.module-quote__reference-warning__text {
|
||||
margin-left: 6px;
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
|
@ -994,7 +994,7 @@
|
|||
line-height: 18px;
|
||||
font-weight: 300;
|
||||
margin-top: 6px;
|
||||
color: $color-white;
|
||||
color: $color-gray-90;
|
||||
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
|
|
@ -1003,7 +1003,7 @@
|
|||
}
|
||||
|
||||
.module-embedded-contact__contact-name--incoming {
|
||||
color: $color-light-90;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.module-embedded-contact__contact-method {
|
||||
|
|
@ -1011,7 +1011,7 @@
|
|||
line-height: 16px;
|
||||
letter-spacing: 0.3px;
|
||||
margin-top: 3px;
|
||||
color: $color-white-07;
|
||||
color: $color-gray-60;
|
||||
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
|
|
@ -1020,7 +1020,7 @@
|
|||
}
|
||||
|
||||
.module-embedded-contact__contact-method--incoming {
|
||||
color: $color-light-60;
|
||||
color: $color-white-07;
|
||||
}
|
||||
|
||||
// Module: Contact Detail
|
||||
|
|
@ -1098,7 +1098,7 @@
|
|||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.3px;
|
||||
color: $color-light-60;
|
||||
color: $color-gray-60;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -1117,7 +1117,7 @@
|
|||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.3px;
|
||||
color: $color-light-60;
|
||||
color: $color-gray-60;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -1134,14 +1134,14 @@
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 7px;
|
||||
@include color-svg('../images/shield.svg', $color-light-60);
|
||||
@include color-svg('../images/shield.svg', $color-gray-60);
|
||||
}
|
||||
|
||||
.module-safety-number-notification__text {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.3px;
|
||||
color: $color-light-60;
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
.module-safety-number-notification__contact {
|
||||
|
|
@ -1168,7 +1168,7 @@
|
|||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.3px;
|
||||
color: $color-light-60;
|
||||
color: $color-gray-60;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -1182,7 +1182,7 @@
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 4px;
|
||||
@include color-svg('../images/verified-check.svg', $color-light-60);
|
||||
@include color-svg('../images/verified-check.svg', $color-gray-60);
|
||||
}
|
||||
|
||||
.module-verification-notification__icon--mark-not-verified {
|
||||
|
|
@ -1191,7 +1191,7 @@
|
|||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 7px;
|
||||
@include color-svg('../images/shield.svg', $color-light-60);
|
||||
@include color-svg('../images/shield.svg', $color-gray-60);
|
||||
}
|
||||
|
||||
// Module: Timer Notification
|
||||
|
|
@ -1201,7 +1201,7 @@
|
|||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.3px;
|
||||
color: $color-light-60;
|
||||
color: $color-gray-60;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -1218,11 +1218,11 @@
|
|||
height: 20px;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
@include color-svg('../images/timer.svg', $color-light-60);
|
||||
@include color-svg('../images/timer.svg', $color-gray-60);
|
||||
}
|
||||
|
||||
.module-timer-notification__icon--disabled {
|
||||
@include color-svg('../images/timer-disabled.svg', $color-light-60);
|
||||
@include color-svg('../images/timer-disabled.svg', $color-gray-60);
|
||||
}
|
||||
|
||||
.module-timer-notification__icon-label {
|
||||
|
|
@ -1262,7 +1262,7 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
color: $color-light-60;
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
.module-contact-list-item--with-click-handler {
|
||||
|
|
@ -1288,7 +1288,7 @@
|
|||
}
|
||||
|
||||
.module-contact-list-item__text__verified-icon {
|
||||
@include color-svg('../images/verified-check.svg', $color-light-60);
|
||||
@include color-svg('../images/verified-check.svg', $color-gray-60);
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
|
@ -1308,14 +1308,14 @@
|
|||
align-items: center;
|
||||
|
||||
height: $header-height;
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
|
||||
background-color: $color-white;
|
||||
border-bottom: 1px solid $color-black-02;
|
||||
}
|
||||
|
||||
.module-conversation-header__back-icon {
|
||||
@include color-svg('../images/back.svg', $color-light-90);
|
||||
@include color-svg('../images/back.svg', $color-gray-90);
|
||||
display: inline-block;
|
||||
margin-left: -10px;
|
||||
margin-right: -2px;
|
||||
|
|
@ -1357,7 +1357,7 @@
|
|||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 300;
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
|
||||
// width of avatar (28px) and our 8px left margin
|
||||
max-width: calc(100% - 36px);
|
||||
|
|
@ -1373,7 +1373,7 @@
|
|||
}
|
||||
|
||||
.module-conversation-header__title__verified-icon {
|
||||
@include color-svg('../images/verified-check.svg', $color-light-90);
|
||||
@include color-svg('../images/verified-check.svg', $color-gray-90);
|
||||
display: inline-block;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
|
|
@ -1389,7 +1389,7 @@
|
|||
}
|
||||
|
||||
.module-conversation-header__expiration__clock-icon {
|
||||
@include color-svg('../images/timer.svg', $color-light-60);
|
||||
@include color-svg('../images/timer.svg', $color-gray-60);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
|
|
@ -1401,7 +1401,7 @@
|
|||
}
|
||||
|
||||
.module-conversation-header__gear-icon {
|
||||
@include color-svg('../images/gear.svg', $color-light-60);
|
||||
@include color-svg('../images/gear.svg', $color-gray-60);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-left: 4px;
|
||||
|
|
@ -1487,7 +1487,7 @@
|
|||
}
|
||||
|
||||
.module-message-detail__contact__status-icon--sending {
|
||||
@include color-svg('../images/sending.svg', $color-light-60);
|
||||
@include color-svg('../images/sending.svg', $color-gray-60);
|
||||
animation: module-message-detail__contact__status-icon--spinning 4s linear
|
||||
infinite;
|
||||
}
|
||||
|
|
@ -1882,7 +1882,7 @@
|
|||
}
|
||||
|
||||
.module-conversation-list-item__message__status-icon--sending {
|
||||
@include color-svg('../images/sending.svg', $color-light-60);
|
||||
@include color-svg('../images/sending.svg', $color-gray-60);
|
||||
animation: module-conversation-list-item__message__status-icon--spinning 4s
|
||||
linear infinite;
|
||||
}
|
||||
|
|
@ -2086,7 +2086,7 @@
|
|||
line-height: 24px;
|
||||
font-weight: 300;
|
||||
margin-left: 32px;
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
// Third-party module: react-contextmenu
|
||||
|
|
@ -2108,7 +2108,7 @@
|
|||
}
|
||||
|
||||
.react-contextmenu-item {
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
|
|
@ -2126,7 +2126,7 @@
|
|||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
.react-contextmenu-item.react-contextmenu-submenu {
|
||||
|
|
@ -2143,7 +2143,7 @@
|
|||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
color: $color-light-90;
|
||||
color: $color-gray-90;
|
||||
}
|
||||
|
||||
.react-contextmenu-item.react-contextmenu-item--active,
|
||||
|
|
|
|||
|
|
@ -617,46 +617,46 @@ body.dark-theme {
|
|||
@include color-svg('../images/error.svg', $color-core-red);
|
||||
}
|
||||
|
||||
.module-message__container--incoming {
|
||||
.module-message__container--outgoing {
|
||||
background-color: $color-dark-70;
|
||||
}
|
||||
|
||||
// In case the color gets messed up
|
||||
.module-message__container--outgoing {
|
||||
.module-message__container--incoming {
|
||||
background-color: $color-conversation-grey;
|
||||
}
|
||||
|
||||
.module-message__container--outgoing-red {
|
||||
.module-message__container--incoming-red {
|
||||
background-color: $color-conversation-red;
|
||||
}
|
||||
.module-message__container--outgoing-deep_orange {
|
||||
.module-message__container--incoming-deep_orange {
|
||||
background-color: $color-conversation-deep_orange;
|
||||
}
|
||||
.module-message__container--outgoing-brown {
|
||||
.module-message__container--incoming-brown {
|
||||
background-color: $color-conversation-brown;
|
||||
}
|
||||
.module-message__container--outgoing-pink {
|
||||
.module-message__container--incoming-pink {
|
||||
background-color: $color-conversation-pink;
|
||||
}
|
||||
.module-message__container--outgoing-purple {
|
||||
.module-message__container--incoming-purple {
|
||||
background-color: $color-conversation-purple;
|
||||
}
|
||||
.module-message__container--outgoing-indigo {
|
||||
.module-message__container--incoming-indigo {
|
||||
background-color: $color-conversation-indigo;
|
||||
}
|
||||
.module-message__container--outgoing-blue {
|
||||
.module-message__container--incoming-blue {
|
||||
background-color: $color-conversation-blue;
|
||||
}
|
||||
.module-message__container--outgoing-teal {
|
||||
.module-message__container--incoming-teal {
|
||||
background-color: $color-conversation-teal;
|
||||
}
|
||||
.module-message__container--outgoing-green {
|
||||
.module-message__container--incoming-green {
|
||||
background-color: $color-conversation-green;
|
||||
}
|
||||
.module-message__container--outgoing-light_green {
|
||||
.module-message__container--incoming-light_green {
|
||||
background-color: $color-conversation-light_green;
|
||||
}
|
||||
.module-message__container--outgoing-blue_grey {
|
||||
.module-message__container--incoming-blue_grey {
|
||||
background-color: $color-conversation-blue_grey;
|
||||
}
|
||||
|
||||
|
|
@ -847,90 +847,90 @@ body.dark-theme {
|
|||
|
||||
// Module: Quoted Reply
|
||||
|
||||
.module-quote--incoming {
|
||||
.module-quote--outgoing {
|
||||
border-left-color: $color-conversation-grey;
|
||||
background-color: $color-conversation-grey-shade;
|
||||
}
|
||||
.module-quote--incoming-red {
|
||||
.module-quote--outgoing-red {
|
||||
border-left-color: $color-conversation-red;
|
||||
background-color: $color-conversation-red-shade;
|
||||
}
|
||||
.module-quote--incoming-deep_orange {
|
||||
.module-quote--outgoing-deep_orange {
|
||||
border-left-color: $color-conversation-deep_orange;
|
||||
background-color: $color-conversation-deep_orange-shade;
|
||||
}
|
||||
.module-quote--incoming-brown {
|
||||
.module-quote--outgoing-brown {
|
||||
border-left-color: $color-conversation-brown;
|
||||
background-color: $color-conversation-brown-shade;
|
||||
}
|
||||
.module-quote--incoming-pink {
|
||||
.module-quote--outgoing-pink {
|
||||
border-left-color: $color-conversation-pink;
|
||||
background-color: $color-conversation-pink-shade;
|
||||
}
|
||||
.module-quote--incoming-purple {
|
||||
.module-quote--outgoing-purple {
|
||||
border-left-color: $color-conversation-purple;
|
||||
background-color: $color-conversation-purple-shade;
|
||||
}
|
||||
.module-quote--incoming-indigo {
|
||||
.module-quote--outgoing-indigo {
|
||||
border-left-color: $color-conversation-indigo;
|
||||
background-color: $color-conversation-indigo-shade;
|
||||
}
|
||||
.module-quote--incoming-blue {
|
||||
.module-quote--outgoing-blue {
|
||||
border-left-color: $color-conversation-blue;
|
||||
background-color: $color-conversation-blue-shade;
|
||||
}
|
||||
.module-quote--incoming-teal {
|
||||
.module-quote--outgoing-teal {
|
||||
border-left-color: $color-conversation-teal;
|
||||
background-color: $color-conversation-teal-shade;
|
||||
}
|
||||
.module-quote--incoming-green {
|
||||
.module-quote--outgoing-green {
|
||||
border-left-color: $color-conversation-green;
|
||||
background-color: $color-conversation-green-shade;
|
||||
}
|
||||
.module-quote--incoming-light_green {
|
||||
.module-quote--outgoing-light_green {
|
||||
border-left-color: $color-conversation-light_green;
|
||||
background-color: $color-conversation-light_green-shade;
|
||||
}
|
||||
.module-quote--incoming-blue_grey {
|
||||
.module-quote--outgoing-blue_grey {
|
||||
border-left-color: $color-conversation-blue_grey;
|
||||
background-color: $color-conversation-blue_grey-shade;
|
||||
}
|
||||
|
||||
.module-quote--outgoing {
|
||||
.module-quote--incoming {
|
||||
border-left-color: $color-black;
|
||||
background-color: $color-conversation-grey-shade;
|
||||
}
|
||||
.module-quote--outgoing-red {
|
||||
.module-quote--incoming-red {
|
||||
background-color: $color-conversation-red-shade;
|
||||
}
|
||||
.module-quote--outgoing-deep_orange {
|
||||
.module-quote--incoming-deep_orange {
|
||||
background-color: $color-conversation-deep_orange-shade;
|
||||
}
|
||||
.module-quote--outgoing-brown {
|
||||
.module-quote--incoming-brown {
|
||||
background-color: $color-conversation-brown-shade;
|
||||
}
|
||||
.module-quote--outgoing-pink {
|
||||
.module-quote--incoming-pink {
|
||||
background-color: $color-conversation-pink-shade;
|
||||
}
|
||||
.module-quote--outgoing-purple {
|
||||
.module-quote--incoming-purple {
|
||||
background-color: $color-conversation-purple-shade;
|
||||
}
|
||||
.module-quote--outgoing-indigo {
|
||||
.module-quote--incoming-indigo {
|
||||
background-color: $color-conversation-indigo-shade;
|
||||
}
|
||||
.module-quote--outgoing-blue {
|
||||
.module-quote--incoming-blue {
|
||||
background-color: $color-conversation-blue-shade;
|
||||
}
|
||||
.module-quote--outgoing-teal {
|
||||
.module-quote--incoming-teal {
|
||||
background-color: $color-conversation-teal-shade;
|
||||
}
|
||||
.module-quote--outgoing-green {
|
||||
.module-quote--incoming-green {
|
||||
background-color: $color-conversation-green-shade;
|
||||
}
|
||||
.module-quote--outgoing-light_green {
|
||||
.module-quote--incoming-light_green {
|
||||
background-color: $color-conversation-light_green-shade;
|
||||
}
|
||||
.module-quote--outgoing-blue_grey {
|
||||
.module-quote--incoming-blue_grey {
|
||||
background-color: $color-conversation-blue_grey-shade;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ $color-gray-05: #eeefef;
|
|||
$color-gray-15: #d5d6d6;
|
||||
$color-gray-25: #bbbdbe;
|
||||
$color-gray-45: #898a8c;
|
||||
$color-gray-60: #636467;
|
||||
$color-gray-60: #6b6d70;
|
||||
$color-gray-75: #3d3e44;
|
||||
$color-gray-85: #23252a;
|
||||
$color-gray-90: #17191d;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
@import 'conversation';
|
||||
|
||||
// Themes
|
||||
@import 'ios';
|
||||
@import 'theme_dark';
|
||||
|
||||
// New CSS
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue