From 3f538b9be1750d4131264ae9a74ce21ea3f8a8fd Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Wed, 4 Nov 2020 09:17:02 +1100 Subject: [PATCH] render Session Verification Messages --- js/models/conversations.js | 16 ------- js/models/messages.d.ts | 1 + stylesheets/_session.scss | 6 ++- .../conversation/VerificationNotification.tsx | 45 +++++++++---------- .../conversation/SessionConversation.tsx | 15 ++++--- .../SessionConversationMessagesList.tsx | 15 ++++++- 6 files changed, 51 insertions(+), 47 deletions(-) diff --git a/js/models/conversations.js b/js/models/conversations.js index 01e10a651..a74d6d207 100644 --- a/js/models/conversations.js +++ b/js/models/conversations.js @@ -52,20 +52,6 @@ request_received: 2, }); - const COLORS = [ - 'red', - 'deep_orange', - 'brown', - 'pink', - 'purple', - 'indigo', - 'blue', - 'teal', - 'green', - 'light_green', - 'blue_grey', - ]; - Whisper.Conversation = Backbone.Model.extend({ storeName: 'conversations', defaults() { @@ -2609,6 +2595,4 @@ this.reset([]); }, }); - - Whisper.Conversation.COLORS = COLORS.concat(['grey', 'default']).join(' '); })(); diff --git a/js/models/messages.d.ts b/js/models/messages.d.ts index 46da45ce1..67ac2f372 100644 --- a/js/models/messages.d.ts +++ b/js/models/messages.d.ts @@ -60,5 +60,6 @@ export interface MessageModel extends Backbone.Model { propsForResetSessionNotification?: any; propsForGroupInvitation?: any; propsForGroupNotification?: any; + propsForVerificationNotification?: any; firstMessageOfSeries: boolean; } diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 06fec34e8..b7c3d1e09 100644 --- a/stylesheets/_session.scss +++ b/stylesheets/_session.scss @@ -1507,7 +1507,10 @@ input { align-items: center; padding-top: $session-margin-lg; text-align: center; - + @include themify($themes) { + background: themed('inboxBackground'); + color: themed('textColor'); + } &__header { word-break: break-all; @@ -1525,6 +1528,7 @@ input { font-family: $session-font-mono; margin: 30px 0; width: 250px; + color: white; } &__is-verified { diff --git a/ts/components/conversation/VerificationNotification.tsx b/ts/components/conversation/VerificationNotification.tsx index 43a67f797..b475288e1 100644 --- a/ts/components/conversation/VerificationNotification.tsx +++ b/ts/components/conversation/VerificationNotification.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { ContactName } from './ContactName'; import { Intl } from '../Intl'; -import { LocalizerType } from '../../types/Util'; import { missingCaseError } from '../../util/missingCaseError'; @@ -13,16 +12,15 @@ interface Contact { name?: string; } -interface Props { +type Props = { type: 'markVerified' | 'markNotVerified'; isLocal: boolean; contact: Contact; - i18n: LocalizerType; -} +}; -export class VerificationNotification extends React.Component { - public getStringId() { - const { isLocal, type } = this.props; +export const VerificationNotification = (props: Props) => { + const getStringId = () => { + const { isLocal, type } = props; switch (type) { case 'markVerified': @@ -36,11 +34,12 @@ export class VerificationNotification extends React.Component { default: throw missingCaseError(type); } - } + }; - public renderContents() { - const { contact, i18n } = this.props; - const id = this.getStringId(); + const renderContents = () => { + const { contact } = props; + const { i18n } = window; + const id = getStringId(); return ( { i18n={i18n} /> ); - } + }; - public render() { - const { type } = this.props; - const suffix = - type === 'markVerified' ? 'mark-verified' : 'mark-not-verified'; + const { type } = props; + const suffix = + type === 'markVerified' ? 'mark-verified' : 'mark-not-verified'; - return ( -
-
- {this.renderContents()} -
- ); - } -} + return ( +
+
+ {renderContents()} +
+ ); +}; diff --git a/ts/components/session/conversation/SessionConversation.tsx b/ts/components/session/conversation/SessionConversation.tsx index 9bff56b7d..2b10cb032 100644 --- a/ts/components/session/conversation/SessionConversation.tsx +++ b/ts/components/session/conversation/SessionConversation.tsx @@ -130,10 +130,10 @@ export class SessionConversation extends React.Component { this.onClickAttachment = this.onClickAttachment.bind(this); this.downloadAttachment = this.downloadAttachment.bind(this); this.refreshMessages = this.refreshMessages.bind(this); - this.getMessages = _.throttle( - this.getMessages.bind(this), - 1000 // one second - ); + // this.getMessages = _.throttle( + // this.getMessages.bind(this), + // 1000 // one second + // ); // Keyboard navigation this.onKeyDown = this.onKeyDown.bind(this); @@ -219,6 +219,7 @@ export class SessionConversation extends React.Component { selectedMessages, isDraggingFile, stagedAttachments, + initialFetchComplete, } = this.state; const selectionMode = !!selectedMessages.length; @@ -273,7 +274,11 @@ export class SessionConversation extends React.Component { {lightBoxOptions?.media && this.renderLightBox(lightBoxOptions)}
- + {initialFetchComplete && ( + + )} {showRecordingView && (
diff --git a/ts/components/session/conversation/SessionConversationMessagesList.tsx b/ts/components/session/conversation/SessionConversationMessagesList.tsx index 16d4cc305..ff6db12a7 100644 --- a/ts/components/session/conversation/SessionConversationMessagesList.tsx +++ b/ts/components/session/conversation/SessionConversationMessagesList.tsx @@ -14,6 +14,7 @@ import { GroupInvitation } from '../../conversation/GroupInvitation'; import { ConversationType } from '../../../state/ducks/conversations'; import { MessageModel } from '../../../../js/models/messages'; import { SessionLastSeenIndicator } from './SessionLastSeedIndicator'; +import { VerificationNotification } from '../../conversation/VerificationNotification'; interface State { isScrolledToBottom: boolean; @@ -126,6 +127,8 @@ export class SessionConversationMessagesList extends React.Component< const timerProps = message.propsForTimerNotification; const resetSessionProps = message.propsForResetSessionNotification; + const verificationSessionProps = + message.propsForVerificationNotification; const propsForGroupInvitation = message.propsForGroupInvitation; const groupNotificationProps = message.propsForGroupNotification; @@ -139,6 +142,7 @@ export class SessionConversationMessagesList extends React.Component< ) { unreadIndicator = ; } + currentMessageIndex = currentMessageIndex + 1; if (groupNotificationProps) { @@ -159,6 +163,15 @@ export class SessionConversationMessagesList extends React.Component< ); } + if (verificationSessionProps) { + return ( + <> + {unreadIndicator} + + + ); + } + if (resetSessionProps) { return ( <> @@ -186,7 +199,7 @@ export class SessionConversationMessagesList extends React.Component< messageProps, message.firstMessageOfSeries, multiSelectMode - )}{' '} + )} ); })}