diff --git a/_locales/en/messages.json b/_locales/en/messages.json index f3500b1b6..3ce676fbb 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -422,6 +422,7 @@ "unpinConversation": "Unpin Conversation", "pinConversationLimitTitle": "Pinned conversations limit", "pinConversationLimitToastDescription": "You can only pin $number$ conversations", + "showUserDetails": "Show User Details", "latestUnreadIsAbove": "First unread message is above", "sendRecoveryPhraseTitle": "Sending Recovery Phrase", "sendRecoveryPhraseMessage": "You are attempting to send your recovery phrase which can be used to access your account. Are you sure you want to send this message?", diff --git a/ts/components/ConversationListItem.tsx b/ts/components/ConversationListItem.tsx index ec667eb4f..e94606cef 100644 --- a/ts/components/ConversationListItem.tsx +++ b/ts/components/ConversationListItem.tsx @@ -356,6 +356,9 @@ const ConversationListItem = (props: Props) => { left={!!left} type={type} currentNotificationSetting={currentNotificationSetting || 'all'} + avatarPath={avatarPath || null} + name={name} + profileName={profileName} /> </Portal> </div> diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index f321a6a6a..d8ec8287e 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -360,6 +360,9 @@ export const ConversationHeaderWithDetails = () => { left={left} hasNickname={hasNickname} currentNotificationSetting={currentNotificationSetting} + avatarPath={avatarPath} + name={name} + profileName={profileName} /> </div> diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx index 10166436c..64622765f 100644 --- a/ts/components/dialog/UserDetailsDialog.tsx +++ b/ts/components/dialog/UserDetailsDialog.tsx @@ -6,6 +6,7 @@ import useCopyToClipboard from 'react-use/lib/useCopyToClipboard'; import useKey from 'react-use/lib/useKey'; import { ConversationTypeEnum } from '../../models/conversation'; import { getConversationController } from '../../session/conversations'; +import { ToastUtils } from '../../session/utils'; import { openConversationWithMessages } from '../../state/ducks/conversations'; import { updateUserDetailsModal } from '../../state/ducks/modalDialog'; import { Avatar, AvatarSize } from '../Avatar'; @@ -77,6 +78,7 @@ export const UserDetailsDialog = (props: Props) => { buttonColor={SessionButtonColor.Primary} onClick={() => { copyToClipboard(props.conversationId); + ToastUtils.pushCopiedToClipBoard(); }} /> <SessionButton diff --git a/ts/components/session/menu/ConversationHeaderMenu.tsx b/ts/components/session/menu/ConversationHeaderMenu.tsx index 283212798..43aea0ae4 100644 --- a/ts/components/session/menu/ConversationHeaderMenu.tsx +++ b/ts/components/session/menu/ConversationHeaderMenu.tsx @@ -15,6 +15,7 @@ import { getNotificationForConvoMenuItem, getPinConversationMenuItem, getRemoveModeratorsMenuItem, + getShowUserDetailsMenuItem, getStartCallMenuItem, getUpdateGroupNameMenuItem, } from './Menu'; @@ -34,6 +35,9 @@ export type PropsConversationHeaderMenu = { isPrivate: boolean; isBlocked: boolean; hasNickname: boolean; + name: string | undefined; + profileName: string | undefined; + avatarPath: string | null; }; const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => { @@ -50,7 +54,11 @@ const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => { left, hasNickname, currentNotificationSetting, + name, + profileName, + avatarPath, } = props; + const userName = name || profileName || conversationId; return ( <Menu id={triggerId} animation={animation.fade}> @@ -75,9 +83,9 @@ const ConversationHeaderMenu = (props: PropsConversationHeaderMenu) => { {getRemoveModeratorsMenuItem(weAreAdmin, isPublic, isKickedFromGroup, conversationId)} {getUpdateGroupNameMenuItem(weAreAdmin, isKickedFromGroup, left, conversationId)} {getLeaveGroupMenuItem(isKickedFromGroup, left, isGroup, isPublic, conversationId)} - {/* TODO: add delete group */} {getInviteContactMenuItem(isGroup, isPublic, conversationId)} {getDeleteContactMenuItem(isGroup, isPublic, left, isKickedFromGroup, conversationId)} + {getShowUserDetailsMenuItem(isPrivate, conversationId, avatarPath, userName)} </Menu> ); }; diff --git a/ts/components/session/menu/ConversationListItemContextMenu.tsx b/ts/components/session/menu/ConversationListItemContextMenu.tsx index 0cf88923c..0dc4d65bd 100644 --- a/ts/components/session/menu/ConversationListItemContextMenu.tsx +++ b/ts/components/session/menu/ConversationListItemContextMenu.tsx @@ -18,6 +18,7 @@ import { getMarkAllReadMenuItem, getNotificationForConvoMenuItem, getPinConversationMenuItem, + getShowUserDetailsMenuItem, } from './Menu'; export type PropsContextConversationItem = { @@ -33,6 +34,9 @@ export type PropsContextConversationItem = { left: boolean; theme?: any; currentNotificationSetting: ConversationNotificationSettingType; + name: string | undefined; + profileName: string | undefined; + avatarPath: string | null; }; const ConversationListItemContextMenu = (props: PropsContextConversationItem) => { @@ -48,9 +52,14 @@ const ConversationListItemContextMenu = (props: PropsContextConversationItem) => isKickedFromGroup, currentNotificationSetting, isPrivate, + name, + profileName, + avatarPath, } = props; const isGroup = type === 'group'; + const userName = name || profileName || conversationId; + return ( <Menu id={triggerId} animation={animation.fade}> {getNotificationForConvoMenuItem({ @@ -71,6 +80,7 @@ const ConversationListItemContextMenu = (props: PropsContextConversationItem) => {getInviteContactMenuItem(isGroup, isPublic, conversationId)} {getDeleteContactMenuItem(isGroup, isPublic, left, isKickedFromGroup, conversationId)} {getLeaveGroupMenuItem(isKickedFromGroup, left, isGroup, isPublic, conversationId)} + {getShowUserDetailsMenuItem(isPrivate, conversationId, avatarPath, userName)} </Menu> ); }; diff --git a/ts/components/session/menu/Menu.tsx b/ts/components/session/menu/Menu.tsx index a781c8355..f747e8e06 100644 --- a/ts/components/session/menu/Menu.tsx +++ b/ts/components/session/menu/Menu.tsx @@ -12,7 +12,11 @@ import { ConversationNotificationSettingType, } from '../../../models/conversation'; import { useDispatch, useSelector } from 'react-redux'; -import { changeNickNameModal, updateConfirmModal } from '../../../state/ducks/modalDialog'; +import { + changeNickNameModal, + updateConfirmModal, + updateUserDetailsModal, +} from '../../../state/ducks/modalDialog'; import { SectionType } from '../../../state/ducks/section'; import { getConversationController } from '../../../session/conversations'; import { @@ -241,6 +245,35 @@ export function getLeaveGroupMenuItem( return null; } +export function getShowUserDetailsMenuItem( + isPrivate: boolean | undefined, + conversationId: string, + avatarPath: string | null, + userName: string +): JSX.Element | null { + const dispatch = useDispatch(); + + if (isPrivate) { + return ( + <Item + onClick={() => { + dispatch( + updateUserDetailsModal({ + conversationId: conversationId, + userName, + authorAvatarPath: avatarPath, + }) + ); + }} + > + {window.i18n('showUserDetails')} + </Item> + ); + } + + return null; +} + export function getUpdateGroupNameMenuItem( isAdmin: boolean | undefined, isKickedFromGroup: boolean | undefined,