Page MenuHomePhabricator
Files F3360505

D7067.id23735.diff
No OneTemporary
Actions

D7067.id23735.diff
View Options

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 = (
+ <View style={styles.avatarContainer}>
+ <Avatar size="small" avatarInfo={avatarInfo} />
+ </View>
+ );
+ } else if (!isViewer) {
+ avatar = <View style={styles.avatarOffset} />;
+ }
+
const messageBox = (
<View style={styles.messageBox}>
<SwipeableMessage
@@ -130,9 +145,12 @@
messageBoxStyle={messageBoxStyle}
threadColor={item.threadInfo.color}
>
- <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
- {children}
- </AnimatedView>
+ <View style={styles.swipeableContainer}>
+ {avatar}
+ <AnimatedView style={{ opacity: contentAndHeaderOpacity }}>
+ {children}
+ </AnimatedView>
+ </View>
</SwipeableMessage>
</View>
);
@@ -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<BaseProps> =
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 (
+ <View style={styles.avatarContainer}>
+ <Avatar size="small" avatarInfo={avatarInfo} />
+ </View>
+ );
+ }, [avatarInfo, item.messageInfo.creator.isViewer]);
+
return (
<>
<Animated.View style={messageContainerStyle}>
@@ -161,6 +180,7 @@
<Animated.View style={headerStyle}>
<MessageHeader item={item} focused={true} display="modal" />
</Animated.View>
+ {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 (
+ <View style={styles.avatarContainer}>
+ <Avatar size="small" avatarInfo={avatarInfo} />
+ </View>
+ );
+ }, [avatarInfo, item.messageInfo.creator.isViewer]);
+
return (
<MessageListContextProvider threadInfo={threadInfo}>
<SidebarInputBarHeightMeasurer
@@ -158,6 +177,7 @@
<Animated.View style={headerStyle}>
<MessageHeader item={item} focused={true} display="modal" />
</Animated.View>
+ {avatar}
{reactionSelectionPopover}
<MessagePressResponderContext.Provider
value={messagePressResponderContext}
@@ -180,4 +200,12 @@
);
}
+const styles = StyleSheet.create({
+ avatarContainer: {
+ bottom: 0,
+ left: -32,
+ position: 'absolute',
+ },
+});
+
export default TextMessageTooltipButton;

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 12:58 PM (20 h, 23 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2579871
Default Alt Text
D7067.id23735.diff (7 KB)

Event Timeline