diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 1df506564..a16d175b6 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2427,5 +2427,11 @@ }, "yourPublicKey": { "message": "Your Public Key" + }, + "accept": { + "message": "Accept" + }, + "decline": { + "message": "Decline" } } diff --git a/stylesheets/_session_theme_dark_left_pane.scss b/stylesheets/_session_theme_dark_left_pane.scss index b51188e49..0880a2171 100644 --- a/stylesheets/_session_theme_dark_left_pane.scss +++ b/stylesheets/_session_theme_dark_left_pane.scss @@ -284,6 +284,28 @@ $session-compose-margin: 20px; &-content { display: flex; flex-direction: column; + .module-conversation-list-item { + &--has-friend-request { + border: 1px solid $session-shade-8 !important; + + .module-conversation__user__profile-number, + .module-conversation__user__profile-name { + font-size: 13px !important; + } + } + + &__buttons { + display: flex; + + .session-button { + font-size: 11px; + padding: 6px; + height: auto; + margin: 0px; + line-height: 14px; + } + } + } } &-bottom-buttons { @@ -298,6 +320,8 @@ $session-compose-margin: 20px; line-height: 50px; } } + + } .panel-text-divider { diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx index 51cc47d7b..debe773d0 100644 --- a/ts/components/ConversationListItem.tsx +++ b/ts/components/ConversationListItem.tsx @@ -11,6 +11,7 @@ import { ContactName } from './conversation/ContactName'; import { TypingAnimation } from './conversation/TypingAnimation'; import { Colors, LocalizerType } from '../types/Util'; +import { SessionButton, SessionButtonColor } from './session/SessionButton'; export type PropsData = { id: string; @@ -72,9 +73,15 @@ export class ConversationListItem extends React.PureComponent { phoneNumber, profileName, isOnline, + showFriendRequestIndicator, } = this.props; - const borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE; + + let borderColor = undefined; + if (!showFriendRequestIndicator) { + borderColor = isOnline ? Colors.ONLINE : Colors.OFFLINE; + } + const iconSize = showFriendRequestIndicator ? 28 : 48; return (
@@ -87,7 +94,7 @@ export class ConversationListItem extends React.PureComponent { name={name} phoneNumber={phoneNumber} profileName={profileName} - size={48} + size={iconSize} borderColor={borderColor} />
@@ -114,7 +121,7 @@ export class ConversationListItem extends React.PureComponent { } public renderHeader() { - const { unreadCount, i18n, isMe, lastUpdated, isFriendItem } = this.props; + const { unreadCount, i18n, isMe, lastUpdated, isFriendItem, showFriendRequestIndicator } = this.props; return (
@@ -128,7 +135,7 @@ export class ConversationListItem extends React.PureComponent { > {isMe ? i18n('noteToSelf') : this.renderUser()}
- {this.renderUnread()} + {showFriendRequestIndicator || this.renderUnread()} {!isFriendItem && (
{ : null )} > - + />) + }
)} @@ -209,6 +217,7 @@ export class ConversationListItem extends React.PureComponent { unreadCount, i18n, isFriendItem, + showFriendRequestIndicator, } = this.props; if (isFriendItem) { @@ -226,6 +235,10 @@ export class ConversationListItem extends React.PureComponent { text = text.replace(/<[^>]*>?/gm, ''); } + if (showFriendRequestIndicator) { + text = text.replace('Friend Request: ', ''); + } + if (isEmpty(text)) { return null; } @@ -265,6 +278,16 @@ export class ConversationListItem extends React.PureComponent { ); } + public renderFriendRequestButtons() { + + return ( +
+ + +
+ ); + } + public render() { const { phoneNumber, @@ -278,6 +301,7 @@ export class ConversationListItem extends React.PureComponent { mentionedUs, } = this.props; + const triggerId = `${phoneNumber}-ctxmenu-${Date.now()}`; return ( @@ -311,6 +335,7 @@ export class ConversationListItem extends React.PureComponent { {this.renderHeader()} {this.renderMessage()} + {showFriendRequestIndicator && this.renderFriendRequestButtons()} {this.renderContextMenu(triggerId)} diff --git a/ts/components/session/SessionButton.tsx b/ts/components/session/SessionButton.tsx index 99f92f9c9..8631f8b57 100644 --- a/ts/components/session/SessionButton.tsx +++ b/ts/components/session/SessionButton.tsx @@ -19,6 +19,7 @@ export enum SessionButtonColor { Success = 'success', Danger = 'danger', Warning = 'warning', + None = '', } interface Props { diff --git a/ts/types/Util.ts b/ts/types/Util.ts index 8e3901a90..4387710d3 100644 --- a/ts/types/Util.ts +++ b/ts/types/Util.ts @@ -24,5 +24,5 @@ export type ColorType = export enum Colors { OFFLINE = '#3d3e44', OFFLINE_LIGHT = '#cccece', - ONLINE = '#1c8260', + ONLINE = '#00f782', }