diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js --- a/native/chat/composed-message.react.js +++ b/native/chat/composed-message.react.js @@ -6,6 +6,7 @@ import { StyleSheet, View } from 'react-native'; import Animated from 'react-native-reanimated'; +import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; import { createMessageReply } from 'lib/shared/message-utils.js'; import { assertComposableMessageType } from 'lib/types/message-types.js'; @@ -23,6 +24,7 @@ import { useNavigateToSidebar } from './sidebar-navigation.js'; import SwipeableMessage from './swipeable-message.react.js'; import { useContentAndHeaderOpacity, useDeliveryIconOpacity } from './utils.js'; +import Avatar from '../components/avatar.react.js'; import { type InputState, InputStateContext } from '../input/input-state.js'; import { type Colors, useColors } from '../themes/colors.js'; import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; @@ -121,6 +123,19 @@ swipeOptions === 'sidebar' || swipeOptions === 'both' ? navigateToSidebar : undefined; + + let avatar; + if (!isViewer && item.endsCluster) { + const avatarInfo = getAvatarForUser(item.messageInfo.creator); + avatar = ( + + + + ); + } else if (!isViewer) { + avatar = ; + } + const messageBox = ( - - {children} - + + {avatar} + + {children} + + ); @@ -187,6 +205,12 @@ marginLeft: composedMessageStyle.marginLeft, marginRight: composedMessageStyle.marginRight, }, + avatarContainer: { + marginRight: 8, + }, + avatarOffset: { + width: 32, + }, content: { alignItems: 'center', flexDirection: 'row-reverse', @@ -208,6 +232,7 @@ }, leftInlineEngagement: { justifyContent: 'flex-start', + marginLeft: 32, position: 'relative', top: inlineEngagementLeftStyle.topOffset, }, @@ -223,6 +248,10 @@ right: inlineEngagementRightStyle.marginRight, top: inlineEngagementRightStyle.topOffset, }, + swipeableContainer: { + alignItems: 'flex-end', + flexDirection: 'row', + }, }); const ConnectedComposedMessage: React.ComponentType = diff --git a/native/chat/message-header.react.js b/native/chat/message-header.react.js --- a/native/chat/message-header.react.js +++ b/native/chat/message-header.react.js @@ -69,7 +69,7 @@ color: 'listBackgroundSecondaryLabel', fontSize: 14, height: authorNameHeight, - marginLeft: 12, + marginLeft: 44, marginRight: 7, paddingHorizontal: 12, paddingVertical: 4, diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js --- a/native/chat/multimedia-message-tooltip-button.react.js +++ b/native/chat/multimedia-message-tooltip-button.react.js @@ -1,9 +1,11 @@ // @flow import * as React from 'react'; +import { StyleSheet, View } from 'react-native'; import Animated from 'react-native-reanimated'; import EmojiPicker from 'rn-emoji-keyboard'; +import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; import { localIDPrefix } from 'lib/shared/message-utils.js'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; @@ -14,6 +16,7 @@ import ReactionSelectionPopover from './reaction-selection-popover.react.js'; import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js'; import { useAnimatedMessageTooltipButton } from './utils.js'; +import Avatar from '../components/avatar.react.js'; import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useTooltipActions } from '../tooltip/tooltip-hooks.js'; @@ -151,6 +154,22 @@ [sendReaction, dismissTooltip], ); + const avatarInfo = React.useMemo( + () => getAvatarForUser(item.messageInfo.creator), + [item.messageInfo.creator], + ); + + const avatar = React.useMemo(() => { + if (item.messageInfo.creator.isViewer) { + return null; + } + return ( + + + + ); + }, [avatarInfo, item.messageInfo.creator.isViewer]); + return ( <> @@ -161,6 +180,7 @@ + {avatar} {reactionSelectionPopover} {innerMultimediaMessage} {inlineEngagement} @@ -174,4 +194,12 @@ ); } +const styles = StyleSheet.create({ + avatarContainer: { + bottom: 0, + left: -32, + position: 'absolute', + }, +}); + export default MultimediaMessageTooltipButton; diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js --- a/native/chat/text-message-tooltip-button.react.js +++ b/native/chat/text-message-tooltip-button.react.js @@ -1,9 +1,11 @@ // @flow import * as React from 'react'; +import { StyleSheet, View } from 'react-native'; import Animated from 'react-native-reanimated'; import EmojiPicker from 'rn-emoji-keyboard'; +import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; import { localIDPrefix } from 'lib/shared/message-utils.js'; import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; @@ -16,6 +18,7 @@ import ReactionSelectionPopover from './reaction-selection-popover.react.js'; import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react.js'; import { useAnimatedMessageTooltipButton } from './utils.js'; +import Avatar from '../components/avatar.react.js'; import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useTooltipActions } from '../tooltip/tooltip-hooks.js'; @@ -148,6 +151,22 @@ [sendReaction, dismissTooltip], ); + const avatarInfo = React.useMemo( + () => getAvatarForUser(item.messageInfo.creator), + [item.messageInfo.creator], + ); + + const avatar = React.useMemo(() => { + if (item.messageInfo.creator.isViewer) { + return null; + } + return ( + + + + ); + }, [avatarInfo, item.messageInfo.creator.isViewer]); + return ( + {avatar} {reactionSelectionPopover}