add the accept/decline buttons on friend requests in conversationslist
This commit is contained in:
parent
fc938df520
commit
c9000c3f26
|
@ -2427,5 +2427,11 @@
|
|||
},
|
||||
"yourPublicKey": {
|
||||
"message": "Your Public Key"
|
||||
},
|
||||
"accept": {
|
||||
"message": "Accept"
|
||||
},
|
||||
"decline": {
|
||||
"message": "Decline"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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<Props> {
|
|||
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 (
|
||||
<div className="module-conversation-list-item__avatar-container">
|
||||
|
@ -87,7 +94,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
name={name}
|
||||
phoneNumber={phoneNumber}
|
||||
profileName={profileName}
|
||||
size={48}
|
||||
size={iconSize}
|
||||
borderColor={borderColor}
|
||||
/>
|
||||
</div>
|
||||
|
@ -114,7 +121,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
}
|
||||
|
||||
public renderHeader() {
|
||||
const { unreadCount, i18n, isMe, lastUpdated, isFriendItem } = this.props;
|
||||
const { unreadCount, i18n, isMe, lastUpdated, isFriendItem, showFriendRequestIndicator } = this.props;
|
||||
|
||||
return (
|
||||
<div className="module-conversation-list-item__header">
|
||||
|
@ -128,7 +135,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
>
|
||||
{isMe ? i18n('noteToSelf') : this.renderUser()}
|
||||
</div>
|
||||
{this.renderUnread()}
|
||||
{showFriendRequestIndicator || this.renderUnread()}
|
||||
{!isFriendItem && (
|
||||
<div
|
||||
className={classNames(
|
||||
|
@ -138,12 +145,13 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
: null
|
||||
)}
|
||||
>
|
||||
<Timestamp
|
||||
{showFriendRequestIndicator || (<Timestamp
|
||||
timestamp={lastUpdated}
|
||||
extended={false}
|
||||
module="module-conversation-list-item__header__timestamp"
|
||||
i18n={i18n}
|
||||
/>
|
||||
/>)
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
@ -209,6 +217,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
unreadCount,
|
||||
i18n,
|
||||
isFriendItem,
|
||||
showFriendRequestIndicator,
|
||||
} = this.props;
|
||||
|
||||
if (isFriendItem) {
|
||||
|
@ -226,6 +235,10 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
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<Props> {
|
|||
);
|
||||
}
|
||||
|
||||
public renderFriendRequestButtons() {
|
||||
|
||||
return (
|
||||
<div className="module-conversation-list-item__buttons">
|
||||
<SessionButton text={window.i18n('decline')} buttonColor={SessionButtonColor.None}/>
|
||||
<SessionButton text={window.i18n('accept')} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {
|
||||
phoneNumber,
|
||||
|
@ -278,6 +301,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
mentionedUs,
|
||||
} = this.props;
|
||||
|
||||
|
||||
const triggerId = `${phoneNumber}-ctxmenu-${Date.now()}`;
|
||||
|
||||
return (
|
||||
|
@ -311,6 +335,7 @@ export class ConversationListItem extends React.PureComponent<Props> {
|
|||
{this.renderHeader()}
|
||||
{this.renderMessage()}
|
||||
</div>
|
||||
{showFriendRequestIndicator && this.renderFriendRequestButtons()}
|
||||
</div>
|
||||
</ContextMenuTrigger>
|
||||
<Portal>{this.renderContextMenu(triggerId)}</Portal>
|
||||
|
|
|
@ -19,6 +19,7 @@ export enum SessionButtonColor {
|
|||
Success = 'success',
|
||||
Danger = 'danger',
|
||||
Warning = 'warning',
|
||||
None = '',
|
||||
}
|
||||
|
||||
interface Props {
|
||||
|
|
|
@ -24,5 +24,5 @@ export type ColorType =
|
|||
export enum Colors {
|
||||
OFFLINE = '#3d3e44',
|
||||
OFFLINE_LIGHT = '#cccece',
|
||||
ONLINE = '#1c8260',
|
||||
ONLINE = '#00f782',
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue